const { TimingBadge, Tabs, Panel } = window.RoyalsRoguesDesignSystem_85b3d0 || {};
function WindowsSection() {
  return (
    <section id="rules" style={{ padding: "64px", borderTop: "1px solid var(--hairline)" }}>
      <div className="rr-eyebrow rr-eyebrow--gold" style={{ marginBottom: "8px" }}>Play a hand in four windows</div>
      <h2 style={{ fontSize: "38px", margin: "0 0 32px" }}>Plot. Strike. <em className="rr-emph">Answer. Reveal.</em></h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "18px" }}>
        {window.RR_WINDOWS.map((w) => (
          <div key={w.name} style={{ background: "var(--surface)", border: "1px solid var(--border)", borderTop: "3px solid var(--window-" + w.key + ")", borderRadius: "var(--radius-md)", padding: "18px 20px" }}>
            <span className="rr-numeral" style={{ fontSize: "22px", color: "var(--fg-dim)" }}>{w.ord}</span>
            <h3 style={{ margin: "6px 0 10px", fontSize: "24px" }}>{w.name}</h3>
            <p style={{ margin: "0 0 8px", fontSize: "13px", fontWeight: 700, color: "var(--fg)" }}>{w.when}</p>
            <p style={{ margin: "0 0 14px", fontSize: "13px" }}>{w.how}</p>
            <TimingBadge window={w.key} />
          </div>
        ))}
      </div>
    </section>
  );
}
function CraftSection() {
  const principles = [
    ["01", "Cloisonné structure", "Gold cloisons organize the scene and preserve legibility at small sizes."],
    ["02", "Champlevé depth", "Recessed dark metal gives objects weight without veiling the image in facets."],
    ["03", "Quiet light", "One meaningful glow, restrained edges, and smooth faces keep the action readable."],
    ["04", "Software separation", "Art never carries type. Copy, strategy, guidance, and provenance arrive on demand."]
  ];
  const sw = [["VOID", "#030605"], ["INK", "#07110f"], ["MALACHITE", "#0e634f"], ["EMERALD", "#159271"], ["GOLD", "#e8b24a"], ["BRIGHT", "#ffd981"], ["CREAM", "#f7eccb"], ["MUTED", "#a99e88"]];
  return (
    <section id="craft" style={{ padding: "64px", background: "var(--bg-deep)", borderTop: "1px solid var(--hairline)" }}>
      <div className="rr-eyebrow rr-eyebrow--gold" style={{ marginBottom: "8px" }}>The quiet-enamel language</div>
      <h2 style={{ fontSize: "38px", margin: "0 0 32px" }}>Enamel without <em className="rr-emph">the crystal haze.</em></h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "18px", marginBottom: "36px" }}>
        {principles.map(([n, t, d]) => (
          <div key={n}>
            <span className="rr-numeral" style={{ fontSize: "20px", color: "var(--rr-gold)" }}>{n}</span>
            <h3 style={{ margin: "8px 0 6px", fontSize: "21px" }}>{t}</h3>
            <p style={{ margin: 0, fontSize: "13px" }}>{d}</p>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", borderRadius: "var(--radius-md)", overflow: "hidden", border: "1px solid var(--hairline)", marginBottom: "28px" }}>
        {sw.map(([n, h]) => (
          <div key={n} style={{ flex: 1, background: h, padding: "22px 10px 10px", color: (n === "VOID" || n === "INK" || n === "MALACHITE") ? "var(--rr-muted)" : "#07110f" }}>
            <div style={{ fontSize: "9px", fontWeight: 900, letterSpacing: "0.14em" }}>{n}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "9px", opacity: 0.8 }}>{h}</div>
          </div>
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "18px" }}>
        <Panel eyebrow="Display · EB Garamond" padding="20px 24px">
          <img src="../../assets/wordmark.svg" alt="Royals &amp; Rogues" style={{ width: "190px", display: "block", margin: "-14px 0 -22px" }} />
        </Panel>
        <Panel eyebrow="Interface · Avenir" padding="20px 24px">
          <p style={{ margin: 0, fontSize: "14px" }}>Exact card text, optional strategy, and beginner guidance remain calm, clear, and separate from the artifact.</p>
        </Panel>
      </div>
    </section>
  );
}
function SiteFooter() {
  return (
    <footer style={{ padding: "44px 64px", borderTop: "1px solid var(--hairline)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
        <div><img src="../../assets/logo-complete.png" alt="Royals &amp; Rogues" style={{ width: "210px", display: "block" }} />
        <p style={{ margin: "6px 0 0", fontSize: "13px" }}>A game of The Fellowship of Play, shaped with Kiduna material intelligence.</p></div>
      </div>
      <div style={{ display: "flex", gap: "24px" }}>
        <a href="#craft" style={{ fontSize: "11px", fontWeight: 900, letterSpacing: "0.16em" }}>ENAMEL CRAFT ↑</a>
        <a href="#" style={{ fontSize: "11px", fontWeight: 900, letterSpacing: "0.16em" }}>KIDUNA DESIGN ↑</a>
      </div>
    </footer>
  );
}
Object.assign(window, { WindowsSection, CraftSection, SiteFooter });