'use client';

import { ArrowUpRight, Check, Tag } from 'lucide-react';

import * as Badge from '@/components/ui/badge';
import * as FancyButton from '@/components/ui/fancy-button';
import * as Switch from '@/components/ui/switch';

const plans = [
  {
    name: 'Starter plan',
    description: 'Perfect for small teams launching their first campaigns',
    price: '$199',
    features: [
      'Up to 5 team seats',
      'Basic campaign tracking',
      'Lead capture forms',
      'Email automation (basic)',
      'Standard support',
      'Monthly performance report',
    ],
  },
  {
    name: 'Growth plan',
    description: 'Built for growing teams aiming to boost conversions',
    price: '$399',
    features: [
      'Unlimited team seats',
      'Advanced campaign analytics',
      'Automated lead nurturing',
      'Multi-channel marketing tools',
      'Priority support',
      'Performance dashboard',
    ],
  },
];

function PlanCard({ plan }: { plan: (typeof plans)[number] }) {
  return (
    <div className='bg-bg-weak-50 flex w-full flex-col gap-3 rounded-[28px] px-1 pt-3 pb-1 lg:flex-1'>
      <div className='flex items-center gap-4 px-4 lg:px-6'>
        <div className='flex items-center gap-2.5'>
          <Switch.Root />
          <span className='text-label-sm text-text-sub-600'>Annually</span>
        </div>
        <span className='bg-feature-lighter text-feature-base text-label-xs rounded-[7px] py-1 pr-2.5 pl-2'>
          Save 15% with yearly billing
        </span>
      </div>

      <div className='bg-bg-white-0 shadow-custom-input-4 flex flex-col gap-6 rounded-[24px] p-6 lg:flex-row lg:gap-9 lg:p-8'>
        <div className='flex min-w-0 flex-col gap-5 lg:flex-1 lg:gap-6'>
          <div className='flex flex-col gap-2'>
            <h3 className='text-label-md text-text-strong-950'>{plan.name}</h3>
            <p className='text-label-sm text-text-sub-600'>
              {plan.description}
            </p>
          </div>
          <div className='flex items-center gap-3'>
            <span className='text-title-h3 text-text-strong-950 font-[550]'>
              {plan.price}
            </span>
            <div className='flex flex-col gap-0.5'>
              <span className='text-label-sm text-text-sub-600'>monthly</span>
              <span className='text-paragraph-xs text-text-soft-400'>
                billed annually
              </span>
            </div>
          </div>
          <FancyButton.Root
            variant='primary'
            size='small'
            className='shadow-complex-7 bg-primary-base w-fit cursor-pointer gap-1 rounded-xl pr-3 pl-4 after:opacity-0 hover:after:opacity-[.24]'
          >
            Start free trial
            <FancyButton.Icon
              as={ArrowUpRight}
              className='text-static-white/[0.64] mx-0 size-5'
            />
          </FancyButton.Root>
        </div>

        <div className='bg-stroke-soft-200 h-px w-full shrink-0 lg:h-auto lg:w-px lg:self-stretch' />

        <div className='flex min-w-0 flex-col gap-4 lg:flex-1'>
          {plan.features.map((feature) => (
            <div key={feature} className='flex items-center gap-2.5'>
              <span className='bg-primary-base flex size-[13px] shrink-0 items-center justify-center rounded-full'>
                <Check className='text-static-white size-2.5 stroke-[3]' />
              </span>
              <span className='text-label-sm text-text-sub-600'>{feature}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default function SalesGrowthPricingPlans() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-[1296px] px-6 lg:px-7'>
        <div className='flex flex-col items-start gap-8 lg:items-center lg:gap-12'>
          <div className='flex flex-col items-start gap-3 lg:items-center'>
            <Badge.Root
              variant='lighter'
              className='bg-bg-weak-50 text-text-sub-600 text-label-sm h-7 w-fit gap-1.5 rounded-[9px] pr-2.5 pl-2 normal-case'
            >
              <Badge.Icon as={Tag} className='text-text-soft-400 mx-0 size-4' />
              Designed for high-growth sales teams
            </Badge.Root>
            <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 w-full font-[550] lg:text-center'>
              Tailored plans, proven results
            </h2>
          </div>

          <div className='flex w-full flex-col items-center gap-8'>
            <div className='flex w-full flex-col gap-4 lg:flex-row lg:gap-6'>
              {plans.map((plan) => (
                <PlanCard key={plan.name} plan={plan} />
              ))}
            </div>

            <p className='text-paragraph-sm text-text-soft-400 w-full lg:text-center'>
              Launch in minutes and connect with your marketing stack.{' '}
              <br className='hidden lg:block' />
              <span className='text-label-sm text-text-sub-600'>
                No delays, no guesswork — just growth.
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}