/* Research-through-Design process timeline */

function Process() {
  const steps = [
    {
      n: "01",
      k: "Expert Interviews",
      v: "n=7, semi-structured",
      desc: "Talked to UX, engineering, Driver Distraction, and HMI experts at Mercedes-Benz to understand their thoughts and pain points around current adaptive UI work. Findings were grouped using thematic clustering.",
      finds: [
        "Functions split across menu levels, causing frustration",
        "Existing adaptive features are deterministic / rule-based",
        "Industry actively moving toward use-case-less design",
        "Requries Balance: Too many constraints could produce results similar to rule-based systems.",
        "The need to respect user control and follow design system guidelines",
        "System must adhere safety guidelines",
      ],
    },
    {
      n: "02",
      k: "LLM Benchmarking",
      v: "4 models, 8 atomic UI elements",
      desc: "Evaluated different LLMs on latency and ability to generate / adapt UI from a fixed component library. Each model received the same 8 atomic UI elements and was asked to generate / adapt the interface. We measured latency, from voice prompt to rendered UI. Gemini 2.5 Pro hit the best balance between adaptivity and latency for the use case.",
      finds: [
        "Tested: Gemini 2.5 Pro · Opus-4 · GPT-5 · GPT-5 mini",
        "Gemini 2.5 Pro avg ≈ 14s, managable for controlled user study",
        "Reasoning models often >60s, too slow",
      ],
    },
    {
      n: "03",
      k: "System Architecture",
      v: "31 atomic UI elements",
      desc: "Conceptualised and finalised the architecture for the refined system. The LLM produces structured JSON; a deterministic renderer maps that to safe, brand-compliant components.",
      finds: [
        "Atomic, pre-designed UI library (31 elements)",
        "LLM splits screen between two regions by priority",
        "Output is JSON, never raw markup",
      ],
    },
    {
      n: "04",
      k: "Heuristic Evaluation",
      v: "n=4 designers",
      desc: "Individual evaluation sessions with four designers using a workbook and a fixed task. Issues were rated 0–4 on severity. Issues rated 2, 3, and 4 were resolved before the user study.",
      finds: [
        "18 issues identified",
        "13 resolved (severity ≥ 2)",
        "Refined the prototype before the user study",
      ],
    },
    {
      n: "05",
      k: "User Study",
      v: "n=30 · A/B in-car",
      desc: "AI-based system was compared against the pre-designed baseline using an A/B study. Both were integrated into the car's infotainment unit. Participants were split into four groups with randomised condition order to minimise ordering effects.",
      finds: [
        "18 M / 12 F · priori + sensitivity analysis",
        "Four randomised groups to control for order effects",
        "Two systems integrated into the same car",
        "Standardised tools: UEQ+, NASA TLX, custom Likert scales",
      ],
    },
    {
      n: "06",
      k: "Synthesis",
      v: "Recommendations + insights",
      desc: "Quantitative analysis of the study data combined with qualitative insights to produce actionable design recommendations for constrained generative interfaces in safety-critical contexts.",
      finds: [
        "Statistical analysis (Wilcoxon signed-rank tests, descriptive statistics)",
        "Open-ended response coding and thematic analysis",
        "Preference point distribution analysis",
        "Design recommendations for generative UI systems",
      ],
    },
  ]

  const [active, setActive] = useState(0)
  const wrapRef = useRef(null)

  // Track which step is in view (mobile-friendly)
  useEffect(() => {
    const els = wrapRef.current?.querySelectorAll("[data-step]")
    if (!els) return
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && e.intersectionRatio > 0.4) {
            setActive(Number(e.target.getAttribute("data-step")))
          }
        })
      },
      { threshold: [0.4, 0.6] },
    )
    els.forEach((el) => io.observe(el))
    return () => io.disconnect()
  }, [])

  return (
    <section id="process">
      <div className="wrap">
        <SectionHead
          num="03 — Process Overview"
          eyebrow="Research-through-Design"
          title="Six steps from interview rooms to a working AI in a car."
        >
          <p className="lede">
            A research-through-design (RtD) approach grounded in human-centered
            principles, moving from problem framing, through prototyping and
            benchmarking, into a controlled in-car evaluation with 30 drivers.
          </p>
        </SectionHead>

        <div className="process-grid" ref={wrapRef}>
          {/* Sticky rail */}
          <aside className="process-rail">
            <div>
              <div className="h-eyebrow" style={{ marginBottom: 16 }}>
                Step {String(active + 1).padStart(2, "0")} of{" "}
                {String(steps.length).padStart(2, "0")}
              </div>
              <div style={{ display: "grid", gap: 4 }}>
                {steps.map((s, i) => (
                  <div
                    key={s.n}
                    style={{
                      display: "grid",
                      gridTemplateColumns: "auto 1fr",
                      gap: 12,
                      alignItems: "center",
                      padding: "8px 0",
                      borderTop:
                        i === 0 ? "none" : "1px solid var(--page-line)",
                      opacity: i === active ? 1 : 0.4,
                      transition: "opacity 250ms",
                    }}
                  >
                    <span
                      className="mono"
                      style={{ color: "var(--page-muted)", fontSize: 11 }}
                    >
                      {s.n}
                    </span>
                    <span
                      style={{
                        fontSize: 14,
                        fontWeight: i === active ? 600 : 400,
                      }}
                    >
                      {s.k}
                    </span>
                  </div>
                ))}
              </div>
              <div
                style={{
                  marginTop: 24,
                  padding: "16px 0",
                  borderTop: "1px solid var(--page-line-strong)",
                }}
              >
                <div className="h-eyebrow" style={{ marginBottom: 8 }}>
                  Tools
                </div>
                <div className="flex wrap-wrap gap-8">
                  {[
                    "React",
                    "Python",
                    "Figma",
                    "LLM APIs",
                    "Protopie",
                    "Protopie Connect",
                    "ElevenLabs",
                    "Mural",
                  ].map((t) => (
                    <span key={t} className="chip" style={{ fontSize: 10 }}>
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </aside>

          {/* Step cards */}
          <div className="process-stack">
            {steps.map((s, i) => (
              <ProcessStep key={s.n} step={s} index={i} />
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .process-grid {
          display: grid;
          grid-template-columns: 280px 1fr;
          gap: 64px;
          align-items: start;
        }
        .process-rail {
          position: sticky;
          top: 100px;
          height: fit-content;
        }
        .process-stack { display: flex; flex-direction: column; gap: 32px; }
        @media (max-width: 880px) {
          .process-grid { grid-template-columns: 1fr; gap: 32px; }
          .process-rail { display: none; }
        }
      `}</style>
    </section>
  )
}

function ProcessStep({ step, index }) {
  const ref = useReveal(0.2)
  return (
    <article
      ref={ref}
      data-step={index}
      className="card reveal"
      style={{ background: "var(--page-card)", padding: 32 }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "baseline",
          gap: 16,
          marginBottom: 16,
        }}
      >
        <span
          className="mono"
          style={{
            fontSize: 12,
            color: "var(--page-accent)",
            letterSpacing: "0.08em",
          }}
        >
          STEP {step.n}
        </span>
        <span
          className="mono"
          style={{ fontSize: 11, color: "var(--page-muted)" }}
        >
          · {step.v}
        </span>
      </div>
      <h3
        style={{
          fontSize: 28,
          fontWeight: 500,
          letterSpacing: "-0.02em",
          margin: "0 0 12px",
        }}
      >
        {step.k}
      </h3>
      <p
        style={{
          fontSize: 16,
          color: "var(--page-fg)",
          maxWidth: "60ch",
          margin: "0 0 20px",
        }}
      >
        {step.desc}
      </p>

      <div style={{ display: "grid", gap: 8, marginTop: 8 }}>
        {step.finds.map((f, i) => (
          <div
            key={i}
            style={{
              display: "flex",
              gap: 12,
              padding: "10px 14px",
              background: "var(--page-bg)",
              borderRadius: 10,
              fontSize: 14,
            }}
          >
            <span
              style={{
                fontFamily: "var(--font-mono)",
                color: "var(--page-muted)",
                fontSize: 11,
                minWidth: 24,
              }}
            >
              0{i + 1}
            </span>
            <span>{f}</span>
          </div>
        ))}
      </div>
    </article>
  )
}

window.Process = Process