/* HOME page */
const { useState, useEffect } = React;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "spotsRemaining": 80,
  "totalSpots": 80,
  "showStatusBar": true,
  "showChartBg": true
}/*EDITMODE-END*/;

function Hero({ spotsRemaining, totalSpots }) {
  return (
    <section className="hero" id="top">
      <ChartBackground seed={11} />
      <div className="wrap hero-grid">
        <div>
          <div className="hero-tag">
            <span className="num">№ 001</span>
            <span className="div" />
            <span className="label">Inaugural Year · Los Angeles</span>
          </div>
          <h1>
            <span className="small">The LA Stock Pitch Competition</span>
            Where the city's<br />
            sharpest students<br />
            <span className="em">make their case.</span>
          </h1>
          <p className="hero-sub">
            A one-day student-run stock pitch competition for Los Angeles high schoolers. Eighty teams. Three rounds. One winning pitch.
          </p>
          <div className="cta-row">
            <a className="btn btn-primary" href="/register">Register Now <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href="/competition">Learn More <span className="arrow">→</span></a>
          </div>
        </div>
        <div className="data-card">
          <span className="corner tl" /><span className="corner tr" />
          <span className="corner bl" /><span className="corner br" />
          <div className="eyebrow"><span className="dot" />Event Brief</div>
          <div style={{ height: 18 }} />
          <div className="dc-row"><span className="k">Date</span><span className="v">Sun · Oct 18 · 2026</span></div>
          <div className="dc-row"><span className="k">Venue</span><span className="v">Crossroads School<br /><span style={{ color: "var(--text-mute)", fontSize: 12 }}>Santa Monica, CA</span></span></div>
          <div className="dc-row"><span className="k">Format</span><span className="v">80 → 20 → 5</span></div>
          <div className="dc-row"><span className="k">Pitch Length</span><span className="v">14 min (10 + 4 Q&amp;A)</span></div>
          <div className="dc-row"><span className="k">Eligibility</span><span className="v">Grades 9 to 12</span></div>
          <div className="dc-row"><span className="k">Entry</span><span className="v gold">$25 / team</span></div>
        </div>
      </div>
    </section>
  );
}

function Cohosts() {
  return (
    <section className="s" style={{ paddingTop: 90, paddingBottom: 0, borderBottom: "none" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <span className="eyebrow"><span className="dot" />Convened By</span>
        </div>
      </div>
      <div className="cohosts">
        {SCHOOLS.map((s) => (
          <div className="cohost" key={s.kind}>
            <img src={s.logo} alt={s.name} className={`school-logo${s.kind === "crossroads" ? " school-logo--padded" : ""}`} />
            <a className="name" href={s.website} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "inherit" }}>{s.name}</a>
            <div className="role">{s.role}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Why() {
  const cards = [
    { idx: "01 · The Stage", title: "A real exchange floor, not a classroom exercise.", body: "Defend your thesis before working analysts and portfolio managers. Q&A is unscripted, the bar is high, and the room is professional.", stat: { num: "Pros", lbl: "Industry Judges" } },
    { idx: "02 · The Field", title: "Selected against the city's strongest finance students.", body: "Eighty teams, one citywide cohort. Compete and collaborate with peers who take the markets as seriously as you do.", stat: { num: "80", lbl: "Team Cap" } },
    { idx: "03 · The Reward", title: "Recognition that travels with you.", body: "Cash prizes and a certificate issued jointly by two of LA's leading independent schools.", stat: { num: "40 · 25 · 15 · 10 · 10", lbl: "Top 5 Prize Split (%)" } },
  ];
  return (
    <section className="s" id="why">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">02 / Why Compete</span>
            <h2>Built for students who want a <em>seat at the table.</em></h2>
          </div>
          <div className="r" />
        </div>
        <div className="why-grid">
          {cards.map((c, i) => (
            <div className="why-card" key={i}>
              <div className="idx">{c.idx}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <div className="stat">
                <span className="num" style={i === 2 ? { fontSize: 22 } : undefined}>{c.stat.num}</span>
                <span className="lbl">{c.stat.lbl}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StructureOverview() {
  const stages = [
    { n: 80, label: "Round One", name: "The Open Floor", desc: "All 80 teams pitch concurrently across 10 rooms, judged by industry professionals.", time: "9:30 to 11:54 AM", duration: "10 ROOMS" },
    { n: 20, label: "Round Two", name: "The Semifinal", desc: "Top quintile advances and pitches across 5 rooms.", time: "1:00 to 2:12 PM", duration: "5 ROOMS" },
    { n: 5, label: "Final Round", name: "The Closing Bell", desc: "Five finalists present in the main hall before a panel of industry professionals. Winners announced following final pitches.", time: "2:40 to 4:10 PM", duration: "MAIN HALL", feature: true },
  ];
  return (
    <section className="s" id="structure">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">03 / Format</span>
            <h2>Three rounds. <em>One Sunday.</em></h2>
          </div>
          <div className="r">Bracket-style elimination from a field of eighty down to a single winning thesis, all in a single trading day. <a href="/competition" style={{ color: "var(--gold)" }}>See full schedule →</a></div>
        </div>
        <div className="bracket">
          {stages.map((s, i) => (
            <div className={`stage ${s.feature ? "feature" : ""}`} key={i}>
              <div className="label">{s.label}</div>
              <div className="count">{s.n}</div>
              <div className="name">{s.name}</div>
              <div className="desc">{s.desc}</div>
              <div className="meta">
                <span>{s.time}</span>
                <span style={{ color: "var(--text-mute)" }}>·</span>
                <span>{s.duration}</span>
              </div>
              {i < 2 && <div className="arrow" />}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Counter({ spotsRemaining, totalSpots }) {
  const filled = totalSpots - spotsRemaining;
  const pct = (filled / totalSpots) * 100;
  return (
    <section className="s counter-section" id="register-counter">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">04 / Field</span>
            <h2>Eighty teams. <em>First come, first served.</em></h2>
          </div>
          <div className="r">The field is capped at 80 teams and fills first-come. Register by October 3, then submit your pitch deck by October 10.</div>
        </div>
        <div className="counter-grid">
          <div className="counter-big">
            <div className="counter-status">
              <span className="pulse" />
              <span>Registration Opens Aug 1</span>
            </div>
            <div style={{ marginTop: 28 }}>
              {[
                { n: "01", label: "Register", detail: "Closes Oct 3" },
                { n: "02", label: "Submit Pitch Deck", detail: "Due Oct 10" },
                { n: "03", label: "Competition Day", detail: "Oct 18" },
              ].map((s, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 20, padding: "13px 0", borderBottom: "1px solid var(--line)" }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "var(--gold)", minWidth: 24, letterSpacing: "0.1em" }}>{s.n}</span>
                  <span style={{ flex: 1, fontSize: 15 }}>{s.label}</span>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.06em" }}>{s.detail}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="reg-card">
            <span className="corner tl" /><span className="corner tr" />
            <span className="corner bl" /><span className="corner br" />
            <div className="eyebrow"><span className="dot" />Reserve Your Seat</div>
            <h3>Register in under four minutes.</h3>
            <p>Register and pay online by October 3. Submit your pitch deck by October 10. The field is capped at 80 teams, so register early.</p>
            <a className="btn btn-primary" href="/register" style={{ width: "100%", justifyContent: "center", marginBottom: 22 }}>Begin Registration <span className="arrow">→</span></a>
            <div className="reg-stats">
              <div className="reg-stat">
                <div className="v">$25</div>
                <div className="k">per team</div>
              </div>
              <div className="reg-stat">
                <div className="v">1 to 2</div>
                <div className="k">team size</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Live counter">
        <TweakSlider label="Slots remaining" min={0} max={tweaks.totalSpots} step={1} value={tweaks.spotsRemaining} onChange={(v) => setTweak("spotsRemaining", v)} />
        <TweakNumber label="Total slots" value={tweaks.totalSpots} onChange={(v) => setTweak("totalSpots", v)} />
      </TweakSection>
      <TweakSection title="Atmosphere">
        <TweakToggle label="Stock chart background" value={tweaks.showChartBg} onChange={(v) => setTweak("showChartBg", v)} />
        <TweakToggle label="Status bar" value={tweaks.showStatusBar} onChange={(v) => setTweak("showStatusBar", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);
  return (
    <>
      <Nav current="home" />
      {tweaks.showStatusBar && <StatusBar />}
      {!tweaks.showChartBg && <style>{`.chart-bg{display:none}`}</style>}
      <Hero spotsRemaining={tweaks.spotsRemaining} totalSpots={tweaks.totalSpots} />
      <Cohosts />
      <Why />
      <StructureOverview />
      <Counter spotsRemaining={tweaks.spotsRemaining} totalSpots={tweaks.totalSpots} />
      <Footer />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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