'use client';

import { ArrowUpRight, CircleCheckBig, Play } from 'lucide-react';
import Image from 'next/image';

import NewBadgeStrokeAnnouncement from '@/components/landing-page-blocks/announcement/new-badge-stroke-announcement';
import ApexSearchCreateHeader from '@/components/landing-page-blocks/navigation/apex-search-create-header';
import * as Badge from '@/components/ui/badge';
import * as Button from '@/components/ui/button';
import * as FancyButton from '@/components/ui/fancy-button';

const brands = [
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-1-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-1-400-dark.svg',
    alt: 'Synergy',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-2-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-2-400-dark.svg',
    alt: 'Horizon',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-3-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-3-400-dark.svg',
    alt: 'Catalyst',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-4-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-4-400-dark.svg',
    alt: 'Phoenix',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-1-brand-6-400.svg',
    darkSrc: 'https://alignui.com/images/blocks/hero-1-brand-6-400-dark.svg',
    alt: 'Solaris',
  },
];

const features = [
  'Get accurate answers in seconds',
  'Automate tasks and save time',
  'Integrate with your favorite tools',
];

function HeroBadge() {
  return (
    <div className='bg-bg-weak-50 flex w-fit items-center gap-2 rounded-[10px] py-1 pr-[9px] pl-1.5'>
      <Badge.Root
        variant='lighter'
        color='blue'
        className='bg-bg-white-0 text-primary-base shadow-complex-10 rounded-[5px] px-1.25 font-semibold'
      >
        NEW
      </Badge.Root>
      <span className='text-label-sm text-text-sub-600'>
        Experience next-gen AI chat
      </span>
      <ArrowUpRight className='text-text-soft-400 -ml-[2px] size-4' />
    </div>
  );
}

export default function AiChatDashboardHero() {
  return (
    <div className='bg-bg-white-0 w-full'>
      <NewBadgeStrokeAnnouncement
        text='Voice chat feature is now live'
        variant='lighter'
      />
      <ApexSearchCreateHeader announcement={true} />

      <div className='mx-auto w-full max-w-7xl px-6 py-8 md:px-7 md:pt-10 md:pb-16'>
        <div className='flex flex-col items-center gap-6 md:gap-16'>
          <div className='flex w-full flex-col items-start gap-6 md:items-center md:gap-7'>
            <div className='flex w-full flex-col items-start gap-4 md:items-center'>
              <div className='flex w-full flex-col items-start gap-3 md:items-center'>
                <HeroBadge />
                <h1 className='text-title-h4 md:text-title-h1 text-text-strong-950 font-[550] md:text-center'>
                  Your intelligent AI chat partner
                </h1>
              </div>
              <p className='text-paragraph-md text-text-sub-600 md:text-center'>
                AI-powered chat assistance for every task and question
              </p>
            </div>

            <div className='flex w-full flex-col gap-4 md:w-auto md:flex-row md:items-center'>
              <FancyButton.Root
                variant='primary'
                size='medium'
                className='shadow-complex-7 bg-primary-base w-full cursor-pointer gap-1.5 rounded-xl pr-3.5 pl-5 after:opacity-0 hover:after:opacity-[.24] md:w-auto'
              >
                Start chatting free
                <FancyButton.Icon
                  as={ArrowUpRight}
                  className='text-static-white/[0.64] mx-0 size-5'
                />
              </FancyButton.Root>
              <Button.Root
                variant='primary'
                mode='stroke'
                size='medium'
                className='w-full cursor-pointer rounded-xl md:w-auto'
              >
                <Button.Icon as={Play} className='size-5' />
                See how it works
              </Button.Root>
            </div>
          </div>

          <div className='flex w-full flex-col items-start gap-8 md:items-center'>
            <div className='flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-center md:gap-7'>
              {features.map((feature) => (
                <div key={feature} className='flex items-center gap-2.5'>
                  <CircleCheckBig className='text-primary-base size-4 shrink-0' />
                  <span className='text-label-md text-text-sub-600'>
                    {feature}
                  </span>
                </div>
              ))}
            </div>

            <div className='border-stroke-soft-200 mx-[-8px] w-[calc(100%+16px)] rounded-[40px] border p-2 sm:mx-auto sm:max-w-[480px] md:mx-0 md:w-full md:max-w-none md:p-2.5'>
              <div className='bg-bg-weak-50 w-full rounded-[32px] p-2 md:p-2.5'>
                <div className='lg:bg-bg-white-0 shadow-colored-gray w-full overflow-hidden rounded-[24px]'>
                  <Image
                    src='https://alignui.com/images/blocks/hero-7-image-mobile.png'
                    alt='AI chat dashboard'
                    width={326}
                    height={705}
                    priority
                    className='h-auto w-full md:hidden'
                  />
                  <Image
                    src='https://alignui.com/images/blocks/hero-7-image.png'
                    alt='AI chat dashboard'
                    width={1224}
                    height={764}
                    priority
                    className='hidden h-auto w-full md:block'
                  />
                </div>
              </div>
            </div>

            <div className='flex w-full flex-col items-start gap-5 md:items-center'>
              <p className='text-label-sm text-text-soft-400 md:text-center'>
                Trusted by 200,000+ users worldwide
              </p>
              <div className='-mx-6 w-[calc(100%+48px)] md:mx-0 md:w-full'>
                <div className='no-scrollbar flex items-center gap-8 overflow-x-auto px-6 md:justify-center md:gap-12 md:overflow-visible md:px-0'>
                  {brands.map((brand) => (
                    <div key={brand.alt} className='flex shrink-0 items-center'>
                      <Image
                        src={brand.src}
                        alt={brand.alt}
                        width={106}
                        height={24}
                        className='h-6 w-auto dark:hidden'
                      />
                      <Image
                        src={brand.darkSrc}
                        alt={brand.alt}
                        width={106}
                        height={24}
                        className='hidden h-6 w-auto dark:block'
                      />
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}