// Schools & Districts page — licensing the platform

const SchoolsPage = () => (
  <>
    <Nav/>
    <section className="aud-hero opener" data-screen-label="01 Hero">
      <ParticleField density={50} color="125, 255, 196" baseAlpha={0.3} speed={0.04}/>
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>FOR SCHOOLS & DISTRICTS · LICENSING</div>
        <h1>Bring the spatial campus<br/>to your classrooms.</h1>
        <p className="lede">
          License our curriculum, our Marble worlds, and SofAI for your accredited program. Start with a 12-seat pilot inside one classroom. Scale to a district of seven thousand. We have done both.
        </p>
        <div className="actions">
          <a className="btn btn-primary btn-lg" href="contact.html">Talk to schools team <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>

    <section className="aud-block" data-screen-label="02 Pillars">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>WHAT YOU GET · FOUR PILLARS</div>
        <h2>Everything we use, shipped to you.</h2>
        <p className="sub">Same Marble worlds, same SofAI, same UC A–G curriculum. Your teachers, your students, your accreditation. We sit alongside, not on top.</p>
        <div className="aud-pillars">
          <div className="aud-pillar">
            <div className="num">01 · CURRICULUM</div>
            <h4>369 UC A–G courses</h4>
            <p>Full course materials, pacing guides, assessments, and rubrics. All seven A–G subject areas. Forty UC Honors weighted. Twenty-four AP courses.</p>
          </div>
          <div className="aud-pillar">
            <div className="num">02 · WORLDS</div>
            <h4>Six Marble worlds · expanding</h4>
            <p>Deep Space, Ancient Civilizations, Inside the Cell, Mathematical Universe, Story Library, Future City. Custom worlds available on the Foundation tier.</p>
          </div>
          <div className="aud-pillar">
            <div className="num">03 · SOFAI</div>
            <h4>SofAI · campus-wide</h4>
            <p>The same in-world AI guide your students would meet at our school. White-label to your branding. Three modes: student, parent, teacher.</p>
          </div>
          <div className="aud-pillar" style={{ gridColumn: 'span 3' }}>
            <div className="num">04 · TEACHER TRAINING</div>
            <h4>Teacher onboarding &amp; ongoing support</h4>
            <p>Three-day onboarding for new instructors. Monthly cohort calls with our curriculum team. A dedicated success manager from your first signed pilot through the second contract year.</p>
          </div>
        </div>
      </div>
    </section>

    <section className="aud-block alt" data-screen-label="03 Tiers">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>LICENSING · THREE TIERS</div>
        <h2>Three doors in.</h2>
        <p className="sub">Annual pricing per seat. Volume tiers kick in at 60 and 300 seats. Foundation tier includes custom world generation and white-labeled SofAI.</p>
        <div className="tier-grid">
          <div className="tier-card">
            <span className="tier-name">PILOT</span>
            <div className="tier-price">$6,400<span className="per"> / seat / year</span></div>
            <p className="desc">One classroom, one subject. Lowest-friction way to test the model with a real cohort.</p>
            <ul>
              <li><Icon name="check" size={14}/>12 seats minimum · 30 seat cap</li>
              <li><Icon name="check" size={14}/>One subject area</li>
              <li><Icon name="check" size={14}/>Access to all six Marble worlds</li>
              <li><Icon name="check" size={14}/>Shared SofAI · our branding</li>
              <li><Icon name="check" size={14}/>One-day virtual onboarding</li>
              <li><Icon name="check" size={14}/>Email + chat support</li>
            </ul>
            <a className="btn btn-secondary cta" href="contact.html">Start a pilot →</a>
          </div>
          <div className="tier-card featured">
            <span className="tier-name">SCHOOL</span>
            <div className="tier-price">$4,800<span className="per"> / seat / year</span></div>
            <p className="desc">A whole school, all UC A-G areas. The same setup we run for our own 402 students.</p>
            <ul>
              <li><Icon name="check" size={14}/>60 to 600 seats</li>
              <li><Icon name="check" size={14}/>Full UC A–G curriculum · 369 courses</li>
              <li><Icon name="check" size={14}/>All six Marble worlds</li>
              <li><Icon name="check" size={14}/>SofAI · campus-wide deployment</li>
              <li><Icon name="check" size={14}/>3-day onboarding · monthly cohort calls</li>
              <li><Icon name="check" size={14}/>Dedicated success manager</li>
              <li><Icon name="check" size={14}/>Admin dashboard &amp; analytics</li>
            </ul>
            <a className="btn btn-primary cta" href="contact.html">Talk to schools team →</a>
          </div>
          <div className="tier-card">
            <span className="tier-name">FOUNDATION · DISTRICT</span>
            <div className="tier-price">Custom</div>
            <p className="desc">A district, a region, or a foundation underwriting access. Custom worlds, white-label SofAI, multi-school admin.</p>
            <ul>
              <li><Icon name="check" size={14}/>300+ seats · multi-school</li>
              <li><Icon name="check" size={14}/>Full curriculum + custom worlds</li>
              <li><Icon name="check" size={14}/>White-label SofAI · your branding</li>
              <li><Icon name="check" size={14}/>On-site onboarding · ongoing PD</li>
              <li><Icon name="check" size={14}/>District admin &amp; reporting</li>
              <li><Icon name="check" size={14}/>SLA · 99.9% uptime</li>
              <li><Icon name="check" size={14}/>Custom data residency (CN, SG, EU)</li>
            </ul>
            <a className="btn btn-secondary cta" href="contact.html">Open a conversation →</a>
          </div>
        </div>
      </div>
    </section>

    <section className="aud-block" data-screen-label="04 Pilot pathway">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>PILOT PATHWAY · ~12 WEEKS</div>
        <h2>From signed pilot to first cohort,<br/>in roughly twelve weeks.</h2>
        <div className="pilot-flow">
          <div className="pilot-step">
            <div className="step-num">01</div>
            <h5>Discovery call</h5>
            <div className="when">WEEK 0</div>
            <p>30-minute conversation with our schools team. We learn your context, you see a live world. No deck.</p>
          </div>
          <div className="pilot-step">
            <div className="step-num">02</div>
            <h5>Curriculum mapping</h5>
            <div className="when">WEEK 1–3</div>
            <p>Match one of your existing courses to our UC A–G equivalents. Identify pilot teacher. Sign a pilot agreement.</p>
          </div>
          <div className="pilot-step">
            <div className="step-num">03</div>
            <h5>Onboarding</h5>
            <div className="when">WEEK 4–8</div>
            <p>Teacher onboarding. Student accounts provisioned. SofAI dialed in to your school context. Dry-run with a small group.</p>
          </div>
          <div className="pilot-step">
            <div className="step-num">04</div>
            <h5>Cohort begins</h5>
            <div className="when">WEEK 9–12</div>
            <p>Pilot cohort enters the world. Weekly checkpoints with our success team. Quarterly review against your goals.</p>
          </div>
        </div>
      </div>
    </section>

    <section className="aud-block alt" data-screen-label="05 Trust">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>WHAT WE WILL NOT DO</div>
        <h2>The honest part.</h2>
        <div className="aud-pillars">
          <div className="aud-pillar">
            <div className="num">→</div>
            <h4>Replace your teachers.</h4>
            <p>SofAI is a tool for the human in the room. We sell to districts that already trust their teachers. We are not a vendor for the ones that don't.</p>
          </div>
          <div className="aud-pillar">
            <div className="num">→</div>
            <h4>Promise miracles in week one.</h4>
            <p>Spatial learning produces measurable gains within a semester, not within a week. We will tell you to wait one full term before judging.</p>
          </div>
          <div className="aud-pillar">
            <div className="num">→</div>
            <h4>Sell your student data.</h4>
            <p>FERPA-compliant. Not used for marketing. Not sold to advertisers. Not used to train models. Custom data residency on the Foundation tier.</p>
          </div>
        </div>
      </div>
    </section>

    <section className="s-pad" style={{ borderTop: '1px solid var(--line-soft)', background: 'var(--bg-0)', textAlign: 'center' }} data-screen-label="06 CTA">
      <div className="container">
        <h2 className="t-h2" style={{ marginBottom: 16, maxWidth: 800, margin: '0 auto 16px' }}>The first cohort can start by January.</h2>
        <p className="ink-2" style={{ fontSize: 17, marginBottom: 32, maxWidth: 560, margin: '0 auto 32px' }}>If you sign by August, we can have your first 12 students inside a world by mid-winter term.</p>
        <a className="btn btn-primary btn-lg" href="contact.html">Talk to the schools team <Icon name="arrowRight" size={16}/></a>
      </div>
    </section>

    <Footer/>
  </>
);

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