import { Reveal } from '@/components/ui/reveal';

export interface ProcessStep {
  title: string;
  description: string;
}

const ILLUSTRATIONS = [
  '/images/steps/monitoring-tower.svg',
  '/images/steps/installation-tools.svg',
  '/images/steps/building-study.svg',
  '/images/steps/house-roof-panels.svg',
  '/images/steps/sun-energy-emblem.svg'
];

export function Process({ steps }: { steps: ProcessStep[] }) {
  return (
    <ol className="grid gap-8 sm:grid-cols-2 lg:grid-cols-5">
      {steps.map((step, i) => (
        <Reveal key={step.title} as="li" variant="scale" delay={(i % 5) * 90} className="relative">
          {i < steps.length - 1 && (
<span
                className="absolute ltr:-right-1/4 rtl:-left-1/4 top-20 hidden w-1/2 text-volt-500 lg:block"
                aria-hidden="true"
              >
                <svg viewBox="0 0 60 12" className="h-3 w-full rtl:-scale-x-100" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M1 6 h58 M53 1 l6 5 -6 5" />
              </svg>
            </span>
          )}
          <div className="overflow-hidden rounded-2xl border border-copper-600/15 transition-transform duration-300 hover:-translate-y-1">
            <img
              src={ILLUSTRATIONS[i % ILLUSTRATIONS.length]}
              alt={step.title}
              className="h-48 w-full bg-white object-contain sm:h-52"
            />
          </div>
          <div className="mt-5 flex items-start gap-3">
            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-copper-600/10 font-display text-sm font-semibold text-copper-600">
              {String(i + 1).padStart(2, '0')}
            </span>
            <div>
              <h3 className="font-display text-base font-semibold">{step.title}</h3>
              <p className="mt-1 text-sm text-graphite-900/60">{step.description}</p>
            </div>
          </div>
        </Reveal>
      ))}
    </ol>
  );
}