/* FindMyFrag — Manifesto + Colophon.
   /about   — the 200-word thesis. Why this exists. Signed and dated.
   /colophon — the spec sheet. Every font, every color, every rule.
   Both pages are editorial objects, not marketing ones. No images. */

/* global React, FMF */

function Manifesto() {
  return (
    <main>
      {/* Masthead */}
      <section className="container" style={{ paddingTop: 28, paddingBottom: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div className="kicker">Manifesto · why we exist</div>
          <div className="mono body-xs" style={{ color: "var(--ink-mute)" }}>
            Issue 001 · April 2026 · signed
          </div>
        </div>
      </section>
      <hr className="hairline-k" />

      {/* Cover */}
      <section className="container" style={{ padding: "80px 32px 32px" }}>
        <h1 className="display-xxl" style={{ margin: 0, maxWidth: "14ch" }}>
          One honest <span className="fraun-itl">ledger</span>.
        </h1>
      </section>

      {/* Body — 200 words, editorial voice */}
      <section className="container" style={{ padding: "20px 32px 48px" }}>
        <div style={{ maxWidth: "56ch" }}>
          <p className="fraun" style={{ fontSize: 22, lineHeight: 1.55, letterSpacing: "-0.005em", margin: "0 0 22px", color: "var(--ink)" }}>
            We built FindMyFrag because the fragrance hobby deserves one honest ledger. Not an encyclopedia — there are many. Not a review site — there are many. A <span className="fraun-itl">ledger</span>. Signed. Dated. Kept in public. Free.
          </p>
          <p className="body-l" style={{ color: "var(--ink-soft)", margin: "0 0 22px", lineHeight: 1.65 }}>
            Numbers that computed themselves and can be audited by anyone who cares to check the math. Retailers sorted by landed price, trust, and stock — never by commission<Cite n={2} check="independent" />. MSRPs verified against brand-of-record or not shown at all<Cite n={3} check="verified" />. Prices older than six hours marked stale and excluded from rank<Cite n={8} check="verified" />.
          </p>
          <p className="body-l" style={{ color: "var(--ink-soft)", margin: "0 0 22px", lineHeight: 1.65 }}>
            We do not accept retailer payments<Cite n={1} check="placement" />. We do not synthesize urgency<Cite n={5} check="static" />. We do not publish ledgers we have not audited<Cite n={7} check="separated" />. We do not paywall any price-intelligence surface<Cite n={12} check="free" />. When we break one of our {FMF.REFUSALS.length} rules, we say so within 72 hours and record it at <a href="#/breaches" style={{ color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 4 }}>/breaches</a>.
          </p>
          <p className="body-l" style={{ color: "var(--ink-soft)", margin: 0, lineHeight: 1.65 }}>
            We exist because readers deserve one place whose only job is to not be wrong about prices.
          </p>
        </div>
      </section>

      <hr className="hairline" />

      {/* Signed */}
      <section className="container" style={{ padding: "48px 32px 56px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 48 }}>
          {[
            { who: "The editor, FindMyFrag", date: "April 2026" },
            { who: "Data lead",                date: "April 2026" },
            { who: "Engineering",              date: "April 2026" },
          ].map((s) => (
            <div key={s.who} style={{ borderTop: "1px solid var(--ink)", paddingTop: 14 }}>
              <div className="fraun" style={{ fontSize: 38, letterSpacing: "-0.02em", lineHeight: 1, color: "var(--oxblood-ink)" }}>
                <span className="fraun-itl">signed.</span>
              </div>
              <div className="mono body-xs" style={{ color: "var(--ink-mute)", marginTop: 14 }}>
                {s.who}<br />Brooklyn · {s.date}
              </div>
            </div>
          ))}
        </div>
      </section>

      <hr className="hairline-k" />

      {/* Further reading */}
      <section className="container" style={{ padding: "40px 32px 56px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 32, flexWrap: "wrap" }}>
          <div className="kicker">Further</div>
          <div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
            <a href="#/refusals" className="mono body-s" style={{ color: "var(--ink)", borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>
              The eleven refusals →
            </a>
            <a href="#/breaches" className="mono body-s" style={{ color: "var(--ink)", borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>
              Breach ledger →
            </a>
            <a href="#/colophon" className="mono body-s" style={{ color: "var(--ink)", borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>
              Colophon · specs →
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

function Colophon() {
  return (
    <main>
      {/* Masthead */}
      <section className="container" style={{ paddingTop: 28, paddingBottom: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div className="kicker">Colophon · the specs</div>
          <div className="mono body-xs" style={{ color: "var(--ink-mute)" }}>
            Issue 001 · April 2026 · auditable
          </div>
        </div>
      </section>
      <hr className="hairline-k" />

      <section className="container" style={{ padding: "64px 32px 24px" }}>
        <h1 className="display-xl" style={{ margin: 0, maxWidth: "16ch" }}>
          Everything the <span className="fraun-itl">site</span> is made of.
        </h1>
        <p className="fraun body-l" style={{ color: "var(--ink-soft)", marginTop: 22, maxWidth: "52ch" }}>
          Typography, color, stack, policy. If a number on this site ever looks
          wrong, this page tells you exactly what you are auditing.
        </p>
      </section>

      {/* Spec tables — four columns of data, editorial not dashboard */}
      <section className="container" style={{ padding: "40px 32px 48px" }}>
        <div className="stack-mobile" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
          <SpecBlock title="Typography" rows={[
            ["display",  "Fraunces — variable serif · 9pt-144pt"],
            ["body",     "Manrope — geometric sans · 300-600"],
            ["data",     "JetBrains Mono · tnum · slashed zero"],
            ["scale",    "fluid clamp() · no fixed px for type"],
            ["line-ht",  "1.1 display · 1.5–1.7 body"],
          ]} />
          <SpecBlock title="Color · oklch space" rows={[
            ["paper",        "oklch(0.985 0.005 85) — warm, never #fff"],
            ["ink",          "oklch(0.22 0.012 60) — warm near-black"],
            ["ink-soft",     "oklch(0.40 0.010 60)"],
            ["oxblood",      "oklch(0.42 0.13 22) — signal, sparingly"],
            ["gold",         "oklch(0.76 0.12 82) — lowest-landed chip only"],
            ["signal-buy",   "oklch(0.48 0.10 155)"],
          ]} />
        </div>

        <div className="stack-mobile" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginTop: 40 }}>
          <SpecBlock title="Stack · v0.1" rows={[
            ["framework",   "React 18 · via unpkg CDN"],
            ["transpile",   "Babel Standalone 7.29 · client-side"],
            ["build",       "none · static HTML + JSX"],
            ["hosting",     "Cloudflare Pages (planned)"],
            ["backend",     "Cloudflare Worker + R2 (pipeline · planned)"],
            ["data",        "editorial seed · v0.1 exemplar"],
          ]} />
          <SpecBlock title="Policy" rows={[
            ["cookies",     "none · first-party or third"],
            ["analytics",   "none"],
            ["popups",      "none"],
            ["affiliate",   "rank never touches commission · §2"],
            ["imagery",     "typeset · no generative · §11"],
            ["breaches",    "logged within 72h · public"],
          ]} />
        </div>
      </section>

      {/* Invariant panel — the load-bearing math */}
      <section className="container" style={{ padding: "16px 32px 48px" }}>
        <div style={{ border: "1px solid var(--ink)", padding: "28px 32px", background: "var(--paper)" }}>
          <div className="kicker" style={{ marginBottom: 12 }}>Runtime invariant</div>
          <div className="fraun" style={{ fontSize: 28, lineHeight: 1.3, margin: 0, maxWidth: "50ch" }}>
            Aventus landed price <span className="mono">(358 − 40) × 1.06 + 0 = $337.08</span>, verified live every 10 seconds by the heartbeat strip at the foot of every page. If it ever fails, the whole document turns grayscale and the strip reads FAIL in oxblood. Not theatre — the product only exists if the math is right.
          </div>
        </div>
      </section>

      <hr className="hairline-k" />

      {/* Links */}
      <section className="container" style={{ padding: "40px 32px 56px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 32, flexWrap: "wrap" }}>
          <div className="kicker">Further</div>
          <div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
            <a href="#/about" className="mono body-s" style={{ color: "var(--ink)", borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>
              Manifesto →
            </a>
            <a href="#/refusals" className="mono body-s" style={{ color: "var(--ink)", borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>
              Refusals ledger →
            </a>
            <a href="#/breaches" className="mono body-s" style={{ color: "var(--ink)", borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>
              Breach ledger →
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

function SpecBlock({ title, rows }) {
  return (
    <div style={{ padding: "0 24px", borderLeft: "1px solid var(--rule)" }}>
      <div className="kicker" style={{ marginBottom: 16 }}>{title}</div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, lineHeight: 1.85 }}>
        {rows.map(([k, v]) => (
          <div key={k} style={{ display: "grid", gridTemplateColumns: "110px 1fr", gap: 14, borderTop: "1px solid var(--rule)", padding: "7px 0" }}>
            <span style={{ color: "var(--ink-mute)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 10.5 }}>{k}</span>
            <span style={{ color: "var(--ink)" }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ══════════════════════════════════════════════════════════════════════
   NOT FOUND — signed editorial 404 for unknown top-level routes.
   Distinct from NoRecord (which is for unknown fragrance slugs).
   Per refusal §3/§7: we do not pretend a URL is the home page when it isn't.
   ══════════════════════════════════════════════════════════════════════ */
function NotFound({ requested }) {
  return (
    <main>
      <section className="container" style={{ paddingTop: 20, paddingBottom: 0 }}>
        <div className="mono body-xs" style={{ color: "var(--ink-mute)", letterSpacing: "0.04em" }}>
          <a href="#/" style={{ color: "var(--ink-mute)", borderBottom: "1px solid var(--rule)" }}>FindMyFrag</a>
          <span style={{ margin: "0 10px", color: "var(--ink-faint)" }}>/</span>
          <span style={{ color: "var(--ink)" }}>unrecognized route</span>
        </div>
      </section>
      <hr className="hairline-k" />

      <section className="container" style={{ padding: "96px 32px 32px" }}>
        <div className="kicker" style={{ marginBottom: 24 }}>404 · unrecognized route</div>
        <h1 className="display-xxl" style={{ margin: 0, maxWidth: "14ch" }}>
          No <span className="fraun-itl">such</span> page.
        </h1>
        <p className="fraun body-l" style={{ color: "var(--ink-soft)", margin: "28px 0 0", maxWidth: "52ch" }}>
          This URL is not a route we publish. We do not speculate about addresses we have not defined, so this page is not the home page pretending to be your destination.
        </p>
        <div className="mono body-xs" style={{ color: "var(--ink-mute)", marginTop: 28, letterSpacing: "0.04em" }}>
          requested <span style={{ color: "var(--ink)" }}>{requested || "—"}</span>
        </div>
      </section>

      {/* Routes we DO publish — a short directory so the reader can get home */}
      <section className="container" style={{ padding: "8px 32px 56px" }}>
        <div className="kicker" style={{ marginBottom: 16 }}>Routes we publish</div>
        <div style={{ borderTop: "1px solid var(--ink)" }}>
          {[
            { path: "#/",            label: "Search · home" },
            { path: "#/browse",      label: "Browse the catalog" },
            { path: "#/fragrance/creed-aventus-2010", label: "Aventus · the exemplar" },
            { path: "#/refusals",    label: "The 11 refusals" },
            { path: "#/breaches",    label: "Breach ledger" },
            { path: "#/about",       label: "Manifesto" },
            { path: "#/colophon",    label: "Colophon · specs" },
            { path: "#/issue/001",   label: "Issue 001 · April 2026" },
          ].map(r => (
            <a key={r.path} href={r.path} style={{
              display: "grid",
              gridTemplateColumns: "260px 1fr 20px",
              gap: 20,
              padding: "14px 0",
              borderBottom: "1px solid var(--rule)",
              textDecoration: "none",
              color: "inherit",
              alignItems: "baseline",
            }}>
              <span className="mono body-xs" style={{ color: "var(--ink-mute)", letterSpacing: "0.06em" }}>{r.path}</span>
              <span className="fraun" style={{ fontSize: 18, letterSpacing: "-0.01em" }}>{r.label}</span>
              <span className="mono body-xs" style={{ color: "var(--ink-mute)" }}>→</span>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Manifesto, Colophon, NotFound });