'use client';

import {
  ChartPie,
  Headset,
  Landmark,
  LockKeyhole,
  SquareCode,
  Workflow,
  type LucideIcon,
} from 'lucide-react';

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

const features: {
  id: string;
  icon: LucideIcon;
  title: string;
  description: string;
}[] = [
  {
    id: '1',
    icon: LockKeyhole,
    title: 'Role-based permissions',
    description:
      'Set roles to control who approves, edits, or views financial workflows.',
  },
  {
    id: '2',
    icon: ChartPie,
    title: 'Real-time reporting',
    description:
      'Track payments, balances, and cash flow with live financial dashboards.',
  },
  {
    id: '3',
    icon: Workflow,
    title: 'Approval workflows',
    description:
      'Trigger multi-step approvals for secure payments and internal transfers.',
  },
  {
    id: '4',
    icon: Landmark,
    title: 'Regulatory compliance',
    description:
      'Stay aligned with KYC, AML, and evolving tax requirements globally.',
  },
  {
    id: '5',
    icon: Headset,
    title: 'Global payment support',
    description:
      'Operate across borders using global payment flows and tax-compliant rails.',
  },
  {
    id: '6',
    icon: SquareCode,
    title: 'API & integrations',
    description:
      'Link core finance tools and automate operations with ready-to-use APIs.',
  },
];

export default function MoneyMovementFeatureGrid() {
  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='flex flex-col items-start gap-8 lg:items-center lg:gap-12'>
          <div className='flex w-full flex-col items-start gap-4 lg:items-center'>
            <div className='flex w-full flex-col items-start gap-3 lg:items-center'>
              <Badge.Root
                variant='lighter'
                className='bg-bg-weak-50 text-label-sm text-text-sub-600 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 font-[550] lg:text-center'>
                Smarter tools for better money movement
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600 lg:max-w-[470px] lg:text-center'>
              Explore tools that help finance teams move money securely,{' '}
              <span className='text-label-md text-text-sub-600'>
                stay compliant, and scale operations globally.
              </span>
            </p>
          </div>

          <div className='-mx-3 grid w-[calc(100%+24px)] grid-cols-1 gap-1.5 lg:mx-0 lg:w-full lg:grid-cols-3'>
            {features.map((feature) => (
              <div
                key={feature.id}
                className='bg-bg-weak-25 flex flex-col items-start gap-7 rounded-[28px] p-7 lg:gap-10 lg:p-10'
              >
                <feature.icon className='text-primary-base size-7' />
                <div className='flex w-full flex-col items-start gap-2'>
                  <h3 className='text-title-h6 text-text-strong-950 w-full font-[550]'>
                    {feature.title}
                  </h3>
                  <p className='text-label-md text-text-sub-600 w-full'>
                    {feature.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}