'use client';

import { Fragment } from 'react';
import { ArrowUpRight, TrendingUp } from 'lucide-react';
import Link from 'next/link';

import * as Badge from '@/components/ui/badge';
import * as Divider from '@/components/ui/divider';
import { cn } from '@/utils/cn';

const stats = [
  {
    value: '12%',
    label: 'Reduced processing time globally',
    total: 3,
    filled: 1,
  },
  {
    value: '200B',
    label: 'Capital flow managed with precision',
    total: 8,
    filled: 5,
  },
  {
    value: '18M',
    label: 'Transactions finalized globally daily',
    total: 16,
    filled: 11,
  },
  {
    value: '600+',
    label: 'Financial institutions onboarded',
    total: 24,
    filled: 20,
  },
];

export default function BankingOperationsPerformanceStats() {
  return (
    <div className='bg-bg-white-0 w-full pt-10 pb-6 lg:py-[120px]'>
      <div className='mx-auto w-full max-w-[1072px] px-6 md:px-7'>
        <div className='relative hidden lg:block'>
          <div className='flex flex-col gap-10'>
            <div className='flex items-end gap-12'>
              {stats.map((stat) => (
                <div
                  key={stat.value}
                  className='border-stroke-soft-200 flex flex-1 flex-col justify-end gap-14 border-l pl-10'
                >
                  <div className='flex flex-col gap-2'>
                    <p className='text-title-h2 text-text-strong-950 font-[550]'>
                      {stat.value}
                    </p>
                    <p className='text-label-md text-text-sub-600'>
                      {stat.label}
                    </p>
                  </div>
                  <div className='flex w-full flex-col gap-2'>
                    {Array.from({ length: stat.total }).map((_, index) => (
                      <div
                        key={index}
                        className={cn(
                          'h-3 w-full',
                          index >= stat.total - stat.filled
                            ? 'bg-primary-base'
                            : 'bg-bg-soft-200',
                        )}
                      />
                    ))}
                  </div>
                </div>
              ))}
            </div>

            <Divider.Root />

            <div className='flex items-center gap-2'>
              <p className='text-label-sm text-text-soft-400 flex-1'>
                Optimize payment operations today
              </p>
              <Link
                href='/'
                className='text-label-sm text-text-sub-600 hover:text-text-strong-950 group flex shrink-0 items-center gap-1.5 transition-colors'
              >
                Explore the full demo
                <ArrowUpRight className='size-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
              </Link>
            </div>
          </div>

          <div className='absolute top-0 left-0 flex w-[400px] flex-col gap-6'>
            <div className='flex flex-col 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={TrendingUp}
                  className='text-primary-base mx-0 size-4'
                />
                Performance metrics
              </Badge.Root>
              <h2 className='text-title-h4 text-text-strong-950 font-[550]'>
                Trusted by global banking and finance leaders
              </h2>
            </div>
            <p className='text-label-md text-text-soft-400'>
              Achieve faster processing times while keeping{' '}
              <br className='hidden md:block' />
              <span className='text-text-sub-600'>
                every transaction secure and compliant.
              </span>
            </p>
            <Link
              href='/'
              className='text-label-md text-primary-base group flex w-fit items-center gap-1.5'
            >
              Explore the full demo
              <ArrowUpRight className='size-5 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
            </Link>
          </div>
        </div>

        <div className='flex flex-col gap-6 lg:hidden'>
          <div className='flex w-full flex-col items-start gap-4'>
            <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 !gap-1.5 rounded-[9px] pr-2.5 pl-2 normal-case'
              >
                <Badge.Icon
                  as={TrendingUp}
                  className='text-primary-base mx-0 size-4'
                />
                Performance metrics
              </Badge.Root>
              <h2 className='text-title-h5 text-text-strong-950 font-[550]'>
                Trusted by global banking and finance leaders
              </h2>
            </div>
            <p className='text-label-md text-text-soft-400'>
              Achieve faster processing times while keeping{' '}
              <span className='text-text-sub-600'>
                every transaction secure and compliant.
              </span>
            </p>
            <Link
              href='/'
              className='text-label-md text-primary-base group flex w-fit items-center gap-1.5'
            >
              Explore the full demo
              <ArrowUpRight className='size-5 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
            </Link>
          </div>

          <div className='flex w-full flex-col gap-6'>
            {stats.map((stat) => (
              <Fragment key={stat.value}>
                <Divider.Root />
                <div className='flex w-full gap-8'>
                  <div className='flex w-24 shrink-0 flex-col justify-end gap-[5px]'>
                    {Array.from({ length: stat.total }).map((_, index) => (
                      <div
                        key={index}
                        className={cn(
                          'h-1.5 w-full',
                          index >= stat.total - stat.filled
                            ? 'bg-primary-base'
                            : 'bg-bg-soft-200',
                        )}
                      />
                    ))}
                  </div>
                  <div className='flex flex-1 flex-col gap-2'>
                    <p className='text-title-h5 text-text-strong-950 font-[550]'>
                      {stat.value}
                    </p>
                    <p className='text-label-md text-text-sub-600'>
                      {stat.label}
                    </p>
                  </div>
                </div>
              </Fragment>
            ))}
            <Divider.Root />
          </div>

          <div className='flex flex-col gap-2'>
            <p className='text-label-sm text-text-soft-400'>
              Optimize payment operations today
            </p>
            <Link
              href='/'
              className='text-label-sm text-text-sub-600 hover:text-text-strong-950 group flex w-fit items-center gap-1.5 transition-colors'
            >
              Explore the full demo
              <ArrowUpRight className='size-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5' />
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}