// Sections B: Steps, TrustStrip, SofAI, ManifestoQuote, FinalCTA, Footer

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

// STEP visualizations -------------------------------------------------------

const StepVisPrompt = () => (
  <div style={{ padding: 16, fontFamily: 'Geist Mono', fontSize: 12, color: 'var(--ink-2)' }}>
    <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginBottom: 8 }}>MARBLE · PROMPT</div>
    <div style={{ color: 'var(--ink-0)', lineHeight: 1.4 }}>
      <span style={{ color: 'var(--accent)' }}>{'> '}</span>walk through the roman forum, 79 AD<span style={{ color: 'var(--accent)', animation: 'pulse 1s steps(2) infinite' }}>_</span>
    </div>
  </div>
);

const StepVisRender = () => (
  <div style={{ position: 'relative', height: '100%', width: '100%' }}>
    <SplatThumb scheme="ancient" density={50} label="GENERATING · ~4M 32S"/>
    <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'Geist Mono', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.04em' }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 8px var(--accent)', animation: 'pulse 1.2s infinite' }}></span>
      RENDERING 4.2M PTS
    </div>
  </div>
);

const StepVisDevices = () => (
  <div style={{ padding: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-around', height: '100%' }}>
    <div style={{ textAlign: 'center', color: 'var(--ink-2)' }}><Icon name="monitor" size={28}/><div className="mono" style={{ fontSize: 10, marginTop: 6, color: 'var(--ink-3)' }}>LAPTOP</div></div>
    <div style={{ width: 1, height: 40, background: 'var(--line)' }}/>
    <div style={{ textAlign: 'center', color: 'var(--ink-2)' }}><Icon name="tablet" size={28}/><div className="mono" style={{ fontSize: 10, marginTop: 6, color: 'var(--ink-3)' }}>TABLET</div></div>
    <div style={{ width: 1, height: 40, background: 'var(--line)' }}/>
    <div style={{ textAlign: 'center', color: 'var(--ink-2)' }}><Icon name="phone" size={28}/><div className="mono" style={{ fontSize: 10, marginTop: 6, color: 'var(--ink-3)' }}>PHONE</div></div>
    <div style={{ width: 1, height: 40, background: 'var(--line)' }}/>
    <div style={{ textAlign: 'center', color: 'var(--accent)' }}>
      <div style={{ display: 'inline-block', padding: '4px 8px', border: '1px solid var(--accent)', borderRadius: 4, fontSize: 11, fontFamily: 'Geist Mono', letterSpacing: '0.04em' }}>NO HEADSET</div>
    </div>
  </div>
);

const StepVisSofAI = () => (
  <div style={{ padding: 16, fontSize: 12 }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
      <div className="sofai-avatar" style={{ width: 26, height: 26 }}></div>
      <div>
        <div style={{ color: 'var(--ink-0)', fontSize: 13, fontWeight: 500 }}>SofAI</div>
        <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>MODE · STUDENT</div>
      </div>
    </div>
    <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line-soft)', borderRadius: 8, padding: '8px 10px', fontSize: 12, color: 'var(--ink-1)', lineHeight: 1.4 }}>
      Notice the cornices above the basilica. Why are they painted? <span style={{ color: 'var(--ink-3)' }}>Click one to find out.</span>
    </div>
  </div>
);

const StepVisTranscript = () => (
  <div style={{ padding: 12, fontSize: 11 }}>
    <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.08em', marginBottom: 6 }}>OFFICIAL TRANSCRIPT · GRADE 10</div>
    {[
      { code: 'a-G', name: 'Biology, AP', g: 'A' },
      { code: 'a-G', name: 'Algebra II, Hon', g: 'A-' },
      { code: 'a-G', name: 'World History', g: 'A' },
    ].map((r, i) => (
      <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px solid var(--line-soft)' }}>
        <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span className="mono" style={{ fontSize: 9, color: 'var(--warm)', padding: '1px 4px', border: '1px solid var(--warm-dim)', borderRadius: 3 }}>{r.code}</span>
          <span style={{ color: 'var(--ink-1)' }}>{r.name}</span>
        </span>
        <span className="mono" style={{ color: 'var(--ink-0)', fontWeight: 600 }}>{r.g}</span>
      </div>
    ))}
    <div className="mono" style={{ fontSize: 9, color: 'var(--warm)', marginTop: 8, letterSpacing: '0.04em' }}>WASC · CODE 43 46070 999</div>
  </div>
);

const Steps = () => {
  const items = [
    { n: '01', t: 'A teacher prompts a world.', d: '"Walk through the Roman Forum, 79 AD." Teachers describe; they don\'t build.', vis: <StepVisPrompt/> },
    { n: '02', t: 'Marble renders it in five minutes.', d: 'World Labs Marble generates a photorealistic Gaussian splat scene from the prompt. ~4 million points, lit, navigable.', vis: <StepVisRender/> },
    { n: '03', t: 'Students step in. Any browser.', d: 'Laptop. Tablet. Phone. WebGL via Spark.js. No app install. No headset. No download larger than a YouTube video.', vis: <StepVisDevices/> },
    { n: '04', t: 'SofAI guides each student in context.', d: 'In-world AI that sees what the student sees. Different modes for student, parent, and teacher — same identity, three lenses.', vis: <StepVisSofAI/> },
    { n: '05', t: 'Work is assessed to UC and WASC.', d: 'Every world session emits artifacts. Artifacts roll up to UC A–G transcripts. WASC reviews the school, not the platform.', vis: <StepVisTranscript/> },
  ];
  return (
    <section className="steps s-pad" id="how" data-screen-label="05 How it actually works">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow t-xs"><span className="bar"></span> SECTION 05 · MECHANICS</span>
          <h2 className="t-h2">How it<br/>actually works.</h2>
          <p className="sub">Five steps from a teacher's sentence to an accredited grade.</p>
        </div>
        <div className="steps-list">
          {items.map((s, i) => (
            <div className="step" key={i}>
              <div className="step-num mono">{s.n}</div>
              <div className="step-text">
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
              <div className="step-vis">{s.vis}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48 }}>
          <a className="btn-ghost" href="how-it-works.html">See the full How It Works page <Icon name="arrowRight" size={14}/></a>
        </div>
      </div>
    </section>
  );
};

const TrustStrip = () => (
  <section className="trust-strip" data-screen-label="06 Trust strip">
    <div className="container">
      <div className="trust-strip-inner">
        <div className="trust-marks">
          <div className="trust-mark"><span className="glyph">W</span><span>ACS WASC accredited</span></div>
          <div className="trust-mark"><span className="glyph">UC</span><span>UC A–G approved</span></div>
          <div className="trust-mark"><span className="glyph">∿</span><span>World Labs partner</span></div>
          <div className="trust-mark"><span className="glyph">CVC</span><span>CA Community Colleges dual enrollment</span></div>
        </div>
        <div className="trust-strip-foot">
          School code · <span style={{ color: 'var(--warm)' }}>43 46070 999</span> · Founded 2017 · Stanford · Palo Alto · China · Singapore
        </div>
      </div>
    </div>
  </section>
);

// SofAI demo — interactive faux chat
const SOFAI_FLOWS = {
  'parent': {
    user: "I'm a parent of a 10th grader. What does a day look like?",
    ai: [
      "Sure. Mornings are open: students log a 30–60 min focus block in any world they choose.",
      "Two live cohort sessions (~50 min each) hit per day — usually one quantitative, one humanities, taught inside a world.",
      "Afternoons: solo work, peer review, and one 1:1 with me (SofAI · Parent mode shows you exactly what was covered).",
      "Diploma is identical to a brick-and-mortar UC-approved school. Want me to show the 10th-grade course slate?"
    ]
  },
  'math': {
    user: "Show me a math course.",
    ai: [
      "Math 3 Honors meets inside the Mathematical Universe world.",
      "Each week is a 'landscape': vectors are roads, matrices are buildings. You navigate proofs by walking them.",
      "UC A–G area C. 1.0 credit. Cohorts of 12. 91% pass at A or better last year.",
      "Want me to add it to your enrollment shortlist?"
    ]
  },
  'enroll': {
    user: "How do I enroll?",
    ai: [
      "Four steps. Whole thing takes about 10 minutes from this page.",
      "1) Who's enrolling — student or parent on behalf · 2) Grade and current school",
      "3) Subjects of interest — I'll suggest matching worlds · 4) Contact info, transcript request",
      "Decision in 5–7 days. Aid decision in the same window. Shall I open the form?"
    ]
  },
  'price': {
    user: "What does it cost?",
    ai: [
      "$24,800 tuition for 2026–27, full-year, all courses, all worlds.",
      "Need-based aid covers up to 100% — last year, 38% of students received some aid.",
      "Schools licensing the platform: $4,800/seat/year, with district pricing from 60 seats."
    ]
  },
};

const SofAIDemo = () => {
  const [thread, setThread] = useStateB([
    { who: 'ai', text: "Hi — I'm SofAI. Ask anything about the school, the worlds, or enrollment. I'm in PARENT mode right now; switch with the buttons below." }
  ]);
  const [typing, setTyping] = useStateB(false);
  const [used, setUsed] = useStateB({});
  const [mode, setMode] = useStateB('PARENT');
  const threadRef = useRefB(null);

  useEffectB(() => {
    if (threadRef.current) threadRef.current.scrollTop = threadRef.current.scrollHeight;
  }, [thread, typing]);

  const ask = (key) => {
    if (used[key]) return;
    const flow = SOFAI_FLOWS[key];
    setUsed(u => ({ ...u, [key]: true }));
    setThread(t => [...t, { who: 'user', text: flow.user }]);
    setTyping(true);
    setTimeout(() => {
      setTyping(false);
      // stream messages 1 by 1
      flow.ai.forEach((line, i) => {
        setTimeout(() => {
          setThread(t => [...t, { who: 'ai', text: line }]);
        }, 600 + i * 700);
      });
    }, 700);
  };

  const reset = () => { setThread([{ who: 'ai', text: "Reset. Ask anything." }]); setUsed({}); };

  return (
    <section className="sofai s-pad" id="sofai" data-screen-label="07 SofAI demo">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow t-xs"><span className="bar"></span> SECTION 07 · IN-WORLD GUIDE</span>
          <h2 className="t-h2">Meet SofAI.<br/>Try her now.</h2>
          <p className="sub">A real demo, not a screenshot. Pick a prompt; she answers. Same identity, three modes — Student, Parent, Teacher.</p>
        </div>
        <div className="sofai-stage">
          <div className="sofai-panel">
            <div className="sofai-header">
              <div className="sofai-avatar"></div>
              <div style={{ flex: 1 }}>
                <div className="sofai-name">SofAI</div>
                <div className="sofai-mode">MODE · {mode} · WORLD-AWARE</div>
              </div>
              <button className="btn-ghost" style={{ fontSize: 12 }} onClick={reset}>Reset</button>
            </div>
            <div className="sofai-thread" ref={threadRef}>
              {thread.map((m, i) => (
                m.who === 'ai' ? (
                  <div className="bubble bubble-ai" key={i}>
                    <div className="who">SOFAI</div>
                    {m.text}
                  </div>
                ) : (
                  <div className="bubble bubble-user" key={i}>{m.text}</div>
                )
              ))}
              {typing && (
                <div className="bubble bubble-ai">
                  <div className="who">SOFAI</div>
                  <div className="typing"><span></span><span></span><span></span></div>
                </div>
              )}
            </div>
            <div className="sofai-prompts">
              <div className="label">Try a prompt</div>
              <button className={`prompt-btn ${used.parent ? 'used' : ''}`} onClick={() => ask('parent')}>
                <span>I'm a parent of a 10th grader.</span><Icon name="arrowRight" size={14}/>
              </button>
              <button className={`prompt-btn ${used.math ? 'used' : ''}`} onClick={() => ask('math')}>
                <span>Show me a math course.</span><Icon name="arrowRight" size={14}/>
              </button>
              <button className={`prompt-btn ${used.enroll ? 'used' : ''}`} onClick={() => ask('enroll')}>
                <span>How do I enroll?</span><Icon name="arrowRight" size={14}/>
              </button>
              <button className={`prompt-btn ${used.price ? 'used' : ''}`} onClick={() => ask('price')}>
                <span>What does it cost?</span><Icon name="arrowRight" size={14}/>
              </button>
            </div>
          </div>
          <div className="sofai-panel sofai-side">
            <h3 className="t-h4">One identity. Three lenses.</h3>
            <div className="sofai-mock-screen">
              <div className="row"><span className="badge">STUDENT</span><span>In-world hints, pacing nudges, "ask me harder" mode</span></div>
              <div className="row"><span className="badge">PARENT</span><span>Today's recap, next two weeks, what to ask at dinner</span></div>
              <div className="row"><span className="badge">TEACHER</span><span>Cohort heatmap, prompt suggestions, transcript drafts</span></div>
            </div>
            <div className="sofai-feature">
              <span className="num">01</span>
              <div><h5>Knows the world</h5><p>SofAI sees the same Gaussian splat scene the student does. She knows what's in their viewport.</p></div>
            </div>
            <div className="sofai-feature">
              <span className="num">02</span>
              <div><h5>Knows the standards</h5><p>Every answer maps to a UC A–G learning objective. Not a wikipedia drift.</p></div>
            </div>
            <div className="sofai-feature">
              <span className="num">03</span>
              <div><h5>Knows the cohort</h5><p>She doesn't repeat what your teacher said this morning. She continues it.</p></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ManifestoQuote = () => (
  <section className="manifesto-quote s-pad" id="manifesto" data-screen-label="08 Manifesto excerpt">
    <div className="container">
      <div className="eyebrow t-xs" style={{ marginBottom: 32 }}><span className="bar"></span> FROM THE MANIFESTO</div>
      <p className="quote-text">
        There are <mark className="accent">258 million children</mark> on this planet who are not in school today. And of the children who <span style={{ color: 'var(--ink-2)' }}>are</span> in school — the overwhelming majority sit in classrooms whose fundamental architecture has not changed since the 19th century. We believe this is not a resource problem. <mark className="accent">It is an imagination problem.</mark>
      </p>
      <div className="quote-foot">
        <span className="mono">§ 01 · IMAGINATION</span>
        <a className="btn-ghost" href="manifesto.html">Read the full manifesto <Icon name="arrowRight" size={14}/></a>
      </div>
    </div>
  </section>
);

const FinalCTA = () => (
  <section className="final" id="enroll" data-screen-label="09 Final CTA">
    <div style={{ position: 'absolute', inset: 0, opacity: 0.6 }}>
      <SplatThumb scheme="space" density={50}/>
    </div>
    <ParticleField density={60} color="125, 255, 196" baseAlpha={0.4} speed={0.04}/>
    <div className="container final-inner">
      <h2>The next school year<br/>starts in a world.</h2>
      <p>Enrollment open for 2026–27. Takes about 10 minutes.</p>
      <a className="btn btn-primary btn-lg" href="enroll.html">Begin enrollment <Icon name="arrowRight" size={16}/></a>
      <div style={{ marginTop: 32, display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap', fontSize: 13, color: 'var(--ink-3)' }}>
        <span><Icon name="check" size={14} style={{ color: 'var(--accent)', verticalAlign: '-2px', marginRight: 4 }}/> Decision in 5–7 days</span>
        <span><Icon name="check" size={14} style={{ color: 'var(--accent)', verticalAlign: '-2px', marginRight: 4 }}/> Aid in the same window</span>
        <span><Icon name="check" size={14} style={{ color: 'var(--accent)', verticalAlign: '-2px', marginRight: 4 }}/> No standardized test required</span>
      </div>
    </div>
  </section>
);

Object.assign(window, { Steps, TrustStrip, SofAIDemo, ManifestoQuote, FinalCTA });