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 aiBGImage from '../../../components/images/ai_jelly_bg.png';

import aiAImage from '../../../components/images/ai_jelly_a.png';
import aiBImage from '../../../components/images/ai_jelly_b.png';
import aiCImage from '../../../components/images/ai_jelly_c.png';
import aiDImage from '../../../components/images/ai_jelly_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?: 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 JellyAIPage({ 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-right relative z-1 justify-center  min-h-72 mx-auto    text-right  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-right mb-[1rem]">
              Personalized AI-generated<br /> media station
            </h1>
            <Link href="https://github.com">
              <Button variant="outline" className='bg-[#000] text-[#fff] gap-2'>
                <span className=" ">Try on web</span>
              </Button>
            </Link>
          </div>
        </div>
      </div>



      <div className='max-w-7xl mx-auto  px-4 lg:px-0'>
        <div className='columns-2 gap-[2rem] justify-start content-start gap-[1rem] lg:gap-[3rem] w-full ' >

          <h2 className='item w-5/12 text-[1.2rem] lg:text-[4rem] text-[#fff] text-left '>Content sampling, augmentation, automatic publishing, and search engine optimization.</h2>
          {[
            { image: aiBImage, title: "Augment and generate new content based on the sampled information", details: "Augmenting and generating new content involves leveraging sampled information to enrich existing content or create entirely new materials. This process utilizes analytical insights and creative techniques to expand upon existing ideas or develop fresh perspectives. By synthesizing sampled data, researchers can uncover trends, identify gaps, and formulate innovative concepts to enhance content quality and relevance. This iterative approach ensures that content remains engaging, informative, and aligned with audience preferences and objectives.", order: false },
            { image: aiDImage, title: "Search engine optimization to make your news searchable on Google", details: "Implement search engine optimization (SEO) techniques to enhance the visibility and searchability of your news content on Google and other search engines. This involves optimizing keywords, meta tags, and content structure to improve organic search rankings, driving more traffic to your news articles and increasing audience reach and engagement.", order: true },

            { image: aiAImage, title: "Collect information as required", details: "Gather necessary information according to specific requirements, ensuring accuracy and relevance. Utilize various sources such as databases, research materials, and interviews to compile comprehensive data sets. Employ efficient data collection methods and tools to streamline the process and minimize errors. This ensures that the information collected meets the needs of the project or task at hand, facilitating informed decision-making and effective problem-solving.", order: false },
            { image: aiCImage, title: "Automatically publish news", details: "Automatically publishing news involves utilizing automated systems or algorithms to disseminate news articles or updates without manual intervention. This process typically involves scheduling publication times, formatting content for various platforms, and distributing articles to targeted audiences. By automating the publishing process, organizations can streamline workflows, ensure timely delivery of news content, and reach a wider audience more efficiently. Additionally, automation can help minimize errors and optimize content distribution strategies for maximum impact and engagement.", order: false },

          ].map((item, index) => (
            <div className='item w-5/12   pb-[2rem] ' key={index}>
              <div className={cn("  text-[#fff]", "py-[2.5rem]")}>

                <Frame

                  className={cn(
                    " w-full my-auto shadow-sm  rounded",

                  )}

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

                <div className=" w-full xl:order-2">

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




              </div>


            </div>

          ))}
        </div>
        <Line />
      </div>



    </div>
  );
}