// Optimize hotkey showcase: select any text, press ⌘⌥O, it comes back sharper.
// Not dictation. Works on anything you typed, in any app.
const { useState: useStateO, useEffect: useEffectO, useRef: useRefO } = React;

const OPT_SCENES = [
  {
    app: "Mail",
    hint: "To: client@big.co",
    before: "I am writing to you in order to ask whether or not it might be possible to move our Thursday meeting, because of the fact that I have a scheduling conflict.",
    after: "Could we move Thursday's meeting? I have a conflict.",
    note: "28 words in, 9 words out. Nothing of value was lost.",
  },
  {
    app: "Slack",
    hint: "#launch-team",
    before: "sorry for the late reply i was in back to back meetings all day and didnt really get a chance to properly look at the doc yet",
    after: "Sorry for the late reply, back-to-back meetings all day. I haven't gotten to the doc yet.",
    note: "Same apology, fewer casualties.",
  },
  {
    app: "Notes",
    hint: "launch-plan.md",
    before: "we should probably think about maybe pushing the launch by a week or so since there are still quite a few bugs that we havent managed to fix yet",
    after: "Let's push the launch by a week. Several bugs are still open.",
    note: "A decision emerged from the mist.",
  },
];

function OptimizeShowcase() {
  const [scene, setScene] = useStateO(0);
  const [phase, setPhase] = useStateO("read"); // read | select | keys | done
  const timers = useRefO([]);
  const s = OPT_SCENES[scene];

  const later = (fn, ms) => timers.current.push(setTimeout(fn, ms));
  const clear = () => { timers.current.forEach(clearTimeout); timers.current = []; };

  useEffectO(() => {
    clear();
    setPhase("read");
    later(() => setPhase("select"), 1500);   // read the messy draft first
    later(() => setPhase("keys"), 2900);     // selection settles, then the chord
    later(() => setPhase("done"), 3700);
    later(() => setScene(sc => (sc + 1) % OPT_SCENES.length), 7600);
    return clear;
  }, [scene]);

  const selected = phase === "select" || phase === "keys";
  const keysDown = phase === "keys";

  return (
    <section className="section optimize-section" id="optimize">
      <div className="section-head">
        <div className="section-eyebrow">研 · SHARPEN</div>
        <h2 className="section-title">Typed it clumsy? <span className="sc-accent">Hotkey it sharp.</span></h2>
        <p className="section-sub">Not just for dictation. Select any text you already typed, in any app, press the Optimize hotkey, and the ninja rewrites the selection in place. First drafts are now someone else's problem. Yours, but past you.</p>
      </div>

      <div className="opt-wrap">
        <div className="demo-card opt-card">
          <div className="demo-chrome">
            <div className="demo-dots"><span /><span /><span /></div>
            <div className="demo-app">
              <span className="demo-app-name">{s.app}</span>
              <span className="demo-app-hint">{s.hint}</span>
            </div>
            <div className="demo-shortcut">
              <kbd>⌘</kbd><kbd>⌥</kbd><kbd>O</kbd>
            </div>
          </div>

          <div className="opt-surface">
            <div className="demo-label">
              {phase === "done"
                ? <><span className="demo-dot" /> ninja rewrote your selection</>
                : phase === "select" || phase === "keys"
                  ? <><span className="demo-dot live" /> {keysDown ? "optimizing…" : "text selected"}</>
                  : <><span className="demo-dot" /> you typed this, in a hurry</>}
            </div>

            {phase !== "done" ? (
              <p className="opt-text">
                <span className={`opt-sel ${selected ? "is-selected" : ""}`}>{s.before}</span>
                {phase === "select" && (
                  <span className="opt-cursor" aria-hidden>
                    <svg width="18" height="18" viewBox="0 0 18 18">
                      <path d="M4 2 L4 14 L7.2 11 L9.4 16 L11.6 15 L9.4 10.2 L14 10 Z" fill="var(--ink)" stroke="var(--paper)" strokeWidth="1.2" />
                    </svg>
                  </span>
                )}
              </p>
            ) : (
              <p className="opt-text opt-text-after">{s.after}</p>
            )}

            <div className={`opt-keys ${keysDown ? "is-down" : ""} ${phase === "done" ? "is-done" : ""}`} aria-hidden>
              <span className="opt-keycap">⌘</span>
              <span className="opt-keycap">⌥</span>
              <span className="opt-keycap">O</span>
              <span className="opt-keys-label">{phase === "done" ? "✓ optimized, in place" : "press to optimize"}</span>
            </div>
          </div>

          <div className="demo-footer">
            <div className="opt-dots">
              {OPT_SCENES.map((_, i) => (
                <button
                  key={i}
                  className={`opt-dot ${i === scene ? "active" : ""}`}
                  onClick={() => setScene(i)}
                  aria-label={`scenario ${i + 1}`}
                />
              ))}
            </div>
            <div className="demo-meta">{phase === "done" ? s.note : "select · ⌘⌥O · done"}</div>
          </div>
        </div>

        <div className="opt-points">
          <div className="opt-point">
            <div className="opt-point-num">01</div>
            <div><strong>Any text, anywhere.</strong> Typed, pasted, or dictated an hour ago. If you can select it, the ninja can sharpen it.</div>
          </div>
          <div className="opt-point">
            <div className="opt-point-num">02</div>
            <div><strong>No mic involved.</strong> This one is pure keyboard. Select, press ⌘⌥O, keep working while it thinks.</div>
          </div>
          <div className="opt-point">
            <div className="opt-point-num">03</div>
            <div><strong>Replaced in place.</strong> The rewrite lands exactly where the selection was. No copy-paste round trip through a chatbot.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { OptimizeShowcase });