/* Presentation board for OrisTrack v3
 * A static, vertically-stacked board. No pan/zoom.
 * Generous gutters, consistent frame chrome, group labels.
 */

const Frame = ({ label, w, h, children, scale }) => {
  // Each frame has its own outer chrome with a tag label above the artwork
  return (
    <figure style={{
      margin: 0,
      display: "flex",
      flexDirection: "column",
      alignItems: "flex-start",
    }}>
      <figcaption style={{
        fontFamily: "var(--v2-mono)",
        fontSize: 11,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        color: "var(--v2-ink-3)",
        marginBottom: 14,
      }}>{label}</figcaption>
      <div style={{
        width: w,
        height: h,
        background: "var(--v2-paper)",
        border: "1px solid var(--v2-hairline)",
        borderRadius: 8,
        boxShadow: "0 1px 0 rgba(28,34,48,0.04), 0 12px 28px -16px rgba(28,34,48,0.18)",
        overflow: "hidden",
        position: "relative",
      }}>
        {children}
      </div>
    </figure>
  );
};

const SectionHead = ({ index, kicker, title, sub }) => (
  <header style={{
    display: "grid",
    gridTemplateColumns: "60px 1fr",
    columnGap: 24,
    alignItems: "baseline",
    paddingBottom: 24,
    marginBottom: 56,
    borderBottom: "1px solid var(--v2-hairline)",
  }}>
    <div style={{
      fontFamily: "var(--v2-mono)",
      fontSize: 12,
      letterSpacing: "0.14em",
      color: "var(--v2-ink-3)",
    }}>{index}</div>
    <div>
      <div style={{
        fontFamily: "var(--v2-mono)",
        fontSize: 11,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: "var(--v2-ink-3)",
        marginBottom: 10,
      }}>{kicker}</div>
      <h2 style={{
        fontFamily: "var(--v2-serif)",
        fontWeight: 400,
        fontSize: 38,
        letterSpacing: "-0.02em",
        margin: 0,
        lineHeight: 1.1,
        color: "var(--v2-ink)",
      }}>{title}</h2>
      {sub && (
        <p style={{
          marginTop: 14,
          fontSize: 15,
          lineHeight: 1.55,
          color: "var(--v2-ink-2)",
          maxWidth: 720,
        }}>{sub}</p>
      )}
    </div>
  </header>
);

const Board = () => (
  <div className="v2" style={{
    minHeight: "100vh",
    background: "var(--v2-bone)",
    padding: "80px 80px 120px",
    fontFamily: "var(--v2-sans)",
    color: "var(--v2-ink)",
  }}>
    {/* ============== MASTHEAD ============== */}
    <header style={{
      display: "grid",
      gridTemplateColumns: "1fr auto",
      alignItems: "flex-end",
      paddingBottom: 32,
      marginBottom: 72,
      borderBottom: "1px solid var(--v2-ink)",
    }}>
      <div>
        <div style={{
          fontFamily: "var(--v2-mono)",
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--v2-ink-3)",
          marginBottom: 18,
        }}>OrisTrack &nbsp;·&nbsp; concept board &nbsp;·&nbsp; v0.3 research build</div>
        <h1 style={{
          fontFamily: "var(--v2-serif)",
          fontWeight: 400,
          fontSize: 64,
          letterSpacing: "-0.025em",
          lineHeight: 1.04,
          margin: 0,
          color: "var(--v2-ink)",
          maxWidth: 1100,
        }}>
          A standardized digital framework for monitoring embouchure load context in brass players.
        </h1>
      </div>
      <div style={{ textAlign: "right" }}>
        <div style={{
          fontFamily: "var(--v2-mono)",
          fontSize: 11,
          letterSpacing: "0.14em",
          color: "var(--v2-ink-3)",
        }}>25 APR 2026</div>
      </div>
    </header>

    {/* ============== A. SESSION FLOW (mobile) ============== */}
    <SectionHead
      index="A"
      kicker="Session flow · mobile"
      title="One assessment session, end to end."
      sub="Welcome and consent → structured task battery with camera capture → brief self-report → today's results compared to the player's own baseline. Each screen at 390 × 844, the standard mobile artboard."
    />

    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(2, max-content)",
      columnGap: 96,
      rowGap: 96,
      marginBottom: 120,
      justifyContent: "start",
    }}>
      <Frame label="A.01 — Welcome / Session Overview" w={390} h={844}>
        <V2Screen1 />
      </Frame>
      <Frame label="A.02 — Structured Task Battery" w={390} h={844}>
        <V2Screen2 />
      </Frame>
      <Frame label="A.03 — Quick Self-Report" w={390} h={844}>
        <V2Screen3 />
      </Frame>
      <Frame label="A.04 — Today vs. Your Baseline" w={390} h={844}>
        <V2Screen4 />
      </Frame>
    </div>

    {/* ============== B. LONGITUDINAL DASHBOARD ============== */}
    <SectionHead
      index="B"
      kicker="Longitudinal dashboard · desktop"
      title="Within-player monitoring & return-to-play."
      sub="Fourteen sessions across ninety days, each plotted against the player's own baseline band. The dashboard inherits the same card chrome, type ladder, and chart vocabulary as the mobile screens."
    />

    <div style={{ marginBottom: 100 }}>
      <Frame label="B.01 — Monitoring & Return-to-Play" w={1280} h={1280}>
        <V2Screen5 />
      </Frame>
    </div>

    {/* ============== FOOTER ============== */}
    <footer style={{
      paddingTop: 32,
      borderTop: "1px solid var(--v2-hairline)",
      display: "grid",
      gridTemplateColumns: "1fr 1fr 1fr",
      gap: 32,
      fontSize: 12.5,
      lineHeight: 1.55,
      color: "var(--v2-ink-3)",
      fontFamily: "var(--v2-mono)",
      letterSpacing: "0.02em",
    }}>
      <div>
        <div style={{ color: "var(--v2-ink-2)", marginBottom: 6 }}>Conceptual cues</div>
        Player baseline first · Longitudinal tracking · Structured battery · Brief repeated self-report · Camera as candidate proxy · Cautious research-grounded interpretation · Recovery / return-to-play scaffold.
      </div>
      <div>
        <div style={{ color: "var(--v2-ink-2)", marginBottom: 6 }}>Status</div>
        Public concept prototype. Outputs shown here are illustrative, descriptive, and not diagnostic.
      </div>
      <div>
        <div style={{ color: "var(--v2-ink-2)", marginBottom: 6 }}>Roadmap</div>
        Phase 1 — camera + self-report (this prototype) · Phase 2 — sEMG validation overlay · Phase 3 — multi-instrument generalization.
      </div>
    </footer>
  </div>
);

const DirectionCard = () => (
  <div className="v2" style={{
    padding: "44px 56px",
    background: "var(--v2-paper)",
    height: "100%",
    boxSizing: "border-box",
    color: "var(--v2-ink)",
    display: "grid",
    gridTemplateColumns: "1.1fr 1fr",
    gap: 56,
  }}>
    {/* Left */}
    <div>
      <div className="eyebrow" style={{ marginBottom: 12 }}>Design principles</div>
      <h3 style={{
        fontFamily: "var(--v2-serif)",
        fontSize: 28, fontWeight: 400, margin: 0,
        letterSpacing: "-0.015em", lineHeight: 1.2,
      }}>
        A research instrument, not a consumer app.
      </h3>
      <ul className="body" style={{
        margin: "20px 0 0",
        paddingLeft: 0,
        listStyle: "none",
        display: "grid",
        rowGap: 12,
      }}>
        {[
          ["Calm", "Hairline borders, no gradients, no shadows."],
          ["Quiet data", "Charts as thin line work; baseline band always visible."],
          ["Tight ladder", "One H1, one H2, one body, one mono label — applied everywhere."],
          ["Restrained colour", "Two neutrals; teal for state; ochre reserved for attention."],
          ["Honest copy", "Descriptive, not diagnostic. No alarmist language."],
        ].map(([k, v]) => (
          <li key={k} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16 }}>
            <span className="eyebrow">{k}</span>
            <span>{v}</span>
          </li>
        ))}
      </ul>
    </div>

    {/* Right — palette + type */}
    <div>
      <div className="eyebrow" style={{ marginBottom: 12 }}>Palette</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 8 }}>
        {[
          ["paper",  "var(--v2-paper)"],
          ["bone",   "var(--v2-bone)"],
          ["bone-2", "var(--v2-bone-2)"],
          ["ink",    "var(--v2-ink)"],
          ["ink-3",  "var(--v2-ink-3)"],
          ["teal",   "var(--v2-teal)"],
          ["ochre",  "var(--v2-ochre)"],
        ].map(([n, c]) => (
          <div key={n}>
            <div style={{ height: 56, background: c, border: "1px solid var(--v2-hairline-2)", borderRadius: 4 }} />
            <div className="cap" style={{ marginTop: 6, textTransform: "none", letterSpacing: 0, fontSize: 10.5 }}>{n}</div>
          </div>
        ))}
      </div>

      <div className="eyebrow" style={{ marginTop: 32, marginBottom: 12 }}>Type</div>
      <div style={{ fontFamily: "var(--v2-serif)", fontSize: 30, letterSpacing: "-0.015em", lineHeight: 1.1 }}>
        Source Serif 4
      </div>
      <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11.5, marginTop: 4 }}>Editorial — H1, H2, key numerals</div>
      <div style={{ fontFamily: "var(--v2-sans)", fontSize: 18, marginTop: 16 }}>
        Inter
      </div>
      <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11.5, marginTop: 4 }}>UI, body, labels</div>
      <div style={{ fontFamily: "var(--v2-mono)", fontSize: 13, marginTop: 16, letterSpacing: "0.04em" }}>
        JetBrains Mono
      </div>
      <div className="cap" style={{ textTransform: "none", letterSpacing: 0, fontSize: 11.5, marginTop: 4 }}>Data, eyebrows, captions</div>

      <div className="eyebrow" style={{ marginTop: 32, marginBottom: 8 }}>Recurring signature</div>
      <div style={{
        display: "flex", gap: 12, padding: "10px 0",
      }}>
        <div style={{ width: 2, background: "var(--v2-teal)", borderRadius: 1, alignSelf: "stretch" }} />
        <div className="body-sm" style={{ fontSize: 12.5 }}>
          A thin teal vertical rule reappears wherever the system reasserts <em style={{ fontFamily: "var(--v2-serif)" }}>player baseline first</em>.
        </div>
      </div>
    </div>
  </div>
);

window.OrisTrackBoard = Board;