// Partners (Corporate Giving) page

const PartnersPage = () => {
  const partners = [
    { badge: 'PLATFORM', name: 'World Labs', since: 'PARTNER · 2024', desc: 'Marble spatial intelligence platform. The technical engine of the campus.' },
    { badge: 'ACCREDITOR', name: 'ACS WASC', since: 'ACCREDITED · 2019', desc: 'Western Association of Schools and Colleges. School code 43 46070 999.' },
    { badge: 'SYSTEM', name: 'UC A–G', since: 'APPROVED · 2019', desc: 'University of California college-prep approval, all seven subject areas.' },
    { badge: 'COLLEGE', name: 'California Community Colleges', since: 'DUAL ENROLL · 2021', desc: 'CVC dual enrollment pathway for grades 10–12.' },
    { badge: 'PARTNER', name: 'Stanford Affiliates', since: 'OPEN', desc: 'Faculty advisory and research relationships with Stanford-adjacent labs.' },
    { badge: 'SLOT', name: '[Real partner here]', since: 'PENDING ANNOUNCEMENT', desc: 'Foundation-level partner. Announcement Q3 2026.' },
    { badge: 'SLOT', name: '[Real partner here]', since: 'PENDING ANNOUNCEMENT', desc: 'Workforce pathways partner. Announcement Q4 2026.' },
    { badge: 'OPEN', name: 'Your organization', since: 'OPEN', desc: 'We are looking for three more flagship partners for 2026–27.' },
  ];

  return (
    <>
      <Nav/>
      <section className="aud-hero opener" data-screen-label="01 Hero">
        <ParticleField density={50} color="245, 158, 11" baseAlpha={0.25} speed={0.04}/>
        <div className="container">
          <div className="page-eyebrow"><span className="bar"></span>FOR PARTNERS · TECH · RESEARCH · CORPORATE GIVING</div>
          <h1>Co-build the school<br/>that scales.</h1>
          <p className="lede">
            We exist because World Labs built Marble. We will exist a decade from now because of the partners who back the rest of the stack — research, workforce, capital, and the worlds yet to be generated. Three partner shapes, one ask: serious commitments only.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', margin: '32px 0' }}>
            <span className="chip chip-warm"><span className="dot"></span>100% to student access</span>
            <span className="chip chip-warm">501(c)(3) · Tax-deductible</span>
            <span className="chip chip-warm">WASC accredited</span>
          </div>
          <div className="actions">
            <a className="btn btn-primary btn-lg" href="contact.html">Open a conversation <Icon name="arrowRight" size={16}/></a>
            <a className="btn btn-secondary btn-lg" href="give.html">Or give to the endowment</a>
          </div>
        </div>
      </section>

      <section className="aud-block alt" data-screen-label="02 Four pathways">
        <div className="container">
          <div className="page-eyebrow"><span className="bar"></span>FOUR GIVING PATHWAYS</div>
          <h2>Where your partnership lives.</h2>
          <p className="sub">Every partnership maps to one of four pathways. Most major partners touch two.</p>
          <div className="aud-pillars" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}>
            <div className="aud-pillar">
              <div className="num">01 · ACCESS</div>
              <h4>Scholarship Endowment</h4>
              <p>Fund need-based access for underserved students. We have a waitlist of 180 families. Every scholarship removes one barrier between a student and an accredited diploma.</p>
            </div>
            <div className="aud-pillar">
              <div className="num">02 · SCIENCE</div>
              <h4>Research Collaboration</h4>
              <p>Partner on spatial cognition and AI tutoring research with co-publication rights. Our student cohort is a live research population for embodied learning at scale.</p>
            </div>
            <div className="aud-pillar">
              <div className="num">03 · TALENT</div>
              <h4>Workforce Pathway</h4>
              <p>Create pipelines connecting VR School graduates to your organization. Spatial intelligence is the competitive advantage most employers haven't named yet.</p>
            </div>
            <div className="aud-pillar">
              <div className="num">04 · WORLD</div>
              <h4>World Development</h4>
              <p>Commission a custom Marble world aligned to your organization's mission — and put every student in the school inside it. One world. $250K. Runs in any browser.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="aud-block" data-screen-label="03 Three shapes">
        <div className="container">
          <div className="page-eyebrow"><span className="bar"></span>THREE PARTNERSHIP SHAPES</div>
          <h2>Three ways to be on the inside.</h2>
          <p className="sub">Each shape has a known cadence, deliverable, and depth of access. Pick the one that fits the resources you can commit.</p>
          <div className="tier-grid">
            <div className="tier-card">
              <span className="tier-name">TECH PARTNER</span>
              <div className="tier-price" style={{ fontSize: 32 }}>Build a world.</div>
              <p className="desc">For technology companies and research institutions. Co-build a Marble world tied to your discipline — and put your students inside it.</p>
              <ul>
                <li><Icon name="check" size={14}/>Co-branded Marble world · live in 4–8 weeks</li>
                <li><Icon name="check" size={14}/>Curriculum integration · 1+ UC A–G course</li>
                <li><Icon name="check" size={14}/>Faculty-of-record line on syllabus</li>
                <li><Icon name="check" size={14}/>Joint research output rights</li>
                <li><Icon name="check" size={14}/>Listed on the campus page</li>
              </ul>
              <a className="btn btn-secondary cta" href="contact.html">Propose a world →</a>
            </div>
            <div className="tier-card featured">
              <span className="tier-name">WORKFORCE PARTNER</span>
              <div className="tier-price" style={{ fontSize: 32 }}>Fund a country.</div>
              <p className="desc">For employers building the talent pipeline they actually need. Sponsor cohorts of high-school students in a specific country or discipline.</p>
              <ul>
                <li><Icon name="check" size={14}/>Named scholarship cohort · 12+ students</li>
                <li><Icon name="check" size={14}/>Curriculum advisory seat</li>
                <li><Icon name="check" size={14}/>First-look hiring relationships at senior year</li>
                <li><Icon name="check" size={14}/>Quarterly cohort visit (in-world)</li>
                <li><Icon name="check" size={14}/>Annual outcomes report</li>
                <li><Icon name="check" size={14}/>Naming rights on a country / cohort</li>
              </ul>
              <a className="btn btn-primary cta" href="contact.html">Sponsor a cohort →</a>
            </div>
            <div className="tier-card">
              <span className="tier-name">CORPORATE GIVING</span>
              <div className="tier-price" style={{ fontSize: 32 }}>Underwrite scale.</div>
              <p className="desc">For corporate foundations and family foundations underwriting the school's growth. Endowed faculty chairs, capital, and the worlds beyond the six.</p>
              <ul>
                <li><Icon name="check" size={14}/>Endowed chairs · faculty + curriculum</li>
                <li><Icon name="check" size={14}/>Endowment gifts · $1M+ tiers</li>
                <li><Icon name="check" size={14}/>Sponsored worlds · $250K per world</li>
                <li><Icon name="check" size={14}/>Annual report &amp; board visit</li>
                <li><Icon name="check" size={14}/>Recognition on diploma footer</li>
              </ul>
              <a className="btn btn-secondary cta" href="give.html">Give now →</a>
            </div>
          </div>
        </div>
      </section>

      <section className="aud-block alt" data-screen-label="04 Corporate tiers">
        <div className="container">
          <div className="page-eyebrow"><span className="bar"></span>CORPORATE GIVING TIERS</div>
          <h2>Named recognition. Real commitments.</h2>
          <p className="sub">Three tiers for corporate and foundation partners. Each includes scholarship funding, research access, and a depth of relationship we do not offer at smaller scales.</p>
          <div className="tier-grid">
            <div className="tier-card">
              <span className="tier-name">SUPPORTER</span>
              <div className="tier-price">$10,000 – $49,999</div>
              <p className="desc">The foundation of the endowment. Named in the annual report with the cohort you funded.</p>
              <ul>
                <li><Icon name="check" size={14}/>Annual report recognition</li>
                <li><Icon name="check" size={14}/>2 sponsored scholarships</li>
                <li><Icon name="check" size={14}/>Curriculum briefs + cohort dashboard</li>
                <li><Icon name="check" size={14}/>Invitation to May partner summit</li>
              </ul>
              <a className="btn btn-secondary cta" href="contact.html">Become a Supporter →</a>
            </div>
            <div className="tier-card featured">
              <span className="tier-name">CHAMPION</span>
              <div className="tier-price">$50,000 – $249,999</div>
              <p className="desc">Named co-sponsor on a cohort, country, or Marble world. Advisory seat if you want it.</p>
              <ul>
                <li><Icon name="check" size={14}/>Everything in Supporter</li>
                <li><Icon name="check" size={14}/>10 sponsored scholarships</li>
                <li><Icon name="check" size={14}/>Co-sponsorship naming rights</li>
                <li><Icon name="check" size={14}/>Workforce hiring access · senior year</li>
                <li><Icon name="check" size={14}/>Research publications · co-author credit</li>
                <li><Icon name="check" size={14}/>Advisory participation · curriculum committee</li>
                <li><Icon name="check" size={14}/>Annual storytelling package</li>
              </ul>
              <a className="btn btn-primary cta" href="contact.html">Become a Champion →</a>
            </div>
            <div className="tier-card">
              <span className="tier-name">FOUNDING PARTNER</span>
              <div className="tier-price">$250,000+</div>
              <p className="desc">Deep capital partnership. Endowment naming, unlimited scholarships, board seat, and first access to every research output.</p>
              <ul>
                <li><Icon name="check" size={14}/>Everything in Champion</li>
                <li><Icon name="check" size={14}/>Unlimited scholarships · dedicated pipeline</li>
                <li><Icon name="check" size={14}/>Custom Marble world development</li>
                <li><Icon name="check" size={14}/>Board seat</li>
                <li><Icon name="check" size={14}/>Global co-branding rights</li>
                <li><Icon name="check" size={14}/>Endowment naming opportunity</li>
                <li><Icon name="check" size={14}/>First access to all research output</li>
              </ul>
              <a className="btn btn-secondary cta" href="contact.html">Become a Founding Partner →</a>
            </div>
          </div>
        </div>
      </section>

      <section className="aud-block" data-screen-label="05 Partner roster">
        <div className="container">
          <div className="page-eyebrow"><span className="bar"></span>CURRENT ROSTER · 5 ACTIVE · 3 SLOTS OPEN</div>
          <h2>The people on the inside, today.</h2>
          <p className="sub">We do not announce a partnership until the contract is countersigned and the work has shipped. The slots marked PENDING are agreements in motion. The slot marked OPEN is open to you.</p>
          <div className="partner-grid">
            {partners.map((p, i) => (
              <div className="partner-card" key={i} style={p.badge === 'OPEN' ? { borderStyle: 'dashed', background: 'transparent' } : null}>
                <span className="badge" style={p.badge === 'OPEN' ? { background: 'rgba(245,158,11,0.1)', color: 'var(--warm)' } : null}>{p.badge}</span>
                <h5>{p.name}</h5>
                <div className="since">{p.since}</div>
                <p>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="aud-block" data-screen-label="06 What we publish">
        <div className="container">
          <div className="page-eyebrow"><span className="bar"></span>WHAT PARTNERS GET, BEYOND THE LOGO</div>
          <h2>We publish what we learn.</h2>
          <p className="sub">Spatial learning at K-12 scale is a research domain in itself. We publish proficiency data, cohort outcomes, and pedagogy whitepapers on a half-yearly cadence. Partners are co-authors, not footnotes.</p>
          <div className="aud-pillars">
            <div className="aud-pillar">
              <div className="num">01 · QUARTERLY</div>
              <h4>Cohort outcomes report</h4>
              <p>Proficiency gains, retention, engagement, college matriculation. Anonymized. Co-distributed to partner organizations.</p>
            </div>
            <div className="aud-pillar">
              <div className="num">02 · SEMI-ANNUAL</div>
              <h4>Pedagogy whitepaper</h4>
              <p>What is working in spatial K–12 instruction, what isn't. Methods, sample sizes, and gaps named honestly.</p>
            </div>
            <div className="aud-pillar">
              <div className="num">03 · ANNUAL</div>
              <h4>Partner summit · Stanford</h4>
              <p>Two days in person. Partners, faculty, students, and a small number of invited researchers. May, in Palo Alto.</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="07 CTA">
        <div className="container">
          <h2 className="t-h2" style={{ marginBottom: 16 }}>Three slots open. 2026 only.</h2>
          <p className="ink-2" style={{ fontSize: 17, marginBottom: 32, maxWidth: 560, margin: '0 auto 32px' }}>
            We onboard a small number of flagship partners each year. The next three slots are for 2026–27. Conversations start small — a 30-minute call, a live world, a written brief.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a className="btn btn-primary btn-lg" href="contact.html">Open a conversation <Icon name="arrowRight" size={16}/></a>
            <a className="btn btn-secondary btn-lg" href="give.html">Or give to the endowment</a>
          </div>
        </div>
      </section>

      <Footer/>
    </>
  );
};

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