/* global React, Icon, Eyebrow, Serif, useCapture, readStore */
/* =====================================================================
   Interactions · set 3 — Crux+Pathway (07), Identity (08), Pitch (09)
   ===================================================================== */
const { useState: useS3, useEffect: useE3 } = React;

/* --------------------------------------------------- CRUX + PATHWAY (inverse) */
function CruxRanking({ cruxes, pathway, conversionOptions }) {
  const [revealed, setRevealed] = useS3(false);
  const [showMech, setShowMech] = useS3(false);
  const [openGate, setOpenGate] = useS3(null);
  const [conv, setConv] = useCapture("text:conversion", "");
  const winner = cruxes.find((c) => c.winner);
  const rest = cruxes.filter((c) => !c.winner);
  const soft = "rgba(242,240,235,0.62)";
  const faint = "rgba(242,240,235,0.22)";

  return (
    <div>
      {/* the seven, converging */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
          textTransform: "uppercase", color: soft }}>Seven candidates weighed</span>
        <div style={{ flex: 1, height: 1, background: faint }} />
        {!revealed && (
          <button onClick={() => setRevealed(true)} className="focus-ring" style={{
            all: "unset", cursor: "pointer", fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--paper)",
            border: "1px solid var(--paper)", padding: "8px 14px", display: "flex",
            alignItems: "center", gap: 8 }}>
            Converge <Icon name="arrowDown" size={13} />
          </button>
        )}
      </div>

      {/* winner */}
      <div style={{ border: "1px solid var(--signal)", padding: "22px 24px",
        background: "rgba(214,74,31,0.10)",
        opacity: revealed ? 1 : 0.35, transition: "opacity var(--dur-slow) var(--ease)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.12em",
            color: "var(--signal)", whiteSpace: "nowrap" }}>RANK 01 · THE CRUX</span>
        </div>
        <div style={{ fontFamily: "var(--font-sans)", fontWeight: 900,
          fontSize: "clamp(26px,3.2vw,40px)", letterSpacing: "-0.025em", lineHeight: 1.04,
          margin: "12px 0 10px", color: "var(--paper)" }}>{winner.title}</div>
        <div style={{ fontSize: 16, lineHeight: 1.5, color: soft, maxWidth: "60ch" }}>{winner.note}</div>
      </div>

      {/* the also-ran ranking */}
      <div style={{ display: "grid", gridTemplateRows: revealed ? "1fr" : "0fr",
        transition: "grid-template-rows var(--dur-slow) var(--ease)" }}>
        <div style={{ overflow: "hidden", minHeight: 0 }}>
          <div style={{ marginTop: 16, borderTop: `1px solid ${faint}` }}>
            {rest.map((c) => (
              <div key={c.rank} style={{ display: "flex", gap: 16, alignItems: "baseline",
                padding: "12px 2px", borderBottom: `1px solid ${faint}` }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: soft,
                  flex: "0 0 28px" }}>0{c.rank}</span>
                <span style={{ fontWeight: 600, fontSize: 15.5, color: "var(--paper)",
                  flex: "0 0 auto", letterSpacing: "-0.01em" }}>{c.title}</span>
                <span style={{ fontSize: 14, color: soft, lineHeight: 1.4 }}>{c.note}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* mechanism reveal */}
      {revealed && (
        <div style={{ marginTop: 26 }}>
          {!showMech ? (
            <button onClick={() => setShowMech(true)} className="focus-ring" style={{
              all: "unset", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 10,
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
              color: "var(--paper)", border: "1px solid var(--signal)", padding: "11px 16px",
              background: "var(--signal)" }}>
              Reveal the mechanism <Icon name="arrowRight" size={14} />
            </button>
          ) : (
            <div>
              <Eyebrow style={{ color: "var(--signal)", marginBottom: 16 }}>The conversion mechanism · the pilot pathway</Eyebrow>
              <div style={{ display: "flex", alignItems: "stretch", flexWrap: "wrap", gap: 0,
                border: `1px solid ${faint}` }}>
                {pathway.map((p, i) => {
                  const on = openGate === i;
                  return (
                    <button key={i} onClick={() => setOpenGate(on ? null : i)} className="focus-ring"
                      style={{
                        all: "unset", cursor: "pointer", flex: "1 1 150px", minWidth: 0,
                        padding: "14px 14px 16px", boxSizing: "border-box",
                        borderRight: i < pathway.length - 1 ? `1px solid ${faint}` : "none",
                        background: on ? "rgba(214,74,31,0.14)" : "transparent",
                      }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--signal)" }}>0{i + 1}</span>
                        {i < pathway.length - 1 && <Icon name="arrowRight" size={12} style={{ color: soft, marginLeft: "auto" }} />}
                      </div>
                      <div style={{ fontWeight: 700, fontSize: 14.5, color: "var(--paper)",
                        letterSpacing: "-0.01em", lineHeight: 1.15 }}>{p.step}</div>
                      <div style={{ fontSize: 12.5, color: soft, lineHeight: 1.4, marginTop: 8,
                        maxHeight: on ? 120 : 0, overflow: "hidden",
                        opacity: on ? 1 : 0, transition: "all var(--dur) var(--ease)" }}>{p.note}</div>
                    </button>
                  );
                })}
              </div>

              {/* capture */}
              <div style={{ marginTop: 26 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em",
                  textTransform: "uppercase", color: "var(--signal)", marginBottom: 14,
                  display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 18, height: 18, border: "1px solid var(--signal)", display: "inline-flex",
                    alignItems: "center", justifyContent: "center" }}><Icon name="arrowRight" size={11} /></span>
                  Capture · where is your biggest conversion failure?
                </div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {conversionOptions.map((o) => {
                    const on = conv === o;
                    return (
                      <button key={o} onClick={() => setConv(on ? "" : o)} className="focus-ring" style={{
                        all: "unset", cursor: "pointer", padding: "9px 14px", fontSize: 14,
                        fontFamily: "var(--font-mono)", letterSpacing: "0.02em",
                        border: `1px solid ${on ? "var(--signal)" : faint}`,
                        background: on ? "var(--signal)" : "transparent",
                        color: on ? "var(--paper)" : soft,
                      }}>{o}</button>
                    );
                  })}
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/* ------------------------------------------------------------- IDENTITY */
function IdentityInstall({ identity, behaviors }) {
  const [done, setDone] = useCapture("text:commitments", []);
  const toggle = (b) => {
    const has = done.includes(b);
    setDone(has ? done.filter((x) => x !== b) : [...done, b]);
  };
  return (
    <div>
      {/* the new lens transform */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: "clamp(16px,4vw,48px)",
        alignItems: "center", border: "1px solid var(--ink)", padding: "26px clamp(20px,4vw,40px)",
        marginBottom: 32 }} className="lens-transform">
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
            textTransform: "uppercase", color: "var(--fg2)", marginBottom: 10 }}>Most people see</div>
          <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: "clamp(18px,2.2vw,26px)",
            letterSpacing: "-0.02em", color: "var(--ash)" }}>Startups ↔ Corporations</div>
        </div>
        <Icon name="arrowRight" size={26} style={{ color: "var(--signal)" }} />
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
            textTransform: "uppercase", color: "var(--signal)", marginBottom: 10 }}>You now see</div>
          <div style={{ fontFamily: "var(--font-sans)", fontWeight: 900, fontSize: "clamp(18px,2.2vw,26px)",
            letterSpacing: "-0.02em", color: "var(--ink)" }}>Problems → Pilots → Adoption</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))",
        gap: "clamp(24px,4vw,48px)" }}>
        {/* identity statements */}
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
            textTransform: "uppercase", color: "var(--fg2)", marginBottom: 16 }}>Identity</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {identity.map((s, i) => (
              <div key={i} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                <Serif style={{ fontSize: 22, color: "var(--signal)", flex: "0 0 auto" }}>I</Serif>
                <span style={{ fontSize: 17, lineHeight: 1.45, color: "var(--ink)" }}>{s}</span>
              </div>
            ))}
          </div>
        </div>

        {/* behaviors checklist (capture) */}
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em",
            textTransform: "uppercase", color: "var(--signal)", marginBottom: 16,
            display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 18, height: 18, border: "1px solid var(--signal)", display: "inline-flex",
              alignItems: "center", justifyContent: "center" }}><Icon name="arrowRight" size={11} /></span>
            Capture · commit to a behavior
          </div>
          <div style={{ border: "1px solid var(--ink)" }}>
            {behaviors.map((b, i) => {
              const on = done.includes(b);
              return (
                <button key={i} onClick={() => toggle(b)} className="focus-ring" style={{
                  all: "unset", cursor: "pointer", display: "flex", gap: 14, alignItems: "flex-start",
                  width: "100%", boxSizing: "border-box", padding: "15px 16px",
                  borderBottom: i < behaviors.length - 1 ? "1px solid var(--fog)" : "none",
                  background: on ? "var(--bone)" : "transparent",
                }}>
                  <span style={{ width: 20, height: 20, border: `1.5px solid ${on ? "var(--signal)" : "var(--ink)"}`,
                    background: on ? "var(--signal)" : "transparent", color: "var(--paper)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto",
                    marginTop: 1 }}>{on && <Icon name="check" size={13} />}</span>
                  <span style={{ fontSize: 15, lineHeight: 1.4, color: "var(--ink)" }}>{b}</span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

/* --------------------------------------------------------------- PITCH */
function PitchBuilder({ pitches, pixar }) {
  const [fmt, setFmt] = useS3(1);
  const [beat, setBeat] = useS3(0);
  const p = pitches[fmt];
  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,0.7fr) minmax(0,1.3fr)",
        gap: "clamp(20px,4vw,52px)", alignItems: "start" }} className="pitch-grid">
        {/* format selector */}
        <div style={{ border: "1px solid var(--ink)" }}>
          {pitches.map((pp, i) => {
            const on = i === fmt;
            return (
              <button key={i} onClick={() => setFmt(i)} className="focus-ring" style={{
                all: "unset", cursor: "pointer", display: "flex", justifyContent: "space-between",
                alignItems: "center", width: "100%", boxSizing: "border-box", padding: "12px 15px",
                borderBottom: i < pitches.length - 1 ? "1px solid var(--fog)" : "none",
                background: on ? "var(--ink)" : "transparent", color: on ? "var(--paper)" : "var(--ink)",
              }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em",
                  textTransform: "uppercase", whiteSpace: "nowrap" }}>{pp.fmt}</span>
                {on && <Icon name="arrowRight" size={14} />}
              </button>
            );
          })}
        </div>
        {/* the pitch */}
        <div style={{ minHeight: 150, display: "flex", alignItems: "center",
          borderLeft: "3px solid var(--signal)", paddingLeft: "clamp(20px,3vw,36px)" }}>
          <div style={{ fontFamily: "var(--font-sans)", fontWeight: 900,
            fontSize: "clamp(26px,3.8vw,48px)", letterSpacing: "-0.03em", lineHeight: 1.05,
            color: "var(--ink)" }}>{p.body}</div>
        </div>
      </div>

      {/* pixar step-through */}
      <div style={{ marginTop: 40, borderTop: "1px solid var(--fog)", paddingTop: 24 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
            textTransform: "uppercase", color: "var(--fg2)" }}>The story in six beats · {beat + 1} / 6</div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => setBeat(Math.max(0, beat - 1))} className="focus-ring"
              disabled={beat === 0} style={pitchNav(beat === 0)}><Icon name="arrowLeft" size={15} /></button>
            <button onClick={() => setBeat(Math.min(5, beat + 1))} className="focus-ring"
              disabled={beat === 5} style={pitchNav(beat === 5)}><Icon name="arrowRight" size={15} /></button>
          </div>
        </div>
        <div style={{ display: "flex", gap: 4, marginBottom: 18 }}>
          {pixar.map((_, i) => (
            <div key={i} onClick={() => setBeat(i)} style={{ flex: 1, height: 3, cursor: "pointer",
              background: i <= beat ? "var(--signal)" : "var(--fog)" }} />
          ))}
        </div>
        <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic",
          fontSize: "clamp(22px,2.8vw,32px)", lineHeight: 1.25, color: "var(--ink)",
          maxWidth: "30ch", minHeight: 100 }}>{pixar[beat]}</div>
      </div>
    </div>
  );
}
const pitchNav = (dis) => ({ all: "unset", cursor: dis ? "default" : "pointer",
  width: 36, height: 36, border: "1px solid var(--ink)", display: "inline-flex",
  alignItems: "center", justifyContent: "center", color: "var(--ink)", opacity: dis ? 0.3 : 1 });

Object.assign(window, { CruxRanking, IdentityInstall, PitchBuilder });