/* RESOURCES page */
function ExamplesPlaceholder() {
  return (
    <section className="s" style={{ padding: "56px 0" }}>
      <div className="wrap">
        <div style={{ border: "1px dashed rgba(201,168,76,0.3)", padding: "48px 32px", textAlign: "center" }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.28em", color: "var(--text-mute)", textTransform: "uppercase" }}>— Examples —</span>
        </div>
      </div>
    </section>
  );
}

function Requirements() {
  const items = [
    { t: "Public US Equity", d: "Any company listed on NYSE or NASDAQ. ETFs, ADRs, private companies, and crypto are not eligible." },
    { t: "Long or Short Thesis", d: "Both directions accepted. Short pitches must address borrow availability and short interest." },
    { t: "Publicly Available Information Only", d: "All data and analysis must be sourced from publicly accessible information. No proprietary or inside information." },
    { t: "Original Student Work", d: "The analysis and writing must be completed independently by the registered team members." },
    { t: "Independent Research Analyst Perspective", d: "Present the pitch from the perspective of an objective, third-party analyst. Take a clear Buy, Sell, or Hold stance." },
    { t: "PowerPoint or PDF Submission", d: "Email your deck as a .pptx or PDF to submission@laspc.org by the October 10 deadline. Submissions are accepted by email only." },
  ];
  return (
    <section className="s">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">01 / Requirements</span>
            <h2>What your pitch <em>must include.</em></h2>
          </div>
          <div className="r">Hard rules. Decks that violate any of these are returned for revision before the October 10 deadline; uncorrected violations disqualify the team.</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 PitchStructure() {
  const coverFields = [
    "First Name, Last Name (Partner Name if applicable)",
    "School",
    "Email Address",
    "Company Name",
    "Exchange or Ticker Symbol",
    "Sector or Industry",
    "Recommendation (Buy / Sell / Hold)",
    "Current Price (as of pitch date)",
    "Target Price (% upside or downside)",
  ];

  const sections = [
    { n: "01", t: "Business Description", d: "What the company does, how it generates revenue, key business segments, and competitive position." },
    { n: "02", t: "Industry Overview & Competitive Positioning", d: "Market size and dynamics, sector growth trends, and the company's standing relative to its peers." },
    { n: "03", t: "Investment Summary", d: "Your core thesis — why the stock is mispriced and what specific outcome you expect." },
    { n: "04", t: "Valuation / Financial Analysis", d: "DCF, comparable company analysis, or sum-of-parts. Support your numbers with charts, graphs, and clearly stated assumptions." },
    { n: "05", t: "Investment Risks", d: "Bear-case scenarios, headwinds, and the factors that would invalidate your thesis." },
    { n: "06", t: "ESG Considerations", d: "Environmental, social, and governance factors relevant to the company and how they affect the investment case." },
  ];

  return (
    <section className="s bg-navy-2">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">02 / Structure</span>
            <h2>What your presentation <em>must cover.</em></h2>
          </div>
          <div className="r">Required format. Submit as PowerPoint (.pptx) or PDF, emailed to submission@laspc.org. Use bullet points throughout and include charts and graphs for financial analysis.</div>
        </div>

        <div style={{ marginBottom: 56 }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 20 }}>Cover Slide · Required Information</div>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {coverFields.map((field, 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)", letterSpacing: "0.1em", flexShrink: 0, minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontSize: 14, color: "var(--text)" }}>{field}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 20 }}>Required Sections</div>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {sections.map((s, i) => (
              <div key={i} className="slide-row">
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: "0.1em", color: "var(--gold)" }}>{s.n}</div>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 20, letterSpacing: "-0.01em" }}>{s.t}</div>
                <div style={{ color: "var(--text-dim)", fontSize: 14, lineHeight: 1.6 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Rubric() {
  const categories = [
    {
      pts: "50", title: "Investment Idea", w: 100,
      criteria: [
        { pts: 15, text: "Thesis is logical and grounded in sound investment principles" },
        { pts: 15, text: "Report demonstrates meaningful insight into the company and sector" },
        { pts: 10, text: "Financial analysis is rigorous and well-supported" },
        { pts: 10, text: "ESG considerations are identified and addressed" },
      ]
    },
    {
      pts: "25", title: "Slide Presentation", w: 50,
      criteria: [
        { pts: 10, text: "Presenters use concise bullet points and expand on each in delivery" },
        { pts: 5, text: "Deck reflects genuine insight into the company and its industry" },
        { pts: 5, text: "Presentation includes clear and accurate financial analysis" },
        { pts: 5, text: "Pacing and flow of the presentation is effective" },
      ]
    },
    {
      pts: "25", title: "Live Pitch", w: 50,
      criteria: [
        { pts: 10, text: "Team presents clearly and stays within the 10-minute time limit" },
        { pts: 5, text: "Presenters demonstrate strong working knowledge of the company" },
        { pts: 5, text: "Delivery is professional and polished" },
        { pts: 5, text: "Presenters demonstrate strong presentation performance and command of the material" },
      ]
    },
  ];

  return (
    <section className="s">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="section-num">03 / Requirements</span>
            <h2>Scoring <em>requirements.</em></h2>
          </div>
          <div className="r">Three categories totaling 100 points. Judges evaluate investment idea, slide presentation quality, and live pitch delivery independently.</div>
        </div>
        <div className="rubric-grid">
          {categories.map((cat, i) => (
            <div key={i} style={{ border: "1px solid var(--line)", display: "flex", flexDirection: "column" }} className="crit-cell">
              <div className="pct">{cat.pts} POINTS</div>
              <h4>{cat.title}</h4>
              <div style={{ flex: 1 }}>
                {cat.criteria.map((c, j) => (
                  <div key={j} style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "10px 0", borderBottom: "1px dashed var(--line)", fontSize: 13, color: "var(--text-dim)", lineHeight: 1.5 }}>
                    <span>{c.text}</span>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "var(--gold)", flexShrink: 0 }}>{c.pts} pts</span>
                  </div>
                ))}
              </div>
              <div className="bar" style={{ marginTop: 18 }}><i style={{ width: `${cat.w}%` }} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Nav current="resources" />
      <StatusBar />
      <PageHead crumb="03 / Resources" title="Pitch requirements,<br />structure, and <em>scorecard.</em>" lede="Everything you need to build a deck that holds up under professional scrutiny — from required sections to the scoring rubric." seed={9} />
      <Requirements />
      <PitchStructure />
      <Rubric />
      <ExamplesPlaceholder />
      <Footer />
    </>
  );
}

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