// ============================================================
// Landing page — Hero + brief pulse + section overview cards.
// Full details live in wiki/* pages and forum.html.
// ============================================================

function Landing() {
  const s = window.CAMPAIGN.currentStory;

  return (
    <SiteShell current="home">
      <Hero />

      {/* Current pulse — tight summary, links into wiki/story */}
      <section className="landing-pulse" data-screen-label="Landing · Pulse">
        <div className="landing-pulse-eyebrow">The pulse of the campaign</div>
        <div className="landing-pulse-card">
          <div>
            <h2 className="landing-pulse-title">After the First <em>Tax</em></h2>
            <p className="landing-pulse-where">
              The party has reached Aldenmire, challenged the First Tax, and earned the kind of attention that ruins quiet mornings.
            </p>
            <a href="wiki/story.html" className="section-card-cta" style={{display: "inline-flex", gap: 14, border: "none", paddingTop: 0, color: "var(--gold)"}}>
              Read the story so far
            </a>
          </div>
          <div className="landing-pulse-stats">
            <div className="landing-pulse-stat">
              <div className="landing-pulse-stat-label">Session</div>
              <div className="landing-pulse-stat-value">{window.CAMPAIGN.session} · {s.days}</div>
            </div>
            <div className="landing-pulse-stat">
              <div className="landing-pulse-stat-label">Where</div>
              <div className="landing-pulse-stat-value">{s.where}</div>
            </div>
            <div className="landing-pulse-stat">
              <div className="landing-pulse-stat-label">Quest</div>
              <div className="landing-pulse-stat-value">{s.quest}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Section overview cards */}
      <section className="section-overview" id="sections" data-screen-label="Landing · Sections">
        <div className="section-overview-eyebrow">The codex</div>
        <h2 className="section-overview-title">Choose a <em>thread</em></h2>
        <div className="section-card-grid">
          {window.SS_SECTIONS.map((s) => (
            <a key={s.id} href={s.href} className="section-card">
              <div className="section-card-glyph">{s.glyph}</div>
              <div className="section-card-label">Section</div>
              <h3 className="section-card-name">{s.label}</h3>
              <p className="section-card-blurb">{s.blurb}</p>
              <div className="section-card-cta">
                <span>Open</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aesthetic">
          <ThemeTweak />
        </TweakSection>
      </TweaksPanel>
    </SiteShell>
  );
}

// Small wrapper that reads/writes the shared theme via the same hook,
// so the Tweaks panel stays in sync with the topnav toggle.
function ThemeTweak() {
  const [theme, setTheme] = useTheme();
  return (
    <TweakRadio
      label="Theme"
      value={theme}
      onChange={(v) => setTheme(v)}
      options={[{label: "Day · green", value: "day"}, {label: "Night · red", value: "night"}]}
    />
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Landing />);