/* Mindburn Labs — Brand section: marks, lockups, stationery moments */

function BrandSection() {
  return (
    <section className="ds-section" id="brand">
      <div className="ds-section__head">
        <div className="ds-section__num">04 · Brand</div>
        <div>
          <h2 className="ds-section__title">The mark & the wordmark.</h2>
          <p className="ds-section__lead">A threshold drawn as an M. Two uprights, a boundary bar through the middle, anchored with signed dots. The circle is the scope within which HELM operates.</p>
        </div>
      </div>
      <div className="ds-section__body" style={{ display: "flex", flexDirection: "column", gap: 24 }}>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
          <Spec label="Primary mark" code="48 · 24 · 16" flush>
            <div style={{ padding: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 32, minHeight: 220, background: "var(--bg)" }}>
              <MindburnMark size={96} />
              <MindburnMark size={48} />
              <MindburnMark size={24} />
            </div>
          </Spec>
          <Spec label="Wordmark" code="display · fraunces" flush>
            <div style={{ padding: 40, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 220, background: "var(--bg)" }}>
              <Wordmark size={32} />
            </div>
          </Spec>
          <Spec label="Lockup" code="mark + wordmark + tagline" flush>
            <div style={{ padding: 40, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 220, background: "var(--bg)" }}>
              <Lockup size={56} showMeta />
            </div>
          </Spec>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <Spec label="Sub-brand · HELM" code="product lockup" flush>
            <div style={{ padding: 40, display: "flex", alignItems: "center", justifyContent: "center", gap: 24, minHeight: 200, background: "var(--bg)" }}>
              <HelmLockup size={28} />
              <div style={{ width: 1, height: 36, background: "var(--line)" }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <span className="t-label">BY MINDBURN LABS</span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 20, letterSpacing: "-0.01em" }}>The execution boundary</span>
              </div>
            </div>
          </Spec>
          <Spec label="On surfaces" code="bg · surface · inverse" flush>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", minHeight: 200 }}>
              <div style={{ background: "var(--bg)", display: "flex", alignItems: "center", justifyContent: "center" }}><Lockup size={40} /></div>
              <div style={{ background: "var(--surface-sunk)", display: "flex", alignItems: "center", justifyContent: "center" }}><Lockup size={40} /></div>
              <div style={{ background: "var(--ink)", color: "var(--ink-inverse)", display: "flex", alignItems: "center", justifyContent: "center" }}><Lockup size={40} /></div>
            </div>
          </Spec>
        </div>

        <Spec label="Construction · the mark on grid" code="geometry" flush gridded>
          <div style={{ padding: 48, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="320" height="320" viewBox="0 0 40 40">
              <circle cx="20" cy="20" r="19" stroke="var(--ink)" strokeWidth="0.75" fill="none" />
              <path d="M10 28 V13 L20 22 L30 13 V28" stroke="var(--ink)" strokeWidth="1" fill="none" />
              <path d="M7 20 H13 M27 20 H33" stroke="var(--ink)" strokeWidth="1" />
              <circle cx="10" cy="28" r="0.8" fill="var(--ink)" />
              <circle cx="30" cy="28" r="0.8" fill="var(--ink)" />
              {/* construction lines */}
              <line x1="0" y1="20" x2="40" y2="20" stroke="var(--accent)" strokeWidth="0.2" strokeDasharray="0.5 0.5" />
              <line x1="20" y1="0" x2="20" y2="40" stroke="var(--accent)" strokeWidth="0.2" strokeDasharray="0.5 0.5" />
              <line x1="10" y1="0" x2="10" y2="40" stroke="var(--accent)" strokeWidth="0.15" strokeDasharray="0.5 0.5" />
              <line x1="30" y1="0" x2="30" y2="40" stroke="var(--accent)" strokeWidth="0.15" strokeDasharray="0.5 0.5" />
            </svg>
          </div>
        </Spec>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          <Spec label="Voice · one-liners" code="copy">
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                "The execution boundary for AI agents.",
                "Every action passes through one clear pipeline.",
                "Policies live as code. Decisions live as receipts.",
                "If we can't verify, it does not run.",
                "Verifiable. Offline. Forever.",
              ].map((s) => (
                <div key={s} style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em", lineHeight: 1.15, color: "var(--ink)" }}>
                  <span style={{ color: "var(--accent)", marginRight: 10, fontFamily: "var(--font-mono)", fontSize: 11 }}>·</span>
                  {s}
                </div>
              ))}
            </div>
          </Spec>
          <Spec label="Do / Don't" code="usage">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div style={{ padding: 14, background: "var(--ok-soft)", border: "1px solid transparent", borderRadius: "var(--radius-3)" }}>
                <div className="t-label" style={{ color: "var(--ok)" }}>DO</div>
                <ul style={{ margin: "8px 0 0 14px", padding: 0, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
                  <li>Use mono labels for keys, serif for declarations</li>
                  <li>Let the grid breathe — generous gutters</li>
                  <li>Keep one accent per screen</li>
                </ul>
              </div>
              <div style={{ padding: 14, background: "var(--accent-soft)", border: "1px solid transparent", borderRadius: "var(--radius-3)" }}>
                <div className="t-label" style={{ color: "var(--accent)" }}>DON'T</div>
                <ul style={{ margin: "8px 0 0 14px", padding: 0, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
                  <li>Don't gradient the mark or tilt it</li>
                  <li>Don't use ember outside signal roles</li>
                  <li>Don't set serif smaller than 17px</li>
                </ul>
              </div>
            </div>
          </Spec>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BrandSection });