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';
import aiEImage from '../../../components/images/ai_e.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 IndexPage({ 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]">

              Anywhere, anytime, AI Staff makes<br /> every interaction more efficient.
            </h1>
            <Link href="/auth/sign-in/">
              <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">
              Overview
            </h2>
            <p className="flex justify-start text-base font-normal leading-7  lg:pr-16 xl:justify-start">
              AI Staff is an intelligent customer service platform built using advanced large language model technology, dedicated to providing seamless, efficient customer service. Supporting multiple interaction modes, including text and voice, it learns from enterprise-specific data to offer around-the-clock personalized customer service solutions, significantly reducing reliance on traditional human support.
            </p>
          </div>
        </div>





      </div>

      <Line />


      <div className='max-w-7xl mx-auto   px-4 lg:px-0'>
        <h2 className='text-[3rem] font-bold leading-[8rem] text-white text-center'>AI staff</h2>
        {[
          { image: aiAImage, title: "Deep Learning Understanding", details: "AI Staff utilizes large language models to deeply understand user needs and intentions, significantly surpassing traditional keyword matching techniques, enhancing the accuracy and efficiency of problem-solving.", order: false },
          { image: aiBImage, title: "Private Domain Knowledge Learning", details: "Users can upload proprietary company documents, enabling AI Staff to learn from this data, thus precisely adapting to specific industry needs and enhancing customer service relevance and professionalism.", order: true },
          { image: aiCImage, title: "24/7 Service", details: "AI Staff provides services around the clock, day and night, always online, greatly reducing dependence on traditional customer service teams, helping businesses save on manpower costs and improve service continuity.", order: false },
          { image: aiDImage, title: "Multimodal Support", details: "The system supports text and voice inputs to meet different user preferences, offering a more natural and convenient interaction mode. Whether typing or speaking, users receive swift responses.", order: true },

          { image: aiEImage, title: "Customizable Services", details: "Services can be customized according to specific business needs, including employee personality, response length, and service methods, ensuring the service experience maximally aligns with corporate culture and customer expectations, enhancing customer satisfaction and loyalty.", order: false },
        ].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>
  );
}