"use client";

import { useState } from "react";
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
import styles from "./WingsHowItWorks.module.css";

const STEPS = [
  {
    label: "Local Pickup",
    desc: "Fast, on-demand first-mile logistics dispatched by electric vehicle.",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 13h13l3 4h2v3H3z" />
        <circle cx="7" cy="20" r="1.6" />
        <circle cx="16" cy="20" r="1.6" />
        <path d="M6 13V8a1 1 0 0 1 1-1h5l3 6" />
      </svg>
    ),
  },
  {
    label: "Airport Clearance",
    desc: "Automated screening, grouping, and rapid cross-docking at the hub.",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
        <path d="m9 12 2 2 4-4" />
      </svg>
    ),
  },
  {
    label: "Air Transit",
    desc: "Optimized cargo flights bypass surface congestion on our regional fleet.",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <path d="M22 12h-6l-4-9-2 1 3 8H5l-2-3-1.5.6L3 14l1.5 4.4L6 18l-2-3h8l3 8 2-1-3-8h6z" />
      </svg>
    ),
  },
  {
    label: "Destination Hub",
    desc: "Immediate de-consolidation and screening upon arrival.",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <rect x="4" y="10" width="16" height="11" rx="1" />
        <path d="M9 21v-6h6v6M4 10 12 3l8 7" />
      </svg>
    ),
  },
  {
    label: "EV Last-Mile",
    desc: "Zero-emission electric vehicles complete the final mile.",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 13h13l3 4h2v3H3z" />
        <circle cx="7" cy="20" r="1.6" />
        <circle cx="16" cy="20" r="1.6" />
        <path d="M6 13V8a1 1 0 0 1 1-1h5l3 6" />
      </svg>
    ),
  },
];

export default function WingsHowItWorks() {
  const [active, setActive] = useState(0);

  return (
    <section className={styles.section} id="wings-how-it-works">
      <div className={styles.sectionShell}>
        <div className={styles.headerRow}>
          <ScrollReveal delay={0.05} duration={0.75} yOffset={25} className={styles.header}>
            <div className={styles.eyebrow}>/ How It Works /</div>
            <h2 className={styles.title}>
              Pickup to
              <br />
              arrival, one
              <br />
              connected flow
            </h2>
          </ScrollReveal>

          <div className={styles.progress} aria-hidden="true">
            <span className={styles.progressCount}>
              {String(active + 1).padStart(2, "0")} / {String(STEPS.length).padStart(2, "0")}
            </span>
            <span className={styles.progressTrack}>
              <span
                className={styles.progressFill}
                style={{ width: `${((active + 1) / STEPS.length) * 100}%` }}
              />
            </span>
          </div>
        </div>

        <StaggerChildren stagger={0.06} duration={0.6} yOffset={24} className={styles.flow}>
          {STEPS.map((step, i) => (
            <div
              key={step.label}
              className={`${styles.step} ${i === active ? styles.stepActive : ""}`}
              onMouseEnter={() => setActive(i)}
              onClick={() => setActive(i)}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") setActive(i);
              }}
            >
              <div className={styles.stepTop}>
                <span className={styles.stepNum}>{String(i + 1).padStart(2, "0")}</span>
                <span className={styles.stepTag}>
                  <span className={styles.stepIcon} aria-hidden="true">{step.icon}</span>
                  Step
                </span>
              </div>
              <div className={styles.stepBottom}>
                <h3 className={styles.stepTitle}>{step.label}</h3>
                <p className={styles.stepDesc}>{step.desc}</p>
              </div>
            </div>
          ))}
        </StaggerChildren>
      </div>
    </section>
  );
}