// Hero: interactive word-scientist demo.
// User picks a word. The word "dissolves" into its morphemes, and a family of
// related words fans out — all sharing the same base morpheme and meaning.

const { useState, useEffect, useRef } = React;

function Hero() {
  const [familyKey, setFamilyKey] = useState("sign");
  const [selectedWord, setSelectedWord] = useState("signature");
  const [showPhonics, setShowPhonics] = useState(false);
  const [pulse, setPulse] = useState(0);

  const family = WORD_FAMILIES[familyKey];
  const selected = family.words.find(w => w.word === selectedWord) || family.words[0];

  // When family changes, reset selection
  useEffect(() => {
    const first = WORD_FAMILIES[familyKey].words.find(w => w.word.length > 5) || WORD_FAMILIES[familyKey].words[0];
    setSelectedWord(first.word);
    setPulse(p => p + 1);
  }, [familyKey]);

  useEffect(() => { setPulse(p => p + 1); }, [selectedWord]);

  return (
    <section className="hero">
      <div className="hero-inner">
        <div className="hero-copy">
          <div className="eyebrow">An English Language Arts curriculum · Structured Word Inquiry</div>
          <h1 className="hero-title">
            English spelling <em>makes sense</em><br/>when you study its structure.
          </h1>
          <p className="hero-lede">
            We don't teach spelling as a code for sound. We teach it as a
            meaning-driven writing system — where every letter has a reason,
            and every word has a family.
          </p>
          <div className="hero-ctas">
            <a href="#method" className="btn btn-primary">See how it works</a>
            <a href="#problem" className="btn btn-ghost">Why not phonics-first? →</a>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="hero-meta-num serif">2</div>
              <div className="hero-meta-label">parallel Labs.<br/>One curriculum.</div>
            </div>
            <div className="hero-meta-sep"/>
            <div className="hero-meta-item">
              <div className="hero-meta-num serif">0</div>
              <div className="hero-meta-label">"silent letters,"<br/>"exceptions," or "sight words."</div>
            </div>
            <div className="hero-meta-sep"/>
            <div className="hero-meta-item">
              <div className="hero-meta-num serif">ND</div>
              <div className="hero-meta-label">Neurodivergent-supportive<br/>by design.</div>
            </div>
          </div>
        </div>

        <div className="hero-demo">
          <div className="demo-frame">
            <div className="demo-chrome">
              <span className="demo-chrome-dot"/><span className="demo-chrome-dot"/><span className="demo-chrome-dot"/>
              <span className="demo-chrome-label">WORD SCIENTIST · LIVE DEMO</span>
            </div>

            <div className="demo-body">
              <div className="demo-prompt">Pick a word family to investigate:</div>
              <div className="family-pills">
                {Object.keys(WORD_FAMILIES).map(k => (
                  <button
                    key={k}
                    className={"family-pill " + (familyKey === k ? "active" : "")}
                    onClick={() => setFamilyKey(k)}
                  >
                    &lt;{WORD_FAMILIES[k].base}&gt;
                  </button>
                ))}
              </div>

              <div className="focus-card" key={"focus-" + pulse}>
                <div className="focus-label">YOU'RE INVESTIGATING</div>
                <div className="focus-word serif">{selected.word}</div>
                <div className="word-sum">
                  {selected.parts.map((p, i) => (
                    <span key={i} className={"sum-part " + (p.b ? "is-base" : p.t === "+" ? "is-op" : "is-affix")}>
                      {p.t === "+" ? "+" : p.t}
                    </span>
                  ))}
                  <span className="sum-arrow">→</span>
                  <span className="sum-result">{selected.word}</span>
                </div>
                <div className="focus-gloss">
                  <span className="mono focus-gloss-label">meaning</span>
                  <span className="focus-gloss-text">{selected.gloss}</span>
                </div>
              </div>

              <div className="base-banner">
                <div className="base-banner-left">
                  <div className="base-banner-label">The base</div>
                  <div className="base-banner-word serif">&lt;{family.base}&gt;</div>
                </div>
                <div className="base-banner-right">
                  <div className="base-banner-meaning">“{family.meaning}”</div>
                  <div className="base-banner-origin mono">{family.origin}</div>
                </div>
              </div>

              <div className="family-tagline">{family.tagline}</div>

              <div className="family-grid">
                {family.words.map(w => (
                  <button
                    key={w.word}
                    className={"family-word " + (w.word === selectedWord ? "active" : "")}
                    onClick={() => setSelectedWord(w.word)}
                  >
                    <span className="family-word-text">
                      {w.parts.map((p, i) => {
                        if (p.t === "+") return <span key={i} className="fw-sep"> </span>;
                        return <span key={i} className={p.b ? "fw-base" : "fw-affix"}>{p.t}</span>;
                      })}
                    </span>
                  </button>
                ))}
              </div>

              <button
                className={"phonics-toggle " + (showPhonics ? "open" : "")}
                onClick={() => setShowPhonics(v => !v)}
              >
                <span className="phonics-toggle-chevron">{showPhonics ? "▾" : "▸"}</span>
                <span>What would a phonics-first lesson say about this family?</span>
              </button>

              {showPhonics && (
                <div className="phonics-panel">
                  {family.phonicsBreaks.length === 0 ? (
                    <p className="phonics-empty">
                      Nothing dramatic here — but a phonics-first lesson would
                      still teach these as isolated decoding words, missing the
                      morphological thread that binds them into a meaning family.
                    </p>
                  ) : (
                    <>
                      <div className="phonics-panel-title">Phonics-first sees a pile of contradictions:</div>
                      <ul className="phonics-list">
                        {family.phonicsBreaks.map((p, i) => (
                          <li key={i}>
                            <span className="serif phonics-word">{p.word}</span>
                            <span className="phonics-issue">{p.issue}</span>
                          </li>
                        ))}
                      </ul>
                      <div className="phonics-resolution">
                        <strong>Meaning-first sees one family.</strong> The spelling
                        preserves the base <span className="mono">&lt;{family.base}&gt;</span>
                        — “{family.meaning}” — across every word. Pronunciation shifts;
                        meaning doesn't.
                      </div>
                    </>
                  )}
                </div>
              )}
            </div>
          </div>

          <div className="demo-caption mono">
            ↑ This is how a Meaning-First lesson starts. Try it.
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;