// The method: meaning → structure → grapheme → phonology → pronunciation
// An animated ordered stack showing the strict sequence.

function Method() {
  const [active, setActive] = React.useState(0);
  const steps = [
    {
      n: "01",
      name: "Meaning",
      tag: "what does it mean?",
      body: "Every investigation begins with meaning. What does this word mean? What family does it belong to? What do its relatives mean? Meaning is the organizing principle of English spelling — not a bonus round at the end.",
      example: { q: "What does <sign> mean?", a: "to mark, from Latin signum" },
    },
    {
      n: "02",
      name: "Structure",
      tag: "how is it built?",
      body: "Build a word sum. Identify the base, prefixes, and suffixes. Apply explicit join conventions — Replace, Double, Change, Toggle — to see how morphemes combine. Structure is the architecture; pronunciation is paint.",
      example: { q: "sign + ate + ure", a: "→ signature (replaced the final non-syllabic <e>)" },
    },
    {
      n: "03",
      name: "Grapheme function",
      tag: "what does each letter do?",
      body: "Every grapheme has a job. Some represent phonemes; some mark etymology; some preserve the shape of a morpheme across pronunciations. There are no 'silent letters' — only letters whose job isn't the one you expected.",
      example: { q: "The <g> in <sign>", a: "holds the morpheme steady across the family" },
    },
    {
      n: "04",
      name: "Phonology",
      tag: "what sounds are possible?",
      body: "Only now do we consider sound. Which phonemes can this grapheme represent? How does stress shift between related words? Phonology is surface-level variation — rich and interesting, but downstream of meaning.",
      example: { q: "sign → signal", a: "The <g> shifts to pronounced — meaning stable." },
    },
    {
      n: "05",
      name: "Pronunciation",
      tag: "now, how do we say it?",
      body: "Fluent pronunciation is the final step — not the first. By the time a learner pronounces the word, they already understand what it means, how it's built, and why it's spelled the way it is.",
      example: { q: "Say it aloud", a: "/ˈsɪɡ.nə.tʃər/ — with understanding, not guesswork." },
    },
  ];

  return (
    <section id="method" className="method">
      <div className="section">
        <div className="method-header">
          <div className="eyebrow">The Method</div>
          <h2>
            Five steps, in this order.<br/>
            <em className="serif-italic">Never</em> rearranged.
          </h2>
          <p className="lede method-lede">
            Meaning comes first. Pronunciation comes last. Every Meaning-First
            lesson — at every grade level, for every learner — follows this sequence.
          </p>
        </div>

        <div className="method-body">
          <div className="method-rail">
            {steps.map((s, i) => (
              <button
                key={i}
                className={"rail-step " + (active === i ? "active" : "")}
                onClick={() => setActive(i)}
              >
                <span className="rail-n mono">{s.n}</span>
                <span className="rail-name serif">{s.name}</span>
                <span className="rail-tag">{s.tag}</span>
              </button>
            ))}
          </div>

          <div className="method-detail" key={"m-" + active}>
            <div className="detail-n mono">{steps[active].n} / 05</div>
            <h3 className="detail-name serif">{steps[active].name}</h3>
            <div className="detail-tag">{steps[active].tag}</div>
            <p className="detail-body">{steps[active].body}</p>
            <div className="detail-example">
              <div className="ex-q mono">Q. {steps[active].example.q}</div>
              <div className="ex-a">{steps[active].example.a}</div>
            </div>
            <div className="detail-nav">
              <button onClick={() => setActive(a => Math.max(0, a - 1))} disabled={active === 0}>← Previous</button>
              <button onClick={() => setActive(a => Math.min(4, a + 1))} disabled={active === 4}>Next step →</button>
            </div>
          </div>
        </div>

        <div className="method-quote">
          <div className="mono method-quote-label">A core principle</div>
          <blockquote className="serif">
            "We scaffold cognitive load.<br/>We <em>never</em> simplify linguistic truth into inaccuracy."
          </blockquote>
        </div>
      </div>
    </section>
  );
}

function Labs() {
  return (
    <section id="labs" className="labs">
      <div className="section">
        <div className="labs-header">
          <div className="eyebrow">Two Labs · One curriculum</div>
          <h2>Same meaning.<br/>Different rooms.</h2>
          <p className="lede">
            The Student Lab and the Teacher Lab run the same underlying curriculum.
            What changes is the tone, the identity model, and the outcome.
          </p>
        </div>

        <div className="labs-grid">
          <div id="students" className="lab-card student-card">
            <div className="lab-sigil serif">S</div>
            <div className="lab-tag mono">STUDENT LAB</div>
            <h3 className="lab-name serif">For young word scientists.</h3>
            <p className="lab-body">
              Kind, age-appropriate, curious. Children investigate word families
              as scientists — not as test-takers. Picture logins, no PII collected.
              Predictable routines, no auto-advancing timers, no surveillance.
              Strengths-based language throughout.
            </p>
            <ul className="lab-bullets">
              <li>Picture logins · zero PII</li>
              <li>Bounded tasks, predictable routines</li>
              <li>Neurodivergent-supportive by design</li>
              <li>No timers that auto-advance</li>
            </ul>
            <a href="#" className="lab-cta">Explore the Student Lab →</a>
          </div>

          <div id="teachers" className="lab-card teacher-card">
            <div className="lab-sigil serif">T</div>
            <div className="lab-tag mono">TEACHER LAB</div>
            <h3 className="lab-name serif">For certified educators.</h3>
            <p className="lab-body">
              Professional, academic, rigorous. Educators work through six modules
              culminating in a capstone investigation, earning the Meaning-First
              Literacy™ Certified Teacher credential. Real identity; real credential.
            </p>
            <ul className="lab-bullets">
              <li>Six modules + capstone</li>
              <li>Structured Word Inquiry, in depth</li>
              <li>MFL™ Certified Teacher credential</li>
              <li>Reviewer-supported reflection</li>
            </ul>
            <a href="/teacher-lab/" className="lab-cta">Begin certification →</a>
          </div>
        </div>

        <div className="closing">
          <div className="closing-inner">
            <div className="eyebrow" style={{color: "var(--amber)"}}>Join the work</div>
            <h2 className="closing-title serif">
              English spelling makes sense.<br/>
              <em>Let's teach it that way.</em>
            </h2>
            <div className="closing-ctas">
              <a href="#" className="btn btn-amber">Request a pilot for your school</a>
              <a href="mailto:hello@lokahiconnect.org" className="btn btn-ghost-light">hello@lokahiconnect.org</a>
            </div>
            <div className="closing-foot mono">
              A program of Lokahi Connect · A 501(c)(3) nonprofit · Built in the open
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Method = Method;
window.Labs = Labs;