'use client';

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

import * as Avatar from '@/components/ui/avatar';
import * as AvatarGroupCompact from '@/components/ui/avatar-group-compact';
import * as Badge from '@/components/ui/badge';
import * as FancyButton from '@/components/ui/fancy-button';

const features = [
  'Unlimited local transfers',
  'Instant virtual cards',
  'Real-time expense tracking',
  'Standard currency exchange',
  'Instant payment alerts',
  'Smart budgeting insights',
];

const avatars = [
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-1.png',
    alt: 'Finance team member 1',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-2.png',
    alt: 'Finance team member 2',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-3.png',
    alt: 'Finance team member 3',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-4.png',
    alt: 'Finance team member 4',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-5.png',
    alt: 'Finance team member 5',
  },
  {
    src: 'https://alignui.com/images/blocks/hero-3-avatar-6.png',
    alt: 'Finance team member 6',
  },
];

export default function EssentialFinancePlanCard() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto flex w-full max-w-7xl flex-col items-start gap-8 px-6 lg:items-center lg:gap-10 lg:px-7'>
        <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' />
            Built for modern finance teams
          </Badge.Root>
          <h2 className='text-title-h4 lg:text-title-h2 text-text-strong-950 font-[550] lg:text-center'>
            Flexible plans, faster banking
          </h2>
        </div>

        <div className='bg-bg-weak-50 flex w-full flex-col gap-4 rounded-[24px] px-[3px] pt-[3px] pb-4 lg:w-[808px] lg:rounded-[36px]'>
          <div className='bg-bg-white-0 shadow-custom-input-4 flex w-full flex-col gap-6 rounded-[20px] p-6 lg:flex-row lg:items-center lg:gap-14 lg:rounded-[34px] lg:p-9'>
            <div className='flex w-[256px] shrink-0 flex-col gap-6'>
              <div className='flex flex-col gap-2'>
                <h3 className='text-label-md text-text-strong-950'>
                  Essential plan
                </h3>
                <p className='text-paragraph-sm text-text-sub-600'>
                  Ideal for lean finance teams handling{' '}
                  <span className='text-label-sm text-text-sub-600'>
                    payments, transfers, and budgets.
                  </span>
                </p>
              </div>
              <div className='flex items-center gap-3'>
                <span className='text-title-h3 text-text-strong-950 font-[550]'>
                  $399
                </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='xsmall'
                className='shadow-complex-7 bg-primary-base rounded-10 w-fit cursor-pointer gap-2 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 lg:h-auto lg:w-px lg:self-stretch' />

            <div className='flex w-full flex-col gap-4 lg:flex-1'>
              {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 className='flex flex-col items-start gap-3 px-6 lg:flex-row lg:items-center lg:justify-center lg:gap-1 lg:px-0'>
            <AvatarGroupCompact.Root size='24' className='bg-transparent'>
              <AvatarGroupCompact.Stack className='*:ring-bg-weak-50 opacity-80 *:ring-3'>
                {avatars.map((avatar) => (
                  <Avatar.Root key={avatar.src} className='size-5'>
                    <Avatar.Image
                      src={avatar.src}
                      alt={avatar.alt}
                      className='mix-blend-luminosity'
                    />
                  </Avatar.Root>
                ))}
              </AvatarGroupCompact.Stack>
            </AvatarGroupCompact.Root>
            <p className='text-label-sm text-text-soft-400'>
              <span className='text-text-disabled-300 hidden lg:inline'>—</span>{' '}
              trusted by 250+ banking teams worldwide
            </p>
          </div>
        </div>

        <p className='text-paragraph-sm text-text-soft-400 lg:text-center'>
          Set up your account in minutes and connect <br />
          <span className='text-label-sm text-text-sub-600'>
            with your finance tools.
          </span>
        </p>
      </div>
    </div>
  );
}