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 naturalImage from '@/components/images/natural.png';
import voiceImage from '@/components/images/voice.png';
import signlangImage from '@/components/images/signlang.png';
import lipreadImage from '@/components/images/lipread.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="flex flex-col flex-1 px-4 mx-auto lg:px-0 max-w-7xl" id="index-target">
      {/* <HeroSvg className="absolute inset-x-0 top-0 pointer-events-none" /> */}

      <div className="flex flex-col items-start justify-center mt-32 min-h-72  mb-[14rem]">
        <h1 className="section-title-heading-gradient font-medium text-[4rem] text-[#fff] leading-[5rem] text-left mb-[1rem]">
          Intent-Driven SDK: <br />Empowering Seamless User <br />Experiences
        </h1>

        {/* <p className="mt-8 bg-gradient-to-br text-transparent bg-gradient-stop bg-clip-text from-white via-white via-40% to-white/30 max-w-lg text-center">
          We wanted pricing to be simple and affordable for anyone, so we've created flexible plans
          that don't need an accounting degree to figure out.
        </p> */}


        <Link href="https://github.com">
          <Button variant="outline" className='bg-[#000] text-[#fff] gap-2'>
            <IconGitHub />
            <span className=" ">Code</span>
          </Button>
        </Link>
      </div>

      <div className={cn("grid md:grid-cols-2 xl:grid-cols-4 gap-[1rem] mb-24 px-4 text-[#fff] my-[2rem]")}>
        {[
          { image: aImage, title: "Natural language interaction", url: "/#a" },
          { image: bImage, title: "Voice interaction", url: "/#b" },
          { image: cImage, title: "Sign language interaction", url: "/#c" },
          { image: dImage, title: "Lip language interaction", url: "/#d" },
        ].map((post, index) => (
          // <Link href={`/blog/${post.url}`} key={index}>
          <div key={index} className={cn("flex flex-col p-0 m-0 gap-4 text-left rounded-[18px] col-span-2 md:col-span-1")}>
            <div className="rounded bg-clip-border overflow-clip">
              <figure
                className='w-full'
              ><Image src={post.image} className='w-full' alt="Hero Image" /></figure>
            </div>

            <h2 className="text-3xl font-medium leading-10 sm:text-xl blog-heading-gradient">{post.title}</h2>

            <Link href={`/blog/${post.url}`} >
              <Button variant="link" className="p-0 h-8 text-[#CCCCCC]" >Explore more</Button>
            </Link>

          </div>
          // </Link>
        ))}
      </div>

      <Line />

      <div className="flex flex-col items-start justify-center mt-32 min-h-62  mb-[14rem] text-left">
        <h1 className="section-title-heading-gradient font-medium text-[4rem] text-[#fff] leading-[5rem] mb-[1rem]">
          Natural language interaction
        </h1>

        <p className="mt-8 bg-gradient-to-br text-transparent bg-gradient-stop bg-clip-text from-white via-white via-40% to-white/30 max-w-lg my-[2rem]">
          Use natural language to convey intentions to the machine, fulfilling the user's objectives.
        </p>


        <Frame className="order-2 w-full my-auto shadow-sm  p-0 max-w-8xl" >
          <Image src={naturalImage} className='w-full' alt="Hero Image" />
        </Frame>
      </div>

      <Line />


      <div className=''>
        {[
          { image: voiceImage, title: " Voice interaction", details: "Use spoken language to convey intentions, making human-machine interaction simpler and more direct.", order: false },
          { image: signlangImage, title: "Sign language interaction", details: "Use sign language to convey intentions, allowing the machine to understand sign language and facilitate the integration of disabled individuals with society.", order: true },
          { image: lipreadImage, title: "Lip reading language interaction", details: "Support lip reading to convey intentions, enabling interaction with the machine through lip reading in noisy or confidential environments.", 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",
                  {
                    "xl:order-1": item.order,
                  },
                )}

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


            </div>

            <Line />

          </div>

        ))}
      </div>




      {/* <ShinyCardGroup className="grid h-full max-w-4xl grid-cols-2 gap-6 mx-auto mt-32 group">
        <PricingCard color={Color.White} className="col-span-2 md:col-span-1">
          <FreeCardHighlight className="absolute top-0 right-0 pointer-events-none" />

          <PricingCardHeader
            title="Free Tier"
            description="Everything you need to start!"
            className="bg-gradient-to-tr from-transparent to-[#ffffff]/10 "
            color={Color.White}
          />
          <Separator />

          <PricingCardContent>
            <Cost dollar="$0" />
            <Bullets>
              <Bullet Icon={Check} label="100 active keys / month" color={Color.White} />
              <Bullet
                Icon={Check}
                label="2.5k successful verifications / month"
                color={Color.White}
              />
              <Bullet Icon={Check} label="7-day analytics retention" color={Color.White} />
              <Bullet Icon={Check} label="Unlimited APIs" color={Color.White} />
            </Bullets>
          </PricingCardContent>
        </PricingCard>
        <PricingCard color={Color.Yellow} className="col-span-2 md:col-span-1">
          <ProCardHighlight className="absolute top-0 right-0 pointer-events-none" />

          <PricingCardHeader
            title="Pro Tier"
            description="For growing teams with powerful demands"
            className="bg-gradient-to-tr from-black/50 to-[#FFD600]/10 "
            color={Color.Yellow}
          />
          <Separator />

          <PricingCardContent>
            <Cost dollar="$25" />
            <Bullets>
              <Bullet Icon={Check} label="250 active keys / month" color={Color.Yellow} />
              <Bullet
                Icon={Check}
                label="150k successful verifications / month"
                color={Color.Yellow}
              />
              <Bullet Icon={Check} label="90-day analytics retention" color={Color.Yellow} />
              <Bullet Icon={Check} label="90-day audit log retention" color={Color.Yellow} />
              <Bullet Icon={Check} label="Unlimited APIs" color={Color.Yellow} />
              <Bullet Icon={Check} label="Workspaces with team members" color={Color.Yellow} />
              <Bullet
                Icon={Stars}
                label="More coming soon"
                color={Color.Yellow}
                textColor="text-white/40"
              />
            </Bullets>
          </PricingCardContent>
          <PricingCardFooter>
            <div className="flex flex-col gap-2">
              <Asterisk tag="$0.10" label="/ additional active key" />
              <Asterisk tag="$1" label="/ additional 10k successful verifications" />
            </div>
          </PricingCardFooter>
        </PricingCard>

        <PricingCard color={Color.Purple} className="col-span-2">
          <EnterpriseCardHighlight className="absolute top-0 right-0 pointer-events-none" />

          <div className="flex flex-col h-full md:flex-row">
            <div className="flex flex-col w-full gap-8">
              <PricingCardHeader
                title="Enterprise Tier"
                description={
                  <>
                    Need something custom?
                    <br /> We'll find a way.
                  </>
                }
                color={Color.Purple}
                className="bg-gradient-to-tr from-transparent to-[#9D72FF]/10 "
              />
              <PricingCardContent>
                <Cost dollar="Custom $" />
                <Link href="mailto:support@unkey.dev?subject=Unkey Enterprise Quote">
                  <div className="w-full p-px rounded-lg h-10 bg-gradient-to-r from-[#02DEFC] via-[#0239FC] to-[#7002FC] overflow-hidden">
                    <div className="bg-black rounded-[7px] h-full bg-opacity-95 hover:bg-opacity-25 duration-1000">
                      <div className="flex items-center justify-center w-full h-full bg-gradient-to-tr from-[#02DEFC]/20 via-[#0239FC]/20 to-[#7002FC]/20  rounded-[7px]">
                        <span className="text-sm font-semibold text-white">Contact Us</span>
                      </div>
                    </div>
                  </div>
                </Link>
              </PricingCardContent>
            </div>
            <Separator orientation="vertical" className="hidden md:flex" />
            <Separator orientation="horizontal" className="md:hidden" />
            <div className="relative w-full p-8">
              <Particles
                className="absolute inset-0 duration-500 opacity-50 -z-10 group-hover:opacity-100"
                quantity={50}
                color={Color.Purple}
                vx={0.1}
                vy={-0.1}
              />
              <Bullets>
                <Bullet Icon={Check} label="Custom Quotas" color={Color.Purple} />
                <Bullet Icon={Check} label="IP Whitelisting" color={Color.Purple} />
                <Bullet Icon={Check} label="Dedicated Support" color={Color.Purple} />
                <Bullet
                  Icon={Stars}
                  label="More coming soon"
                  color={Color.Purple}
                  textColor="text-white/40"
                />
              </Bullets>
            </div>
          </div>
        </PricingCard>
      </ShinyCardGroup>
      <BelowEnterpriseSvg className="container inset-x-0 top-0 mx-auto -mt-64 -mb-32" />

      <Discover /> */}

      {/* <div className="-mx-4 lg:mx-0">
        <CTA />
      </div> */}
    </div>
  );
}