/* SpeakMind — premium sections: AI Auto-Edits (before→after) + persona tabs.
   Example content (raw/clean + persona samples) is locale-aware: read from
   window.SM so the EN/中 toggle swaps it. */

/* ============ AI Auto-Edits: messy speech → clean text ============ */
function AutoEdits() {
  const { RichText } = window.SMOverlay;
  const t = window.SM.t;
  const examples = window.SM.aeExamples;
  const [idx, setIdx] = useState(0);
  const [edited, setEdited] = useState(false);
  const ex = examples[idx] || examples[0];

  useEffect(() => {
    setEdited(false);
    const t1 = setTimeout(() => setEdited(true), 1600);
    const t2 = setTimeout(() => setIdx((i) => (i + 1) % examples.length), 5200);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [idx]);

  return (
    <section id="how" className="ae-sec">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow" data-no="01">{t("AI Auto-Edits")}</div>
          <h2>{t("You ramble. It writes.")}</h2>
          <p>{t("Speak the way you think — half-formed, backtracking, full of “umm”. SpeakMind transcribes and edits in one pass: fillers gone, grammar fixed, self-corrections caught, your meaning untouched.")}</p>
        </div>

        <div className="ae-stage reveal" data-d="1">
          <div className="ae-panel raw">
            <div className="ae-cap mono"><span className="ae-dot rec" /> {ex.lang}</div>
            <p className={"ae-text" + (edited ? " editing" : "")}>
              {ex.raw.map((s, i) => (
                <span key={i} className={s.cut ? "ae-cut" : ""}>{s.t}</span>
              ))}
            </p>
          </div>

          <div className="ae-arrow"><span className="mono">{t("clean up")}</span></div>

          <div className="ae-panel out">
            <div className="ae-cap mono"><span className="ae-dot ok" /> {t("Inserted")}</div>
            <p className={"ae-clean" + (edited ? " show" : "")}><RichText text={ex.clean} /></p>
            <div className={"ae-tags" + (edited ? " show" : "")}>
              {ex.tags.map((t) => <span className="ae-tag" key={t}>✓ <RichText text={t} /></span>)}
            </div>
          </div>
        </div>
        <div className="ae-dots">
          {examples.map((_, i) => <button key={i} className={"ae-pdot" + (i === idx ? " on" : "")} onClick={() => setIdx(i)} aria-label={"Example " + (i + 1)} />)}
        </div>
      </div>
    </section>
  );
}

/* ============ Made for the way you work: persona tabs ============ */
const PERSONAS = [
  { id: "dev", label: "Developers", app: "cursor", metric: "Dev", metricLabel: "Idiomatic code & commits, by voice",
    headline: "Dictate code. Stay in the zone.",
    body: "Speak intent in plain language — Developer mode writes idiomatic code, commit messages and refactors straight into Cursor, VS Code, or your terminal." },
  { id: "founder", label: "Founders", app: "notion", metric: "Notes", metricLabel: "Rambles → structured docs",
    headline: "Think out loud. Ship decisions.",
    body: "Ramble a strategy on a walk and get a structured doc. PRDs, updates and notes — organized, in your voice, ready to share." },
  { id: "writer", label: "Writers", app: "safari", metric: "Write", metricLabel: "Rough thoughts → flowing prose",
    headline: "Draft at the speed of thought.",
    body: "Get past the blank page. Speak a chapter, a newsletter, a reply — Write mode keeps the flow and cleans the prose." },
  { id: "support", label: "Support", app: "slack", metric: "Auto", metricLabel: "Clean, on-brand replies",
    headline: "Resolve tickets, talking.",
    body: "Skip the script. Speak naturally and send polished, on-brand replies across tickets, chats and DMs." },
  { id: "sales", label: "Sales", app: "gmail", metric: "Auto", metricLabel: "Recap the call by voice",
    headline: "Follow up before you forget.",
    body: "Walk out of the call and dictate the recap. Personalized outreach and CRM notes, the moment it's fresh." },
  { id: "student", label: "Students", app: "notion", metric: "Notes", metricLabel: "Lectures → study notes",
    headline: "Notes that write themselves.",
    body: "Capture lectures, draft essays and break through writer's block — clean, structured, in any language you study in." },
];

function PersonaVisual({ p }) {
  const { RichText } = window.SMOverlay;
  const t = window.SM.t;
  const c = window.SM.ctx[p.app];
  const sample = (window.SM.personaSamples && window.SM.personaSamples[p.id]) || { kind: "doc", text: "" };
  return (
    <div className="pv-card">
      <div className="pv-bar">
        <span className="traffic"><i /><i /><i /></span>
        <span className="pv-tab"><span className="g" style={{ background: c.color }}>{c.glyph}</span>{c.name}</span>
      </div>
      <div className="pv-body">
        <div className="pv-status mono"><span className="d" /> {t("Inserted by voice")}</div>
        {sample.kind === "code"
          ? <pre className="pv-code">{sample.text}</pre>
          : <p className={"pv-sample" + (sample.kind === "email" ? " email" : "")}><RichText text={t(sample.text)} /></p>}
      </div>
      <div className="pv-metric">
        <span className="pv-num">{p.metric}</span>
        <span className="pv-mlabel">{t(p.metricLabel)}</span>
      </div>
    </div>
  );
}

function Personas() {
  const t = window.SM.t;
  const [active, setActive] = useState(0);
  const paused = useRef(false);
  useEffect(() => {
    const t = setInterval(() => { if (!paused.current) setActive((a) => (a + 1) % PERSONAS.length); }, 3600);
    return () => clearInterval(t);
  }, []);
  const p = PERSONAS[active];
  return (
    <section id="personas" className="pp-sec"
      onMouseEnter={() => (paused.current = true)} onMouseLeave={() => (paused.current = false)}>
      <div className="wrap">
        <div className="section-head reveal" style={{ maxWidth: "820px" }}>
          <div className="eyebrow" data-no="02">{t("Made for the way you work")}</div>
          <h2>{t("One key. Every kind of work.")}</h2>
        </div>
        <div className="pp-tabs reveal" data-d="1">
          {PERSONAS.map((pp, i) => (
            <button key={pp.id} className={"pp-tab" + (i === active ? " on" : "")} onClick={() => setActive(i)}>{t(pp.label)}</button>
          ))}
        </div>
        <div className="pp-grid reveal" data-d="2">
          <div className="pp-copy" key={p.id}>
            <h3>{t(p.headline)}</h3>
            <p>{t(p.body)}</p>
            <div className="pp-foot">
              <a className="btn btn-ghost" href="#download">{t("Download for Mac")}</a>
            </div>
          </div>
          <div className="pp-vis" key={p.id + "-v"}><PersonaVisual p={p} /></div>
        </div>
      </div>
    </section>
  );
}

window.SMpro = { AutoEdits, Personas };