'use client';

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

import * as Accordion from '@/components/ui/accordion';
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 Button from '@/components/ui/button';
import * as FancyButton from '@/components/ui/fancy-button';
import * as Switch from '@/components/ui/switch';

const questions = [
  {
    question: 'Which finance tools can I integrate?',
    answer:
      'Connect your accounting, ERP, and banking tools in a few clicks — no engineering work required.',
  },
  {
    question: 'Do transactions update in real time?',
    answer:
      'Every transfer, payment, and balance change syncs instantly across your dashboard and reports.',
  },
  {
    question: 'Are currency rates refreshed automatically?',
    answer:
      'Rates refresh continuously from our banking partners, so every conversion uses the latest pricing.',
  },
];

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

const essentialFeatures = [
  'Up to 10 team seats',
  'Role-based permissions',
  'Tracking dashboard',
  'Payment scheduling',
  'Priority email support',
  'Monthly finance reports',
];

const enterpriseFeatures = [
  'Unlimited team seats',
  'Advanced role-based control',
  'Real-time payment analytics',
  'Multi-currency processing',
];

function FeatureList({ features }: { features: string[] }) {
  return (
    <div className='flex w-full min-w-0 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>
  );
}

export default function FlexibleBankingPricingFaq() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-[142px]'>
      <div className='mx-auto w-full max-w-[1072px] px-6 md:px-7'>
        <div className='grid grid-cols-1 gap-8 lg:grid-cols-[360px_1fr] lg:grid-rows-[auto_1fr_auto] lg:gap-x-14 lg:gap-y-8'>
          <div className='flex flex-col gap-4 lg:col-start-1 lg:row-start-1 lg:gap-8'>
            <div className='flex flex-col gap-3 lg:gap-4'>
              <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-primary-base mx-0 size-4'
                />
                Plans &amp; Pricing
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 font-[550]'>
                Flexible pricing for growing banks
              </h2>
            </div>
            <p className='text-label-md text-text-soft-400'>
              Optimize payment accuracy and manage{' '}
              <span className='text-text-sub-600'>
                transfers with secure workflows.
              </span>
            </p>
          </div>

          <Accordion.Root
            type='single'
            collapsible
            className='flex flex-col gap-2 lg:col-start-1 lg:row-start-2'
          >
            {questions.map((item) => (
              <Accordion.Item
                key={item.question}
                value={item.question}
                className='bg-bg-weak-50 hover:bg-bg-weak-50 data-[state=open]:bg-bg-weak-50 rounded-[12px] p-2.5 ring-0 ring-transparent hover:ring-transparent has-[:focus-visible]:ring-transparent data-[state=open]:ring-transparent'
              >
                <Accordion.Trigger className='m-0 flex w-full cursor-pointer items-center gap-2 p-0 text-left'>
                  <Accordion.Arrow className='text-text-soft-400 size-5 shrink-0' />
                  <span className='text-label-sm text-text-sub-600 min-w-0 flex-1'>
                    {item.question}
                  </span>
                </Accordion.Trigger>
                <Accordion.Content className='text-paragraph-sm text-text-sub-600 pt-2 pl-7'>
                  {item.answer}
                </Accordion.Content>
              </Accordion.Item>
            ))}
          </Accordion.Root>

          <div className='flex min-w-0 flex-col gap-3 lg:col-start-2 lg:row-span-3 lg:row-start-1'>
            <div className='bg-bg-weak-50 flex w-full flex-col gap-1 rounded-[28px] p-1'>
              <div className='flex items-center gap-4 px-4 py-2 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'>
                  Billed annually — save 15%
                </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:items-start lg:gap-9 lg:p-7'>
                <div className='flex min-w-0 flex-col gap-5 lg:flex-1 lg:gap-6'>
                  <div className='flex flex-col gap-1'>
                    <h3 className='text-label-md text-text-strong-950'>
                      Essential plan
                    </h3>
                    <p className='text-paragraph-sm text-text-sub-600'>
                      Perfect for small teams handling{' '}
                      <span className='text-label-sm text-text-sub-600'>
                        payments and transfers daily.
                      </span>
                    </p>
                  </div>
                  <div className='flex items-center gap-3'>
                    <span className='text-title-h3 text-text-strong-950 font-[550]'>
                      $249
                    </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-2 rounded-xl pr-4 pl-5 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' />

                <FeatureList features={essentialFeatures} />
              </div>
            </div>

            <div className='bg-bg-white-0 shadow-custom-input flex flex-col gap-6 rounded-[28px] p-6 lg:flex-row lg:items-start lg:gap-9 lg:p-7'>
              <div className='flex min-w-0 flex-col gap-5 lg:flex-1 lg:gap-6'>
                <div className='flex flex-col gap-1'>
                  <h3 className='text-label-md text-text-strong-950'>
                    Enterprise plan
                  </h3>
                  <p className='text-paragraph-sm text-text-sub-600'>
                    Built for large institutions with{' '}
                    <span className='text-label-sm text-text-sub-600'>
                      advanced payment workflows
                    </span>
                  </p>
                </div>
                <Button.Root
                  variant='neutral'
                  mode='stroke'
                  size='small'
                  className='w-fit cursor-pointer rounded-xl'
                >
                  Contact us
                </Button.Root>
              </div>

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

              <FeatureList features={enterpriseFeatures} />
            </div>
          </div>

          <div className='flex items-center gap-1 justify-self-center lg:col-start-1 lg:row-start-3 lg:justify-self-start'>
            <AvatarGroupCompact.Root size='24' className='bg-transparent'>
              <AvatarGroupCompact.Stack className='*:ring-bg-white-0 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'>—</span> 4.8/5 out of 254
              finance clients
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}