'use client';

import { ChartNoAxesCombined } from 'lucide-react';

import * as Badge from '@/components/ui/badge';
import {
  Trustpilot,
  AppStore,
  Google,
  Shopify,
} from '@/components/misc/logo-icons';

const stats = [
  {
    icon: <Trustpilot className='size-5 lg:size-6' />,
    alt: 'Trustpilot',
    rating: '4.4',
    name: 'Trustpilot',
  },
  {
    icon: <AppStore className='size-5 lg:size-6' />,
    alt: 'App Store',
    rating: '4.4',
    name: 'App Store',
  },
  {
    icon: <Google className='size-5 lg:size-6' />,
    alt: 'Google',
    rating: '4.8',
    name: 'Google',
  },
  {
    icon: <Shopify className='size-5 lg:size-6' />,
    alt: 'Shopify',
    rating: '4.9',
    name: 'Shopify',
  },
];

export default function StatsMetrics06() {
  return (
    <div className='bg-bg-white-0 w-full'>
      <div className='mx-auto flex w-full max-w-7xl flex-col items-start gap-6 px-6 pt-10 pb-6 lg:items-center lg:gap-10 lg:px-7 lg:py-24'>
        <div className='flex flex-col gap-3 lg:items-center lg:gap-4'>
          <Badge.Root
            variant='stroke'
            className='text-label-sm text-text-sub-600 bg-bg-weak-50 h-7 w-fit !gap-1.5 rounded-[9px] pr-[10px] pl-2 normal-case ring-transparent'
          >
            <Badge.Icon
              as={ChartNoAxesCombined}
              className='text-primary-base mx-0 size-4'
            />
            Stats & review
          </Badge.Root>
          <h2 className='text-title-h5 text-text-sub-600 lg:text-title-h4 font-[550] lg:text-center'>
            Trusted by{' '}
            <span className='text-text-strong-950'>leading finance</span> teams{' '}
            <span className='text-text-strong-950'>worldwide</span>
          </h2>
        </div>

        <div className='flex w-full flex-col gap-2 md:flex-row md:flex-wrap lg:w-auto lg:items-center lg:justify-center lg:gap-3'>
          {stats.map((stat) => (
            <div
              key={stat.name}
              className='bg-bg-weak-50 flex w-full items-center gap-2.5 rounded-full py-1 pr-4 pl-1 md:w-auto lg:gap-3.5 lg:py-2 lg:pr-5 lg:pl-2'
            >
              <div className='bg-bg-white-0 shadow-custom-input-4 flex items-center justify-center rounded-full p-2 lg:p-2.5'>
                {stat.icon}
              </div>
              <p className='text-label-lg text-text-soft-400 lg:text-title-h5 lg:font-[550]'>
                <span className='text-text-strong-950'>{stat.rating}</span>{' '}
                {stat.name}
              </p>
            </div>
          ))}
        </div>

        <p className='text-label-md text-text-soft-400 lg:text-center'>
          Thousands of finance professionals streamline{' '}
          <br className='hidden lg:block' />
          <span className='text-text-sub-600'>their workflows every day.</span>
        </p>
      </div>
    </div>
  );
}