// brandbook.jsx — Lemon-AID brand standards (inner page)
// Reuses SiteChrome / DB_PAL / dbStyles from direction-b.jsx (window globals).

const BB = DB_PAL;
const bbs = dbStyles;

function LemonMark({ size = 96, ring = BB.accent, flesh = "#f4e689" }) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" style={{ width: size, height: size, display: "block" }}>
      <circle cx="12" cy="12" r="11" fill={ring} />
      <circle cx="12" cy="12" r="9" fill={flesh} />
      <g stroke={ring} strokeWidth="1.2" strokeLinecap="round">
        <line x1="12" y1="4" x2="12" y2="20" />
        <line x1="4" y1="12" x2="20" y2="12" />
        <line x1="6.3" y1="6.3" x2="17.7" y2="17.7" />
        <line x1="17.7" y1="6.3" x2="6.3" y2="17.7" />
      </g>
      <circle cx="12" cy="12" r="1.6" fill={ring} />
    </svg>
  );
}

function BB_Hero() {
  return (
    <section style={{ padding: "72px 48px 56px" }}>
      <div style={{ ...bbs.label, color: BB.mute, marginBottom: 8 }}>
        BRAND STANDARDS / VERSION 1.0 / MAY 2026
      </div>
      <h1 style={{ ...bbs.display, fontSize: 120, margin: "0 0 28px", lineHeight: .92 }}>
        The brand,<br/>specified.
      </h1>
      <p style={{ fontSize: 19, lineHeight: 1.5, maxWidth: 620, color: BB.ink }}>
        Every mark, color, and sentence Lemon-AID uses, documented for partners,
        vendors, and anyone who has been entrusted with the wordmark. Adherence
        is appreciated. Deviation is noticed.
      </p>
    </section>
  );
}

function BB_Logo() {
  return (
    <section style={{ padding: "72px 48px", borderTop: `1px solid ${BB.ink}` }}>
      <div style={{ ...bbs.label, color: BB.mute, marginBottom: 8 }}>01 — THE WORDMARK</div>
      <h2 style={{ ...bbs.display, fontSize: 56, margin: "0 0 40px" }}>Lemon-AID.</h2>
      <div style={{ border: `1px solid ${BB.ink}`, background: BB.paper, padding: "72px 48px", textAlign: "center", position: "relative" }}>
        <div style={{ ...bbs.display, fontSize: "clamp(48px, 12vw, 140px)", letterSpacing: "-.05em", display: "inline-flex", alignItems: "baseline" }}>
          Lemon-AID
          <span style={{ width: ".18em", height: ".18em", marginLeft: ".02em" }}>
            <LemonMark size="100%" />
          </span>
        </div>
        <div style={{ position: "absolute", bottom: 16, left: 16, ...bbs.label, fontSize: 9, color: BB.mute }}>
          PRIMARY LOCKUP · INTER BOLD · LEMON-SLICE PERIOD
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 16 }}>
        {[
          ["Hyphen, always", "It is \u201CLemon-AID,\u201D never \u201CLemonAID\u201D or \u201CLemon Aid.\u201D The hyphen is load-bearing."],
          ["The slice is the period", "The lemon-slice mark terminates the wordmark in the footer lockup. Elsewhere, a normal period is acceptable."],
          ["Never abbreviate", "Do not write \u201CL-AID,\u201D \u201CLA,\u201D or \u201Cthe stand\u201D in any official capacity."],
        ].map(([t, b]) => (
          <div key={t} style={{ border: `1px solid ${BB.ink}`, padding: 24, background: BB.bg }}>
            <div style={{ ...bbs.display, fontSize: 20, marginBottom: 10 }}>{t}</div>
            <div style={{ fontSize: 14, color: BB.mute, lineHeight: 1.5 }}>{b}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function BB_Mark() {
  return (
    <section style={{ padding: "72px 48px", background: BB.ink, color: BB.bg, borderTop: `1px solid ${BB.ink}` }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{ ...bbs.label, color: BB.accent, marginBottom: 8 }}>02 — THE MARK</div>
          <h2 style={{ ...bbs.display, fontSize: 56, margin: "0 0 24px" }}>The lemon slice.</h2>
          <p style={{ fontSize: 17, lineHeight: 1.5, opacity: .8, maxWidth: 460, margin: "0 0 24px" }}>
            A circular cross-section of a lemon, reduced to its essential
            geometry: rind, flesh, segments, pith. It reads as a period at small
            sizes and as a logo at large ones. That is the entire point.
          </p>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <tbody>
            {[
              ["MINIMUM SIZE", "16 px"],
              ["CLEAR SPACE", "½ × diameter, all sides"],
              ["FILL", "Mustard ring, pale flesh"],
              ["FORMAT", "Inline SVG, scalable"],
            ].map(([k, v]) => (
              <tr key={k} style={{ borderTop: `1px solid ${BB.bg}22` }}>
                <td style={{ ...bbs.label, color: BB.accent, padding: "12px 0", width: 160 }}>{k}</td>
                <td style={{ padding: "12px 0", ...bbs.mono }}>{v}</td>
              </tr>
            ))}
            </tbody>
          </table>
        </div>
        <div style={{ display: "grid", placeItems: "center", padding: 40, background: "#1a1a1a", border: `1px solid ${BB.bg}22`, position: "relative" }}>
          {/* clear-space diagram */}
          <div style={{ position: "relative", padding: 64 }}>
            <div style={{ position: "absolute", inset: 0, border: `1px dashed ${BB.bg}44` }} />
            <LemonMark size={140} />
          </div>
          <div style={{ position: "absolute", bottom: 12, left: 12, ...bbs.label, fontSize: 9, color: BB.accent }}>
            CLEAR SPACE = ½ DIAMETER
          </div>
        </div>
      </div>
    </section>
  );
}

function BB_Color() {
  const swatches = [
    ["Mustard", BB.accent, "#E8D547", "Accent. Highlights, the mark, status-open.", BB.ink],
    ["Ink", BB.ink, "#0A0A0A", "Primary text, rules, dark sections.", BB.bg],
    ["Paper", BB.bg, "#FAFAF7", "Page background. Warm off-white.", BB.ink],
    ["Card", "#FFFFFF", "#FFFFFF", "Raised surfaces, product cards.", BB.ink],
    ["Lemon flesh", "#F4E689", "#F4E689", "Interior of the mark only.", BB.ink],
    ["Warning red", BB.warm, "#B8413A", "Status-closed dot, ✕ marks. Sparingly.", "#fff"],
  ];
  return (
    <section style={{ padding: "72px 48px", borderTop: `1px solid ${BB.ink}` }}>
      <div style={{ ...bbs.label, color: BB.mute, marginBottom: 8 }}>03 — COLOR</div>
      <h2 style={{ ...bbs.display, fontSize: 56, margin: "0 0 40px" }}>Six values. No more.</h2>
      <div data-product-grid style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {swatches.map((s) => (
          <div key={s[0]} style={{ border: `1px solid ${BB.ink}` }}>
            <div style={{ background: s[1], color: s[4], height: 140, display: "flex", alignItems: "flex-end", padding: 16 }}>
              <span style={{ ...bbs.display, fontSize: 24 }}>{s[0]}</span>
            </div>
            <div style={{ padding: 16, background: BB.paper, borderTop: `1px solid ${BB.ink}` }}>
              <div style={{ ...bbs.mono, fontSize: 14, marginBottom: 6 }}>{s[2]}</div>
              <div style={{ fontSize: 13, color: BB.mute, lineHeight: 1.45 }}>{s[3]}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function BB_Type() {
  return (
    <section style={{ padding: "72px 48px", background: BB.paper, borderTop: `1px solid ${BB.ink}`, borderBottom: `1px solid ${BB.ink}` }}>
      <div style={{ ...bbs.label, color: BB.mute, marginBottom: 8 }}>04 — TYPOGRAPHY</div>
      <h2 style={{ ...bbs.display, fontSize: 56, margin: "0 0 40px" }}>Two typefaces.</h2>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div style={{ border: `1px solid ${BB.ink}`, padding: 32, background: BB.bg }}>
          <div style={{ ...bbs.label, color: BB.mute, marginBottom: 16 }}>DISPLAY & BODY — INTER</div>
          <div style={{ ...bbs.display, fontSize: 80, lineHeight: .9, marginBottom: 8 }}>Aa</div>
          <div style={{ ...bbs.display, fontSize: 28, marginBottom: 16 }}>Hydrate. Heal. Walk on.</div>
          <div style={{ fontSize: 14, color: BB.mute, ...bbs.mono }}>Inter · 400 / 500 / 600 / 700</div>
          <div style={{ fontSize: 15, lineHeight: 1.55, marginTop: 16, color: BB.ink }}>
            Used for everything a customer reads — headlines set tight and bold,
            body set at a comfortable 14–18px.
          </div>
        </div>
        <div style={{ border: `1px solid ${BB.ink}`, padding: 32, background: BB.bg }}>
          <div style={{ ...bbs.label, color: BB.mute, marginBottom: 16 }}>LABELS & DATA — JETBRAINS MONO</div>
          <div style={{ ...bbs.mono, fontSize: 80, lineHeight: .9, marginBottom: 8 }}>Aa</div>
          <div style={{ ...bbs.label, fontSize: 16, marginBottom: 16 }}>LA-001 · SKU · UPPERCASE</div>
          <div style={{ fontSize: 14, color: BB.mute, ...bbs.mono }}>JetBrains Mono · 400 / 500</div>
          <div style={{ fontSize: 15, lineHeight: 1.55, marginTop: 16, color: BB.ink }}>
            Reserved for labels, SKUs, prices, and fine print — always
            uppercase, always letter-spaced. It signals precision.
          </div>
        </div>
      </div>
    </section>
  );
}

function BB_Voice() {
  return (
    <section style={{ padding: "72px 48px", borderTop: `1px solid ${BB.ink}` }}>
      <div style={{ ...bbs.label, color: BB.mute, marginBottom: 8 }}>05 — VOICE & TONE</div>
      <h2 style={{ ...bbs.display, fontSize: 56, margin: "0 0 16px" }}>Deadpan. Always.</h2>
      <p style={{ fontSize: 17, color: BB.mute, maxWidth: 620, margin: "0 0 40px", lineHeight: 1.5 }}>
        Lemon-AID is a serious company. It is run by a ten-year-old, but it does
        not joke about that. The humor lives entirely in the commitment to
        treating a card table like a category leader. Never break character.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div style={{ border: `1px solid ${BB.ink}`, padding: 28, background: BB.paper }}>
          <div style={{ ...bbs.label, color: BB.ink, marginBottom: 16 }}>✓ DO</div>
          {[
            "\u201CA vertically integrated refreshment operation.\u201D",
            "\u201CAddressing an underserved gap in the market.\u201D",
            "\u201CExact change is appreciated.\u201D",
          ].map((t, i) => (
            <div key={i} style={{ fontSize: 16, padding: "12px 0", borderTop: `1px solid ${BB.faint}`, lineHeight: 1.4 }}>{t}</div>
          ))}
        </div>
        <div style={{ border: `1px solid ${BB.ink}`, padding: 28, background: BB.paper }}>
          <div style={{ ...bbs.label, color: BB.warm, marginBottom: 16 }}>✕ DON'T</div>
          {[
            "\u201CCome get your yummy lemonade!! \uD83C\uDF4B\u201D",
            "\u201CSooo cute, my kid's little stand <3\u201D",
            "\u201CBest lemonade EVER, you guys!\u201D",
          ].map((t, i) => (
            <div key={i} style={{ fontSize: 16, padding: "12px 0", borderTop: `1px solid ${BB.faint}`, lineHeight: 1.4, color: BB.mute }}>{t}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BB_Misuse() {
  const dont = [
    ["Don't add emoji", "The wordmark and the mark stand alone. No fruit emoji, no sparkles, no sun."],
    ["Don't rotate the slice", "The mark is presented upright. It is a logo, not a wheel."],
    ["Don't recolor", "The ring is mustard. It is not pink, neon, or rainbow."],
    ["Don't call it cute", "In writing, in captions, in conversation. This is non-negotiable."],
    ["Don't stretch", "Maintain aspect ratio. A squashed lemon helps no one."],
    ["Don't add a third drink", "The line is lemonade, water, first aid. It is complete."],
  ];
  return (
    <section style={{ padding: "72px 48px", background: BB.paper, borderTop: `1px solid ${BB.ink}` }}>
      <div style={{ ...bbs.label, color: BB.mute, marginBottom: 8 }}>06 — MISUSE</div>
      <h2 style={{ ...bbs.display, fontSize: 56, margin: "0 0 40px" }}>Please don't.</h2>
      <div data-product-grid style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: `1px solid ${BB.ink}` }}>
        {dont.map((d, i) => (
          <div key={i} style={{
            padding: 28, background: BB.bg,
            borderRight: (i % 3 !== 2) ? `1px solid ${BB.faint}` : "none",
            borderBottom: i < 3 ? `1px solid ${BB.faint}` : "none",
          }}>
            <div style={{ ...bbs.label, color: BB.warm, marginBottom: 12 }}>✕ {String(i + 1).padStart(2, "0")}</div>
            <div style={{ ...bbs.display, fontSize: 22, marginBottom: 10 }}>{d[0]}</div>
            <div style={{ fontSize: 14, color: BB.mute, lineHeight: 1.5 }}>{d[1]}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function BB_Assets() {
  return (
    <section style={{ padding: "96px 48px", borderTop: `1px solid ${BB.ink}`, textAlign: "center" }}>
      <h2 style={{ ...bbs.display, fontSize: 64, margin: "0 0 20px" }}>
        Need the assets?
      </h2>
      <p style={{ fontSize: 17, color: BB.mute, maxWidth: 520, margin: "0 auto 12px" }}>
        Brand assets are not distributed digitally. Request them in person and
        the founder will consider it. Bring exact change.
      </p>
      <p style={{ ...bbs.label, fontSize: 11, color: BB.mute }}>
        Corner of Birchway and Burlwood · Winston-Salem, NC
      </p>
    </section>
  );
}

function BrandBookPage({ statusOverride }) {
  return (
    <SiteChrome statusOverride={statusOverride} activeNav="brandbook">
      <BB_Hero />
      <BB_Logo />
      <BB_Mark />
      <BB_Color />
      <BB_Type />
      <BB_Voice />
      <BB_Misuse />
      <BB_Assets />
    </SiteChrome>
  );
}

window.BrandBookPage = BrandBookPage;