/* global React, Icon, Eyebrow */
/* =====================================================================
   The Sounding Line — depth gauge (persistent rail) + terrain map
   ===================================================================== */
const DEPTH_VAL = { shallow: 1, mid: 2, deep: 3, bedrock: 4 };

/* ---- Persistent left rail ----------------------------------------- */
function StrataGauge({ stops, index, onGo, onMap, compact }) {
  if (compact) {
    return (
      <div style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 40,
        background: "var(--surface)", borderBottom: "1px solid var(--fog)",
        display: "flex", alignItems: "center", gap: 14, padding: "10px 16px" }}>
        <button onClick={onMap} className="focus-ring" style={railBtn}>
          <Icon name="layers" size={16} />
        </button>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em",
          color: "var(--fg2)" }}>
          {stops[index].coord}<span style={{ opacity: 0.4 }}> / 09</span>
        </div>
        <div style={{ flex: 1, height: 2, background: "var(--fog)", position: "relative" }}>
          <div style={{ position: "absolute", left: 0, top: 0, bottom: 0,
            width: `${(index / (stops.length - 1)) * 100}%`, background: "var(--signal)" }} />
        </div>
        <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 13,
          letterSpacing: "-0.01em" }}>{stops[index].name}</div>
      </div>
    );
  }

  const RAIL_W = 232;
  return (
    <nav aria-label="Descent" style={{
      position: "fixed", top: 0, left: 0, bottom: 0, width: RAIL_W, zIndex: 40,
      background: "var(--surface)", borderRight: "1px solid var(--ink)",
      display: "flex", flexDirection: "column", padding: "26px 0 0",
    }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "var(--ink)" }} />

      {/* header */}
      <div style={{ padding: "0 22px 18px" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em",
          color: "var(--fg2)", textTransform: "uppercase" }}>The Sounding Line</div>
        <div style={{ fontFamily: "var(--font-sans)", fontWeight: 900, fontSize: 15,
          letterSpacing: "-0.02em", marginTop: 4 }}>A strategic descent</div>
      </div>
      <div style={{ height: 1, background: "var(--fog)", margin: "0 0 4px" }} />

      {/* strata list */}
      <div style={{ flex: 1, overflowY: "auto", padding: "8px 0" }}>
        {stops.map((s, i) => {
          const active = i === index;
          const past = i < index;
          const indent = 10 + DEPTH_VAL[s.depth] * 12;
          return (
            <button key={s.id} onClick={() => onGo(i)} className="focus-ring"
              style={{
                all: "unset", cursor: "pointer", display: "block", width: "100%",
                boxSizing: "border-box", padding: "9px 22px 9px 0", position: "relative",
              }}>
              {/* sounding line + node */}
              <div style={{ position: "absolute", left: indent, top: 0, bottom: 0,
                display: "flex", alignItems: "center" }}>
                <span style={{
                  width: active ? 11 : 7, height: active ? 11 : 7,
                  background: active ? "var(--signal)" : past ? "var(--ink)" : "var(--surface)",
                  border: `1.5px solid ${active ? "var(--signal)" : past ? "var(--ink)" : "var(--fog)"}`,
                  borderRadius: 0, transition: "all var(--dur-fast) var(--ease)",
                }} />
              </div>
              {/* connector tick for active */}
              {active && <div style={{ position: "absolute", left: indent + 13, top: "50%",
                width: 10, height: 1.5, background: "var(--signal)", transform: "translateY(-50%)" }} />}
              <div style={{ paddingLeft: indent + 30 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em",
                  color: active ? "var(--signal)" : "var(--fg2)" }}>
                  {s.coord}<span style={{ opacity: 0.5, marginLeft: 6 }}>{s.band}</span>
                </div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.2,
                  marginTop: 3, fontWeight: active ? 700 : 500,
                  color: active ? "var(--ink)" : past ? "var(--ink)" : "var(--ash)",
                  letterSpacing: "-0.01em" }}>{s.name}</div>
              </div>
            </button>
          );
        })}
      </div>

      {/* footer readout + map */}
      <div style={{ borderTop: "1px solid var(--fog)", padding: "14px 22px 18px" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em",
          color: "var(--fg2)", textTransform: "uppercase", marginBottom: 12 }}>
          Depth {stops[index].coord} / 09 · {stops[index].band}
        </div>
        <button onClick={onMap} className="focus-ring" style={{
          all: "unset", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em",
          textTransform: "uppercase", color: "var(--ink)", whiteSpace: "nowrap",
          border: "1px solid var(--ink)", padding: "9px 12px", width: "100%",
          boxSizing: "border-box",
        }}>
          <Icon name="layers" size={14} /> Terrain map
        </button>
      </div>
    </nav>
  );
}
const railBtn = { all: "unset", cursor: "pointer", display: "inline-flex",
  alignItems: "center", justifyContent: "center", width: 34, height: 34,
  border: "1px solid var(--ink)", color: "var(--ink)" };

/* ---- Terrain map overlay ------------------------------------------ */
function TerrainMap({ stops, index, onGo, onClose }) {
  const maxD = 4;
  return (
    <div role="dialog" aria-label="Terrain map" style={{
      position: "fixed", inset: 0, zIndex: 80, background: "var(--surface)",
      display: "flex", flexDirection: "column", animation: "sl-fade var(--dur) var(--ease)",
    }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "var(--ink)" }} />
      {/* header */}
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between",
        padding: "clamp(28px,5vh,52px) clamp(24px,5vw,72px) 22px" }}>
        <div>
          <Eyebrow style={{ color: "var(--signal)" }}>The terrain · nine strata</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 900,
            fontSize: "clamp(28px,4vw,52px)", letterSpacing: "-0.03em", lineHeight: 1.0,
            margin: "16px 0 0", maxWidth: "16ch" }}>
            Surface symptoms, hidden structure, strategic leverage.
          </h2>
          <p style={{ color: "var(--ash)", marginTop: 14, fontSize: 16, maxWidth: "52ch" }}>
            The descent runs deepest at the crux, then resurfaces carrying what it found.
            Choose any layer to dive in.
          </p>
        </div>
        <button onClick={onClose} className="focus-ring" style={{ ...railBtn, width: 44, height: 44 }}
          aria-label="Close map">
          <Icon name="x" size={20} />
        </button>
      </div>

      {/* strata cross-section */}
      <div style={{ flex: 1, overflowY: "auto", padding: "0 clamp(24px,5vw,72px) 40px" }}>
        <div style={{ borderTop: "1px solid var(--ink)" }}>
          {stops.map((s, i) => {
            const active = i === index;
            const depth = DEPTH_VAL[s.depth];
            const bedrock = s.depth === "bedrock";
            return (
              <button key={s.id} onClick={() => onGo(i)} className="focus-ring terrain-row"
                style={{
                  all: "unset", cursor: "pointer", display: "grid",
                  gridTemplateColumns: "92px 64px 1fr auto", alignItems: "center", gap: 0,
                  width: "100%", boxSizing: "border-box", padding: "0",
                  borderBottom: "1px solid var(--fog)",
                  background: bedrock ? "var(--ink)" : "transparent",
                  color: bedrock ? "var(--paper)" : "var(--ink)",
                }}>
                {/* coordinate */}
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.1em",
                  padding: "22px 0 22px 4px", color: active ? "var(--signal)" : (bedrock ? "rgba(242,240,235,0.7)" : "var(--fg2)") }}>
                  {s.coord}
                </div>
                {/* depth ticks */}
                <div style={{ display: "flex", gap: 3, padding: "0 8px" }} aria-hidden>
                  {[1,2,3,4].map((d) => (
                    <span key={d} style={{ width: 3, height: 8 + d * 5, alignSelf: "flex-end",
                      background: d <= depth ? (bedrock ? "var(--signal)" : "var(--ink)") : (bedrock ? "rgba(242,240,235,0.18)" : "var(--fog)") }} />
                  ))}
                </div>
                {/* name + question */}
                <div style={{ padding: "18px 12px" }}>
                  <div style={{ fontFamily: "var(--font-sans)", fontWeight: bedrock ? 900 : 700,
                    fontSize: "clamp(18px,2vw,26px)", letterSpacing: "-0.02em", lineHeight: 1.05 }}>
                    {s.name}
                  </div>
                  <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic",
                    fontSize: 16, marginTop: 4,
                    color: bedrock ? "rgba(242,240,235,0.75)" : "var(--ash)" }}>{s.question}</div>
                </div>
                {/* marker */}
                <div style={{ padding: "0 6px 0 12px", display: "flex", alignItems: "center", gap: 12 }}>
                  {active && <span style={{ fontFamily: "var(--font-mono)", fontSize: 10,
                    letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--signal)" }}>You are here</span>}
                  <Icon name="arrowRight" size={18} style={{ opacity: 0.7 }} />
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StrataGauge, TerrainMap });