/* EOMA landing v3 · Mirror Switcher (§3)
   Industry chip row + cross-faded HeroAnswerCard. Default: e-commerce.
   200ms cross-fade swap. Reduced motion: instant swap.
*/

const { useState: msUseState, useEffect: msUseEffect } = React;

function MirrorSwitcher() {
  const fixtures = window.ANSWER_FIXTURES;
  const keys = Object.keys(fixtures);
  const [selected, setSelected] = msUseState("e-commerce");
  const [displayed, setDisplayed] = msUseState("e-commerce");
  const [phase, setPhase] = msUseState("in"); // in | out
  const reduced = window.useReducedMotion();

  msUseEffect(() => {
    if (selected === displayed) return;
    if (reduced) { setDisplayed(selected); return; }
    setPhase("out");
    const t = setTimeout(() => {
      setDisplayed(selected);
      setPhase("in");
    }, 200);
    return () => clearTimeout(t);
  }, [selected, displayed, reduced]);

  return (
    <section className="mirror-section" id="mirror">
      <div className="mirror-head">
        <span className="eyebrow">
          <span className="dot dot-mint" />
          <span>Try it on your category</span>
        </span>
        <h2 className="t-display-lg">This is happening right now in your industry.</h2>
        <p className="t-body-lg" style={{ maxWidth: "56ch" }}>
          Pick your category — see a real answer ChatGPT, Perplexity, Gemini or Claude gave
          this week. Notice who's named, and who isn't.
        </p>
      </div>

      <div className="mirror-chips" role="tablist" aria-label="Industry vertical">
        {keys.map((k) => (
          <button
            key={k}
            role="tab"
            aria-pressed={selected === k}
            aria-selected={selected === k}
            className="mirror-chip"
            onClick={() => setSelected(k)}
          >
            {fixtures[k].chip}
          </button>
        ))}
      </div>

      <div className="mirror-stage">
        <window.HeroAnswerCard
          fixture={fixtures[displayed]}
          className={phase === "out" ? "is-out" : "is-in"}
        />
      </div>
    </section>
  );
}

Object.assign(window, { MirrorSwitcher });