// The problem with phonics-first, shown side by side.
// Uses a real word (e.g. "signature") to make the contrast visceral.

function Problem() {
  return (
    <section id="problem" className="problem">
      <div className="section">
        <div className="problem-header">
          <div className="eyebrow">Why not phonics-first</div>
          <h2 className="problem-title">
            English spelling is not phonetic —<br/>but grapheme–phoneme<br/>relationships live <em>inside</em> words.
          </h2>
          <p className="lede problem-lede">
            Phonics is a real and important part of language. But when a
            <em> phonics-first</em> model drives the whole curriculum, spelling
            gets treated as a set of sound-letter rules — and then patched with
            "silent letters," "sight words," and "exceptions" wherever it
            breaks. English isn't broken, its structures are misunderstood.
          </p>
        </div>

        <div className="problem-split">
          <div className="problem-col phonics-col">
            <div className="col-tag">Phonics-first analysis</div>
            <h3 className="col-title">"That's an exception."</h3>
            <div className="word-demo">
              <div className="demo-word serif">sign</div>
              <div className="phoneme-row">
                <span className="phoneme">/s/</span>
                <span className="phoneme">/aɪ/</span>
                <span className="phoneme strike">/ɡ/</span>
                <span className="phoneme">/n/</span>
              </div>
              <div className="phoneme-notes">
                <div className="note coral">⚠ The &lt;g&gt; is silent — "sign" breaks the rule</div>
                <div className="note coral">⚠ Classified as an irregular / exception word</div>
                <div className="note coral">⚠ Memorize the spelling; move on</div>
              </div>
            </div>
            <ul className="teardown-list">
              <li><span className="x">✕</span> The investigation ends at "it's an exception"</li>
              <li><span className="x">✕</span> No explanation for why &lt;g&gt; is there</li>
              <li><span className="x">✕</span> Connections to <em>signal, signature, design</em> never surface</li>
              <li><span className="x">✕</span> Knowledge does not generalize — each word is memorized alone</li>
            </ul>
          </div>

          <div className="problem-col meaning-col">
            <div className="col-tag meaning">Meaning-First analysis</div>
            <h3 className="col-title">"Let's investigate."</h3>
            <div className="word-demo">
              <div className="demo-word serif">sign</div>
              <div className="morpheme-row">
                <span className="morpheme base">&lt;sign&gt;</span>
                <span className="morpheme-plus">=</span>
                <span className="morpheme suffix">"to mark"</span>
              </div>
              <div className="morpheme-notes">
                <div className="note teal">✓ &lt;sign&gt; is a base — it carries the meaning "to mark"</div>
                <div className="note teal">✓ The &lt;g&gt; preserves the morpheme across the family</div>
                <div className="note teal">✓ When suffixes follow, the &lt;g&gt; is pronounced: <em>sig·nal, sig·nature, de·sig·nate</em></div>
                <div className="note teal">✓ Not an exception — a predictable pattern</div>
              </div>
            </div>
            <ul className="teardown-list">
              <li><span className="check">✓</span> The investigation reveals why <em>sign</em> is spelled this way</li>
              <li><span className="check">✓</span> Learners see the base in <em>signal, signify, signature, design, resign, assign</em></li>
              <li><span className="check">✓</span> One insight unlocks an entire word family</li>
              <li><span className="check">✓</span> Knowledge generalizes — every new relative is recognizable</li>
            </ul>
          </div>
        </div>

        <div className="vocabulary-callout">
          <div className="voc-header">
            <div className="eyebrow">Words we've retired</div>
            <h3 className="voc-title">No more "broken English" vocabulary.</h3>
            <p className="voc-sub">
              These terms are scaffolds for a flawed model. We don't use them —
              because we don't need them.
            </p>
          </div>
          <div className="voc-grid">
            {[
              { out: "silent letters",  in: "graphemes that preserve meaning" },
              { out: "sight words",     in: "words whose structure is worth investigating" },
              { out: "exceptions",      in: "patterns we haven't yet understood" },
              { out: "rule-breakers",   in: "evidence we need a better model" },
              { out: "drop the e",      in: "the <-e> marker; join conventions" },
              { out: "sound it out",    in: "what is the word's meaning? structure?" },
            ].map((v, i) => (
              <div key={i} className="voc-item">
                <div className="voc-out">
                  <span className="voc-strike">{v.out}</span>
                </div>
                <div className="voc-arrow">→</div>
                <div className="voc-in">{v.in}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Problem = Problem;