'use client';

import { Fragment } from 'react';
import {
  ArrowUpRight,
  FileChartColumn,
  Lock,
  type LucideIcon,
  Play,
  Rocket,
} from 'lucide-react';

import * as Badge from '@/components/ui/badge';
import * as Button from '@/components/ui/button';
import * as Divider from '@/components/ui/divider';
import * as FancyButton from '@/components/ui/fancy-button';

const items: {
  id: string;
  icon: LucideIcon;
  title: string;
  description: string;
}[] = [
  {
    id: 'analyze',
    icon: FileChartColumn,
    title: 'Analyze in-depth, data-driven project insights with ease.',
    description: 'Discover key actions for fast results.',
  },
  {
    id: 'secure',
    icon: Lock,
    title: 'Secure your entire workflow at every critical step forward.',
    description: 'Protect and manage your information.',
  },
  {
    id: 'launch',
    icon: Rocket,
    title: 'Seamlessly launch innovative new projects with a single click.',
    description: 'Collaborate and see instant impact.',
  },
];

export default function WorkflowGrowthCta() {
  return (
    <section className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 lg:px-7'>
        <div className='flex flex-col gap-8 lg:flex-row lg:items-start lg:gap-16'>
          <div className='flex w-full flex-col gap-6 lg:flex-1 lg:gap-12'>
            <div className='flex flex-col gap-4'>
              <div className='flex flex-col gap-3'>
                <Badge.Root
                  variant='lighter'
                  className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit rounded-[9px] px-2.5 normal-case'
                >
                  Inspired by real progress
                </Badge.Root>
                <h2 className='text-title-h4 text-text-strong-950 lg:text-title-h3 font-[550]'>
                  Looking for ways to grow?
                </h2>
              </div>
              <p className='text-paragraph-lg text-text-sub-600'>
                Empower your workflow with smart ideas.
              </p>
            </div>

            <div className='flex flex-col gap-6'>
              <div className='flex flex-col gap-4 lg:flex-row lg:items-center'>
                <FancyButton.Root
                  type='button'
                  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] lg:w-auto'
                >
                  Start your journey
                  <FancyButton.Icon
                    as={ArrowUpRight}
                    className='text-static-white/[0.64] mx-0'
                    aria-hidden='true'
                  />
                </FancyButton.Root>
                <Button.Root
                  type='button'
                  variant='neutral'
                  mode='lighter'
                  size='medium'
                  className='w-full cursor-pointer gap-2 rounded-xl pr-4.5 pl-3.5 lg:w-auto'
                >
                  <Button.Icon
                    as={Play}
                    className='text-text-sub-600 group-hover:text-text-strong-950 mx-0 fill-current'
                    aria-hidden='true'
                  />
                  See how it works
                </Button.Root>
              </div>
              <p className='text-label-xs text-text-soft-400'>
                Trusted by forward-thinking teams globally.
              </p>
            </div>
          </div>

          <div className='flex w-full flex-col gap-7 lg:flex-1'>
            {items.map((item, index) => (
              <Fragment key={item.id}>
                {index > 0 ? <Divider.Root /> : null}
                <div className='flex items-start gap-3 lg:gap-4'>
                  <div className='flex size-6 shrink-0 items-center justify-center'>
                    <item.icon
                      className='text-primary-base size-5'
                      aria-hidden='true'
                    />
                  </div>
                  <p className='text-label-md text-text-strong-950 flex-1'>
                    {item.title} <br />
                    <span className='text-paragraph-md text-text-soft-400'>
                      {item.description}
                    </span>
                  </p>
                </div>
              </Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}