Axil_Accountants/src/components/sections/home/ProcessSection.tsx

import React from 'react';
import { Phone, Zap, FileCheck, TrendingUp, ArrowUpRight } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { SpotlightCard } from '@/components/ui/SpotlightCard';
import { FadeIn } from '@/components/ui/FadeIn';

interface ProcessItem {
  icon: React.ElementType;
  title: string;
  description: string;
}

const PROCESS_ITEMS: ProcessItem[] = [
  {
    icon: Phone,
    title: 'Free Consultation',
    description:
      'Tell us about your business, current finances and goals. No pressure, no commitment — just an honest conversation.',
  },
  {
    icon: Zap,
    title: 'Quick Onboarding',
    description:
      'We migrate your accounts and set up your Axil dashboard in under a week, with zero disruption to your business.',
  },
  {
    icon: FileCheck,
    title: 'We Handle Everything',
    description:
      'Bookkeeping, tax, payroll, VAT — handled every month with zero input from you, filed on time, every time.',
  },
  {
    icon: TrendingUp,
    title: 'You Focus on Growth',
    description:
      'Monthly reports, proactive tax advice, and a dedicated account manager who knows your business inside out.',
  },
];

function ProcessCard({ icon: Icon, title, description }: ProcessItem) {
  return (
    <SpotlightCard
      className="group relative w-full cursor-pointer p-6 transition-all duration-300"
      glowColor="green"
      customSize
    >
      {/* Decorative connector line — visible on larger screens */}
      <div className="group-hover:bg-emerald/60 absolute top-1/2 -left-px hidden h-1/2 w-px -translate-y-1/2 bg-black/8 transition-colors md:block" />
      <div className="group-hover:bg-emerald/60 absolute top-0 left-1/2 h-px w-1/2 -translate-x-1/2 bg-black/8 transition-colors md:hidden" />

      {/* Icon container */}
      <div className="rounded-card bg-bg text-emerald group-hover:bg-emerald mb-4 flex h-12 w-12 items-center justify-center border border-black/8 shadow-sm transition-colors duration-300 group-hover:text-white">
        <Icon className="h-6 w-6" />
      </div>

      <div className="flex flex-col">
        <h3 className="font-display text-charcoal mb-1 text-lg font-semibold">{title}</h3>
        <p className="text-muted text-sm leading-relaxed">{description}</p>
      </div>
    </SpotlightCard>
  );
}

export function ProcessSection() {
  return (
    <section className="w-full bg-white py-16 md:py-24">
      <div className="mx-auto grid grid-cols-1 gap-12 px-4 sm:px-6 md:grid-cols-3 md:gap-8 lg:gap-16 lg:px-8 xl:max-w-[1440px] xl:px-16">
        {/* Left: heading + description + CTA */}
        <FadeIn className="flex flex-col items-start justify-center text-center md:col-span-1 md:text-left">
          <span className="text-emerald mb-2 text-sm font-semibold tracking-widest uppercase">
            How we do it
          </span>
          <h2 className="font-display text-charcoal mb-4 text-3xl font-bold tracking-tight md:text-4xl">
            From sign-up to sorted in days
          </h2>
          <p className="text-muted mb-6 text-base leading-relaxed">
            We&apos;ve made switching accountants effortless. Most clients are fully onboarded
            within a week — then we handle everything so you never have to think about tax again.
          </p>
          <Button
            size="lg"
            href="/contact"
            className="transition-transform duration-300 hover:scale-[1.04]"
          >
            Get started
            <ArrowUpRight className="ml-2 h-5 w-5" />
          </Button>
        </FadeIn>

        {/* Right: 2×2 grid of SpotlightCards */}
        <div className="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 md:col-span-2">
          {PROCESS_ITEMS.map((item, i) => (
            <FadeIn key={item.title} delay={i * 0.1}>
              <ProcessCard {...item} />
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}