/* FindMyFrag — Refusals.
   The brand moat. First-class surface, not buried. Signed, dated, version-controlled.
   "Nutrition Facts" energy, not help-doc energy. */

/* global React */

function Refusals() {
  return (
    <main>
      {/* Masthead */}
      <section className="container" style={{ paddingTop: 28, paddingBottom: 14 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div className="kicker">Transparency · refusals ledger</div>
          <div className="mono body-xs" style={{ color: "var(--ink-mute)" }}>
            v4.2 · last revised 14 Apr 2026 · signed · <a href="#">changelog</a>
          </div>
        </div>
      </section>
      <hr className="hairline-k" />

      {/* Cover */}
      <section className="container" style={{ padding: "64px 32px 48px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.85fr", gap: 72, alignItems: "end" }}>
          <h1 className="display-xxl" style={{ margin: 0, maxWidth: "12ch" }}>
            What <span className="fraun-itl">we won't</span> do.
          </h1>
          <div>
            <p className="fraun" style={{ fontSize: 22, lineHeight: 1.4, letterSpacing: "-0.01em", margin: 0, color: "var(--ink-soft)", maxWidth: "40ch" }}>
              The deal score is arithmetic. Arithmetic is copyable in a weekend.
              This list, signed and dated and kept in public, is not.
            </p>
            <p className="mono body-s" style={{ marginTop: 22, color: "var(--ink-mute)", lineHeight: 1.7 }}>
              Every item below has a trigger, a sanction, and a date we adopted it.
              When we break one, we publish the breach — date, item, and the delta it cost a reader — within 72 hours.
            </p>
          </div>
        </div>
      </section>

      <hr className="hairline" />

      {/* The list */}
      <section className="container" style={{ padding: "40px 32px 48px" }}>
        <div className="kicker" style={{ marginBottom: 28 }}>
          Current refusals · {FMF.REFUSALS.length} in force
        </div>

        <ol style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {REFUSALS.map((r, i) => <Refusal key={r.id} idx={i} r={r} />)}
        </ol>
      </section>

      <hr className="hairline-k" />

      {/* Changelog */}
      <section className="container refusals-changelog" style={{ padding: "48px 20px 64px" }}>
        <div className="refusals-changelog__grid">
          <div className="kicker" style={{ paddingTop: 14 }}>Changelog</div>
          <div style={{ borderTop: "1px solid var(--ink)" }}>
            {CHANGELOG.map((c) => (
              <div key={c.date} className="refusals-changelog__row">
                <div className="mono body-s" style={{ color: "var(--ink-soft)" }}>{c.date}</div>
                <div className="mono body-xs">
                  <span className={`chip chip-${c.kind === "breach" ? "ox" : c.kind === "add" ? "ink" : "mute"}`}>{c.kind}</span>
                </div>
                <div className="fraun body-l" style={{ color: "var(--ink)" }}>{c.what}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr className="hairline" />

      {/* Signatures */}
      <section className="container" style={{ padding: "48px 32px 48px" }}>
        <div className="kicker" style={{ marginBottom: 20 }}>Signed</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 48 }}>
          {[
            { name: "Editor", who: "The editor, FindMyFrag", date: "14 Apr 2026" },
            { name: "Data",   who: "Data lead",                date: "14 Apr 2026" },
            { name: "Engineering", who: "Engineering",         date: "14 Apr 2026" },
          ].map(s => (
            <div key={s.name} 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 />{s.date}
              </div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

function Refusal({ idx, r }) {
  return (
    <li id={r.id} style={{
      display: "grid",
      gridTemplateColumns: "80px 1fr 280px",
      gap: 32,
      padding: "28px 0",
      borderTop: "1px solid var(--ink)",
      scrollMarginTop: 100,
    }}>
      <div className="mono" style={{ fontSize: 22, color: "var(--ink-mute)" }}>
        {String(idx + 1).padStart(2, "0")}
      </div>
      <div>
        <div className="fraun" style={{ fontSize: 28, lineHeight: 1.2, letterSpacing: "-0.015em" }}>
          {r.title}
        </div>
        <p className="body-m" style={{ color: "var(--ink-soft)", marginTop: 10, maxWidth: "60ch" }}>
          {r.body}
        </p>
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: 1.8, color: "var(--ink-mute)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--rule)", padding: "6px 0" }}>
          <span>trigger</span><span style={{ color: "var(--ink)", maxWidth: "65%", textAlign: "right" }}>{r.trigger}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--rule)", padding: "6px 0" }}>
          <span>sanction</span><span style={{ color: "var(--ink)", maxWidth: "65%", textAlign: "right" }}>{r.sanction}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--rule)", padding: "6px 0" }}>
          <span>adopted</span><span style={{ color: "var(--ink)" }}>{r.adopted}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--rule)", padding: "6px 0" }}>
          <span>breaches</span>
          <span style={{ color: r.breaches ? "var(--oxblood-ink)" : "var(--ink)" }}>
            {r.breaches || "0 · ever"}
          </span>
        </div>
      </div>
    </li>
  );
}

// Refusals data lives in data.js under FMF.REFUSALS so <Cite n={N} /> in
// shared.jsx can reach them from every surface. This page renders whatever
// is canonical there.
const REFUSALS = FMF.REFUSALS;

// Changelog data lives in data.js under FMF.CHANGELOG so the /breaches page
// can filter to { kind: "breach" } entries from the same source of truth.
const CHANGELOG = FMF.CHANGELOG;

Object.assign(window, { Refusals });