'use client';

import { Fragment } from 'react';
import {
  ArrowUpRight,
  Clock3,
  FileSearch,
  type LucideIcon,
  Users,
} from 'lucide-react';

import * as Badge from '@/components/ui/badge';
import * as FancyButton from '@/components/ui/fancy-button';
const items: {
  id: string;
  icon: LucideIcon;
  strong: string;
  soft: string;
}[] = [
  {
    id: 'browse',
    icon: FileSearch,
    strong: 'Browse tailored service options.',
    soft: 'Find partners nearby.',
  },
  {
    id: 'compare',
    icon: Clock3,
    strong: 'Quickly compare your solutions.',
    soft: 'Decide in minutes.',
  },
  {
    id: 'connect',
    icon: Users,
    strong: 'Connect and start collaborating.',
    soft: 'Start your project.',
  },
];

export default function CollaborationTrialCtaSection() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto flex w-full max-w-7xl flex-col items-center gap-8 px-6 md:px-7 lg:gap-12'>
        <div className='flex w-full flex-col items-start gap-8 lg:items-center'>
          <div className='flex flex-col gap-4'>
            <div className='flex flex-col items-start gap-2 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'
              >
                Fueled by collaboration
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 font-[550] lg:text-center'>
                Ready to move your business forward?
              </h2>
            </div>
            <p className='text-paragraph-lg text-text-sub-600 lg:text-center'>
              Transform your strategy with modern solutions.
            </p>
          </div>
          <FancyButton.Root
            variant='primary'
            size='medium'
            className='bg-primary-base w-full cursor-pointer gap-1.5 rounded-xl pr-3.5 pl-5 lg:w-fit'
          >
            Start your free trial
            <FancyButton.Icon
              as={ArrowUpRight}
              className='text-static-white/[0.64] mx-0 size-5'
            />
          </FancyButton.Root>
        </div>

        <div className='flex w-full flex-col items-start gap-5 lg:gap-10'>
          <div className='bg-stroke-soft-200 h-px w-full' />
          <div className='flex w-full flex-col gap-5 lg:flex-row lg:items-start lg:gap-10'>
            {items.map((item, idx) => (
              <Fragment key={item.id}>
                {idx > 0 && (
                  <div className='bg-stroke-soft-200 h-px w-full lg:h-auto lg:w-px lg:self-stretch' />
                )}
                <div className='flex w-full items-start gap-2.5 lg:flex-1 lg:flex-col lg:items-center lg:gap-5'>
                  <item.icon className='text-primary-base size-5 shrink-0 lg:size-6' />
                  <p className='text-label-sm lg:text-label-md lg:text-center'>
                    <span className='text-text-strong-950'>{item.strong}</span>
                    <br />
                    <span className='text-text-soft-400'>{item.soft}</span>
                  </p>
                </div>
              </Fragment>
            ))}
          </div>
          <div className='bg-stroke-soft-200 h-px w-full' />
        </div>
      </div>
    </div>
  );
}