import { Search, PencilRuler, Hammer, Rocket, LifeBuoy } from "lucide-react";
import { Reveal, SectionHeading } from "./reveal";

const steps = [
  { n: "01", title: "Discovery", icon: Search, copy: "Audit the estate, map dependencies and define measurable outcomes." },
  { n: "02", title: "Design", icon: PencilRuler, copy: "Reference architecture, security model and delivery roadmap." },
  { n: "03", title: "Build", icon: Hammer, copy: "Staged configuration, integration and validation in a controlled lab." },
  { n: "04", title: "Deploy", icon: Rocket, copy: "Cutover with rollback plans, zero-surprise migration windows." },
  { n: "05", title: "Support", icon: LifeBuoy, copy: "24/7 monitoring, optimisation and lifecycle management." },
];

export function Process() {
  return (
    <section id="process" className="bg-background py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-5">
        <SectionHeading
          eyebrow="Our Process"
          title="A disciplined path from idea to always-on"
        />

        <div className="relative mt-16">
          <div className="absolute inset-x-0 top-7 hidden h-px lg:block">
            <div className="h-px w-full bg-border" />
            <svg className="absolute inset-0 h-px w-full" preserveAspectRatio="none" aria-hidden>
              <line
                x1="0"
                y1="0.5"
                x2="100%"
                y2="0.5"
                stroke="oklch(0.53 0.253 263.5)"
                strokeWidth="2"
                strokeDasharray="14 10"
                style={{ animation: "dash-flow 8s linear infinite" }}
              />
            </svg>
          </div>

          <ol className="relative grid gap-10 lg:grid-cols-5">
            {steps.map((s, i) => (
              <Reveal as="li" key={s.n} delay={i * 120}>
                <div className="flex flex-col items-start lg:items-center lg:text-center">
                  <span className="grid size-14 place-items-center rounded-2xl border border-border bg-surface text-brand shadow-[var(--shadow-soft)]">
                    <s.icon size={22} />
                  </span>
                  <span className="mt-5 font-[family-name:var(--font-display)] text-xs font-bold tracking-[0.2em] text-brand">
                    {s.n}
                  </span>
                  <h3 className="mt-1.5 text-lg font-semibold text-navy">{s.title}</h3>
                  <p className="mt-2 max-w-xs text-sm leading-relaxed text-muted-foreground">
                    {s.copy}
                  </p>
                </div>
              </Reveal>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}