"use client";

import { RevealGroup, RevealItem } from "@/components/motion";

type Step = { step: number; title: string; body: string };

/**
 * "From your first message to a live agent" (§26–§32). A connected process flow,
 * not four rectangular cards: numbered nodes strung on a progression line —
 * horizontal on desktop, a vertical timeline on mobile. Monochrome; the final
 * node is filled to read as "deployed / live". Uses the site's scroll-reveal for
 * a subtle step-by-step sequence (§32).
 */
export function ProcessTimeline({ steps }: { steps: Step[] }) {
  // Reference color sequence per step: Cyan -> Sky Blue -> Gold -> Orange
  const stepStyles = [
    {
      circle: "border-2 border-[#4FDAF1] bg-background text-[#4FDAF1] shadow-[0_0_20px_-3px_rgba(79,218,241,0.25)]",
      tint: "bg-[#4FDAF1]/10",
      badge: "text-[#4FDAF1]",
      isLive: false,
    },
    {
      circle: "border-2 border-[#67B7E7] bg-background text-[#67B7E7] shadow-[0_0_20px_-3px_rgba(103,183,231,0.25)]",
      tint: "bg-[#67B7E7]/10",
      badge: "text-[#67B7E7]",
      isLive: false,
    },
    {
      circle: "border-2 border-[#F79C09] bg-background text-[#F79C09] shadow-[0_0_20px_-3px_rgba(247,156,9,0.25)]",
      tint: "bg-[#F79C09]/10",
      badge: "text-[#F79C09]",
      isLive: false,
    },
    {
      circle: "border-0 bg-gradient-brand text-white shadow-md glow-brand",
      tint: "",
      badge: "text-[#E26B0B]",
      isLive: true,
    },
  ];

  return (
    <div className="relative">
      {/* ── Desktop / large tablet: horizontal connected flow ── */}
      <RevealGroup className="hidden lg:block">
        <div className="relative grid grid-cols-4 gap-x-6">
          {/* Progression rail BEHIND the nodes (z-0): Left -> Right Cool -> Warm */}
          <div
            aria-hidden="true"
            className="absolute left-7 top-7 h-0.5 right-[calc(25%-46px)] bg-gradient-to-r from-[#4FDAF1] via-[#F79C09] to-[#E26B0B] opacity-80 z-0 pointer-events-none"
          />
          {steps.map((s, i) => {
            const last = i === steps.length - 1;
            const style = stepStyles[i] || stepStyles[0];
            return (
              <RevealItem key={s.step} className="relative z-10 flex flex-col items-start">
                <span
                  className={`relative z-10 flex size-14 items-center justify-center rounded-full overflow-hidden font-display text-xl font-extrabold transition-transform hover:scale-105 ${style.circle}`}
                >
                  {style.tint && (
                    <span
                      aria-hidden="true"
                      className={`absolute inset-0 rounded-full ${style.tint} pointer-events-none`}
                    />
                  )}
                  <span className="relative z-10">{s.step}</span>
                </span>
                <span className={`mt-6 text-[11px] font-semibold uppercase tracking-[0.12em] ${style.badge}`}>
                  {last ? "Live" : `Step ${s.step}`}
                </span>
                <h3 className="mt-1 font-display text-lg font-bold tracking-tight text-foreground">
                  {s.title}
                </h3>
                <p className="mt-2 max-w-[15rem] text-sm leading-relaxed text-muted-foreground">
                  {s.body}
                </p>
              </RevealItem>
            );
          })}
        </div>
      </RevealGroup>

      {/* ── Mobile / small tablet: vertical timeline ── */}
      <RevealGroup className="lg:hidden">
        <div className="relative pl-2">
          {/* Vertical rail BEHIND the nodes (z-0): Top -> Bottom Cool -> Warm */}
          <div
            aria-hidden="true"
            className="absolute bottom-8 left-[30px] top-5 w-0.5 bg-gradient-to-b from-[#4FDAF1] via-[#F79C09] to-[#E26B0B] opacity-80 z-0 pointer-events-none"
          />
          <div className="space-y-7">
            {steps.map((s, i) => {
              const last = i === steps.length - 1;
              const style = stepStyles[i] || stepStyles[0];
              return (
                <RevealItem key={s.step} className="relative z-10 flex gap-5">
                  <span
                    className={`relative z-10 flex size-11 shrink-0 items-center justify-center rounded-full overflow-hidden font-display text-base font-extrabold ${style.circle}`}
                  >
                    {style.tint && (
                      <span
                        aria-hidden="true"
                        className={`absolute inset-0 rounded-full ${style.tint} pointer-events-none`}
                      />
                    )}
                    <span className="relative z-10">{s.step}</span>
                  </span>
                  <div className="pt-1">
                    <span className={`text-[11px] font-semibold uppercase tracking-[0.12em] ${style.badge}`}>
                      {last ? "Live" : `Step ${s.step}`}
                    </span>
                    <h3 className="mt-0.5 font-display text-lg font-bold tracking-tight text-foreground">
                      {s.title}
                    </h3>
                    <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
                      {s.body}
                    </p>
                  </div>
                </RevealItem>
              );
            })}
          </div>
        </div>
      </RevealGroup>
    </div>
  );
}