const CHAPTERS = [
  { num: '01', name: 'Quick Setup', desc: 'Three Steps From Blank Chart to Live Indicator.' },
  { num: '02', name: 'The Confluence Playbook', desc: 'The Five-Step Loop. The Stack. The Checklist. The Auto-Veto.' },
  { num: '03', name: 'Module Reference', desc: 'Chop Zones, Supply / Demand, Reversal Signals, Ghost Signals.' },
  { num: '04', name: 'Display Toggles', desc: 'What Shows on the Chart. None of These Change Signal Logic.' },
  { num: '05', name: 'The Dashboard', desc: 'Four Cells. Tutorial Mode. The Priority Ladder. Chart Legend.' },
  { num: '06', name: 'Trading Floor — Simulator', desc: 'Six Drills, Eighteen Scenarios — Including Lockout Windows. Read the Chart. Make the Call.' },
  { num: '07', name: 'Limits & Troubleshooting', desc: 'Honest Limitations and Plain-English Fixes for Common Confusion.' },
];

function Course() {
  const courseUrl = 'Ghost Learning Edition.html';
  return (
    <>
      <Nav current="course" />

      <section className="course-hero">
        <div className="mascot-big">👻</div>
        <div className="hero-eyebrow"><span className="accent">GHOST</span> · LEARNING EDITION</div>
        <h1>Read the Chart.<br/>Wait for the Stack.<br/>Take the Trade.</h1>
        <p className="deck">
          A self-paced course that teaches you to read the GHOST framework — top
          to bottom — without overriding the parts that are designed to keep you
          out of bad trades.
        </p>
        <div className="hero-cta-row" style={{ justifyContent: 'center' }}>
          <a className="btn btn-primary" href={courseUrl}>Start the Course →</a>
          <a className="btn btn-ghost" href="guide.html">Read the Guide First</a>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0, borderTop: 'none' }}>
        <div className="course-stats">
          <div className="course-stat"><span className="n">07</span><span className="l">Chapters</span></div>
          <div className="course-stat"><span className="n">~25</span><span className="l">Minutes</span></div>
          <div className="course-stat"><span className="n">06</span><span className="l">Sim Drills</span></div>
          <div className="course-stat"><span className="n">24</span><span className="l">Final Exam Qs</span></div>
        </div>
      </section>

      <section className="section">
        <div className="section-eyebrow"><span className="accent">·01</span> · What's Inside</div>
        <h2 className="section-title">Seven Chapters Mirror the Seven Sections of the User Guide.</h2>
        <p className="section-deck">
          Each lesson mixes short explanations with the actual indicator surfaces —
          the dashboard, tutorial panel, modules, and a fake-chart simulator — so
          you can practice reading the framework in context.
        </p>
        <div className="chapter-list">
          {CHAPTERS.map(c => (
            <div className="chap" key={c.num}>
              <div className="num">{c.num}</div>
              <div>
                <div className="name">{c.name}</div>
                <p className="desc">{c.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="section-eyebrow"><span className="accent">·02</span> · The Exam</div>
        <h2 className="section-title">Twenty-Four Questions. Eighteen to Certify.</h2>
        <p className="section-deck">
          The final exam draws from every chapter. You read a dashboard, you call
          the trade, you defend the read. Pass and you've shown you can run the
          framework without overriding it.
        </p>
        <div className="cta-strip">
          <div>
            <h3>Ready to Start?</h3>
            <p>The Learning Edition runs in your browser. Progress is saved locally — close the tab and pick up where you left off.</p>
          </div>
          <a className="btn btn-primary" href={courseUrl}>Open the Course →</a>
        </div>
      </section>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Course />);