/* HOW IT WORKS — tabbed variant (option 3, preview alongside How and HowFlow) */

const TAB_DATA = {
  employers: {
    label: "For Employers",
    steps: [
    { n: "01", title: "Define the role", body: "Pick a template, weight the competencies that matter most, customize by role, and tailor it to your firm.", icon: "firm", tint: "bg-orange" },
    { n: "02", title: "Send the assessment", body: "Candidates and employees complete realistic scenarios scored against research-backed rubrics.", icon: "hub", tint: "bg-blue" },
    { n: "03", title: "Get a dashboard", body: "See how each candidate scored on every skill, with excerpts from their answers. Track progress over time.", icon: "score", tint: "bg-lime" },
    { n: "04", title: "Level up your team", body: "Tailored exercises tuned to each person's gaps, backed by research.", icon: "train", tint: "bg-cream" }],

    reassessTop: "REASSESS CURRENT EMPLOYEES PERIODICALLY",
    reassessSub: "Track growth, target development"
  },
  candidates: {
    label: "For Candidates & Employees",
    steps: [
    { n: "01", title: "Jump in", body: "Open cubicle, run through a quick tutorial, start your first task.", icon: "hub", tint: "bg-orange" },
    { n: "02", title: "Step into the role", body: <>Run scenarios that mirror the actual job. We evaluate your process <em>and</em> the output.</>, icon: "play", tint: "bg-blue" },
    { n: "03", title: "Get a scorecard", body: "Detailed feedback on every task. Know exactly what to work on and how to improve.", icon: "score", tint: "bg-lime" },
    { n: "04", title: "Practice with purpose", body: "Tailored exercises tuned to your gaps, backed by research.", icon: "train", tint: "bg-cream" }],

    reassessTop: "REASSESS PERIODICALLY",
    reassessSub: "Track your growth"
  }
};

function TabStepIcon({ kind }) {
  const common = { stroke: "#141414", strokeWidth: 3, strokeLinecap: "square", strokeLinejoin: "miter", fill: "none" };
  if (kind === "firm") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="8" y="14" width="48" height="40" {...common} fill="#F4F1EA" />
      <rect x="14" y="20" width="10" height="10" fill="#141414" />
      <rect x="28" y="20" width="10" height="10" {...common} />
      <rect x="42" y="20" width="8" height="10" {...common} />
      <line x1="14" y1="38" x2="50" y2="38" {...common} />
      <line x1="14" y1="46" x2="42" y2="46" {...common} />
      <rect x="8" y="8" width="48" height="6" {...common} fill="#141414" />
    </svg>);
  if (kind === "hub") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="26" y="26" width="12" height="12" fill="#141414" />
      <rect x="6" y="6" width="10" height="10" {...common} />
      <rect x="48" y="6" width="10" height="10" {...common} />
      <rect x="6" y="48" width="10" height="10" {...common} />
      <rect x="48" y="48" width="10" height="10" {...common} />
      <line x1="16" y1="16" x2="26" y2="26" {...common} strokeDasharray="3 3" />
      <line x1="48" y1="16" x2="38" y2="26" {...common} strokeDasharray="3 3" />
      <line x1="16" y1="48" x2="26" y2="38" {...common} strokeDasharray="3 3" />
      <line x1="48" y1="48" x2="38" y2="38" {...common} strokeDasharray="3 3" />
    </svg>);
  if (kind === "play") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="6" y="10" width="52" height="40" {...common} fill="#F4F1EA" />
      <polygon points="26,20 26,40 44,30" fill="#141414" />
      <line x1="6" y1="54" x2="58" y2="54" {...common} />
      <line x1="18" y1="58" x2="46" y2="58" {...common} />
    </svg>);
  if (kind === "score") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="10" y="8" width="44" height="48" {...common} fill="#F4F1EA" />
      <rect x="16" y="16" width="20" height="4" fill="#141414" />
      <rect x="16" y="26" width="32" height="4" fill="#2EC2DB" />
      <rect x="16" y="34" width="24" height="4" fill="#355E6E" />
      <rect x="16" y="42" width="28" height="4" fill="#111214" />
      <circle cx="46" cy="18" r="5" {...common} fill="#64B0C2" />
    </svg>);
  if (kind === "train") return (
    <svg viewBox="0 0 64 64" className="w-14 h-14">
      <rect x="14" y="14" width="36" height="36" {...common} fill="#F4F1EA" />
      <rect x="22" y="22" width="20" height="20" {...common} />
      <rect x="28" y="28" width="8" height="8" fill="#2EC2DB" />
      <line x1="4" y1="60" x2="28" y2="36" {...common} />
      <polygon points="28,36 20,40 24,46" fill="#141414" />
    </svg>);
  return null;
}

function HowTabs() {
  const [activeTab, setActiveTab] = React.useState("employers");
  const tabs = ["employers", "candidates"];
  const data = TAB_DATA[activeTab];

  const handleKey = (e) => {
    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
      e.preventDefault();
      const idx = tabs.indexOf(activeTab);
      const next = e.key === "ArrowRight"
        ? tabs[(idx + 1) % tabs.length]
        : tabs[(idx - 1 + tabs.length) % tabs.length];
      setActiveTab(next);
      const el = document.getElementById(`howtabs-tab-${next}`);
      if (el) el.focus();
    }
  };

  return (
    <section id="how" data-snap className="relative bg-cream-2 border-y-2 border-ink">
      <div className="max-w-[1400px] mx-auto px-5 md:px-8 py-20 md:py-28">
        <div className="flex items-center justify-between font-mono text-sm md:text-base mb-10" aria-hidden="true">
          <span>02 / HOW IT WORKS</span>
          <span>FOUR STEPS</span>
        </div>

        <div className="grid lg:grid-cols-12 gap-8 items-center mb-12">
          <h2 className="lg:col-span-8 font-display font-bold tracking-tight leading-[0.95] text-[44px] md:text-[72px] lg:text-[88px]">
            One hub. Job simulation tasks. <span className="text-orange">Real results.</span>
          </h2>
          <p className="lg:col-span-4 text-base md:text-lg text-ink-2 max-w-md">
            How it works for the firm and for the person being assessed. We've built cubicle with continuous improvement and feedback in mind.
          </p>
        </div>

        {/* Tab switcher */}
        <div role="tablist" aria-label="How it works views" className="flex flex-col sm:flex-row gap-3 mb-10">
          {tabs.map((t) =>
          <button
            key={t}
            id={`howtabs-tab-${t}`}
            role="tab"
            aria-selected={activeTab === t}
            aria-controls={`howtabs-panel-${t}`}
            tabIndex={activeTab === t ? 0 : -1}
            onClick={() => setActiveTab(t)}
            onKeyDown={handleKey}
            className={`font-mono text-xs md:text-sm uppercase tracking-wider border-2 border-ink px-5 py-3 btn-chunky transition-colors ${
            activeTab === t ?
            "bg-orange text-ink hs-sm" :
            "bg-cream text-ink hover:bg-cream-2"}`
            }>
              {TAB_DATA[t].label}
            </button>
          )}
        </div>

        {/* Tab panel — only the active one rendered; key triggers re-animate on switch */}
        <div
          key={activeTab}
          role="tabpanel"
          id={`howtabs-panel-${activeTab}`}
          aria-labelledby={`howtabs-tab-${activeTab}`}
          className="up-in">

          <div className="relative">
            {/* Main row of 4 cards */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-10 relative">
              {/* horizontal connector line at mid-height behind cards (desktop) */}
              <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-[3px] bg-ink z-0 -translate-y-1/2" aria-hidden />

              {data.steps.map((s) =>
              <div key={s.n}
              className="relative z-10 border-2 border-ink bg-cream hs-sm p-6 md:p-7 group hover:bg-cream-2 transition-colors min-h-[340px] flex flex-col">
                  <div className="flex items-center justify-between mb-6">
                    <span className={`font-mono text-xs border-2 border-ink px-2 py-0.5 ${s.tint}`}>STEP {s.n}</span>
                    <TabStepIcon kind={s.icon} />
                  </div>
                  <h3 className="font-display font-bold text-2xl md:text-[28px] leading-tight mb-3">{s.title}</h3>
                  <p className="text-sm md:text-base text-ink-2 leading-relaxed">{s.body}</p>
                </div>
              )}
            </div>

            {/* Reassess loop — desktop: arrow from box 4 down, left, up to box 2 */}
            <div className="hidden lg:block relative">
              <svg viewBox="0 0 1000 90" preserveAspectRatio="none" className="w-full h-24" aria-hidden>
                <path d="M 886 0 L 886 60 L 371 60 L 371 8" fill="none" stroke="#111214" strokeWidth="3" />
                <polygon points="371,0 362,14 380,14" fill="#111214" />
              </svg>
              <div className="absolute left-[62.9%] -translate-x-1/2 top-[64px] -translate-y-1/2 bg-cream border-2 border-ink px-4 py-2 hs-sm text-center whitespace-nowrap">
                <div className="font-mono text-xs font-bold tracking-wider">{data.reassessTop}</div>
                <div className="font-mono text-[10px] opacity-70 mt-1">{data.reassessSub}</div>
              </div>
            </div>

            {/* Reassess indicator — mobile/tablet: chunky loop arrow + labels in a single badge */}
            <div className="lg:hidden mt-8 flex justify-center">
              <div className="bg-cream border-2 border-ink p-4 hs flex items-center gap-4 max-w-sm">
                {/* Curl-back arrow: 3/4 circle with arrowhead, visually conveys "loops back to an earlier step" */}
                <svg width="52" height="52" viewBox="0 0 56 56" className="shrink-0" aria-hidden>
                  <path
                    d="M 44 14 A 18 18 0 1 0 46 38"
                    fill="none"
                    stroke="#111214"
                    strokeWidth="4"
                    strokeLinecap="square" />
                  <polygon points="46,38 38,32 52,28" fill="#111214" />
                </svg>
                <div className="text-left">
                  <div className="font-mono text-xs font-bold tracking-wider leading-tight">{data.reassessTop}</div>
                  <div className="font-mono text-[10px] opacity-70 mt-1 leading-snug">Step 4 cycles back to Step 2 — {data.reassessSub}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Inset stat bar — shared across tabs */}
        <div className="mt-10 border-2 border-ink bg-ink text-cream grid sm:grid-cols-3 divide-x-2 divide-cream/20">
          {[
          { k: "~30 MIN", v: "Per candidate" },
          { k: "2×", v: "more accurate at predicting job performance than traditional case interviews (Sackett et al. 2022)" },
          { k: "0", v: "Memorized frameworks required" }].
          map((s, i) =>
          <div key={i} className="p-6 md:p-8">
              <div className="font-display font-bold text-4xl md:text-5xl">{s.k}</div>
              <div className="font-mono text-xs mt-2 opacity-70">{s.v}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

window.HowTabs = HowTabs;