'use client';

import { Fragment, type ReactNode } from 'react';
import { TrendingUp } from 'lucide-react';
import Image from 'next/image';

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

const stats: { value: string; description: ReactNode }[] = [
  {
    value: '300%',
    description: (
      <>
        Increase in pipeline value after aligning{' '}
        <span className='text-text-sub-600'>
          sales and marketing strategies
        </span>
      </>
    ),
  },
  {
    value: '75%',
    description: (
      <>
        Reduction in ad spend waste through{' '}
        <span className='text-text-sub-600'>
          targeted audience optimization
        </span>
      </>
    ),
  },
  {
    value: '4.5x',
    description: (
      <>
        Average return on investment for{' '}
        <span className='text-text-sub-600'>cross-channel campaigns.</span>
      </>
    ),
  },
];

function StatItems() {
  return (
    <>
      {stats.map((stat, index) => (
        <Fragment key={stat.value}>
          {index > 0 && <div className='bg-stroke-soft-200 h-px w-full' />}
          <div className='flex w-full flex-col gap-2'>
            <span className='text-title-h4 lg:text-title-h2 text-text-strong-950'>
              {stat.value}
            </span>
            <p className='text-label-md text-text-soft-400'>
              {stat.description}
            </p>
          </div>
        </Fragment>
      ))}
    </>
  );
}

function ParagraphContent() {
  return (
    <div className='text-paragraph-md text-text-sub-600 flex flex-col gap-6'>
      <p>
        Map the{' '}
        <span className='text-label-md text-text-sub-600'>
          entire customer lifecycle
        </span>{' '}
        from first interaction to final purchase, uncovering the tactics and
        touchpoints that{' '}
        <span className='text-label-md text-text-sub-600'>
          consistently drive
        </span>{' '}
        the strongest results.
      </p>
      <p>
        <span className='text-label-md text-text-sub-600'>
          Highlight top-performing initiatives,
        </span>{' '}
        forecast revenue trends accurately, and adapt quickly to market changes.
      </p>
      <p>
        Enable marketing and sales teams to align on{' '}
        <span className='text-label-md text-text-sub-600'>
          actionable insights
        </span>{' '}
        that{' '}
        <span className='text-label-md text-text-sub-600'>
          improve performance
        </span>{' '}
        and strengthen client relationships.
      </p>
      <p className='text-label-md text-text-sub-600'>
        With all campaign metrics connected in one place, you create a single,
        reliable view of progress.
      </p>
    </div>
  );
}

function SignatureContent() {
  return (
    <>
      <p className='text-label-xs text-text-sub-600'>
        Drive revenue, cut waste.
      </p>
      <Image
        src='https://alignui.com/images/blocks/stats-metrics-08.svg'
        alt='Signature'
        width={64}
        height={36}
        className='h-9 w-16'
      />
    </>
  );
}

export default function RevenueGrowthImpactStats() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-[1064px] px-6'>
        <div className='flex flex-col gap-6 lg:gap-12'>
          <div className='flex w-full flex-col gap-3 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={TrendingUp}
                className='text-primary-base mx-0 size-4'
              />
              Growth impact
            </Badge.Root>
            <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 font-[550]'>
              Driving measurable growth across{' '}
              <br className='hidden lg:block' />
              every customer touchpoint.
            </h2>
          </div>

          <div className='bg-stroke-soft-200 h-px w-full' />

          <div className='flex w-full flex-col gap-6 lg:hidden'>
            <div className='flex w-full flex-col gap-6'>
              <StatItems />
            </div>
            <div className='bg-stroke-soft-200 h-px w-full' />
            <div className='flex w-full flex-col gap-6'>
              <span className='text-label-sm text-text-soft-400'>Revenue</span>
              <ParagraphContent />
              <div className='flex flex-col gap-4'>
                <SignatureContent />
              </div>
            </div>
          </div>

          <div className='hidden w-full items-start gap-10 lg:flex'>
            <span className='text-paragraph-md text-text-sub-600 shrink-0'>
              Revenue
            </span>
            <div className='bg-stroke-soft-200 w-px shrink-0 self-stretch' />

            <div className='flex w-[392px] shrink-0 flex-col gap-6 self-stretch'>
              <ParagraphContent />
              <div className='flex flex-1 flex-col justify-end gap-4'>
                <SignatureContent />
              </div>
            </div>

            <div className='bg-stroke-soft-200 w-px shrink-0 self-stretch' />

            <div className='flex flex-1 flex-col gap-10'>
              <StatItems />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}