// Legal page primitives — shared by the 5 docs and the hub.

const LegalHeader = () => <Header active="legal" />;

const LegalBanner = ({ doc, version, updated, eyebrow }) => (
  <section className="container legal-banner">
    <div>
      <div className="legal-eyebrow">{eyebrow || "Legal"}</div>
      <h1>{doc}</h1>
      <p className="muted" style={{ fontSize: 16, maxWidth: "60ch", marginTop: 8 }}>
        Plain-English where we can be, precise where we have to be.
      </p>
      <div className="draft-stamp">Draft v0.{version} · pre-launch · subject to revision</div>
      <div className="legal-meta">
        <span><b>Effective</b> {updated}</span>
        <span><b>Version</b> 0.{version}</span>
        <span><b>Owner</b> hello@oncatch.app</span>
      </div>
    </div>
    <div className="banner-figure">
      <LegalFigure doc={doc} />
    </div>
  </section>
);

const LegalFigure = ({ doc }) => {
  // Tiny abstract icon-figure per doc, in the brand language.
  const map = {
    "Privacy policy":   <PrivacyFig />,
    "Terms of service": <TermsFig />,
    "Data processing addendum": <DPAFig />,
    "Subprocessors":    <SubFig />,
    "Cookie policy":    <CookieFig />,
  };
  return (
    <svg viewBox="0 0 320 200" style={{ width: "100%", height: "auto", display: "block" }}>
      {map[doc] || <PrivacyFig />}
    </svg>
  );
};

const PrivacyFig = () => (
  <g>
    <rect x="0" y="0" width="320" height="200" fill="#FAF7F2" />
    <rect x="60" y="50" width="200" height="120" rx="6" fill="white" stroke="#E8E1D3" />
    <rect x="76" y="68" width="80" height="10" rx="2" fill="#1B1A17" />
    <rect x="76" y="86" width="160" height="4" rx="1" fill="#E8E1D3" />
    <rect x="76" y="96" width="140" height="4" rx="1" fill="#E8E1D3" />
    <rect x="76" y="106" width="150" height="4" rx="1" fill="#E8E1D3" />
    <g transform="translate(160, 140)">
      <circle cx="0" cy="0" r="22" fill="none" stroke="#C2410C" strokeWidth="2" />
      <path d="M -10 0 L -2 8 L 12 -8" stroke="#C2410C" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </g>
    <text x="160" y="36" textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: 1.5, fill: "#7A736A" }}>FIG. PRIV-01</text>
  </g>
);
const TermsFig = () => (
  <g>
    <rect x="0" y="0" width="320" height="200" fill="#FAF7F2" />
    <g transform="translate(110, 36)">
      <rect x="0" y="0" width="100" height="128" rx="4" fill="white" stroke="#E8E1D3" />
      {[0, 1, 2, 3, 4, 5, 6].map((i) => (
        <rect key={i} x="10" y={14 + i * 14} width={i % 3 === 0 ? 80 : 70} height="3" rx="1" fill="#E8E1D3" />
      ))}
      <rect x="10" y="106" width="40" height="10" rx="1" fill="#1B1A17" />
    </g>
    <line x1="92" y1="100" x2="228" y2="100" stroke="#C2410C" strokeWidth="2" strokeDasharray="4 3" />
    <text x="160" y="184" textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: 1.5, fill: "#7A736A" }}>FIG. TERMS-01</text>
  </g>
);
const DPAFig = () => (
  <g>
    <rect x="0" y="0" width="320" height="200" fill="#FAF7F2" />
    {[0, 1].map((i) => (
      <g key={i} transform={`translate(${50 + i * 130}, 40)`}>
        <rect x="0" y="0" width="100" height="120" rx="4" fill="white" stroke="#E8E1D3" />
        <rect x="10" y="12" width="50" height="6" rx="1" fill="#1B1A17" />
        {[0, 1, 2, 3].map((j) => (
          <rect key={j} x="10" y={28 + j * 12} width={70 - (j * 8)} height="3" rx="1" fill="#E8E1D3" />
        ))}
      </g>
    ))}
    <g transform="translate(160, 100)">
      <circle r="14" fill="#C2410C" />
      <text textAnchor="middle" y="4" fill="white" style={{ fontSize: 11, fontWeight: 700, fontFamily: "var(--font-mono)" }}>↔</text>
    </g>
    <text x="160" y="184" textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: 1.5, fill: "#7A736A" }}>FIG. DPA-01</text>
  </g>
);
const SubFig = () => (
  <g>
    <rect x="0" y="0" width="320" height="200" fill="#FAF7F2" />
    {[
      { x: 60,  y: 60, label: "AWS" },
      { x: 160, y: 50, label: "Resend" },
      { x: 240, y: 80, label: "Stripe" },
      { x: 90,  y: 130, label: "Sentry" },
      { x: 200, y: 140, label: "PostHog" },
    ].map((n, i) => (
      <g key={i} transform={`translate(${n.x}, ${n.y})`}>
        <circle r="22" fill="white" stroke="#E8E1D3" />
        <text textAnchor="middle" y="4" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "#1B1A17", fontWeight: 600 }}>{n.label}</text>
      </g>
    ))}
    <circle cx="160" cy="100" r="14" fill="#C2410C" />
    <text x="160" y="104" textAnchor="middle" fill="white" style={{ fontSize: 9, fontWeight: 700, fontFamily: "var(--font-mono)" }}>OC</text>
    {[[60, 60], [160, 50], [240, 80], [90, 130], [200, 140]].map((p, i) => (
      <line key={i} x1="160" y1="100" x2={p[0]} y2={p[1]} stroke="#E8E1D3" strokeDasharray="2 3" />
    ))}
    <text x="160" y="184" textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: 1.5, fill: "#7A736A" }}>FIG. SUB-01</text>
  </g>
);
const CookieFig = () => (
  <g>
    <rect x="0" y="0" width="320" height="200" fill="#FAF7F2" />
    <g transform="translate(112, 50)">
      <rect x="0" y="0" width="96" height="60" rx="6" fill="white" stroke="#E8E1D3" />
      <rect x="10" y="12" width="76" height="6" rx="1" fill="#1B1A17" />
      <rect x="10" y="24" width="60" height="3" rx="1" fill="#E8E1D3" />
      <rect x="10" y="32" width="50" height="3" rx="1" fill="#E8E1D3" />
      <rect x="10" y="44" width="32" height="10" rx="2" fill="#C2410C" />
      <rect x="50" y="44" width="32" height="10" rx="2" fill="#FAF7F2" stroke="#E8E1D3" />
    </g>
    <g transform="translate(160, 150)">
      <circle r="20" fill="#FAF7F2" stroke="#C2410C" strokeWidth="2" strokeDasharray="3 3" />
      <text textAnchor="middle" y="4" style={{ fontFamily: "var(--font-mono)", fontSize: 12, fill: "#C2410C", fontWeight: 700 }}>0</text>
    </g>
    <text x="160" y="186" textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: 1.5, fill: "#7A736A" }}>FIG. COOKIE-01</text>
  </g>
);

const TOC = ({ items }) => (
  <aside className="legal-toc">
    <h4>On this page</h4>
    <ul>
      {items.map((it, i) => (
        <li key={i}>
          <a href={`#${it.id}`}>
            <span className="toc-num">{String(i + 1).padStart(2, "0")}</span>
            {it.title}
          </a>
        </li>
      ))}
    </ul>
  </aside>
);

const Sec = ({ id, num, title, children }) => (
  <section id={id}>
    <h2>
      <span className="h2-num">{String(num).padStart(2, "0")}</span>
      {title}
    </h2>
    {children}
  </section>
);

const Callout = ({ mark = "i", children }) => (
  <div className="legal-callout">
    <span className="callout-mark">{mark}</span>
    <div>{children}</div>
  </div>
);

Object.assign(window, { LegalHeader, LegalBanner, TOC, Sec, Callout });