const { Badge, Tag, TimingBadge, EnamelMedallion, Button } = window.RoyalsRoguesDesignSystem_85b3d0 || {};
function ClassesSection({ selected, onSelect }) {
  const cls = window.RR_CLASSES.find((c) => c.id === selected);
  return (
    <section id="classes" style={{ padding: "64px" }}>
      <div className="rr-eyebrow rr-eyebrow--gold" style={{ marginBottom: "8px" }}>Choose how you play</div>
      <h2 style={{ fontSize: "38px", margin: "0 0 32px" }}>Four classes. <em className="rr-emph">Four kinds of pressure.</em></h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "18px", marginBottom: "36px" }}>
        {window.RR_CLASSES.map((c) => {
          const on = c.id === selected;
          return (
            <div key={c.id} onClick={() => onSelect(c.id)} style={{ cursor: "pointer", background: "var(--surface)", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid " + (on ? "var(--rr-gold)" : "var(--border)"), boxShadow: on ? "var(--shadow-glow-gold)" : "var(--shadow-sm)", transition: "border-color 160ms, box-shadow 160ms" }}>
              <img src={c.art} alt={c.name + " quiet enamel class master"} style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", display: "block", borderBottom: "1px solid var(--border)" }} />
              <div style={{ padding: "14px 16px 16px" }}>
                <div className="rr-eyebrow" style={{ fontSize: "10px" }}>{c.ord} · {c.arch}</div>
                <h3 style={{ margin: "4px 0 6px", fontSize: "24px" }}>{c.name}</h3>
                <p style={{ margin: "0 0 12px", fontSize: "13px", minHeight: "58px" }}>{c.desc}</p>
                <span style={{ fontSize: "11px", fontWeight: 900, letterSpacing: "0.16em", color: on ? "var(--rr-bright)" : "var(--fg-soft)" }}>{on ? "SELECTED →" : "EXPLORE →"}</span>
              </div>
            </div>
          );
        })}
      </div>
      <div className="rr-enamel-surface" style={{ borderRadius: "var(--radius-lg)", padding: "28px 32px", display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: "36px" }}>
        <div>
          <div className="rr-eyebrow" style={{ marginBottom: "6px" }}>Selected class · {cls.arch}</div>
          <h3 style={{ fontSize: "32px", margin: "0 0 10px" }}>{cls.name}</h3>
          <p style={{ fontSize: "14px", margin: "0 0 18px" }}>{cls.desc}</p>
          <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", gap: "22px" }}>
            {cls.plan.map((s, i) => (
              <li key={s} style={{ display: "flex", alignItems: "center", gap: "9px" }}>
                <span className="rr-numeral" style={{ fontSize: "20px", fontStyle: "italic", color: "var(--rr-gold)" }}>0{i + 1}</span>
                <span style={{ fontSize: "14px", color: "var(--fg)" }}>{s}</span>
              </li>
            ))}
          </ol>
        </div>
        <div>
          <div className="rr-eyebrow rr-eyebrow--gold" style={{ marginBottom: "12px" }}>{cls.powers ? "12 class powers" : "Class powers"}</div>
          {cls.powers ? (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "7px 24px" }}>
              {cls.powers.map(([name, win], i) => (
                <div key={name} style={{ display: "flex", alignItems: "baseline", gap: "10px", borderBottom: "1px solid var(--border)", padding: "4px 0" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: "10px", color: "var(--fg-dim)" }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ fontSize: "13px", fontWeight: 700, color: "var(--fg)", flex: 1 }}>{name}</span>
                  <span style={{ fontSize: "10px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--window-" + win + ")" }}>{win}</span>
                </div>
              ))}
            </div>
          ) : (
            <div className="rr-champleve" style={{ padding: "18px", fontSize: "13px", color: "var(--fg-soft)" }}>
              Power list intentionally blank — awaiting the Kit v2.0.0 asset drop. <Tag provisional style={{ marginLeft: "8px" }}>Human review required</Tag>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}
function CourtsSection({ court, onCourt, cls }) {
  return (
    <section id="courts" className="rr-table-ground" style={{ padding: "64px", borderTop: "1px solid var(--hairline)" }}>
      <div className="rr-eyebrow rr-eyebrow--gold" style={{ marginBottom: "8px" }}>Choose what guides you</div>
      <h2 style={{ fontSize: "38px", margin: "0 0 10px" }}>The <em className="rr-emph">Royal Court.</em></h2>
      <p style={{ margin: "0 0 32px", maxWidth: "52ch" }}>Every Class combines with every Court to form sixteen playable deck identities.</p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "18px", marginBottom: "36px" }}>
        {window.RR_COURTS.map((c) => {
          const on = c.id === court;
          return (
            <div key={c.id} onClick={() => onCourt(c.id)} style={{ cursor: "pointer", textAlign: "center", background: "var(--surface)", borderRadius: "var(--radius-lg)", padding: "16px 16px 18px", border: "1px solid " + (on ? "var(--rr-gold)" : "var(--border)"), boxShadow: on ? "var(--shadow-glow-gold)" : "none", transition: "border-color 160ms, box-shadow 160ms" }}>
              <img src={c.art} alt={c.name + ", the Court of " + c.domain} style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--radius-md)", display: "block", marginBottom: "12px" }} />
              <div className="rr-eyebrow" style={{ fontSize: "10px", color: c.hue }}>{c.domain}</div>
              <h3 style={{ margin: "2px 0 0", fontSize: "26px" }}>{c.name}</h3>
            </div>
          );
        })}
      </div>
      <DeckDetail cls={cls} court={court} />
    </section>
  );
}
function DeckDetail({ cls, court }) {
  const C = window.RR_CLASSES.find((c) => c.id === cls);
  const K = window.RR_COURTS.find((c) => c.id === court);
  const isMK = cls === "merchant" && court === "king";
  return (
    <div className="rr-enamel-surface" style={{ borderRadius: "var(--radius-lg)", padding: "26px 30px", display: "flex", gap: "28px", alignItems: "center" }}>
      <EnamelMedallion monogram={C.name[0] + K.name[0]} hue={K.hue} size={72} />
      <div style={{ flex: 1 }}>
        <div className="rr-eyebrow" style={{ marginBottom: "4px" }}>{C.arch} · 40 power cards</div>
        <h3 style={{ margin: "0 0 8px", fontSize: "26px" }}>{C.name} × {K.name}</h3>
        <p style={{ margin: 0, fontSize: "14px", maxWidth: "70ch" }}>
          {K.domain} supports a deck built to {C.desc.charAt(0).toLowerCase() + C.desc.slice(1, -1)}. {isMK ? window.RR_MK_BLURB : ""}
        </p>
      </div>
      <div style={{ textAlign: "right", flexShrink: 0 }}>
        <Tag provisional>{isMK ? "Provisional source" : "Deck list awaits Kit drop"}</Tag>
        <div style={{ marginTop: "12px" }}><Button size="sm" variant="ghost">Open the direction →</Button></div>
      </div>
    </div>
  );
}
Object.assign(window, { ClassesSection, CourtsSection });