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 kefuImage from '../../components/images/kefu.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-start relative z-1 justify-center  min-h-72 mx-auto    text-center  overflow", `bg-[#8fbdb9]/5`)}
      >
        <figure
          className='relative inset-x-0 z-[-1] top-[1px] pointer-events-none w-full '
        ><Image src={aiBGImage} className='w-full h-full py-[1rem]' alt="Hero Image" /></figure>
        <div className='absolute w-full'>
          <div
            className=' gap-3 max-w-7xl m-auto text-left text-[#fff]'
          >
            <h1 className=" font-medium text-[1rem]  lg:text-[4rem] text-[#fff] leading-[1.5rem] lg:leading-[5rem] text-left mb-[1rem] ">
              美国移民
            </h1>
            <p className="my-[1.6rem]">民营企业家的首选美国移民路径</p>
            <Link href="tel:19924370039">
              <Button variant="ghost" className='bg-[#000] text-[#fff] gap-2 bg-transparent border border-white'>
                {/* <IconGitHub /> */}
                <span className=" ">联系我们</span>
              </Button>
            </Link>
          </div>
        </div>
      </div>

      <Line />
      <div className='flex flex-row items-start relative  justify-between bg-white  max-w-7xl m-auto py-[1.5rem]'>

        <h4 className='text-[#17776C]'>移民咨询热线 199 2437 0039</h4>
        <Link href="tel:19924370039">
          <Button variant="ghost" className=' text-[#fff] gap-2 bg-transparent bg-[#17776C] hover:bg-[#26988b] border border-[#17776C] text-[#17776C]'>
            {/* <IconGitHub /> */}
            <span className="text-[#fff] ">立即联系</span>
          </Button>
        </Link>
      </div>

      <div className={cn("px-4 lg:px-0 text-[#08090B] flex flex-col  items-center   justify-center  bg-[#F0F0F0]", "py-[2.5rem]", "w-full flex-1 max-w-7xl mx-auto ")}>

        <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">
            专业客服，全程服务
          </h2>
          <p className="flex justify-start text-base font-normal leading-7  lg:pr-16 xl:justify-start">
            完善的客户体系，丰富的移民办理经验，为您和您的家人能够顺利抵达大洋彼岸保驾护航
          </p>

        </div>

        <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={kefuImage} alt="kefu Image" />
          </Frame>




        </div>





      </div>


      <div className={cn("grid md:grid-cols-2 xl:grid-cols-3 gap-[1rem]  text-[#fff] ")}>
        {[
          { image: aImage, title: "高效便捷，省时省力", p: "申请人可在中国完成申请，无需赴美。", url: "/#a" },
          { image: bImage, title: "自主控制成本与风险", p: "果冻移民的优势在于能够自主控制成本与风险，与许多民营企业家掌控全局的经营风格相契合。", url: "/#b" },
          { image: cImage, title: "直接获得永久绿卡", p: "可直接获取永久绿卡，省时省力，优于其他高成本的临时绿卡方案。", url: "/#c" },
        ].map((post, index) => (
          // <Link href={`/blog/${post.url}`} key={index}>
          <div key={index} className={cn("flex flex-col p-[6rem] m-0 gap-4 text-left min-h-[23rem] rounded-[1px] col-span-2 md:col-span-1", "bg-[#D5E8E6] text-[#17776C]")}>
            <div className="rounded bg-clip-border overflow-clip">
              {/* <figure
                className='w-full'
              ><Image src={post.image} className='w-full' alt="Hero Image" /></figure> */}
            </div>

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

            <p className="text-[16px]  leading-10">{post.p}</p>
            {/* <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='max-w-7xl mx-auto   px-4 lg:px-0'>
        {[
          { image: aiAImage, title: "海外生意与移民双赢", details: "成功的移民不仅意味着在享受美国生活及公民权利，更是在这个国度打下事业的基石，为海外生活奠定坚实基础。", 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-[#000]", "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  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 className={cn("px-4 lg:px-0 text-[#08090B] relative z-1 bg-[#F0F0F0]", "py-[2.5rem]", "w-full flex-1 max-w-7xl mx-auto ")}>

        <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} alt="Hero Image" />
          </Frame>

          <div className='w-2/5'></div>

          <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">
              无移民配额限制
            </h2>
            <p className="flex justify-start text-base font-normal leading-7  lg:pr-16 xl:justify-start">
              符合基本条件，全家可迅速登陆美国，尽情享受工作、生活和学习的福利。
            </p>

          </div>
        </div>





      </div>



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

        <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} alt="Hero Image" />
          </Frame> */}

          <div className='w-2/5'></div>

          <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">
              现在就开启您的移民之旅吧！
            </h2>
            <p className="flex justify-start text-base font-normal leading-7  lg:pr-16 xl:justify-start">
              感谢您访问我们的移民网站！我们真诚地感谢您对我们的关注和支持。我们致力于为您提供最专业、最优质的移民服务，帮助您顺利实现移民梦想。如果您有任何疑问或需要进一步了解，欢迎随时与我们联系。再次感谢您的光临！
            </p>

            <span>联系我们——果冻移民咨询</span>
          </div>
        </div>





      </div>



    </div>
  );
}