// ProcessSection.jsx — Section 4. Six-step interactive process strip.
const PROCESS_STEPS = [
  {
    id: 0, num: "01", name: "Understand",
    title: "Brand understanding",
    body: "We start by listening. What does the brand need this frame to do, who wears it, where does it live — brand references, retail positioning, target wearer.",
    list: ["Brand and reference review", "Retail intent and price band", "Brand audience alignment"],
    img: "./assets/imagery/brand-understanding.png",
  },
  {
    id: 1, num: "02", name: "Direct",
    title: "Design direction",
    body: "Direction, not invention. We translate the brand into frame shape, material, finish, and engraving — keeping options narrow enough to actually decide.",
    list: ["Shape language explorations", "Material and color palette", "Detailing and hardware spec"],
    img: "./assets/imagery/design-direction.jpg",
  },
  {
    id: 2, num: "03", name: "Sample",
    title: "Sampling",
    body: "Two sampling rounds is the norm. We handle revisions with the factory directly so brand teams aren't translating tolerances over email.",
    list: ["Round 1 — geometry and fit", "Round 2 — finish and engraving", "Final approval samples"],
    img: "./assets/imagery/sampling-tabletop.png",
  },
  {
    id: 3, num: "04", name: "Package",
    title: "Packaging integration",
    body: "Cases, cloths, retail boxes, and inserts arrive together — and arrive intact. We sample and sign off on the packaging system the same way we sample the frame.",
    list: ["Case selection and sampling", "Print and embossing", "Retail-ready outer carton"],
    img: "./assets/imagery/packaging-system-flatlay.png",
  },
  {
    id: 4, num: "05", name: "Produce",
    title: "Production & QC",
    body: "Lot-by-lot QC against the approved sample. We catch the small things — hinge play, polish, color drift — before they leave the floor.",
    list: ["Pre-production sign-off", "Inline QC on every lot", "Final QC and labeling"],
    img: "./assets/imagery/frame-hinge-gable.jpg",
  },
  {
    id: 5, num: "06", name: "Deliver",
    title: "Logistics & delivery",
    body: "Consolidated shipping to your 3PL or directly to retail. Customs, duties, and unit-level paperwork handled.",
    list: ["Freight and customs", "3PL or retail-direct", "Per-SKU traceability"],
    img: "./assets/imagery/logistics-shipping.png",
  },
];

const ProcessSection = () => {
  const [active, setActive] = React.useState(0);
  const step = PROCESS_STEPS[active];
  return (
    <section className="section" id="process">
      <span className="edge-label">EM · 04 — PROCESS</span>
      <div className="shell">
        <div className="eyebrow eyebrow-rule">Section · 04 — Process</div>
        <h2 className="section-title">A structured workflow that a brand team can hold in their head.</h2>

        <div className="process__steps">
          {PROCESS_STEPS.map((s) => (
            <button
              key={s.id}
              className={"process__step" + (active === s.id ? " is-active" : "")}
              onClick={() => setActive(s.id)}
              type="button"
            >
              <div className="process__num">{s.num}</div>
              <div className="process__name">{s.name}</div>
            </button>
          ))}
        </div>

        <div className="process__stage corner-frame">
          <span className="corner-tick corner-tick--tl"></span>
          <span className="corner-tick corner-tick--tr"></span>
          <span className="corner-tick corner-tick--bl"></span>
          <span className="corner-tick corner-tick--br"></span>
          <img className="process__stage-img" src={step.img} alt={step.title} key={step.id} />
          <div className="process__stage-overlay">
            <div className="process__stage-eyebrow">
              <span className="process__stage-name">{step.name}</span>
            </div>
            <h3 className="process__stage-title">{step.title}</h3>
            <p className="process__stage-body">{step.body}</p>
          </div>
        </div>

        <div className="process__more">
          <a className="link-arrow" href="process.html">See the full process</a>
        </div>
      </div>
    </section>
  );
};

window.ProcessSection = ProcessSection;