/* REGISTER page */
const { useState } = React;

function PriceCard() {
  return (
    <div className="data-card" style={{ padding: 36 }}>
      <span className="corner tl" /><span className="corner tr" />
      <span className="corner bl" /><span className="corner br" />
      <div className="eyebrow"><span className="dot" />Entry Fee</div>
      <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 88, lineHeight: 1, margin: "18px 0 6px", letterSpacing: "-0.03em" }}>
        $25
      </div>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", color: "var(--text-mute)", textTransform: "uppercase", marginBottom: 28 }}>
        Early bird · through Aug 31
      </div>
      <div className="dc-row"><span className="k">Standard</span><span className="v">$35 · from Sep 1</span></div>
      <div className="dc-row"><span className="k">Team Size</span><span className="v">1 or 2 students</span></div>
      <div className="dc-row"><span className="k">Eligibility</span><span className="v">Any LA-area HS<br /><span style={{ color: "var(--text-mute)", fontSize: 12 }}>Grades 9 to 12</span></span></div>
      <div className="dc-row"><span className="k">Cap</span><span className="v">80 teams total</span></div>
      <div className="dc-row"><span className="k">Attire</span><span className="v">Business formal<br /><span style={{ color: "var(--text-mute)", fontSize: 12 }}>Business professional</span></span></div>
      <div className="dc-row"><span className="k">Includes</span><span className="v">Competition materials</span></div>
    </div>
  );
}

function Reminders() {
  const items = [
    { num: "01", title: "Photo ID required on competition day", body: "School-issued or government ID at check-in. No exceptions." },
    { num: "02", title: "Registration closes October 3, 2026", body: "The field is capped at 80 teams and fills first-come, so register early." },
    { num: "03", title: "Pitch decks due October 10, 2026", body: "Email your deck as a PDF or .pptx to submission@laspc.org — email is the only way to submit. Late decks disqualify the team." },
  ];
  return (
    <section className="s">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">02 / Important</span>
            <h2>Three things to <em>remember.</em></h2>
          </div>
          <div className="r">Read these carefully before registering. Late submissions cannot be accommodated.</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--line)" }} className="reminders-grid">
          {items.map((r, i) => (
            <div key={i} style={{ padding: "36px 32px", borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.22em", color: "var(--gold)", marginBottom: 18 }}>RULE · {r.num}</div>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 22, fontWeight: 500, margin: "0 0 12px", letterSpacing: "-0.01em", lineHeight: 1.2 }}>{r.title}</div>
              <div style={{ color: "var(--text-dim)", fontSize: 13, lineHeight: 1.6 }}>{r.body}</div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 880px) { .reminders-grid { grid-template-columns: 1fr !important; } .reminders-grid > div { border-right: none !important; border-bottom: 1px solid var(--line) !important; } .reminders-grid > div:last-child { border-bottom: none !important; } }`}</style>
      </div>
    </section>
  );
}

function RegForm() {
  const [submitted, setSubmitted] = useState(false);
  const [teamSize, setTeamSize] = useState(2);
  return (
    <section className="s bg-navy-2">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">03 / Apply</span>
            <h2>Reserve your <em>seat.</em></h2>
          </div>
          <div className="r">A confirmation email is sent to both team members confirming your slot in the field of 80.</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 64 }} className="reg-layout">
          <style>{`@media (max-width: 880px) { .reg-layout { grid-template-columns: 1fr !important; } }`}</style>
          <div>
            {submitted ? (
              <div style={{ border: "1px solid var(--gold)", padding: 48, textAlign: "center" }}>
                <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot" />Submitted</div>
                <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 32, margin: "0 0 14px", fontWeight: 500 }}>Application received.</h3>
                <p style={{ color: "var(--text-dim)", maxWidth: 460, margin: "0 auto 24px", lineHeight: 1.6 }}>You'll receive a confirmation email within 4 hours with your team registration ID and payment instructions.</p>
                <button className="btn btn-ghost" onClick={() => setSubmitted(false)}>Submit Another</button>
              </div>
            ) : (
              <form className="reg-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
                <div className="field full">
                  <label>Team size</label>
                  <div style={{ display: "flex", gap: 12 }}>
                    <button type="button" onClick={() => setTeamSize(1)} className={`size-btn ${teamSize === 1 ? "on" : ""}`}>
                      <span className="t">Solo</span>
                      <span className="s">1 student</span>
                    </button>
                    <button type="button" onClick={() => setTeamSize(2)} className={`size-btn ${teamSize === 2 ? "on" : ""}`}>
                      <span className="t">Pair</span>
                      <span className="s">2 students</span>
                    </button>
                  </div>
                </div>

                <div className="field-group full">
                  <div className="group-label">Student 1</div>
                  <div className="field">
                    <label>First name</label>
                    <input required placeholder="Jordan" />
                  </div>
                  <div className="field">
                    <label>Last name</label>
                    <input required placeholder="Park" />
                  </div>
                  <div className="field full">
                    <label>Email</label>
                    <input required type="email" placeholder="student1@school.edu" />
                  </div>
                  <div className="field full">
                    <label>School</label>
                    <input required placeholder="Open to any LA-area high school" />
                  </div>
                  <div className="field">
                    <label>Grade</label>
                    <select required defaultValue="">
                      <option value="" disabled>Select grade</option>
                      <option>9th</option>
                      <option>10th</option>
                      <option>11th</option>
                      <option>12th</option>
                    </select>
                  </div>
                </div>

                {teamSize === 2 && (
                  <div className="field-group full">
                    <div className="group-label">Student 2</div>
                    <div className="field">
                      <label>First name</label>
                      <input required placeholder="Alex" />
                    </div>
                    <div className="field">
                      <label>Last name</label>
                      <input required placeholder="Chen" />
                    </div>
                    <div className="field full">
                      <label>Email</label>
                      <input required type="email" placeholder="student2@school.edu" />
                    </div>
                    <div className="field full">
                      <label>School</label>
                      <input required placeholder="Open to any LA-area high school" />
                    </div>
                    <div className="field">
                      <label>Grade</label>
                      <select required defaultValue="">
                        <option value="" disabled>Select grade</option>
                        <option>9th</option>
                        <option>10th</option>
                        <option>11th</option>
                        <option>12th</option>
                      </select>
                    </div>
                  </div>
                )}

                <div className="field full" style={{ paddingTop: 16 }}>
                  <button type="submit" className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
                    Submit Registration <span className="arrow">→</span>
                  </button>
                </div>
              </form>
            )}
          </div>
          <PriceCard />
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "Who is eligible to compete?", a: "Any student in grades 9 to 12 enrolled at a Los Angeles area high school. Teams may be solo or two students." },
    { q: "How much does it cost?", a: "Entry is $25 per team early-bird (through August 31), rising to $35 per team from September 1. The price is the same whether you compete solo or as a pair. The fee covers competition materials. Need-based fee waivers are available, email contact@laspc.org." },
    { q: "What's the team size limit?", a: "1 or 2 students per team. Solo competitors are welcome and compete on the same footing as two-person teams." },
    { q: "When is the registration deadline?", a: "October 3, 2026. The field is capped at 80 teams and fills first-come, so registration may close earlier if the cap is reached. All registered teams must then submit a pitch deck by October 10." },
    { q: "When are pitch decks due?", a: "October 10, 2026 — one week before competition day. To submit, email your deck as a PDF or .pptx to submission@laspc.org; email is the only accepted submission method. Late decks disqualify the team." },
    { q: "What ticker can I pitch?", a: "Any publicly-traded company on a major US exchange (NYSE, NASDAQ). Long or short. ETFs, indices, and private companies are not eligible." },
    { q: "What format should the deck be in?", a: "PDF or PowerPoint (.pptx), emailed to submission@laspc.org. See the Resources page for required slide contents and sections." },
    { q: "What do I need to bring on the day?", a: "Photo ID (required), a laptop that can wirelessly connect to Apple TV (AirPlay), and business formal attire — a suit is required. A food truck will be on campus during the lunch break; bring cash or card." },
    { q: "Can I compete with a student from another school?", a: "Yes, mixed-school teams are permitted. List both students under your team and use whichever school you primarily attend." },
    { q: "Is parking available?", a: "Yes. Free parking on campus and in the adjacent Crossroads lot. Carpooling encouraged." },
  ];
  return (
    <section className="s">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">04 / FAQ</span>
            <h2>Common <em>questions.</em></h2>
          </div>
          <div className="r">Don't see your question? Email <a href="mailto:contact@laspc.org" style={{ color: "var(--gold)" }}>contact@laspc.org</a>, we typically reply within a day.</div>
        </div>
        <div style={{ maxWidth: 920 }}>
          {items.map((it, i) => (
            <details key={i} className="faq-row" open={i === 0}>
              <summary>
                <span>{it.q}</span>
                <span className="ico">+</span>
              </summary>
              <div className="ans">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="register" />
      <StatusBar />
      <PageHead crumb="02 / Register" title="Reserve your team's<br />seat in the <em>field of eighty.</em>" lede="$25 early-bird per team, $35 from September. Solo or pair. Registration closes October 3, 2026. Pitch decks due October 10." seed={5} />
      <Reminders />
      <RegForm />
      <FAQ />
      <Footer />
    </>
  );
}

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