const { Button, StatBlock } = window.RoyalsRoguesDesignSystem_85b3d0 || {};
const heroStyles = { eyebrow: { fontSize: "11px", fontWeight: 700, letterSpacing: "0.26em", textTransform: "uppercase", color: "var(--rr-muted)" } };
function TopStrip() {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 40px", borderBottom: "1px solid var(--border)", background: "var(--bg-deep)" }}>
      <span style={heroStyles.eyebrow}>The Fellowship of Play</span>
      <span style={{ ...heroStyles.eyebrow, color: "var(--rr-gold)" }}>Study 02 · quiet enamel software edition</span>
      <a href="#library" style={{ fontSize: "11px", fontWeight: 900, letterSpacing: "0.18em" }}>OPEN ASSET LIBRARY ↓</a>
    </div>
  );
}
function SiteNav() {
  const items = ["GAME", "CLASSES", "COURTS", "DECKS", "LIBRARY", "KIT", "RULES", "CRAFT"];
  return (
    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 40px", borderBottom: "1px solid var(--hairline)", position: "sticky", top: 0, background: "rgba(7,17,15,0.94)", zIndex: 20 }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: "10px" }}><img src="../../assets/sigil.png" alt="" style={{ width: "26px", display: "block" }} /><span style={{ fontFamily: "var(--font-display)", fontSize: "17px", color: "var(--rr-gold)" }}>Kiduna Design</span></span>
      <div style={{ display: "flex", gap: "26px" }}>
        {items.map((i) => <a key={i} href={"#" + i.toLowerCase()} style={{ fontSize: "11px", fontWeight: 900, letterSpacing: "0.16em", color: i === "GAME" ? "var(--rr-bright)" : "var(--fg-soft)" }}>{i}</a>)}
      </div>
    </nav>
  );
}
function Hero() {
  return (
    <header id="game" className="rr-table-ground" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: "48px", alignItems: "center", padding: "72px 64px 64px" }}>
      <div>
        <div style={{ ...heroStyles.eyebrow, marginBottom: "18px" }}>The Fellowship of Play presents</div>
        <h1 style={{ margin: "0 0 20px", maxWidth: "540px" }}><img className="rr-wordmark-mark" src="../../assets/logo-complete.png" alt="Royals &amp; Rogues" /></h1>
        <h2 className="rr-lede" style={{ fontSize: "30px", margin: "0 0 18px" }}>Deal the hand.<br />Change the world around it.</h2>
        <p style={{ maxWidth: "48ch", margin: "0 0 28px", fontSize: "16px" }}>No-Limit Hold'em collides with Powers, Courts, dangerous Items, and table states — rebuilt as software in quiet medieval enamel.</p>
        <div style={{ display: "flex", gap: "14px" }}>
          <Button size="lg">Enter the game ↓</Button>
          <Button size="lg" variant="ghost">Review all 180 assets</Button>
        </div>
      </div>
      <figure className="rr-glow" style={{ margin: 0 }}>
        <img src={window.RR_ART + "system/key-art.png"} alt="Four medieval competitors collide around an enamel gaming table" style={{ width: "100%", borderRadius: "var(--radius-xl)", border: "1px solid var(--hairline)", boxShadow: "var(--shadow-lg)", display: "block" }} />
        <figcaption style={{ ...heroStyles.eyebrow, fontSize: "10px", textAlign: "center", marginTop: "12px" }}>Quiet enamel · software edition</figcaption>
      </figure>
    </header>
  );
}
function StatStrip() {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: "40px", padding: "36px 64px", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)", background: "var(--bg-deep)" }}>
      <div style={{ maxWidth: "34ch" }}>
        <div className="rr-eyebrow rr-eyebrow--gold" style={{ marginBottom: "8px" }}>The complete game</div>
        <h2 style={{ margin: 0, fontSize: "30px" }}>Poker becomes <em className="rr-emph">possibility.</em></h2>
        <p style={{ fontSize: "12px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--fg-soft)", marginTop: "10px" }}>2–4 players · 13+ · 20–45 minutes</p>
      </div>
      <div style={{ display: "flex", gap: "48px" }}>
        <StatBlock ordinal="01" value="180" label="Cataloged assets" />
        <StatBlock ordinal="02" value="106" label="Power artifacts" />
        <StatBlock ordinal="03" value="54" label="Poker deck assets" />
        <StatBlock ordinal="04" value="16" label="Class × Court decks" />
      </div>
    </div>
  );
}
Object.assign(window, { TopStrip, SiteNav, Hero, StatStrip });