// Manifesto page — long-form essay layout, single column

const ManifestoPage = () => (
  <div className="manifesto-page">
    <Nav current="manifesto"/>
    <section className="manifesto-hero" data-screen-label="01 Title">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>MANIFESTO · v2 · 2026</div>
        <h1>School inside<br/>a world.</h1>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 24, marginTop: 48 }}>
          <p className="ink-2" style={{ fontSize: 18, lineHeight: 1.5, maxWidth: 580, margin: 0 }}>
            Five axioms. Four statistics. One idea: the classroom should be a place.
          </p>
          <div className="mono ink-3" style={{ fontSize: 13, letterSpacing: '0.04em' }}>
            <div>11 MIN READ</div>
            <div style={{ marginTop: 4 }}>STANFORD · MAY 2026</div>
          </div>
        </div>
      </div>
    </section>

    <article className="manifesto-body">
      <section className="axiom" data-screen-label="02 Axiom I — Imagination">
        <div className="axiom-roman">I.</div>
        <h2>Imagination, not resources.</h2>
        <p>There are 258 million children on this planet who are not in school today. And of the children who <i style={{ fontStyle: 'normal', color: 'var(--ink-3)' }}>are</i> in school — the overwhelming majority sit in classrooms whose fundamental architecture has not changed since the 19th century. Rows. Bells. Chalk.</p>
        <p>We believe this is not a resource problem. It is an imagination problem.</p>
        <blockquote>It is not that there is too little money. It is that there is too little place.</blockquote>
        <p>Schools are made of three things: a roof, a teacher, and a place worth being inside. The first is cheap. The second is the most valuable thing in the world. The third — until 2024 — was the rarest. Now it is generated.</p>
      </section>
    </article>

    <section className="stat-band" data-screen-label="03 Stat — 258M">
      <div className="container">
        <div className="number accent"><CountUp to={258} suffix="M"/></div>
        <div className="label">Children out of school worldwide</div>
        <div className="source">UNESCO Global Education Monitoring Report</div>
      </div>
    </section>

    <article className="manifesto-body">
      <section className="axiom" data-screen-label="04 Axiom II — Space">
        <div className="axiom-roman">II.</div>
        <h2>Space is the original curriculum.</h2>
        <p>Long before there were textbooks, there were places. A blacksmith's forge. A printer's shop. A field, a forest, a kitchen. You learned a trade by standing in the room where it happened, watching someone older do it, and then doing it yourself.</p>
        <p>The industrial school took the room away. It replaced apprenticeship with a desk facing forward and a clock on the wall. This was a reasonable compromise in 1840. We have run that experiment for 180 years.</p>
        <blockquote>You remember what you can stand inside.</blockquote>
        <p>Cognitive science has been catching up to this intuition for forty years. Embodied cognition is not a metaphor. The brain encodes spatial memory faster, deeper, and longer than abstract memory. Gaussian splatting is the first technology that lets us put a student in any place, on demand, in any browser, for the cost of a streaming video.</p>
      </section>
    </article>

    <section className="stat-band" data-screen-label="05 Stat — 70%">
      <div className="container">
        <div className="number"><CountUp to={70} suffix="%"/></div>
        <div className="label">Higher retention vs. text-only instruction</div>
        <div className="source">Journal of Educational Psychology · 2023</div>
      </div>
    </section>

    <article className="manifesto-body">
      <section className="axiom" data-screen-label="06 Axiom III — Accreditation">
        <div className="axiom-roman">III.</div>
        <h2>Accreditation is the floor.</h2>
        <p>Building something new in education means earning trust before being trusted. We hold the credentials a brick-and-mortar UC-approved high school holds: ACS WASC accreditation. UC A–G approval in all seven subject areas. Forty UC Honors courses. Dual enrollment with the California Community College system.</p>
        <p>None of this is novel. All of it is non-negotiable. A diploma the UC system reads as it would any other is the floor — the table-stakes condition under which anything else we do matters. Above the floor, we build.</p>
        <blockquote>Accreditation is the floor. Not the ceiling.</blockquote>
      </section>

      <section className="axiom" data-screen-label="07 Axiom IV — AI">
        <div className="axiom-roman">IV.</div>
        <h2>AI is the teacher's tool. Not the teacher.</h2>
        <p>A school in 2026 that pretends AI is not in the room is being dishonest. A school in 2026 that hands the room to AI is being negligent. We have spent two years figuring out the middle.</p>
        <p>SofAI is the in-world guide. She knows what the student is looking at — because she sees the same Gaussian splat scene. She knows what they are supposed to learn — because she sees the UC A–G objective. She knows what their teacher said this morning — because their teacher told her.</p>
        <p>The human teacher remains the author of the cohort, the writer of the prompts, the giver of the grade. SofAI is the second pair of eyes that lets a single teacher attend to forty students at forty different points in their own arc, without anyone falling behind.</p>
      </section>
    </article>

    <section className="stat-band" data-screen-label="08 Stat — 3×">
      <div className="container">
        <div className="number"><CountUp to={3}/>×</div>
        <div className="label">More teacher 1-on-1 time per student</div>
        <div className="source">MIT Media Lab · Embodied Learning Research</div>
      </div>
    </section>

    <article className="manifesto-body">
      <section className="axiom" data-screen-label="09 Axiom V — Scale">
        <div className="axiom-roman">V.</div>
        <h2>The school must scale, or it does not matter.</h2>
        <p>We currently serve 402 students in 20 countries. This is a small number. The number of children whose education we believe we can change with this approach is, conservatively, several hundred million.</p>
        <p>That is not a marketing number. It is the working assumption of the entire enterprise. Every architectural decision — the browser-only delivery, the AI co-pilot, the splat-based worlds — was chosen because it has a chance of working at the scale the problem actually has.</p>
        <blockquote>A school that does not scale is, for most of the world, just a postcard.</blockquote>
        <p>Stanford was a postcard once. So was Singapore.</p>
      </section>
    </article>

    <section className="stat-band" data-screen-label="10 Stat — 91%">
      <div className="container">
        <div className="number accent"><CountUp to={91} suffix="%"/></div>
        <div className="label">Math proficiency · 2024–25 cohort</div>
        <div className="source">The VR School internal assessment data, 2025 · vs 26% national average</div>
      </div>
    </section>

    <article className="manifesto-body">
      <section className="axiom" data-screen-label="11 Closing">
        <div className="axiom-roman" style={{ color: 'var(--ink-3)' }}>§</div>
        <h2 style={{ color: 'var(--accent)' }}>The next school year starts in a world.</h2>
        <p style={{ fontSize: 22, lineHeight: 1.5 }}>
          We are open for enrollment for 2026–27. Tuition is $24,800. Aid covers up to 100% for families that qualify; 38% of students received some last year. The decision comes back in 5–7 days. The first day of school is in August, and your first hour of it is inside a world.
        </p>
        <div style={{ marginTop: 48, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a className="btn btn-primary btn-lg" href="enroll.html">Begin enrollment <Icon name="arrowRight" size={16}/></a>
          <a className="btn btn-secondary btn-lg" href="how-it-works.html">How it works</a>
        </div>
        <div className="footnote" style={{ marginTop: 64, fontFamily: 'Geist Mono', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.04em', lineHeight: 1.8 }}>
          THE VR SCHOOL · FOUNDED 2017 · STANFORD · PALO ALTO · CHINA · SINGAPORE<br/>
          ACS WASC · CODE 43 46070 999 · UC A–G ALL SEVEN AREAS<br/>
          WORLD LABS · MARBLE PARTNER · SINCE 2024
        </div>
      </section>
    </article>

    <Footer/>
  </div>
);

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