// LitStage v3 — Sections
// All page sections below the hero. White-paper grounded:
// 1-click thesis, three AI features, pricing, roadmap,
// equity/impact, end CTA, footer.

const Ic = window.I3;

/* ============== 1-Click Thesis ============== */
function CanvasLayer() {
  return (
    <section className="std layer" id="layers">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">The thesis</span>
          <h2>One upload. <em>A complete course.</em></h2>
          <p>Drag in your syllabus, a textbook chapter, or a stack of PDFs. LitStage's AI reads it, structures it into modules, and generates every format your students actually use — reading, quiz, audio, slides, flashcards, mind map, and a 3D scene to explore.</p>
        </div>
        <div className="layer-stack">
          <div className="layer-block lit">
            <div>
              <div className="layer-block-tag">LitStage output</div>
              <h3>One course. Seven formats.</h3>
              <p>The same source material, transformed into the modalities students learn best in. Faculty review and approve; students pick how they want to study tonight.</p>
              <div className="layer-block-features">
                <span className="chip chip-mono">LESSON</span>
                <span className="chip chip-mono">QUIZ</span>
                <span className="chip chip-mono">AUDIO</span>
                <span className="chip chip-mono">SLIDES</span>
                <span className="chip chip-mono">FLASHCARDS</span>
                <span className="chip chip-mono">MIND MAP</span>
                <span className="chip chip-mono">3D SCENE</span>
              </div>
            </div>
            <div style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--lime)', textAlign: 'right', letterSpacing: '0.08em'}}>AI<br/>GENERATED</div>
          </div>

          <div className="layer-connector"><span>1-click generation · grounded in your source · ~5 min</span></div>

          <div className="layer-block canvas">
            <div>
              <div className="layer-block-tag">Your source materials</div>
              <h3>Syllabus. Textbook. PDF stack.</h3>
              <p>Whatever you already have. We accept PDF, DOCX, plain text — a single chapter or a 300-page reader. No retyping, no reformatting, no "please use our template."</p>
              <div className="layer-block-features">
                <span className="chip chip-outline chip-mono">PDF</span>
                <span className="chip chip-outline chip-mono">DOCX</span>
                <span className="chip chip-outline chip-mono">SYLLABUS</span>
                <span className="chip chip-outline chip-mono">TEXTBOOK</span>
              </div>
            </div>
            <div style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', textAlign: 'right', letterSpacing: '0.08em'}}>WHAT YOU<br/>ALREADY HAVE</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Features deck ============== */
function Features() {
  return (
    <section className="std" id="product">
      <div className="shell features-head-shell">
        <div className="section-head features-head">
          <span className="eyebrow">What you get</span>
          <h2>Three surfaces, <em>one curriculum.</em></h2>
          <p>One upload becomes a complete course. The AI generates seven study formats, and the 3D scene lets students actually walk around the thing they're learning.</p>
        </div>

        <div className="features-info" aria-hidden="true">
          {/* Source curriculum card — at top */}
          <div className="finfo-source">
            <div className="finfo-source-label">ONE INPUT</div>
            <div className="finfo-doc">
              <div className="finfo-doc-tag">
                <svg width="11" height="14" viewBox="0 0 14 18" fill="none" aria-hidden="true">
                  <path d="M2 1 H9 L13 5 V17 H2 Z" stroke="currentColor" strokeWidth="1.2" fill="rgba(207,255,129,0.15)"/>
                  <path d="M9 1 V5 H13" stroke="currentColor" strokeWidth="1.2" fill="none"/>
                </svg>
                <span>PDF · 142 pages</span>
              </div>
              <div className="finfo-doc-title">Cell Biology 101</div>
              <div className="finfo-doc-meta">
                <span>Syllabus</span>
                <span className="finfo-dot"/>
                <span>12 modules</span>
                <span className="finfo-dot"/>
                <span>48 KCs</span>
              </div>
              <div className="finfo-doc-cells">
                {Array.from({length: 12}).map((_, i) => (
                  <span key={i} className={'finfo-doc-cell' + (i < 4 ? ' done' : i === 4 ? ' active' : '')}/>
                ))}
              </div>
            </div>
          </div>

          {/* Connector — elegant curves */}
          <svg className="finfo-connector" viewBox="0 0 320 90" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <linearGradient id="finfoGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="#2D5016" stopOpacity="0.6"/>
                <stop offset="1" stopColor="#CFFF81" stopOpacity="0.7"/>
              </linearGradient>
            </defs>
            <path d="M 160 0 Q 160 30 50 60 T 30 90"  fill="none" stroke="url(#finfoGrad)" strokeWidth="1.5"/>
            <path d="M 160 0 L 160 90" fill="none" stroke="url(#finfoGrad)" strokeWidth="1.5"/>
            <path d="M 160 0 Q 160 30 270 60 T 290 90" fill="none" stroke="url(#finfoGrad)" strokeWidth="1.5"/>
            <circle cx="30" cy="90" r="3" fill="#CFFF81"/>
            <circle cx="160" cy="90" r="3" fill="#CFFF81"/>
            <circle cx="290" cy="90" r="3" fill="#CFFF81"/>
          </svg>

          {/* Three surface device cards */}
          <div className="finfo-surfaces">
            {/* Browser surface */}
            <div className="finfo-surface">
              <div className="finfo-icon finfo-icon-web">
                <svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
                  <rect x="8" y="11" width="32" height="26" rx="5" stroke="currentColor" strokeWidth="2.4"/>
                  <path d="M8 18.5 H40" stroke="currentColor" strokeWidth="2.4"/>
                  <circle cx="13" cy="14.7" r="1.15" fill="currentColor"/>
                  <circle cx="17.2" cy="14.7" r="1.15" fill="currentColor"/>
                  <path d="M14 25.5 H30" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/>
                  <path d="M14 30.5 H24" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeOpacity="0.45"/>
                </svg>
              </div>
              <div className="finfo-surface-meta">
                <div className="finfo-surface-name">Browser</div>
                <div className="finfo-surface-sub">Read · quiz · review</div>
              </div>
            </div>

            {/* Tablet · phone surface */}
            <div className="finfo-surface finfo-surface-mid">
              <div className="finfo-icon finfo-icon-tablet">
                <svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
                  <rect x="15" y="6" width="18" height="36" rx="4.5" stroke="currentColor" strokeWidth="2.4"/>
                  <path d="M21 37.5 H27" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeOpacity="0.5"/>
                  <circle cx="24" cy="20" r="2.6" fill="currentColor"/>
                  <path d="M18.5 27c3.4-3 7.6-3 11 0" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeOpacity="0.45"/>
                </svg>
              </div>
              <div className="finfo-surface-meta">
                <div className="finfo-surface-name">Tablet &amp; phone</div>
                <div className="finfo-surface-sub">Tap · drag · rotate</div>
              </div>
            </div>

            {/* AR · VR surface */}
            <div className="finfo-surface">
              <div className="finfo-icon finfo-icon-vr">
                <svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
                  <path d="M10 17 h28 a5 5 0 0 1 5 5 v3 a6 6 0 0 1 -6 6 h-6.2 a3 3 0 0 1 -2.5 -1.35 l-1.6 -2.4 a2 2 0 0 0 -3.4 0 l-1.6 2.4 A3 3 0 0 1 17.2 31 H11 a6 6 0 0 1 -6 -6 v-3 a5 5 0 0 1 5 -5 z" stroke="currentColor" strokeWidth="2.4" strokeLinejoin="round"/>
                  <circle cx="16.5" cy="24" r="2.2" fill="currentColor"/>
                  <circle cx="31.5" cy="24" r="2.2" fill="currentColor"/>
                </svg>
              </div>
              <div className="finfo-surface-meta">
                <div className="finfo-surface-name">AR / VR</div>
                <div className="finfo-surface-sub">Step inside the scene</div>
              </div>
            </div>
          </div>
        </div>
      </div>

        <div className="features-deck shell">
          {/* 01 — One-Click Generation */}
          <div className="feature">
            <div>
              <div className="feature-num">01 · One-Click <span style={{color: 'var(--moss)'}}>· Course Generation</span></div>
              <h3>Upload a PDF. <em>Get a full course back.</em></h3>
              <p className="feature-body">Drag in a syllabus, a textbook chapter, or a stack of PDFs. The AI parses your source, structures it into modules, and writes the lessons, quizzes, and assessments. Faculty reviews every artifact before students see it. End-to-end in about five minutes.</p>
              <div className="feature-meta">
                <div className="feature-meta-cell"><div className="feature-meta-key">Source formats</div><div className="feature-meta-val">PDF · DOCX · TXT</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Avg generation</div><div className="feature-meta-val">4m 38s end-to-end</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Faculty effort</div><div className="feature-meta-val">Upload → review → publish</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Grounding</div><div className="feature-meta-val">Your source, not the web</div></div>
              </div>
              <div className="feature-cta">
                <a href="mailto:dominique@litstage.ai?subject=See%20the%20generator" className="btn btn-ink btn-sm">See the generator {Ic.arrow}</a>
              </div>
            </div>
            <div className="fvis">
              <div className="fvis-pipe">
                <div className="fvis-pipe-step"><span className="fvis-pipe-step-num">1</span><div><div className="fvis-pipe-step-name">Upload</div><div className="fvis-pipe-step-sub">PDF · DOCX · syllabus</div></div><span className="fvis-pipe-step-time">0:00</span></div>
                <div className="fvis-pipe-step"><span className="fvis-pipe-step-num">2</span><div><div className="fvis-pipe-step-name">Parse</div><div className="fvis-pipe-step-sub">Modules · objectives · KCs</div></div><span className="fvis-pipe-step-time">0:42</span></div>
                <div className="fvis-pipe-step active"><span className="fvis-pipe-step-num">3</span><div><div className="fvis-pipe-step-name">Generate</div><div className="fvis-pipe-step-sub">7 formats per module</div></div><span className="fvis-pipe-step-time">3:12</span></div>
                <div className="fvis-pipe-step"><span className="fvis-pipe-step-num">4</span><div><div className="fvis-pipe-step-name">Review &amp; publish</div><div className="fvis-pipe-step-sub">Faculty approves → live</div></div><span className="fvis-pipe-step-time">4:38</span></div>
              </div>
            </div>
          </div>

          {/* 02 — Multiple Multimedia */}
          <div className="feature flip">
            <div>
              <div className="feature-num">02 · Multimedia <span style={{color: 'var(--moss)'}}>· Seven formats, one source</span></div>
              <h3>Students choose <em>how they learn.</em></h3>
              <p className="feature-body">The same chapter, generated into seven study modalities. Read it as immersive text. Listen to it as a teacher-student conversation on the bus. Drill it as flashcards before bed. The retention boost is real — students who pick their format recall <strong>11 points higher</strong> on long-term tests than students stuck with a static PDF.</p>
              <div className="feature-meta">
                <div className="feature-meta-cell"><div className="feature-meta-key">Formats</div><div className="feature-meta-val">7 per module</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Audio voice</div><div className="feature-meta-val">Natural TTS · Kokoro</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Re-leveling</div><div className="feature-meta-val">Grade 9 → college</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Interest swap</div><div className="feature-meta-val">Examples auto-localize</div></div>
              </div>
              <div className="feature-cta">
                <a href="mailto:dominique@litstage.ai?subject=Multimedia%20formats" className="btn btn-ink btn-sm">See all formats {Ic.arrow}</a>
              </div>
            </div>
            <div className="fvis">
              <div className="fvis-formats">
                <div className="fvis-format">
                  <div className="fvis-format-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 5h16M4 10h16M4 15h10" strokeLinecap="round"/></svg>
                  </div>
                  <div className="fvis-format-name">Lesson</div>
                  <div className="fvis-format-sub">Immersive reading</div>
                </div>
                <div className="fvis-format">
                  <div className="fvis-format-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="8"/><path d="M9 10c0-2 1.5-3 3-3s3 1 3 3-3 2-3 4" strokeLinecap="round"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
                  </div>
                  <div className="fvis-format-name">Quiz</div>
                  <div className="fvis-format-sub">Bloom's L1–L3</div>
                </div>
                <div className="fvis-format featured">
                  <div className="fvis-format-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11v1a7 7 0 0014 0v-1M12 19v3" strokeLinecap="round"/></svg>
                  </div>
                  <div className="fvis-format-name">Audio</div>
                  <div className="fvis-format-sub">~3 min dialogue</div>
                </div>
                <div className="fvis-format">
                  <div className="fvis-format-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="5" width="18" height="12" rx="1"/><path d="M8 21h8M12 17v4" strokeLinecap="round"/></svg>
                  </div>
                  <div className="fvis-format-name">Slides</div>
                  <div className="fvis-format-sub">Narrated deck</div>
                </div>
                <div className="fvis-format">
                  <div className="fvis-format-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="6" width="14" height="12" rx="2"/><rect x="7" y="3" width="14" height="12" rx="2"/></svg>
                  </div>
                  <div className="fvis-format-name">Flashcards</div>
                  <div className="fvis-format-sub">Active recall</div>
                </div>
                <div className="fvis-format">
                  <div className="fvis-format-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="6" r="2"/><circle cx="5" cy="18" r="2"/><circle cx="19" cy="18" r="2"/><path d="M12 8v3m0 0L6 16m6-5l6 5"/></svg>
                  </div>
                  <div className="fvis-format-name">Mind Map</div>
                  <div className="fvis-format-sub">Concept graph</div>
                </div>
                <div className="fvis-format wide">
                  <div className="fvis-format-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L3 7l9 5 9-5-9-5z"/><path d="M3 17l9 5 9-5M3 12l9 5 9-5"/></svg>
                  </div>
                  <div className="fvis-format-name">3D Scene</div>
                  <div className="fvis-format-sub">Walk inside the lesson</div>
                </div>
              </div>
            </div>
          </div>

          {/* 03 — Interactive 3D Lessons */}
          <div className="feature">
            <div>
              <div className="feature-num">03 · Active learning <span style={{color: 'var(--moss)'}}>· Through the 3D library</span></div>
              <h3>Hands-on 3D, <em>on every device they already own.</em></h3>
              <p className="feature-body">Skip the headsets and the lab fees. The same 3D lesson runs on the laptop, Chromebook, tablet, or phone in a student's bag — and they learn the way the brain actually retains: by clicking, dragging, and exploring instead of skimming a PDF. The 3D library grows with every course you publish, so every new lesson lands on a device the student already knows how to use.</p>
              <div className="feature-meta">
                <div className="feature-meta-cell"><div className="feature-meta-key">Devices</div><div className="feature-meta-val">Laptop · tablet · phone</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Library</div><div className="feature-meta-val">Growing 3D library</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Interactions</div><div className="feature-meta-val">Click · drag · explore</div></div>
                <div className="feature-meta-cell"><div className="feature-meta-key">Author</div><div className="feature-meta-val">Photo → 3D · ~6 min</div></div>
              </div>
              <div className="feature-cta">
                <a href="mailto:dominique@litstage.ai?subject=Interactive%203D%20demo" className="btn btn-ink btn-sm">Try a 3D lesson {Ic.arrow}</a>
              </div>
            </div>
            <div className="fvis fvis-ar fvis-3d">
              <iframe
                className="fvis-3d-iframe"
                src="animal-cell/animal-cell.html?autostart=explore&embed=1"
                title="Live 3D animal cell structure"
                loading="lazy"
                tabIndex="-1"
              />
            </div>
          </div>
        </div>
    </section>
  );
}

/* ============== Step inside the simulation (AR/VR add-on) ============== */
function Simulation() {
  const videoUrl = "https://www.youtube.com/watch?v=ju4jJxTIeDI";
  const embedUrl = "https://www.youtube.com/embed/ju4jJxTIeDI?si=tjklNFYUQnN00683&autoplay=1&mute=1&loop=1&playlist=ju4jJxTIeDI&controls=0&modestbranding=1&rel=0&playsinline=1&iv_load_policy=3&disablekb=1";

  return (
    <section className="std sim-section" id="simulations">
      <div className="shell sim-grid">
        <div className="sim-text">
          <div className="feature-num">04 · Simulation <span style={{color: 'var(--moss)'}}>· AR/VR add-on</span></div>
          <h3>Step inside the simulation. <em>Learning comes alive.</em></h3>
          <p className="sim-body">
            When your program needs your specific lab, equipment, or workflow brought to life, we design a custom AR/VR simulation around your curriculum — reviewed with your subject-matter experts, delivered through your LMS, and running in the browser like everything else. Students don't read about the procedure. They walk into it.
          </p>
          <div className="sim-meta">
            <div className="sim-meta-cell">
              <div className="sim-meta-key">Format</div>
              <div className="sim-meta-val">Browser-first · AR / VR ready</div>
            </div>
            <div className="sim-meta-cell">
              <div className="sim-meta-key">Delivery</div>
              <div className="sim-meta-val">AR · VR · Web <span className="sim-meta-aside">(headsets optional)</span></div>
            </div>
            <div className="sim-meta-cell">
              <div className="sim-meta-key">Built with</div>
              <div className="sim-meta-val">Your SMEs · your curriculum</div>
            </div>
            <div className="sim-meta-cell">
              <div className="sim-meta-key">Available on</div>
              <div className="sim-meta-val">Simulation plan · custom build</div>
            </div>
          </div>
          <div className="sim-cta">
            <a href="mailto:dominique@litstage.ai?subject=Custom%20simulation%20enquiry" className="btn btn-lime btn-lg">Talk to us about a custom build →</a>
            <a href="#custom-simulations" className="btn btn-ghost-dark btn-lg">Explore custom builds</a>
          </div>
        </div>

        <div className="sim-stage" aria-hidden="true">
          <div className="sim-stage-chrome">
            <span className="sim-stage-pip"/>
            <span className="sim-stage-pip"/>
            <span className="sim-stage-pip"/>
            <span className="sim-stage-tag">EV · HV DISABLE · STEP 4/8</span>
            <span className="sim-stage-live"><span className="sim-stage-live-dot"/>Live sim</span>
          </div>
          <div className="sim-stage-video-wrap">
            <iframe
              className="sim-stage-yt-iframe sim-stage-yt-oversize"
              src={embedUrl}
              title="LitStage custom simulation demo"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              loading="lazy"
              frameBorder="0"
            />
            <div className="sim-stage-overlay">
              <span className="sim-stage-dot"/>
              <span>Decision point</span>
            </div>
          </div>
          <div className="sim-stage-toolbar">
            <span className="sim-stage-chip">Browser</span>
            <span className="sim-stage-chip">AR</span>
            <span className="sim-stage-chip is-active">VR</span>
            <span className="sim-stage-chip">Canvas</span>
            <a className="sim-stage-meta sim-stage-yt-link" href={videoUrl} target="_blank" rel="noopener noreferrer">
              Open on YouTube ↗
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Pricing — Free / Pro / School / Simulation + Pilot CTA ============== */
function Cascade() {
  const [cycle, setCycle] = React.useState('yearly'); // yearly default
  const [proOpen, setProOpen] = React.useState(false);
  const [schoolOpen, setSchoolOpen] = React.useState(false);
  const yearly = cycle === 'yearly';

  return (
    <section className="std cascade" id="pricing">
      <div className="shell cascade-inner">
        <div className="section-head" style={{textAlign: 'center', alignItems: 'center', maxWidth: 720, margin: '0 auto', marginBottom: 'clamp(32px, 4vw, 56px)'}}>
          <span className="eyebrow on-dark">Pricing · everything in plain sight</span>
          <h2 style={{textAlign: 'center'}}>Simple <em>pricing.</em></h2>
          <p style={{textAlign: 'center', margin: '0 auto'}}>
            Every plan includes the 3D builder, AI-assisted course creation, and the 3D library. Scale from one instructor to your entire college — same tools, no rebuild.
          </p>
          <p className="cascade-subhead-note">Interactive simulations are available on the Simulation plan.</p>
        </div>

        {/* Monthly / Annual toggle */}
        <div className="bill-toggle-wrap">
          <div className="bill-toggle">
            <button
              className={'bill-toggle-btn ' + (cycle === 'monthly' ? 'active' : '')}
              onClick={() => setCycle('monthly')}
            >Monthly</button>
            <button
              className={'bill-toggle-btn ' + (yearly ? 'active' : '')}
              onClick={() => setCycle('yearly')}
            >
              Annual
              <span className="bill-toggle-save">SAVE ~17%</span>
            </button>
          </div>
        </div>

        {/* Four pricing cards */}
        <div className="cascade-grid cascade-grid-4">
          {/* FREE */}
          <div className="cascade-card">
            <div className="cascade-card-tier"><span>FREE</span></div>
            <div className="tier-price-block">
              <div className="tier-price">$0</div>
              <div className="tier-cadence">forever</div>
            </div>
            <div className="tier-forwhom">For trying LitStage with a class.</div>
            <a href="/auth/register" className="btn btn-ghost-light tier-cta">Start Free</a>
            <ul className="tier-feats">
              <li>1 AI-generated course</li>
              <li>3 published 3D experiences</li>
              <li>30 student seats</li>
              <li>10 photo-to-3D generations / month</li>
              <li>Full 3D library (within free limits)</li>
              <li>“Made with LitStage” badge on shared links</li>
            </ul>
          </div>

          {/* PRO — featured */}
          <div className="cascade-card featured">
            <div className="pop-badge">MOST POPULAR</div>
            <div className="cascade-card-tier"><span style={{color: 'var(--lime)'}}>PRO</span></div>
            <div className="tier-price-block">
              <div className="tier-price">{yearly ? '$250' : '$25'}</div>
              <div className="tier-cadence">{yearly ? '/year · saves $50 vs monthly' : '/month, billed monthly'}</div>
            </div>
            <div className="tier-forwhom">For the individual instructor, all-in.</div>
            <a
              href={'/upgrade?plan=pro&interval=' + (yearly ? 'yearly' : 'monthly')}
              className="btn btn-lime tier-cta"
            >Upgrade to Pro</a>
            <ul className="tier-feats">
              <li>Unlimited AI-generated courses</li>
              <li>Unlimited published 3D experiences</li>
              <li>200 student seats</li>
              <li>100 photo-to-3D generations / month</li>
              <li>All study formats unlocked</li>
              <li>The 3D library</li>
              <li>Canvas / LMS integration</li>
              {proOpen && (
                <React.Fragment>
                  <li>iOS AR companion app</li>
                  <li>Natural-voice narration</li>
                  <li>Engagement reports (CSV)</li>
                  <li>No watermark</li>
                  <li>Email support</li>
                </React.Fragment>
              )}
            </ul>
            <button className="tier-more" onClick={() => setProOpen(!proOpen)}>
              {proOpen ? 'Show less' : '+ 5 more'}
            </button>
          </div>

          {/* SCHOOL */}
          <div className="cascade-card">
            <div className="cascade-card-tier"><span>SCHOOL</span></div>
            <div className="tier-price-block">
              <div className="tier-price">{yearly ? '$200' : '$20'}</div>
              <div className="tier-cadence">{yearly ? '/instructor/year · 5-instructor min (from $1,000/yr)' : '/instructor/month · 5-instructor min (from $100/mo)'}</div>
            </div>
            <div className="tier-forwhom">For a department adopting together.</div>
            <a
              href={'/upgrade?plan=school&interval=' + (yearly ? 'yearly' : 'monthly')}
              className="btn btn-ghost-light tier-cta"
            >Upgrade to School</a>
            <ul className="tier-feats">
              <li>Everything in Pro</li>
              <li>Pay per instructor — for who you actually have</li>
              <li>200 student seats pooled across the department</li>
              <li>Bulk roster sync (CSV / SIS / Canvas)</li>
              <li>Single Sign-On (Google / Microsoft)</li>
              {schoolOpen && (
                <React.Fragment>
                  <li>Quarterly check-ins</li>
                  <li>1 custom 3D asset request / quarter</li>
                  <li>Priority support</li>
                </React.Fragment>
              )}
            </ul>
            <button className="tier-more" onClick={() => setSchoolOpen(!schoolOpen)}>
              {schoolOpen ? 'Show less' : '+ 3 more'}
            </button>
          </div>

          {/* SIMULATION — featured "MOST CHOSEN" — build + license model */}
          <div className="cascade-card featured">
            <div className="pop-badge">MOST CHOSEN</div>
            <div className="cascade-card-tier"><span style={{color: 'var(--lime)'}}>SIMULATION</span></div>
            <div className="tier-price-block">
              <div className="tier-price tier-price-custom">Custom</div>
              <div className="tier-cadence">Scoped to your program · billed annually</div>
              <div className="tier-build-note">
                Pricing depends on scope — <a href="mailto:dominique@litstage.ai?subject=Custom%20simulation%20quote">contact us</a> for a quote.
              </div>
            </div>
            <div className="tier-forwhom">For a whole department or college — we build your simulation, then license it per student.</div>
            <a href="mailto:dominique@litstage.ai?subject=Simulation%20tier%20enquiry" className="btn btn-lime tier-cta">Talk to Us →</a>
            <div className="tier-howit">
              <span className="tier-howit-step"><b>1</b> We build it</span>
              <span className="tier-howit-sep">→</span>
              <span className="tier-howit-step"><b>2</b> You license it per student</span>
            </div>
            <ul className="tier-feats">
              <li>Everything in School</li>
              <li>We build your simulation, mapped to your curriculum (one-time build)</li>
              <li>Then per-student licensing to run it — hosting, maintenance &amp; updates included</li>
              <li>Per-student access — every student, no seat cap</li>
              <li>Your custom simulation + the full simulation library — only on this plan</li>
              <li>AI custom course generator</li>
              <li>AR mode + WebXR — VR-ready when you are</li>
              <li>No headset required — runs on devices students already own</li>
              <li>Optional Quest 3S / smart AR glasses (ask us)</li>
              <li>Dedicated Customer Success Manager</li>
            </ul>
          </div>
        </div>

        <p className="cascade-grid-foot">Simulation and custom builds are billed annually.</p>

        {/* (Co-creation pilot block removed — redundant with Custom Simulations + Simulation card) */}

      </div>
    </section>
  );
}

/* ============== Custom Simulations — service band (not a 5th card) ============== */
function CustomSims() {
  return (
    <section className="std csim-section" id="custom-simulations">
      <div className="shell">
        <div className="section-head csim-head" style={{textAlign: 'center', alignItems: 'center', maxWidth: 820, margin: '0 auto', marginBottom: 'clamp(32px, 4vw, 56px)'}}>
          <span className="eyebrow">Custom simulations · a service, not a plan</span>
          <h2 style={{textAlign: 'center'}}>
            Need a simulation that doesn't exist yet? <em>We'll build it.</em>
          </h2>
          <p style={{textAlign: 'center', margin: '0 auto'}}>
            Tell us the lab or scenario you wish students could step into — we'll build a custom AR, VR, or interactive simulation, scoped to your course and delivered to your LMS.
          </p>
        </div>

        <div className="csim-footer">
          <p className="csim-foot-note">
            Includes curriculum mapping, expert review, and a year of student access. <span className="csim-discount-tag">Pricing scoped to your program.</span>
          </p>
          <div className="csim-cta-row">
            <a href="mailto:dominique@litstage.ai?subject=Custom%20simulation%20discovery%20call" className="btn btn-lime btn-lg">Book a discovery call →</a>
            <a href="mailto:dominique@litstage.ai?subject=LitStage%20enquiry" className="btn btn-ghost-light btn-lg">Contact us</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== FAQ — light section below cascade ============== */
function PricingFAQ() {
  const [open, setOpen] = React.useState(null);
  const faqs = [
    {
      q: "Do students need a VR headset?",
      a: "No — LitStage runs in any modern browser on laptops, Chromebooks, tablets, and phones. VR and AR are optional add-ons.",
    },
    {
      q: "Which plan is right for me?",
      a: "One class? Start Free. One instructor, all-in? Pro. A department together? School. A whole college, every student? Simulation. Need something built for your program? A Custom Simulation.",
    },
    {
      q: "How is the School plan billed?",
      a: "Per instructor, 5-instructor minimum — you pay for who you have, and student seats are pooled.",
    },
    {
      q: "Can I start free and upgrade later?",
      a: "Yes. Everything you build carries forward.",
    },
    {
      q: "What's the difference between the Simulation plan and a Custom build?",
      a: "The Simulation plan gives every student our full library. A Custom build is a new simulation made just for your program. Many customers do both.",
    },
    {
      q: "Do you work with our LMS?",
      a: "Yes — Canvas and other major platforms, with roster sync and gradebook handoff on School and above.",
    },
    {
      q: "Can we pay by purchase order?",
      a: "Yes — School, Simulation, and Custom plans support invoicing and POs.",
    },
  ];

  return (
    <section className="std faq-section" id="faq">
      <div className="shell" style={{maxWidth: 880}}>
        <div className="section-head" style={{textAlign: 'center', alignItems: 'center', margin: '0 auto', marginBottom: 'clamp(32px, 4vw, 56px)'}}>
          <span className="eyebrow">FAQ</span>
          <h2 style={{textAlign: 'center'}}>FAQ</h2>
        </div>
        <div className="faq">
          {faqs.map((f, i) => (
            <div className={'faq-row' + (open === i ? ' open' : '')} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle">{open === i ? '–' : '+'}</span>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== Impact / Equity ============== */
function Impact() {
  return (
    <section className="std impact">
      <div className="shell">
        <div className="impact-grid">
          <div>
            <span className="eyebrow">Why this matters</span>
            <p className="impact-quote">Faculty shouldn&rsquo;t need a studio, a grant, or a headset lab to give students an immersive lesson. LitStage turns the curriculum they already have into something students can step inside — in the browser they already have open.</p>
            <div className="impact-attrib">— Dominique Wu, Founder</div>
          </div>
          <div className="impact-stats">
            <div className="impact-stat">
              <div className="impact-stat-num">41<em>%</em></div>
              <div className="impact-stat-lbl">CCC students working 20+ hrs/wk while enrolled</div>
            </div>
            <div className="impact-stat">
              <div className="impact-stat-num">$0</div>
              <div className="impact-stat-lbl">Required student spend on LitStage simulations</div>
            </div>
            <div className="impact-stat">
              <div className="impact-stat-num">~5<em>min</em></div>
              <div className="impact-stat-lbl">Faculty time per simulation, photo to publish</div>
            </div>
            <div className="impact-stat">
              <div className="impact-stat-num">100<em>%</em></div>
              <div className="impact-stat-lbl">Browser-only · no headsets, no installs, no IT tickets</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Cohort banner ============== */
function Cohort({ tweaks }) {
  if (!tweaks.showCohort) return null;
  const left = 5 - tweaks.seatsClaimed;
  return (
    <section className="std" id="cohort" style={{paddingTop: 0}}>
      <div className="shell">
        <div style={{
          background: 'var(--paper)', border: '1px solid var(--hairline)', borderRadius: 24,
          padding: 'clamp(32px, 4vw, 56px)', display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 32, alignItems: 'center',
          boxShadow: '0 30px 60px -36px rgba(11,13,10,0.18)'
        }}>
          <div>
            <span className="eyebrow">2026 Design Partner Cohort</span>
            <h3 style={{fontSize: 'clamp(28px, 3vw, 44px)', marginTop: 14, fontWeight: 600, letterSpacing: '-0.025em'}}>
              Five colleges. Five disciplines. <span className="serif" style={{color: 'var(--moss)'}}>One library.</span>
            </h3>
            <p style={{marginTop: 16, color: 'var(--ink-2)', maxWidth: 520, fontSize: 16, lineHeight: 1.55}}>
              Cohort partners get faculty workshops, custom photo→3D pipeline runs, and co-authoring credit on every sim that ships back to the shared library.
            </p>
            <div style={{marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap'}}>
              <a href="#contact" className="btn btn-ink">Apply for cohort {Ic.arrow}</a>
              <a href="#contact" className="btn btn-ghost-dark">Read the cohort brief</a>
            </div>
          </div>
          <div style={{
            background: 'var(--ink)', borderRadius: 18, padding: 28, color: '#fff',
            position: 'relative'
          }}>
            <div style={{display: 'flex', alignItems: 'baseline', gap: 8}}>
              <div style={{fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--lime)', textTransform: 'uppercase'}}>Seats remaining</div>
              <div style={{marginLeft: 'auto', fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(255,255,255,0.5)'}}><span className="dot live"/> live</div>
            </div>
            <div style={{fontSize: 96, fontFamily: 'var(--mono)', fontWeight: 500, color: 'var(--lime)', lineHeight: 1, marginTop: 12, fontFeatureSettings: '"tnum"'}}>
              {String(left).padStart(2, '0')}<span style={{color: 'rgba(255,255,255,0.3)', fontSize: 32, marginLeft: 8}}>/05</span>
            </div>
            <div style={{display: 'flex', gap: 6, marginTop: 18}}>
              {Array.from({length: 5}).map((_, i) => (
                <div key={i} style={{
                  flex: 1, height: 8, borderRadius: 4,
                  background: i < tweaks.seatsClaimed ? 'rgba(255,255,255,0.18)' : 'var(--lime)'
                }}/>
              ))}
            </div>
            <div style={{marginTop: 22, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.08)', fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(255,255,255,0.6)'}}>
              <div>Las Positas — anatomy <span style={{color: 'var(--lime)'}}>· claimed</span></div>
              <div style={{marginTop: 6}}>Cañada — early childhood <span style={{color: 'var(--lime)'}}>· claimed</span></div>
              <div style={{marginTop: 6, opacity: 0.5}}>Seat 03 — open</div>
              <div style={{marginTop: 6, opacity: 0.5}}>Seat 04 — open</div>
              <div style={{marginTop: 6, opacity: 0.5}}>Seat 05 — open</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== About — founder, team & advisors ============== */
/* Flip to true once square headshots are dropped into v3/about/
   (dominique-wu.jpg, sergio-zamudio.jpg, deavy-j.jpg,
    advisor-amy-lameyer.jpg, advisor-suha-aljuboori.jpg,
    advisor-karen-alexander.jpg, advisor-robin-moulder.jpg).
   Until then, every avatar shows its initials monogram. */
const ABOUT_PHOTOS = false;
const aboutPhoto = (file) => (ABOUT_PHOTOS ? 'about/' + file : null);

const personIcon = (
  <svg viewBox="0 0 48 48" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {/* avatar */}
    <circle cx="15" cy="15" r="5.5"/>
    <path d="M6.5 28c0-5 3.8-8 8.5-8s8.5 3 8.5 8"/>
    {/* controller */}
    <g transform="translate(20,18) scale(0.62)">
      <path d="M16 20H32c4.2 0 7.4 3 8.4 7l1.9 8c.6 2.8-2 5.2-4.7 4L33 36H15l-3.6 3c-2.7 1.2-5.3-1.2-4.7-4l1.9-8c1-4 4.2-7 8.4-7Z"/>
      <path d="M13.5 26v6M10.5 29h6"/>
      <circle cx="32.5" cy="27.5" r="1.6" fill="currentColor" stroke="none"/>
      <circle cx="36.5" cy="30.5" r="1.6" fill="currentColor" stroke="none"/>
    </g>
  </svg>
);

function Avatar({ src, alt, initials, icon, imgStyle, bg, className }) {
  const [err, setErr] = React.useState(false);
  if (bg) {
    return (
      <div className={'avatar-circle ' + className} role="img" aria-label={alt}
        style={{backgroundImage: "url('" + bg.src + "')", backgroundSize: bg.size || 'cover', backgroundPosition: bg.position || 'center', backgroundRepeat: 'no-repeat'}}/>
    );
  }
  return (
    <div className={'avatar-circle ' + className}>
      {src && !err
        ? <img src={src} alt={alt} style={imgStyle} onError={() => setErr(true)}/>
        : (icon || initials)}
    </div>
  );
}

function About() {
  return (
    <section className="std about-section" id="about">
      <div className="shell">
        <div className="about-grid">
          <div className="about-text">
            <span className="eyebrow">About LitStage</span>
            <h2>Made for community college, <em>by people who teach in it.</em></h2>
            <div className="about-lede">
              <p>LitStage was founded by <strong>Dominique Wu</strong> — a professor, XR creator, and author of the Forbes-featured book <em>Spatial Design: Breaking the 2D Paradigm</em>. After a 15-year career building augmented- and virtual-reality systems at startups and companies like Meta and Walmart, Dominique brought that work back to the place that needs it most: the California community colleges, where what&rsquo;s usually missing is access, not ambition.</p>
              <p>Most immersive learning tools are priced for research universities and built for students who already have the time, hardware, and money to use them. The largest, most diverse tier of higher education gets skipped. <strong>LitStage exists to close that gap</strong> — studio-quality 3D, AR, and interactive lessons that run in the browser every student already has open, and that any instructor can build in minutes.</p>
            </div>
            <div className="about-rule"/>
            <p className="about-closer">It&rsquo;s built the way it&rsquo;s meant to be used — <strong>faculty and students side by side.</strong> Community college students design and engineer the product; faculty advisors keep it honest about what real classrooms need.</p>
          </div>

          <div className="about-rail">
            <div className="founder-card">
              <div className="fc-tag">Founder</div>
              <div className="fc-head">
                <Avatar className="fc-avatar" src="about/dominique-wu.jpg" alt="Dominique Wu" initials="DW"/>
                <div>
                  <div className="fc-name">Dominique Wu</div>
                  <div className="fc-role">Professor, Cañada College · Ex-Meta &amp; Walmart XR<br/>Leads Spatial AI, CA Community Colleges Chancellor&rsquo;s Office</div>
                </div>
              </div>
              <p className="fc-quote">&ldquo;Give students honest, hands-on practice — in the browser they already have open.&rdquo;</p>
            </div>

            <div className="stat-card">
              <div className="sc-big">~90<span>sec</span></div>
              <p>from a single chapter to a full, interactive multimedia lesson — on any device a student already owns.</p>
            </div>
          </div>
        </div>

        <div className="about-team">
          <div className="team-head">The Team</div>
          <p className="team-sub">A small crew of California community college students and faculty advisors — building the tool we wish we&rsquo;d had.</p>

          <div className="people-grid">
            <div className="person">
              <Avatar className="p-avatar" src="about/dominique-wu.jpg" alt="Dominique Wu" initials="DW"/>
              <div className="p-name">Dominique Wu</div>
              <div className="p-role">Founder &amp; Lead</div>
              <div className="p-role">Faculty at Cañada College</div>
              <span className="p-badge">Ex-Meta &amp; Walmart XR</span>
            </div>
            <div className="person">
              <Avatar className="p-avatar" src="about/sergio-zamudio.jpg" alt="Sergio Zamudio Jr." initials="SZ"/>
              <div className="p-name">Sergio Zamudio Jr.</div>
              <div className="p-role">Technical Game Designer</div>
              <div className="p-role">Alumnus of Cañada College</div>
            </div>
            <div className="person">
              <Avatar className="p-avatar" alt="Deavy Jones Cristobal" initials="DJ" icon={personIcon} bg={{src: 'about/deavy-j.jpg?v=2', size: 'cover', position: '50% 8%'}}/>
              <div className="p-name">Deavy Jones Cristobal</div>
              <div className="p-role">Technical Game Developer</div>
              <div className="p-role">Former Student at San Mateo College</div>
            </div>
          </div>

          <div className="advisors-wrap">
            <div className="advisors-head">Faculty &amp; industry advisors</div>
            <div className="advisors-grid">
              <div className="advisor"><Avatar className="a-avatar" src={aboutPhoto('advisor-amy-lameyer.jpg')} alt="Amy LaMeyer" initials="AL"/><div className="a-name">Amy LaMeyer</div></div>
              <div className="advisor"><Avatar className="a-avatar" src={aboutPhoto('advisor-suha-aljuboori.jpg')} alt="Dr. Suha Aljuboori" initials="SA"/><div className="a-name">Dr. Suha Aljuboori</div></div>
              <div className="advisor"><Avatar className="a-avatar" src={aboutPhoto('advisor-karen-alexander.jpg')} alt="Karen Alexander" initials="KA"/><div className="a-name">Karen Alexander</div></div>
              <div className="advisor"><Avatar className="a-avatar" src={aboutPhoto('advisor-robin-moulder.jpg')} alt="Robin Moulder" initials="RM"/><div className="a-name">Robin Moulder</div></div>
            </div>
            <p className="grat">With gratitude to <strong>Oliver Simpson</strong>, founding contributor.</p>
          </div>

          <p className="about-disclaimer">LitStage is an independent product of XReality, Inc. It is not affiliated with, endorsed by, or sponsored by the California Community Colleges Chancellor&rsquo;s Office. References to the founder&rsquo;s role with the Chancellor&rsquo;s Office are personal and biographical only.</p>
        </div>
      </div>
    </section>
  );
}

/* ============== End CTA ============== */
function EndCTA() {
  return (
    <section className="endcta" id="contact">
      <div className="shell endcta-inner">
        <h2>Lessons that <em>come alive.</em></h2>
        <p>If you teach at a community college or CTE program preparing for Workforce Pell, we want to talk. The cohort is small on purpose.</p>
        <div className="endcta-cta">
          <a href="mailto:dominique@litstage.ai" className="btn btn-lime btn-lg">dominique@litstage.ai {Ic.arrow}</a>
        </div>
      </div>
    </section>
  );
}

/* ============== Footer ============== */
function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="brand" href="#top" style={{color: '#fff'}}>
              <span className="brand-mark"/>
              <span>LitStage</span>
            </a>
            <p className="footer-brand-tag">One-click AI course generation, seven study formats per module, and interactive 3D lessons. Built for community college and CTE programs.</p>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">Product</div>
            <ul>
              <li><a href="#product">One-click generation</a></li>
              <li><a href="#product">Multimedia formats</a></li>
              <li><a href="#product">Interactive 3D lessons</a></li>
              <li><a href="#product">AI study buddy</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">Programs</div>
            <ul>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#brief">White paper</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">Company</div>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="mailto:dominique@litstage.ai">Contact</a></li>
              <li><a href="#privacy">Privacy</a></li>
              <li><a href="#terms">Terms</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 LitStage · Built in Hayward, CA</span>
          <span>v0.4 · Updated April 2026</span>
        </div>
        <div className="footer-legal">
          LitStage is an independent product of XReality, Inc. It is not affiliated with, endorsed by, or sponsored by the California Community Colleges Chancellor's Office. References to the founder's role with the California Community Colleges Chancellor's Office are personal and biographical only.
        </div>
      </div>
    </footer>
  );
}

window.CanvasLayer = CanvasLayer;
window.Features = Features;
window.Simulation = Simulation;
window.Cascade = Cascade;
window.CustomSims = CustomSims;
window.PricingFAQ = PricingFAQ;
window.Impact = Impact;
window.Cohort = Cohort;
window.About = About;
window.EndCTA = EndCTA;
window.Footer = Footer;
