// About — school story, locations, values, faculty

const AboutHero = () => (
  <section className="about-hero opener" data-screen-label="01 About hero">
    <div className="container">
      <div className="page-eyebrow"><span className="bar"></span>ABOUT · A SCHOOL OF FREEDOM CAMPUS</div>
      <h1>An accredited school,<br/>built where the world meets imagination.</h1>
      <p className="lede">
        Founded in 2017 in Stanford, California. WASC-accredited. UC A–G in all seven subject areas. Four campuses, twenty countries, four hundred and two students — and counting. We are not a startup pretending to be a school. We are a school that took technology seriously eight years before everyone else.
      </p>
    </div>
  </section>
);

const Timeline = () => {
  const rows = [
    { year: '2017', title: 'School of Freedom founded', desc: 'A small cohort, a borrowed room near Stanford, a stubborn idea: that accreditation and imagination did not have to choose each other.' },
    { year: '2019', title: 'WASC accreditation granted', desc: 'ACS WASC visit and approval. Code 43 46070 999. The diploma the UC system reads.' },
    { year: '2020', title: 'Palo Alto campus opens', desc: 'A physical hub for cohort meet-ups, three blocks from the original Stanford bookstore.' },
    { year: '2022', title: 'China and Singapore campuses', desc: 'Two new physical hubs for time-zone-local cohort sessions in Asia.' },
    { year: '2024', title: 'World Labs partnership · Marble platform', desc: 'Spatial intelligence comes online. The first three Marble worlds enter daily instruction in fall term.' },
    { year: '2025', title: 'SofAI · School of Freedom AI', desc: 'The in-world AI guide ships with three modes — student, parent, teacher. Same identity, different lenses.' },
    { year: '2026', title: 'All six worlds live · 402 students · 20 countries', desc: 'Where you find us today. Forty more worlds in generation. Enrollment open for the 2026–27 academic year.' },
  ];
  return (
    <section className="timeline" data-screen-label="02 Timeline">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>TIMELINE · NINE YEARS</div>
        <h2 className="t-h2" style={{ marginTop: 12 }}>From 2017 to now.</h2>
        <div className="timeline-grid">
          {rows.map((r, i) => (
            <React.Fragment key={i}>
              <div className="timeline-year">{r.year}</div>
              <div>
                <div className="timeline-card">
                  <h4>{r.title}</h4>
                  <p>{r.desc}</p>
                </div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

const Locations = () => {
  const locs = [
    { glyph: 'STANFORD · CA', city: 'Stanford', country: 'United States', role: 'Headquarters. Curriculum, accreditation, research. The original cohort meets here weekly.', since: 'SINCE 2017' },
    { glyph: 'PALO ALTO · CA', city: 'Palo Alto', country: 'United States', role: 'West-coast operations and admissions. A physical hub for U.S.-time-zone cohorts.', since: 'SINCE 2020' },
    { glyph: 'CN', city: 'China', country: 'East Asia · multiple cities', role: 'Asia-time-zone cohort hub. Chinese-medium instruction option for Mandarin students.', since: 'SINCE 2022' },
    { glyph: 'SG', city: 'Singapore', country: 'Southeast Asia', role: 'Southeast Asia hub. The school\'s connection point for partner institutions across the region.', since: 'SINCE 2022' },
  ];
  return (
    <section className="s-pad" style={{ borderTop: '1px solid var(--line-soft)' }} data-screen-label="03 Locations">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>WHERE WE ARE · FOUR CAMPUSES</div>
        <h2 className="t-h2" style={{ marginTop: 12 }}>Four physical campuses.<br/>Six rendered ones.</h2>
        <p className="ink-2" style={{ fontSize: 18, maxWidth: 720, marginTop: 16 }}>
          The school exists in a browser tab. The campuses exist to give a face to the people who run it. You can meet us at any of them.
        </p>
        <div className="locations-grid">
          {locs.map((l, i) => (
            <div className="location" key={i}>
              <div className="glyph">{l.glyph}</div>
              <div>
                <h4>{l.city}</h4>
                <div className="country">{l.country}</div>
                <p className="role">{l.role}</p>
              </div>
              <div className="since">{l.since}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Values = () => {
  const vs = [
    { n: '01', t: 'Accreditation is the floor.', d: 'A diploma the UC system reads as it would any other is a table-stakes condition. Above the floor, we build. Below the floor, we will not go.' },
    { n: '02', t: 'Space is the original curriculum.', d: 'You remember what you can stand inside. Forty years of cognitive science says so. The school is built around that finding.' },
    { n: '03', t: 'AI is the teacher\'s tool. Not the teacher.', d: 'SofAI is a second pair of eyes for the human in the room. The teacher remains the author, the writer, the giver of the grade.' },
    { n: '04', t: 'Scale is the point.', d: 'Several hundred million children. That is the size of the problem. Every architectural decision was chosen to have a chance at that scale.' },
    { n: '05', t: 'Trust is earned in eight-year increments.', d: 'We have been here since 2017. We will be here in 2032. Schools are bought and judged on the decade, not the demo.' },
    { n: '06', t: 'Imagination, not resources.', d: 'It is not that there is too little money in education. It is that there is too little place. We make place.' },
  ];
  return (
    <section className="s-pad" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--line-soft)' }} data-screen-label="04 Values">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>VALUES · SIX OF THEM · ALL NEGOTIATED</div>
        <h2 className="t-h2" style={{ marginTop: 12 }}>What we will not compromise on.</h2>
        <div className="values-grid">
          {vs.map((v, i) => (
            <div className="value-card" key={i}>
              <span className="num">{v.n}</span>
              <h4>{v.t}</h4>
              <p>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Faculty = () => {
  const slots = [
    { role: 'Superintendent', name: 'Dr. Freedom Cheteni', body: 'Academic leadership and accreditation oversight. Oversees the school\'s WASC standing and UC A–G relationships.', placeholder: 'SUPT · F-001' },
    { role: 'Advanced Placement Coordinator', name: 'Leo Cunha', body: 'AP program design and College Board alignment. Manages the 40 UC Honors course portfolio and dual-enrollment pathways.', placeholder: 'AP · F-002' },
    { role: 'Director, SofAI & World Labs partnership', name: '[Real name here]', body: '[Real bio here] — joined from World Labs. Marble integration lead.', placeholder: 'TECH · F-003' },
    { role: 'Dean of Admissions', name: '[Real name here]', body: '[Real bio here] — places students in 20 countries every year.', placeholder: 'ADM · F-004' },
    { role: 'Director, School of AI', name: '[Real name here]', body: '[Real bio here] — designed the Generative AI Foundations and AI Design & Development tracks.', placeholder: 'AI · F-005' },
    { role: 'Director, Accreditation & Standards', name: '[Real name here]', body: '[Real bio here] — owns the WASC and UC A-G relationships. Annual audit lead.', placeholder: 'CRED · F-006' },
  ];
  return (
    <section className="s-pad" style={{ borderTop: '1px solid var(--line-soft)' }} data-screen-label="05 Faculty">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>WHO WE ARE</div>
        <h2 className="t-h2" style={{ marginTop: 12 }}>The people who run this.</h2>
        <p className="ink-2" style={{ fontSize: 16, maxWidth: 720, marginTop: 16 }}>
          Bios and photographs are placeholders for now. The school does not ship faculty quotes or photographs we have not personally vetted. Real names and photos will land here before the 2026–27 academic year.
        </p>
        <div className="faculty-grid">
          {slots.map((s, i) => (
            <div className="faculty-card" key={i}>
              <div className="faculty-photo">
                <div className="stripes"></div>
                <div className="placeholder">{s.placeholder}</div>
              </div>
              <h5>{s.name}</h5>
              <div className="role">{s.role}</div>
              <p className="bio">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const AboutPage = () => (
  <>
    <Nav current="about"/>
    <AboutHero/>
    <Timeline/>
    <Locations/>
    <Values/>
    <Faculty/>
    <section style={{ padding: '96px 0 128px', borderTop: '1px solid var(--line-soft)', background: 'var(--bg-0)', textAlign: 'center' }}>
      <div className="container">
        <h2 className="t-h2" style={{ marginBottom: 16 }}>The next school year starts in a world.</h2>
        <p className="ink-2" style={{ fontSize: 17, marginBottom: 32, maxWidth: 540, margin: '0 auto 32px' }}>
          If you've read this far, we should probably meet.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', 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="contact.html">Get in touch</a>
        </div>
      </div>
    </section>
    <Footer/>
  </>
);

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