/* COMPETITION page */
function Bracket() {
  const stages = [
    { n: 80, label: "Round 1", name: "The Open Floor", desc: "All 80 teams pitch concurrently across 10 simultaneous rooms. Each team has 14 minutes (10-minute pitch + 4-minute Q&A) on an 18-minute rotation. Industry professionals rank teams by composite score.", time: "9:30 to 11:54 AM", duration: "10 ROOMS · 144 MIN" },
    { n: 20, label: "Round 2", name: "The Semifinal", desc: "Top 20 teams advance and pitch across 5 rooms. Same 14-minute format, judged by industry professionals. Composite scores determine the Final 5.", time: "1:00 to 2:12 PM", duration: "5 ROOMS · 72 MIN" },
    { n: 5, label: "Finals", name: "The Closing Bell", desc: "Five finalists present consecutively 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 · 90 MIN", feature: true },
  ];
  return (
    <section className="s">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">01 / Format</span>
            <h2>Three rounds. <em>One Sunday.</em></h2>
          </div>
          <div className="r">Single-elimination bracket. Every team begins in Round 1, then the field narrows from 80 to 20 to a Final 4 across the trading day.</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 Schedule() {
  return (
    <section className="s bg-navy-2">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">02 / Day-of</span>
            <h2>Sunday, October 18 · <em>full schedule.</em></h2>
          </div>
          <div className="r">All times Pacific. Doors lock at 9:00 AM sharp; late arrivals forfeit their Round 1 slot. A networking room is open throughout the day for teams not currently pitching.</div>
        </div>
        <div className="sched">
          {SCHEDULE.map((row, i) => (
            <div key={i} className={`sched-row ${row.feature ? "feature" : ""}`}>
              <div className="sched-time">{row.time}</div>
              <div className="sched-title">{row.title}<small>{row.sub}</small></div>
              <div className="sched-meta">{row.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


function WhatToBring() {
  const items = [
    { t: "Government or School Photo ID", d: "Required for check-in. Driver's license, passport, or current school ID accepted." },
    { t: "Laptop", d: "Each pitch room uses Apple TV for wireless screen mirroring. Ensure your laptop supports AirPlay or screen mirroring and test it before competition day." },
    { t: "Water Bottle", d: "Refill stations on every floor." },
    { t: "Cash or Card for the Food Truck", d: "A food truck is on campus during the lunch break. The truck does not accept school meal plans." },
    { t: "Business Formal Attire", d: "Business professional attire. Judges are working professionals; dress accordingly." },
  ];
  return (
    <section className="s bg-navy-2">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">03 / Day-of</span>
            <h2>What to <em>bring.</em></h2>
          </div>
          <div className="r">Photo ID is required for entry, no exceptions. Business formal attire (suit) is required for all participants.</div>
        </div>
        <ul className="checklist" style={{ maxWidth: 820 }}>
          {items.map((it, i) => (
            <li key={i}>
              <div>
                <strong>{it.t}</strong>
                <span>{it.d}</span>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="s" style={{ textAlign: "center" }}>
      <div className="wrap">
        <span className="eyebrow"><span className="dot" />Ready to Compete</span>
        <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 56px)", fontWeight: 500, letterSpacing: "-0.015em", margin: "20px 0 28px" }}>
          The bracket fills first-come.
        </h2>
        <p style={{ color: "var(--text-dim)", maxWidth: 540, margin: "0 auto 36px", lineHeight: 1.6 }}>
          The field is capped at 80 teams. Registration closes October 3. Pitch decks due October 10.
        </p>
        <a className="btn btn-primary" href="/register">Register Now <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="competition" />
      <StatusBar />
      <PageHead crumb="01 / Competition" title="The format, the floor,<br />and the <em>day itself.</em>" lede="A single-day, three-round stock pitch competition. Every team begins in Round 1; eighty becomes twenty becomes five, all before sundown. Photo ID required at check-in." seed={3} />
      <Bracket />
      <Schedule />
      <WhatToBring />
      <CTA />
      <Footer />
    </>
  );
}

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