'use client';

import {
  ArrowUpRight,
  CircleCheckBig,
  Database,
  FileCog,
  ShieldCheck,
} from 'lucide-react';

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

const checks = [
  'End-to-end encryption',
  'Role-based permissions',
  'Compliance built-in',
];

const cards = [
  {
    icon: ShieldCheck,
    title: 'Full encryption',
    description: 'All records are encrypted and stored securely by region.',
  },
  {
    icon: Database,
    title: 'Secure storage',
    description: 'Only your team can access or export internal account data.',
  },
  {
    icon: FileCog,
    title: 'Audit logs',
    description: 'Track every action, access, and change in real time.',
  },
];

export default function FinancialDataSecurityFeature() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 md:px-7'>
        <div className='mx-auto flex w-full max-w-[1064px] flex-col gap-8 lg:flex-row lg:items-center lg:gap-20'>
          <div className='flex w-full flex-col gap-6 lg:w-[440px] lg:shrink-0 lg:gap-8'>
            <div className='flex flex-col gap-3'>
              <Badge.Root
                variant='lighter'
                className='bg-bg-weak-50 text-text-sub-600 text-label-sm h-7 w-fit rounded-[9px] px-2.5 normal-case'
              >
                Trusted by finance
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 w-full font-[550]'>
                Your data is always safe, private, and fully under your control
              </h2>
            </div>

            <p className='text-paragraph-md text-text-sub-600'>
              We encrypt, isolate, and protect all your data <br />
              <span className='text-label-md text-text-sub-600'>
                across every transaction.
              </span>
            </p>

            <div className='flex flex-col gap-4'>
              {checks.map((check) => (
                <div key={check} className='flex items-center gap-2.5'>
                  <CircleCheckBig className='text-primary-base size-[15px] shrink-0' />
                  <span className='text-paragraph-md text-text-sub-600'>
                    {check}
                  </span>
                </div>
              ))}
            </div>

            <Button.Root
              variant='primary'
              mode='stroke'
              size='medium'
              className='w-full cursor-pointer gap-2 rounded-xl pr-3.5 pl-4.5 lg:w-fit'
            >
              Book a demo
              <Button.Icon as={ArrowUpRight} className='mx-0 size-5' />
            </Button.Root>
          </div>

          <div className='mx-[-12px] flex w-[calc(100%+24px)] flex-col gap-2 lg:mx-0 lg:w-full lg:flex-1'>
            {cards.map((card) => (
              <div
                key={card.title}
                className='bg-bg-weak-25 relative flex flex-col gap-6 overflow-hidden rounded-[24px] p-7 lg:flex-row lg:items-start lg:rounded-[28px] lg:py-9 lg:pr-[180px] lg:pl-9'
              >
                <card.icon className='text-primary-base size-6 shrink-0' />
                <div className='flex w-full flex-col gap-2 lg:min-w-0 lg:flex-1'>
                  <h3 className='text-label-lg text-text-strong-950'>
                    {card.title}
                  </h3>
                  <p className='text-paragraph-md text-text-sub-600'>
                    {card.description}
                  </p>
                </div>
                <card.icon
                  aria-hidden='true'
                  className='text-bg-soft-200 pointer-events-none absolute right-4 bottom-[92px] size-[148px] lg:-bottom-8'
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}