// Campus page — Spatial Campus, six worlds with real Marble URLs

const CampusHero = () => (
  <section className="campus-hero" data-screen-label="01 Campus hero">
    <ParticleField density={70} color="125, 255, 196" baseAlpha={0.35} speed={0.04}/>
    <div className="container opener">
      <div className="page-eyebrow"><span className="bar"></span>SPATIAL CAMPUS · 2026–27 · 6 WORLDS LIVE</div>
      <h1>Six worlds.<br/>One campus.</h1>
      <p className="lede">
        Our campus is not a building. It is a set of six photorealistic worlds, generated by World Labs Marble, that any student can step into from a browser tab. This page is the directory. Click any world to open it in Marble.
      </p>
      <div className="campus-meta-row">
        <span className="item">RENDERED IN <b>SPARK.JS</b></span>
        <span className="item">GAUSSIAN SPLATTING · <b>~4M PTS / WORLD</b></span>
        <span className="item">RUNS ON <b>ANY BROWSER</b></span>
        <span className="item"><b>NO HEADSET</b> REQUIRED</span>
      </div>
    </div>
  </section>
);

const WorldDetail = ({ w, idx }) => (
  <section className="world-detail" data-screen-label={`${String(idx + 2).padStart(2,'0')} ${w.name}`}>
    <div className="container">
      <div className="world-detail-grid">
        <div className="world-detail-thumb">
          <SplatThumb scheme={w.scheme} density={120} label={`marble://world.${w.id}`}/>
          <div className="badge">
            {w.live ? (
              <span className="world-live"><span className="pulse"></span>LIVE · {w.students} 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>
          <div className="subject-line"><span>WORLD {w.id}</span><span className="sep"></span><span>{w.subject.toUpperCase()}</span></div>
          <h2>{w.name}</h2>
          <p style={{ fontSize: 22, color: 'var(--ink-0)', fontWeight: 500, lineHeight: 1.4, marginBottom: 16 }}>{w.short}</p>
          <p>{w.long}</p>
          <div className="courses-list">
            <div className="label">COURSES TAUGHT HERE</div>
            <ul>
              {w.courses.map((c, i) => <li key={i}>{c}</li>)}
            </ul>
          </div>
          <div className="actions">
            <a className="btn btn-primary" href={w.url} target="_blank" rel="noopener">
              Open in Marble <Icon name="arrowUpRight" size={14}/>
            </a>
            <a className="btn btn-secondary" href={`courses.html`}>See courses</a>
          </div>
          <div className="urn">{w.url}</div>
        </div>
      </div>
    </div>
  </section>
);

const CampusPage = () => (
  <>
    <Nav current="campus"/>
    <CampusHero/>
    {WORLDS.map((w, i) => <WorldDetail key={w.id} w={w} idx={i}/>)}
    <section style={{ padding: '96px 0 128px', borderTop: '1px solid var(--line-soft)', background: 'var(--bg-0)' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <div className="page-eyebrow" style={{ justifyContent: 'center' }}><span className="bar"></span>NEXT</div>
        <h2 className="t-h2" style={{ marginTop: 16, marginBottom: 16 }}>40+ more worlds in generation.</h2>
        <p className="ink-2" style={{ fontSize: 18, marginBottom: 32, maxWidth: 580, margin: '0 auto 32px' }}>
          Every cohort can request a new world for their unit. Teachers prompt. Marble generates in five minutes. We push the live ones here.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a className="btn btn-primary btn-lg" href="enroll.html">Enroll for 2026–27 <Icon name="arrowRight" size={16}/></a>
          <a className="btn btn-secondary btn-lg" href="how-it-works.html">How it works</a>
        </div>
      </div>
    </section>
    <Footer/>
  </>
);

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