// Sections A: Nav, Hero, ProofBar, Worlds, ThreeDoors

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const Hero = () => (
  <section className="hero" data-screen-label="01 Hero">
    {/* faint backdrop splat */}
    <div style={{ position: 'absolute', inset: 0, zIndex: 0, opacity: 0.5 }}>
      <SplatThumb scheme="space" density={40} />
    </div>
    <ParticleField density={100} color="125, 255, 196" baseAlpha={0.55} speed={0.05} />
    <div className="hero-veil"/>
    <div className="container hero-content">
      <div className="hero-meta mono">
        <span>WORLD 001 · DEEP SPACE CLASSROOM</span>
        <span className="dot"></span>
        <span style={{ color: 'var(--accent)' }}><span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)', marginRight: 6 }}></span>Live · 47 students inside now</span>
      </div>
      <h1 className="t-display">School inside<br/>a world.</h1>
      <p className="hero-sub">
        WASC-accredited K–12. <b>369 courses</b>, every one delivered inside a photorealistic 3D world generated by World Labs Marble. <b>402 students</b>. <b>20 countries</b>. One browser tab.
      </p>
      <div className="hero-ctas">
        <a className="btn btn-primary btn-lg" href="#enroll">Enroll for 2026–27 <Icon name="arrowRight" size={16}/></a>
        <button className="btn btn-secondary btn-lg" onClick={() => alert('Marble world preview — placeholder modal')}>
          <Icon name="enter" size={16}/> Step into a world
        </button>
      </div>
    </div>
    <div className="hero-scroll">
      <span>Scroll</span>
      <span className="hero-scroll-line"></span>
    </div>
  </section>
);

const ProofBar = () => {
  const stats = [
    { n: 402, suf: '+', l: 'Students', c: '20+ countries enrolled', tone: '' },
    { n: 20, suf: '+', l: 'Countries', c: 'Time-zone-aware cohorts', tone: '' },
    { n: 91, suf: '%', l: 'Math proficiency', c: 'vs 26% U.S. national avg (NAEP 2024)', tone: '' },
    { n: 89, suf: '%', l: 'Science proficiency', c: 'vs 30% U.S. national avg', tone: '' },
    { n: 86, suf: '%', l: 'ELA proficiency', c: 'vs 33% U.S. national avg', tone: '' },
    { n: 369, suf: '', l: 'UC A–G courses', c: '40 honors · 7 subject areas', tone: 'warm' },
  ];
  return (
    <section className="proof" data-screen-label="02 Proof bar">
      <div className="container">
        <div className="proof-grid">
          {stats.map((s, i) => (
            <div className={`proof-cell ${s.tone}`} key={i}>
              <div className="num"><CountUp to={s.n}/><span className="unit">{s.suf}</span></div>
              <div className="label">{s.l}</div>
              <div className="context">{s.c}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// (WORLDS data lives in worlds-data.jsx)

const Worlds = () => (
  <section className="worlds s-pad" id="worlds" data-screen-label="03 The six worlds">
    <div className="container-wide">
      <div className="worlds-head">
        <div className="sec-head">
          <span className="eyebrow t-xs"><span className="bar"></span> SECTION 03 · WORLDS</span>
          <h2 className="t-h1">Every lesson<br/>is a place.</h2>
          <p className="sub">Powered by World Labs Marble. Gaussian Splatting. Spark.js. Runs in any browser. No headset required.</p>
        </div>
        <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>
          <div>6 LIVE WORLDS</div>
          <div style={{ marginTop: 4 }}>40+ MORE IN GENERATION</div>
        </div>
      </div>
      <div className="worlds-scroller">
        {WORLDS.map((w) => (
          <div className="world-card" key={w.id}>
            <div className="world-thumb">
              <div className="splat"><SplatThumb scheme={w.scheme} density={80} label={`marble://world.${w.id}`}/></div>
              <div className="world-meta">
                {w.live ? (
                  <span className="world-live"><span className="pulse"></span>LIVE · {w.students}</span>
                ) : (
                  <span className="chip" style={{ background: 'rgba(8,8,12,0.7)' }}>BETA</span>
                )}
                <span className="world-id mono">{w.id}</span>
              </div>
            </div>
            <div className="world-foot">
              <div>
                <div className="t-xs ink-3" style={{ marginBottom: 4 }}>{w.subject}</div>
                <h3 className="title">{w.name}</h3>
                <p className="desc">{w.short}</p>
              </div>
              <a href={w.url} target="_blank" rel="noopener" className="world-enter">
                Enter <Icon name="arrowUpRight" size={14}/>
              </a>
            </div>
          </div>
        ))}
      </div>
      <div className="mono" style={{ marginTop: 16, fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.1em' }}>
        ← SCROLL · PRESS ENTER TO STEP INSIDE ANY WORLD →
      </div>
    </div>
  </section>
);

// Three doors — distinct visual treatments per column
const DoorFamilies = () => (
  <div className="door-vis" style={{ background: 'var(--bg-0)' }}>
    {/* Mock student dashboard */}
    <div style={{ padding: 20, fontSize: 12, color: 'var(--ink-2)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>STUDENT · MIA, GRADE 10</div>
        <span className="chip chip-accent" style={{ fontSize: 10 }}><span className="dot"></span>IN WORLD 003</span>
      </div>
      <div style={{ fontSize: 14, color: 'var(--ink-0)', fontWeight: 500 }}>Today's path</div>
      <div className="dash-row"><span style={{ fontSize: 11, width: 90, color: 'var(--ink-2)' }}>Bio · Cell</span><span className="dash-bar"><i style={{ width: '76%' }}></i></span><span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', width: 32, textAlign: 'right' }}>76%</span></div>
      <div className="dash-row"><span style={{ fontSize: 11, width: 90, color: 'var(--ink-2)' }}>Algebra II</span><span className="dash-bar"><i style={{ width: '52%' }}></i></span><span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', width: 32, textAlign: 'right' }}>52%</span></div>
      <div className="dash-row"><span style={{ fontSize: 11, width: 90, color: 'var(--ink-2)' }}>World Hist</span><span className="dash-bar"><i style={{ width: '88%' }}></i></span><span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', width: 32, textAlign: 'right' }}>88%</span></div>
      <div className="dash-row"><span style={{ fontSize: 11, width: 90, color: 'var(--ink-2)' }}>AP CS · A</span><span className="dash-bar"><i style={{ width: '34%' }}></i></span><span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', width: 32, textAlign: 'right' }}>34%</span></div>
      <div style={{ marginTop: 16, padding: 12, background: 'var(--bg-3)', borderRadius: 8, fontSize: 11, color: 'var(--ink-2)', lineHeight: 1.45 }}>
        <span style={{ color: 'var(--accent)' }}>SofAI ·</span> Next: 30 min in Inside the Cell. Today we trace a protein from your ribosome to the cell membrane.
      </div>
    </div>
  </div>
);

const DoorSchools = () => (
  <div className="door-vis" style={{ background: 'var(--bg-0)' }}>
    {/* District licensing wireframe */}
    <svg viewBox="0 0 320 220" style={{ width: '100%', height: '100%' }}>
      <defs>
        <pattern id="dotgrid" width="20" height="20" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.8" fill="rgba(255,255,255,0.06)" />
        </pattern>
      </defs>
      <rect width="320" height="220" fill="url(#dotgrid)" />
      {/* district box */}
      <rect x="20" y="20" width="280" height="180" stroke="rgba(255,255,255,0.12)" fill="none" rx="6" strokeDasharray="3 3"/>
      <text x="30" y="36" fontSize="9" fill="#71717A" fontFamily="Geist Mono">DISTRICT</text>
      {/* schools */}
      <rect x="40" y="60" width="70" height="40" rx="4" stroke="rgba(255,255,255,0.2)" fill="rgba(125,255,196,0.04)"/>
      <text x="75" y="78" fontSize="10" fill="#E5E5EA" textAnchor="middle" fontWeight="500">School A</text>
      <text x="75" y="92" fontSize="8" fill="#71717A" textAnchor="middle" fontFamily="Geist Mono">240 SEATS</text>
      <rect x="125" y="60" width="70" height="40" rx="4" stroke="rgba(255,255,255,0.2)" fill="rgba(125,255,196,0.04)"/>
      <text x="160" y="78" fontSize="10" fill="#E5E5EA" textAnchor="middle" fontWeight="500">School B</text>
      <text x="160" y="92" fontSize="8" fill="#71717A" textAnchor="middle" fontFamily="Geist Mono">180 SEATS</text>
      <rect x="210" y="60" width="70" height="40" rx="4" stroke="rgba(255,255,255,0.2)" fill="rgba(125,255,196,0.04)"/>
      <text x="245" y="78" fontSize="10" fill="#E5E5EA" textAnchor="middle" fontWeight="500">School C</text>
      <text x="245" y="92" fontSize="8" fill="#71717A" textAnchor="middle" fontFamily="Geist Mono">320 SEATS</text>
      {/* lines down */}
      <path d="M75 100 V 130" className="district-active" stroke="#7DFFC4" strokeWidth="1.2" fill="none"/>
      <path d="M160 100 V 130" className="district-active" stroke="#7DFFC4" strokeWidth="1.2" fill="none"/>
      <path d="M245 100 V 130" className="district-active" stroke="#7DFFC4" strokeWidth="1.2" fill="none"/>
      {/* core */}
      <rect x="60" y="140" width="200" height="50" rx="6" stroke="#7DFFC4" fill="rgba(125,255,196,0.08)" strokeWidth="1.5"/>
      <text x="160" y="161" fontSize="11" fill="#F5F5F7" textAnchor="middle" fontWeight="600">VR School Marble Core</text>
      <text x="160" y="176" fontSize="9" fill="#7DFFC4" textAnchor="middle" fontFamily="Geist Mono">740 SEATS · WASC SUB-LICENSE</text>
    </svg>
  </div>
);

const DoorPartners = () => {
  const nodes = [
    { x: 50, y: 50, label: 'VR School', center: true },
    { x: 18, y: 22, label: 'World Labs', accent: true },
    { x: 82, y: 24, label: 'WASC' },
    { x: 16, y: 78, label: 'UC A–G' },
    { x: 82, y: 76, label: 'CVC' },
    { x: 50, y: 12, label: 'Stanford' },
    { x: 50, y: 88, label: 'Future' },
  ];
  return (
    <div className="door-vis" style={{ background: 'var(--bg-0)' }}>
      <svg viewBox="0 0 100 100" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {nodes.filter(n => !n.center).map((n, i) => (
          <line key={i} x1="50" y1="50" x2={n.x} y2={n.y} stroke={n.accent ? '#7DFFC4' : 'rgba(255,255,255,0.12)'} strokeWidth="0.2"/>
        ))}
      </svg>
      {nodes.map((n, i) => (
        <div key={i} style={{
          position: 'absolute', left: `${n.x}%`, top: `${n.y}%`, transform: 'translate(-50%, -50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        }}>
          <div style={{
            width: n.center ? 14 : 8, height: n.center ? 14 : 8, borderRadius: '50%',
            background: n.center ? 'var(--accent)' : (n.accent ? 'var(--accent)' : 'var(--ink-3)'),
            boxShadow: n.center ? '0 0 20px var(--accent-glow)' : (n.accent ? '0 0 8px var(--accent-glow)' : 'none'),
          }}/>
          <span style={{ fontSize: 9, color: n.center ? 'var(--ink-0)' : 'var(--ink-2)', fontFamily: 'Geist Mono', letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>{n.label}</span>
        </div>
      ))}
    </div>
  );
};

const ThreeDoors = () => (
  <section className="doors s-pad" id="doors" data-screen-label="04 Three doors">
    <div className="container">
      <div className="sec-head">
        <span className="eyebrow t-xs"><span className="bar"></span> SECTION 04 · THREE WAYS IN</span>
        <h2 className="t-h2">Pick the door<br/>that fits.</h2>
      </div>
      <div className="doors-grid">
        <div className="door">
          <DoorFamilies/>
          <div>
            <h3>For students and families</h3>
            <p>Apply, place, and start inside a world within two weeks. A diploma the UC system reads as it would any other. Tuition and aid up-front, no hidden fees.</p>
          </div>
          <div className="door-foot">
            <a className="btn btn-primary btn-sm" href="#enroll">Begin enrollment <Icon name="arrowRight" size={14}/></a>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>~10 MIN</span>
          </div>
        </div>
        <div className="door">
          <DoorSchools/>
          <div>
            <h3>For schools and districts</h3>
            <p>License the Marble core for your accredited program. Teacher training, world authoring, and white-label SofAI. Start with a 12-seat pilot inside one classroom.</p>
          </div>
          <div className="door-foot">
            <a className="btn btn-secondary btn-sm" href="#">Talk to schools team <Icon name="arrowRight" size={14}/></a>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>12–740 SEATS</span>
          </div>
        </div>
        <div className="door">
          <DoorPartners/>
          <div>
            <h3>For partners</h3>
            <p>Research access, sponsored worlds, endowment. We publish what we learn. Bring a discipline, build a world. Bring capital, fund a country.</p>
          </div>
          <div className="door-foot">
            <a className="btn btn-secondary btn-sm" href="#">Open a conversation <Icon name="arrowRight" size={14}/></a>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>3 ACTIVE</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, ProofBar, Worlds, ThreeDoors });