/* global React, Icon, Eyebrow, Serif, useCapture */
/* =====================================================================
   Interactions · set 2 — Ladders (05), Lens switcher (06)
   ===================================================================== */
const { useState: useS2 } = React;

/* ----------------------------------------------------------- LADDERS */
function ReadinessLadders({ data, others }) {
  const [place, setPlace] = useCapture("text:ladders", {}); // {startup:lvl, corporate:lvl}
  const [hover, setHover] = useS2({}); // {ladderId: lvl}

  const Ladder = ({ l }) => {
    const placed = place[l.id];
    const hovered = hover[l.id];
    const detailLvl = hovered || placed;
    const detail = detailLvl ? l.rungs.find((r) => r.lvl === detailLvl) : null;
    return (
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em",
            textTransform: "uppercase", color: "var(--fg2)" }}>{l.title}</div>
          <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 19,
            letterSpacing: "-0.02em", marginTop: 3 }}>{l.attr}</div>
        </div>
        <div style={{ border: "1px solid var(--ink)" }}>
          {l.rungs.map((r, idx) => {
            const isPlaced = placed === r.lvl;
            const isHover = hovered === r.lvl;
            return (
              <button key={r.lvl}
                onClick={() => setPlace({ ...place, [l.id]: r.lvl })}
                onMouseEnter={() => setHover((h) => ({ ...h, [l.id]: r.lvl }))}
                onMouseLeave={() => setHover((h) => ({ ...h, [l.id]: null }))}
                className="focus-ring"
                style={{
                  all: "unset", cursor: "pointer", display: "flex", alignItems: "center", gap: 12,
                  width: "100%", boxSizing: "border-box", padding: "11px 14px",
                  borderBottom: idx < l.rungs.length - 1 ? "1px solid var(--fog)" : "none",
                  background: isPlaced ? "var(--signal)" : isHover ? "var(--bone)" : "transparent",
                  color: isPlaced ? "var(--paper)" : "var(--ink)",
                  transition: "background var(--dur-fast) var(--ease)",
                }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, width: 18,
                  textAlign: "center", flex: "0 0 auto",
                  color: isPlaced ? "var(--paper)" : "var(--fg2)" }}>{r.lvl}</span>
                <span style={{ fontSize: 14.5, fontWeight: 500, letterSpacing: "-0.01em",
                  flex: 1, minWidth: 0 }}>{r.label}</span>
                {isPlaced && <Icon name="check" size={14} style={{ flex: "0 0 auto" }} />}
              </button>
            );
          })}
        </div>
        <div style={{ minHeight: 56, marginTop: 12 }}>
          {detail ? (
            <div style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--signal)",
                flex: "0 0 auto" }}>{detail.lvl} · {detail.label}</span>
              <span style={{ fontSize: 13.5, color: "var(--ash)", lineHeight: 1.45 }}>{detail.desc}</span>
            </div>
          ) : (
            <div style={{ fontSize: 13, color: "var(--fg2)" }}>Hover a rung to read it. Click to place where you stand today.</div>
          )}
        </div>
      </div>
    );
  };

  return (
    <div>
      <div style={{ display: "flex", gap: "clamp(20px,4vw,56px)", alignItems: "flex-start" }}>
        {data.map((l) => <Ladder key={l.id} l={l} />)}
      </div>

      {/* the other four transformations */}
      <div style={{ marginTop: 30, borderTop: "1px solid var(--fog)", paddingTop: 20 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
          textTransform: "uppercase", color: "var(--fg2)", marginBottom: 14 }}>
          Four more transformations on the same map
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px,1fr))",
          gap: 0, borderTop: "1px solid var(--fog)", borderLeft: "1px solid var(--fog)" }}>
          {others.map((o) => (
            <div key={o.attr} style={{ padding: "14px 16px", borderRight: "1px solid var(--fog)",
              borderBottom: "1px solid var(--fog)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.1em",
                textTransform: "uppercase", color: "var(--fg2)" }}>{o.sub}</div>
              <div style={{ fontWeight: 600, fontSize: 15, margin: "4px 0 10px", letterSpacing: "-0.01em" }}>{o.attr}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5 }}>
                <span style={{ color: "var(--ash)" }}>{o.bottom}</span>
                <Icon name="arrowRight" size={13} style={{ color: "var(--signal)", flex: "0 0 auto" }} />
                <span style={{ color: "var(--ink)", fontWeight: 500 }}>{o.top}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* -------------------------------------------------------------- LENSES */
function LensDiagram({ id, active }) {
  // structural, hairline diagrams — not decorative illustration
  const ink = "var(--ink)", sig = "var(--signal)";
  const common = { width: "100%", height: 150, viewBox: "0 0 320 150", fill: "none",
    stroke: ink, strokeWidth: 1.5, vectorEffect: "non-scaling-stroke" };
  if (id === "canyon") {
    return (
      <svg {...common}>
        <rect x="14" y="40" width="84" height="70" fill="var(--bone)" />
        <rect x="222" y="40" width="84" height="70" fill="var(--bone)" />
        <line x1="98" y1="110" x2="222" y2="110" stroke="var(--fog)" />
        <line x1="98" y1="40" x2="222" y2="40" stroke={active ? sig : "var(--fog)"} strokeDasharray={active ? "0" : "4 5"} />
        <line x1="160" y1="40" x2="160" y2="110" stroke="var(--fog)" strokeDasharray="2 5" />
      </svg>
    );
  }
  if (id === "airport") {
    return (
      <svg {...common}>
        {[0,1,2,3,4].map((i) => (
          <line key={i} x1="20" y1={36 + i * 20} x2="300" y2={36 + i * 20}
            stroke={i === 2 ? (active ? sig : ink) : "var(--fog)"} strokeWidth={i === 2 ? 2 : 1} />
        ))}
        {active && <polygon points="150,70 168,76 150,82" fill={sig} stroke="none" />}
      </svg>
    );
  }
  // network
  const nodes = [[40,40],[120,30],[200,55],[280,40],[80,110],[170,118],[250,105]];
  return (
    <svg {...common}>
      {nodes.map((a, i) => nodes.slice(i + 1).map((b, j) => (
        <line key={i + "-" + j} x1={a[0]} y1={a[1]} x2={b[0]} y2={b[1]}
          stroke="var(--fog)" strokeWidth="0.75" />
      )))}
      {nodes.map((n, i) => (
        <rect key={i} x={n[0] - 4} y={n[1] - 4} width="8" height="8"
          fill={active && i === 3 ? sig : "var(--bone)"} stroke={active && i === 3 ? sig : ink} />
      ))}
    </svg>
  );
}

function LensSwitcher({ data }) {
  const [active, setActive] = useS2(data[0].id);
  const lens = data.find((l) => l.id === active);
  return (
    <div style={{ display: "grid", gridTemplateColumns: "minmax(0,0.85fr) minmax(0,1.15fr)",
      gap: "clamp(20px,4vw,52px)", alignItems: "start" }} className="lens-grid">
      {/* selector + diagram */}
      <div>
        <div style={{ border: "1px solid var(--ink)" }}>
          {data.map((l, i) => {
            const on = l.id === active;
            return (
              <button key={l.id} onClick={() => setActive(l.id)} className="focus-ring" style={{
                all: "unset", cursor: "pointer", display: "flex", alignItems: "center",
                justifyContent: "space-between", width: "100%", boxSizing: "border-box",
                padding: "14px 16px", borderBottom: i < data.length - 1 ? "1px solid var(--fog)" : "none",
                background: on ? "var(--ink)" : "transparent", color: on ? "var(--paper)" : "var(--ink)",
                transition: "background var(--dur-fast) var(--ease)",
              }}>
                <span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em",
                    color: on ? "rgba(242,240,235,0.55)" : "var(--fg2)", marginRight: 10 }}>0{i + 1}</span>
                  <span style={{ fontWeight: 700, fontSize: 16, letterSpacing: "-0.01em" }}>{l.name}</span>
                </span>
                {on && <Icon name="arrowRight" size={16} />}
              </button>
            );
          })}
        </div>
        <div style={{ border: "1px solid var(--fog)", borderTop: "none", padding: "18px 16px",
          background: "var(--bone)" }}>
          <LensDiagram id={active} active={true} />
        </div>
      </div>

      {/* reading */}
      <div>
        <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic",
          fontSize: "clamp(26px,3.4vw,40px)", lineHeight: 1.08, letterSpacing: 0,
          color: "var(--ink)" }}>{lens.q}</div>
        <p style={{ color: "var(--ash)", fontSize: 17, lineHeight: 1.55, margin: "20px 0 0",
          maxWidth: "46ch" }}>{lens.see}</p>
        <div style={{ borderLeft: "3px solid var(--signal)", padding: "4px 0 4px 20px",
          marginTop: 24, maxWidth: "46ch" }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
            textTransform: "uppercase", color: "var(--signal)", marginBottom: 8 }}>The shift</div>
          <div style={{ fontSize: 18, lineHeight: 1.45, color: "var(--ink)", fontWeight: 500 }}>{lens.shift}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ReadinessLadders, LensSwitcher });