/* =========================================================
   RENFECHT — Event + About + Champions pages
   ========================================================= */

function EventPage({ onNavigate }) {
  useReveal();
  const v = useValues();
  return (
    <main>
      <PageBanner
        eyebrow="THE EVENT"
        title="Two Days of Steel"
        lead="A measured, judged, marshalled tournament in the heart of the Texas Renaissance Festival. Below is the order of the weekend."
      />

      {/* Venue */}
      <section className="section">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "var(--space-7)", alignItems: "start" }}>
          <div className="reveal">
            <Placeholder label="VENUE PHOTO — Field of Honor at dusk" ratio="5 / 4" />
          </div>
          <div className="reveal">
            <span className="eyebrow">VENUE</span>
            <h2 style={{ marginTop: 10 }}>Field of<br/>Honor</h2>
            <div className="flourish"><FleurDivider width={120} className="text-accent" /></div>
            <p className="dropcap" style={{ marginTop: 16 }}>
              Set within the wooded acreage of the {v.event.venue} in Plantersville, the Field of Honor is a dedicated tournament ground — eight rings, raised wooden floor, period pavilions for staging and gear, and a main stage in front of the Globe theatre for finals.
            </p>
            <p>Spectators are welcome at all rings throughout both days; the finals on Sunday are ticketed seating with festival admission included.</p>

            <div className="frame" style={{ marginTop: 28 }}>
              <CornerDots />
              <dl style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "10px 24px", margin: 0 }}>
                <dt className="eyebrow">ADDRESS</dt><dd style={{ margin: 0 }}>{v.event.address}</dd>
                <dt className="eyebrow">GATE</dt><dd style={{ margin: 0 }}>{v.event.venueGate}</dd>
                <dt className="eyebrow">LODGING</dt><dd style={{ margin: 0 }}>{v.event.lodging}</dd>
                <dt className="eyebrow">RING COUNT</dt><dd style={{ margin: 0 }}>{v.event.rings}</dd>
              </dl>
            </div>
          </div>
        </div>
      </section>

      <OrnatedDivider label="THE WEEKEND, IN ORDER" />

      {/* Schedule */}
      <section className="section-tight">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--space-6)" }}>
            {v.schedule.map((day, i) => (
              <div key={day.day} className="frame reveal" style={{ transitionDelay: `${i * 80}ms` }}>
                <CornerDots />
                <div className="eyebrow" style={{ color: "var(--accent)" }}>{day.day}</div>
                <h3 style={{ marginTop: 6, textTransform: "none", letterSpacing: "0.02em", fontSize: "var(--scale-6)" }}>{day.label}</h3>
                <div className="rule" />
                <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                  {day.items.map(([t, txt], j) => (
                    <li key={j} style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 14, padding: "10px 0", borderBottom: j === day.items.length - 1 ? "none" : "1px dashed var(--rule)" }}>
                      <span className="mono" style={{ color: "var(--accent)", fontSize: "0.85rem", letterSpacing: "0.1em" }}>{t}</span>
                      <span style={{ color: "var(--ink-soft)" }}>{txt}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Practical */}
      <section className="section">
        <div className="wrap">
          <SectionHeader eyebrow="PRACTICAL" title="For Combatants" />
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))" }}>
            {v.practical.map((f, i) => (
              <div key={i} className="reveal" style={{ transitionDelay: `${i * 50}ms` }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--accent)", marginBottom: 8 }}>
                  <span className="flourish"><Manicule size={20} /></span>
                  <h4 style={{ color: "var(--ink)" }}>{f.title}</h4>
                </div>
                <p style={{ color: "var(--ink-soft)", margin: 0 }}>{f.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA onNavigate={onNavigate} eyebrow="READY?" title="Bring your steel. Wear your colors." cta="Enter the Lists" target="register" />
    </main>
  );
}

/* ---------- ABOUT ---------- */

function AboutPage({ onNavigate }) {
  useReveal();
  const v = useValues();
  return (
    <main>
      <PageBanner
        eyebrow="ABOUT"
        title="The Art Behind the Steel"
        lead="HEMA — Historical European Martial Arts — is the modern study and practice of the fighting systems of pre-modern Europe, reconstructed from primary-source manuals."
      />

      <section className="section">
        <div className="wrap about-cols" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-7)" }}>
          <div className="reveal">
            <span className="eyebrow">THE ART</span>
            <h2 style={{ marginTop: 10, fontSize: "var(--scale-7)" }}>What is HEMA?</h2>
            <div className="flourish"><FleurDivider width={100} className="text-accent" /></div>
            <p className="dropcap" style={{ marginTop: 18 }}>
              Historical European Martial Arts is the modern practice of fencing traditions documented in the medieval and Renaissance fight-books — Liechtenauer's longsword, Fiore's grappling, Marozzo's sidesword, Meyer's rapier. We read the manuals. We test the techniques. We fence in earnest with appropriately specified steel simulators.
            </p>
            <p>It is not stage combat. It is not LARP. It is a competitive martial art with international federations, judged rulesets, and a growing body of original research. Bouts are full-contact and decided by clean, prioritized strikes — controlled, judged, and marshalled.</p>
          </div>
          <div className="reveal">
            <span className="eyebrow">THE EVENT</span>
            <h2 style={{ marginTop: 10, fontSize: "var(--scale-7)" }}>What is {v.event.name}?</h2>
            <div className="flourish"><FleurDivider width={100} className="text-accent" /></div>
            <p className="dropcap" style={{ marginTop: 18 }}>
              {v.event.name} is the largest open HEMA tournament in the American South — held annually at the {v.event.venue} since 2022. We sit at a deliberate intersection: a competitive sporting event hosted within a cultural institution that celebrates the period our art comes from.
            </p>
            <p>We run our tournaments to a serious modern standard, but we believe the context matters. You will fence at a real festival, with a real crowd, under banners, in front of people who have come to see medieval Europe brought to life. That is part of the point.</p>
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .about-cols { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <OrnatedDivider label="OUR LISTS" />

      <section className="section-tight">
        <div className="wrap stack-lg">
          {v.divisions.map((d, i) => (
            <article key={d.id} className="reveal division-row" style={{
              display: "grid",
              gridTemplateColumns: i % 2 === 0 ? "1fr 1.2fr" : "1.2fr 1fr",
              gap: "var(--space-7)",
              alignItems: "center",
            }}>
              <div style={{ order: i % 2 === 0 ? 0 : 1 }}>
                <Placeholder label={`PHOTO — ${d.title.toUpperCase()} ACTION`} ratio="5 / 4" />
              </div>
              <div>
                <span className="eyebrow" style={{ color: "var(--accent)" }}>LIST {String(i + 1).padStart(2, "0")}</span>
                <h2 style={{ marginTop: 8, fontSize: "var(--scale-7)" }}>{d.title}</h2>
                <div className="eyebrow" style={{ marginTop: 4 }}>{d.sub}</div>
                <div className="flourish"><FleurDivider width={90} className="text-accent" /></div>
                <p style={{ marginTop: 16 }}>{d.body}</p>
                <p style={{ color: "var(--ink-soft)" }}>
                  Pools are seeded by HEMA Ratings where available; unrated fighters are placed by club captains' recommendation. Marshals are recruited from outside the host club to ensure neutrality, and all matches are reviewed on tape on appeal.
                </p>
                <div style={{ marginTop: 18, display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <span className="pill">{d.stat}</span>
                  <span className="pill">RULESET C</span>
                  <span className="pill">DBL ELIM</span>
                </div>
              </div>
            </article>
          ))}
          <style>{`@media (max-width: 740px) { .division-row { grid-template-columns: 1fr !important; } .division-row > div { order: 0 !important; } }`}</style>
        </div>
      </section>

      {/* Stats band */}
      <section className="section" style={{ background: "var(--ink)", color: "var(--paper)" }}>
        <div className="wrap">
          <div style={{ textAlign: "center", marginBottom: "var(--space-7)" }}>
            <span className="eyebrow" style={{ color: "color-mix(in oklab, var(--paper) 60%, transparent)" }}>FIVE YEARS IN</span>
            <h2 style={{ color: "var(--paper)" }}>By the Numbers</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "var(--space-6)", textAlign: "center" }}>
            {v.stats.map(({ num, label }) => (
              <div key={label} style={{ borderTop: "1px solid color-mix(in oklab, var(--paper) 30%, transparent)", paddingTop: 18 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(2rem, 4.4vw, 3.4rem)", letterSpacing: "0.04em" }}>{num}</div>
                <div className="eyebrow" style={{ color: "color-mix(in oklab, var(--paper) 70%, transparent)", marginTop: 6 }}>{label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA onNavigate={onNavigate} eyebrow="TRAIN. TRAVEL. FIGHT." title="Find your list. Fence for the year." cta="Register" target="register" />
    </main>
  );
}

/* ---------- CHAMPIONS ---------- */

function ChampionsPage({ onNavigate }) {
  useReveal();
  const v = useValues();
  const c = v.champions;
  // Sort history descending by year; current = most recent
  const history = [...c.history].sort((a, b) => b.year - a.year);
  const current = history[0];
  const sideAwardNames = c.sideAwardDefs.map(d => d.name);
  const anySideHistory = history.some(h => h.sideAwards && Object.keys(h.sideAwards).length);

  const cell = (entry) => entry
    ? <><span>{entry.winner}</span>{entry.club && <span className="champ-club">{entry.club}</span>}</>
    : <span className="champ-em">—</span>;

  return (
    <main>
      <PageBanner
        eyebrow="ROLL OF HONOR"
        title="Champions Past"
        lead="The roll of those who have stood in the final ring and won. May their names ring on."
      />

      <section className="section-tight">
        <div className="wrap">

          {/* Reigning */}
          <div className="frame frame--ornate reveal" style={{ marginBottom: "var(--space-7)" }}>
            <CornerDots />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 18 }}>
              <div>
                <span className="eyebrow" style={{ color: "var(--accent)" }}>REIGNING · {current.year}</span>
                <h2 style={{ marginTop: 8, fontSize: "var(--scale-7)" }}>The current champions</h2>
                {current.note && <p style={{ color: "var(--ink-mute)", fontStyle: "italic", marginTop: 8, maxWidth: "52ch" }}>{current.note}</p>}
              </div>
              <span className="pill pill-accent">DEFEND OR YIELD</span>
            </div>

            <div className="rule" />

            {/* Division winners */}
            <div className="eyebrow" style={{ marginBottom: 14 }}>THE LISTS</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "var(--space-6)", marginBottom: "var(--space-6)" }}>
              {c.divisionsTracked
                .filter(d => current.divisions && current.divisions[d])
                .map(d => {
                  const entry = current.divisions[d];
                  return (
                    <div key={d}>
                      <div className="eyebrow" style={{ color: "var(--accent)" }}>{d.toUpperCase()}</div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--scale-6)", letterSpacing: "0.04em", marginTop: 8 }}>{entry.winner}</div>
                      <div className="mono" style={{ fontSize: "0.85rem", color: "var(--ink-mute)", marginTop: 6 }}>{entry.club}</div>
                    </div>
                  );
                })}
            </div>

            {/* Side awards */}
            {current.sideAwards && Object.keys(current.sideAwards).length > 0 && (
              <>
                <div className="rule" />
                <div className="eyebrow" style={{ marginBottom: 14 }}>SIDE AWARDS</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--space-6)" }}>
                  {c.sideAwardDefs.map(def => {
                    const entry = current.sideAwards && current.sideAwards[def.name];
                    if (!entry) return null;
                    return (
                      <div key={def.name}>
                        <div className="eyebrow" style={{ color: "var(--accent)" }}>{def.name.toUpperCase()}</div>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--scale-5)", letterSpacing: "0.04em", marginTop: 8 }}>{entry.winner}</div>
                        <div className="mono" style={{ fontSize: "0.85rem", color: "var(--ink-mute)", marginTop: 6 }}>{entry.club}</div>
                        <div style={{ fontStyle: "italic", color: "var(--ink-mute)", marginTop: 8, fontSize: "0.9rem" }}>{def.blurb}</div>
                      </div>
                    );
                  })}
                </div>
              </>
            )}
          </div>

          {/* Lists history */}
          <div className="reveal" style={{ marginBottom: "var(--space-7)" }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>THE ARCHIVE — LISTS</div>
            <div style={{ overflowX: "auto" }}>
              <table className="champ-table">
                <thead>
                  <tr>
                    <th>YEAR</th>
                    {c.divisionsTracked.map(d => <th key={d}>{d.toUpperCase()}</th>)}
                  </tr>
                </thead>
                <tbody>
                  {history.map(row => (
                    <tr key={row.year}>
                      <td className="mono yr">{row.year}</td>
                      {c.divisionsTracked.map(d => (
                        <td key={d}>{cell(row.divisions && row.divisions[d])}</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Side awards history */}
          {anySideHistory && (
            <div className="reveal">
              <div className="eyebrow" style={{ marginBottom: 14 }}>THE ARCHIVE — SIDE AWARDS</div>
              <div style={{ overflowX: "auto" }}>
                <table className="champ-table">
                  <thead>
                    <tr>
                      <th>YEAR</th>
                      {sideAwardNames.map(n => <th key={n}>{n.toUpperCase()}</th>)}
                    </tr>
                  </thead>
                  <tbody>
                    {history.filter(h => h.sideAwards && Object.keys(h.sideAwards).length).map(row => (
                      <tr key={row.year}>
                        <td className="mono yr">{row.year}</td>
                        {sideAwardNames.map(n => (
                          <td key={n}>{cell(row.sideAwards && row.sideAwards[n])}</td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          <style>{`
            .champ-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
            .champ-table th { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--ink-mute); text-align: left; padding: 14px 14px; border-bottom: 2px solid var(--ink); font-weight: 500; }
            .champ-table td { padding: 18px 14px; border-bottom: 1px dashed var(--rule); font-size: 1.05rem; vertical-align: top; }
            .champ-table tr:hover td { background: color-mix(in oklab, var(--paper-deep) 30%, transparent); }
            .champ-table .yr { color: var(--accent); font-size: 0.9rem; letter-spacing: 0.12em; white-space: nowrap; }
            .champ-table .champ-club { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-mute); letter-spacing: 0.08em; margin-top: 4px; }
            .champ-table .champ-em { color: var(--rule); font-family: var(--font-display); font-size: 1.2rem; }
          `}</style>
        </div>
      </section>

      <ClosingCTA onNavigate={onNavigate} eyebrow="ADD YOUR NAME" title="The roll waits for a new hand." cta="Enter the Lists" target="register" />
    </main>
  );
}

Object.assign(window, { EventPage, AboutPage, ChampionsPage });
