import { Bot, PenLine, Search } from 'lucide-react';

import * as Badge from '@/components/ui/badge';

const steps = [
  {
    icon: PenLine,
    title: 'Provide your input',
    description:
      'Share your product, goal, and audience so the workflow starts with useful context.',
  },
  {
    icon: Search,
    title: 'Discover opportunities',
    description:
      'Find the relevant discussions, channels, and signals where intent already exists.',
  },
  {
    icon: Bot,
    title: 'Generate tailored output',
    description:
      'Produce thoughtful, brand-aware responses that match the channel and user need.',
  },
];

export default function NumberedProcessCards() {
  return (
    <section className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto flex w-full max-w-7xl flex-col px-6 md:px-7'>
        <div className='mx-auto mb-8 flex max-w-3xl flex-col items-center text-center lg:mb-12'>
          <Badge.Root
            variant='stroke'
            className='text-label-sm text-text-sub-600 bg-bg-weak-50 mb-3 h-7 w-fit rounded-[9px] px-2.5 normal-case ring-transparent'
          >
            How it works
          </Badge.Root>
          <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 mb-4 font-[550]'>
            Easy as 1, 2, 3
          </h2>
          <p className='text-paragraph-md text-text-sub-600'>
            Move from raw context to useful, channel-ready output in a focused
            three-step flow.
          </p>
        </div>

        <div className='grid w-full gap-4 lg:grid-cols-3'>
          {steps.map((step, index) => (
            <article
              key={step.title}
              className='border-stroke-soft-200 bg-bg-white-0 group shadow-regular-xs hover:border-primary-base relative overflow-hidden rounded-[28px] border p-7 transition duration-300 lg:p-8'
            >
              <span className='text-primary-alpha/10 group-hover:text-primary-base/30 pointer-events-none absolute top-4 right-4 font-mono text-[96px] leading-[0.8] font-semibold transition-colors duration-300 select-none lg:text-[112px]'>
                0{index + 1}
              </span>
              <div className='relative z-10 flex flex-col gap-8'>
                <div className='bg-primary-alpha/10 text-primary-base flex size-14 items-center justify-center rounded-2xl'>
                  <step.icon className='size-7' />
                </div>
                <div className='flex flex-col gap-3'>
                  <h3 className='text-title-h6 text-text-strong-950 font-[550]'>
                    {step.title}
                  </h3>
                  <p className='text-paragraph-md text-text-sub-600'>
                    {step.description}
                  </p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}