/* Mindburn Labs — Deck templates: title, section, content, metric, quote, end */

function DeckSlide({ label, ratio = "16/9", children, dark = false }) {
  return (
    <div className="deck-frame" style={{ aspectRatio: ratio, background: dark ? "var(--ink)" : "var(--surface)", color: dark ? "var(--ink-inverse)" : "var(--ink)", position: "relative", overflow: "hidden" }}>
      <div className="deck-frame__label">{label}</div>
      {children}
    </div>
  );
}

function SlideTitle() {
  return (
    <DeckSlide label="01 · TITLE" dark>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(240,234,217,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(240,234,217,0.04) 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
      <div style={{ position: "relative", padding: "48px 56px", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ color: "var(--ink-inverse)" }}><Lockup size={32} /></div>
          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>SERIES A · CONFIDENTIAL · 2026</span>
        </div>
        <div>
          <div className="t-label" style={{ color: "var(--accent)" }}>— HELM BY MINDBURN LABS</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 84, lineHeight: 0.98, letterSpacing: "-0.03em", fontWeight: 400, marginTop: 14 }}>
            The execution<br />boundary for<br />AI agents.
          </h1>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
          <span>mindburn.dev/helm</span>
          <span>01 / 24</span>
        </div>
      </div>
    </DeckSlide>
  );
}

function SlideSection() {
  return (
    <DeckSlide label="02 · SECTION">
      <div style={{ padding: "48px 56px", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div className="t-label">§ 02 — MECHANISM</div>
        <div>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 96, lineHeight: 0.95, letterSpacing: "-0.03em", fontWeight: 400 }}>
            Every action<br />passes through<br /><em style={{ fontStyle: "italic", color: "var(--ink-3)" }}>one clear pipeline.</em>
          </h2>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>MINDBURN LABS</span>
          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>02 / 24</span>
        </div>
      </div>
    </DeckSlide>
  );
}

function SlideContent() {
  const steps = [
    ["01", "Intent", "Agent proposes"],
    ["02", "Match", "Rule hits"],
    ["03", "Check", "Approvals + scope"],
    ["04", "Decide", "Boundary verdict"],
    ["05", "Sign", "Receipt issued"],
  ];
  return (
    <DeckSlide label="03 · CONTENT">
      <div style={{ padding: "40px 48px", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <div className="t-label">HELM PIPELINE</div>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: 36, letterSpacing: "-0.02em", marginTop: 6, lineHeight: 1.05 }}>Five gates. One receipt.</h3>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: "var(--radius-3)", overflow: "hidden" }}>
          {steps.map(([n, t, s], i) => (
            <div key={n} style={{ padding: 18, borderLeft: i === 0 ? 0 : "1px solid var(--line)", minHeight: 140 }}>
              <div className="t-label">{n}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, letterSpacing: "-0.01em", marginTop: 6, lineHeight: 1 }}>{t}</div>
              <div className="t-caption" style={{ marginTop: 4 }}>{s}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
          <span>HELM BY MINDBURN LABS</span>
          <span>03 / 24</span>
        </div>
      </div>
    </DeckSlide>
  );
}

function SlideMetric() {
  return (
    <DeckSlide label="04 · METRIC">
      <div style={{ padding: "40px 48px", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <div className="t-label">DEPLOYED FLEET · Q1 2026</div>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "-0.01em", marginTop: 4 }}>Scale, at the boundary.</h3>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
          {[
            { v: "128M", l: "ACTIONS / WEEK", d: "+6.2% WoW" },
            { v: "3.4K", l: "BLOCKS / DAY", d: "fail-closed" },
            { v: "4ms", l: "P50 LATENCY", d: "in-region" },
          ].map((s, i) => (
            <div key={s.l} style={{ padding: "24px 20px", borderLeft: i === 0 ? 0 : "1px solid var(--line)" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 84, letterSpacing: "-0.03em", lineHeight: 0.95, fontVariantNumeric: "tabular-nums" }}>{s.v}</div>
              <div className="t-label" style={{ marginTop: 10 }}>{s.l}</div>
              <div className="t-mono-xs" style={{ color: "var(--ink-3)", marginTop: 2 }}>{s.d}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
          <span>MINDBURN LABS</span>
          <span>04 / 24</span>
        </div>
      </div>
    </DeckSlide>
  );
}

function SlideQuote() {
  return (
    <DeckSlide label="05 · QUOTE">
      <div style={{ padding: "48px 56px", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div className="t-label">— A CUSTOMER, ON THE RECORD</div>
        <blockquote style={{ fontFamily: "var(--font-display)", fontSize: 42, lineHeight: 1.12, letterSpacing: "-0.02em", fontWeight: 400 }}>
          <span style={{ color: "var(--accent)", marginRight: 6 }}>“</span>
          It's the only piece of our agent stack our auditors <em style={{ fontStyle: "italic", color: "var(--ink-3)" }}>actually understand.</em>
          <span style={{ color: "var(--accent)", marginLeft: 4 }}>”</span>
        </blockquote>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>Priya Varma</div>
            <div className="t-caption">Head of AI Risk · Tier-1 bank</div>
          </div>
          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>05 / 24</span>
        </div>
      </div>
    </DeckSlide>
  );
}

function SlideEnd() {
  return (
    <DeckSlide label="06 · END" dark>
      <div style={{ padding: "56px 56px", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div style={{ color: "var(--ink-inverse)" }}><Lockup size={40} /></div>
        <div>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 72, letterSpacing: "-0.03em", lineHeight: 1, fontWeight: 400 }}>
            Thank you.
          </h2>
          <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, borderTop: "1px solid var(--line)", paddingTop: 14 }}>
            <div>
              <div className="t-label">CONTACT</div>
              <div className="t-mono" style={{ marginTop: 4 }}>founders@mindburn.dev</div>
            </div>
            <div>
              <div className="t-label">CODE</div>
              <div className="t-mono" style={{ marginTop: 4 }}>github.com/mindburn/helm</div>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
          <span>MINDBURN LABS · 2026</span>
          <span>24 / 24</span>
        </div>
      </div>
    </DeckSlide>
  );
}

function DeckSection() {
  return (
    <section className="ds-section" id="deck">
      <div className="ds-section__head">
        <div className="ds-section__num">05 · Deck templates</div>
        <div>
          <h2 className="ds-section__title">Presentation layer.</h2>
          <p className="ds-section__lead">Six template slides — title, section, content, metric, quote, end — built from the same tokens. Works in dark (default for decks) or light.</p>
        </div>
      </div>
      <div className="ds-section__body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
        <SlideTitle />
        <SlideSection />
        <SlideContent />
        <SlideMetric />
        <SlideQuote />
        <SlideEnd />
      </div>
    </section>
  );
}

Object.assign(window, { DeckSection });