import { cn, nanoid } from '@/lib/utils'
import { auth } from '@/auth'

// import { Header } from '@/components/header'
// import { Web3Provider } from '@/components/providers/web3-provider'
import { Metadata } from 'next'


import { Message } from '@aigxion/isdk'
import { baseTitle, descriptionRoot } from '@/lib/metadata'
import Image from "next/image";

import aImage from '../../../components/images/a.png'
import bImage from '../../../components/images/b.png';
import cImage from '../../../components/images/c.png';
import dImage from '../../../components/images/d.png';
import aiStaffmage from '../../../components/images/ai_staff.png';
import aiBGImage from '../../../components/images/ai_staff_bg.png';

import aiAImage from '../../../components/images/ai_a.png';
import aiBImage from '../../../components/images/ai_b.png';
import aiCImage from '../../../components/images/ai_c.png';
import aiDImage from '../../../components/images/ai_d.png';


export const metadata: Metadata = {
  metadataBase: new URL('https://blogai.ai'),
  title: {
    default: baseTitle,
    template: baseTitle
  },
  description: `${descriptionRoot}`,
  icons: {
    icon: '/favicon.png'
  }
}

import Link from "next/link";

import { IconChevronUpDown, IconGitHub } from '@/components/ui/icons'
import { Button } from '@/components/ui/button'
import { Frame } from '@/components/frame'


// const Line: React.FC = ({ className, IconLeft, label, IconRight }) => {



const Line: React.FC<{ className?: string }> = ({ className }) => {

  return (
    <div className='bg-clip-border overflow-clip border-b border-[#FFFFFF] md:border-[#FFFFFF]/15 text-[#FFD55D]  rounded-lg '></div>
  );
};

export default async function StaffIndexPage({ params: { locale } }: { params: { locale: string } }) {
  const session = await auth()
  const avatarUrl = session?.user?.image
  const id = nanoid()



  // const { t, resources } = await initTranslations(locale, i18nNamespaces);

  return (
    <div className=" lg:px-0 " id="index-target">

      <div
        className={cn("flex flex-col items-center relative z-1 justify-center  min-h-72 mx-auto    text-center  overflow", ``)}
      >
        <figure
          className='relative inset-x-0 z-[-1] top-[-80px] pointer-events-none w-full'
        ><Image src={aiBGImage} className='w-full' alt="Hero Image" /></figure>
        <div className='absolute w-full'>
          <div
            className='max-w-7xl m-auto'
          >
            <h1 className=" font-medium text-[1rem]  lg:text-[4rem] text-[#fff] leading-[1.5rem] lg:leading-[5rem] text-center mb-[1rem]">
              Flexible, efficient, and intelligent AI<br /> customer service of the new era
            </h1>
            <Link href="https://github.com">
              <Button variant="outline" className='bg-[#000] text-[#fff] gap-2'>
                {/* <IconGitHub /> */}
                <span className=" ">Try on web</span>
              </Button>
            </Link>
          </div>
        </div>
      </div>

      <Line />

      <div className={cn("px-4 lg:px-0 text-[#08090B] relative z-1 bg-[#E1E8EE]", "py-[2.5rem]", "w-full flex-1 mt-[-80px]")}>

        <div className='flex flex-col xl:flex-row w-full relative z-1 max-w-7xl m-auto'>
          <Frame
            className={cn(
              "order-2 w-full my-auto shadow-sm xl:order-2 rounded",
              {

              },
            )}

          >
            <Image src={aiStaffmage} width={1920} height={1080} alt="Hero Image" />
          </Frame>

          <div className="flex flex-col order-1 w-full xl:order-2 md:pl-12 ">

            <h2 className="flex justify-start my-6 text-3xl font-medium leading-10 blog-heading-gradient sm:text-center xl:justify-start xl:text-left">
              Introduction to AI staff：smart AI Customer Service
            </h2>
            <p className="flex justify-start text-base font-normal leading-7  lg:pr-16 xl:justify-start">
              This is a highly adaptable, efficiently performing, and intelligent AI customer service of the new era. It can swiftly respond to various situations, providing users with personalized and accurate responses, thus saving on enterprise labor costs.
            </p>
          </div>
        </div>





      </div>

      <Line />


      <div className='max-w-7xl mx-auto   px-4 lg:px-0'>
        <h2>AI staff</h2>
        {[
          { image: aiAImage, title: "Cut down on labor expenses for the business", details: "The business is actively seeking methods to reduce its labor costs, possibly through automation, outsourcing, or restructuring. This initiative aims to optimize operational efficiency and improve the company's financial health in the long term. By implementing these strategies, the business hopes to remain competitive in its industry while ensuring sustainable growth and profitability.", order: false },
          { image: aiBImage, title: "A versatile office, administrative, and customer service professional", details: "A versatile professional skilled in office management, administration, and customer service, adept at handling diverse tasks efficiently.", order: true },
          { image: aiCImage, title: "24/7, 365 days a year", details: "Operating 24/7, 365 days a year, ensuring round-the-clock availability and support for customers and stakeholders.", order: false },
          { image: aiDImage, title: "Custom knowledge base, training, fine-tuning, and RAG, suitable for various industries", details: "Tailored knowledge base, training, refinement, and risk assessment guidance adaptable to diverse industries for enhanced performance and compliance.", order: true },
        ].map((item, index) => (
          <div className='pb-[2rem]' key={index}>
            <div className={cn("flex flex-col xl:flex-row w-full relative z-1 text-[#fff]", "py-[2.5rem]")}>

              <div className="flex flex-col order-1 w-full xl:order-2 md:pl-12">

                <h2 className="flex justify-start my-6 text-3xl font-medium leading-10 blog-heading-gradient sm:text-center xl:justify-start xl:text-left">
                  {item.title}
                </h2>
                <p className="flex justify-start text-base font-normal leading-7 text-white/60 lg:pr-16 xl:justify-start">
                  {item.details}
                </p>
              </div>

              <Frame

                className={cn(
                  "order-2 w-full my-auto shadow-sm xl:order-2 rounded",
                  {
                    "xl:order-1": item.order,
                  },
                )}

              >
                <Image src={item.image} width={1920} height={1080} alt="Hero Image" />
              </Frame>


            </div>

            <Line />

          </div>

        ))}
      </div>





    </div>
  );
}