/* Hero E — The Three-Step Demo.
   Left: plainspoken headline ("You don't need to learn AI. You need the
   prompts."). Right: tiny mocked triptych — envelope → ChatGPT input
   → assistant output. Each panel is shrunken UI grade so an SBO recognizes
   the actual moment of use. Auto-advances; respects prefers-reduced-motion. */

const { useState: useStateE, useEffect: useEffectE } = React;

function HeroE() {
  const [lightbox, setLightbox] = useStateE(false);
  const [step, setStep] = useStateE(0);

  useEffectE(() => {
    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;
    const t = setInterval(() => setStep(s => (s + 1) % 3), 3200);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="hv-stage hv-stage-e">
      <TopBar />

      <div className="hv-e-grid">
        <div className="hv-e-text">
          <div className="hv-label">
            <span className="hv-dot"></span>
            <span className="hv-label-num">Recon</span>
            <span>Monthly intelligence for your business</span>
          </div>

          <h1 className="hv-e-headline">
            You don't need to learn AI.<br/>
            <em>You need the prompts.</em>
          </h1>

          <p className="hv-e-sub">
            Every 30 days we mail you five prompts written specifically for your business and your goals. You paste them into ChatGPT or Claude. You get answers back. That's it — that's the whole workflow.
          </p>

          <p className="hv-e-poetic">
            <em>The answers are already out there.</em> We bring them home.
          </p>

          <CTACluster onSecondary={() => setLightbox(true)} />
          <p className="hv-trust">
            <span className="hv-trust-bar"></span>
            <span><em>If you can copy and paste, you can use Recon.</em></span>
          </p>
        </div>

        <div className="hv-e-visual">
          <Triptych step={step} onPick={setStep} />
        </div>
      </div>

      <SampleLightbox open={lightbox} onClose={() => setLightbox(false)} />
    </div>
  );
}

function Triptych({ step, onPick, EmailComponent }) {
  const Email = EmailComponent || PanelEmail;
  const panels = [
    { kicker: "01", label: "We email you the prompt" },
    { kicker: "02", label: "You paste it into ChatGPT" },
    { kicker: "03", label: "You get answers back" },
  ];
  return (
    <div className="hv-trip">
      {panels.map((p, i) => (
        <div
          key={i}
          className={`hv-trip-panel ${step === i ? "active" : ""}`}
          data-step={i + 1}
          onClick={() => onPick(i)}
          role="button"
          tabIndex={0}
          aria-current={step === i ? "step" : undefined}
        >
          <div className="hv-trip-panel-head">
            <span className="hv-trip-num">— {p.kicker}</span>
            <span className="hv-trip-label">{p.label}</span>
            <span className="hv-trip-now" aria-hidden="true">▸ now</span>
          </div>
          <div className="hv-trip-panel-body">
            {i === 0 && <Email />}
            {i === 1 && <PanelChat />}
            {i === 2 && <PanelOutput />}
          </div>
        </div>
      ))}
      <div className="hv-trip-pager">
        {panels.map((_, i) => (
          <button key={i} className={step === i ? "active" : ""} onClick={() => onPick(i)} aria-label={`Step ${i + 1}`} />
        ))}
      </div>
    </div>
  );
}

function PanelEmail() {
  return (
    <div className="hv-mail">
      <div className="hv-mail-head">
        <span className="hv-mail-from">From · jim@reconai.io</span>
        <span className="hv-mail-time">7:02 AM</span>
      </div>
      <div className="hv-mail-subj">
        <em>Your May prompts</em>
        <span className="hv-mail-count" aria-hidden="true">5</span>
      </div>
      <div className="hv-mail-body">
        <div className="hv-mail-row"><span>—</span><span>Lost-customer win-back sequence</span></div>
        <div className="hv-mail-row"><span>—</span><span>Three-reply reputation recovery</span></div>
        <div className="hv-mail-row hv-mail-row-hot"><span>—</span><span>Slow-day revenue test memo</span></div>
        <div className="hv-mail-row"><span>—</span><span>Weekend content pack · Reels + stories</span></div>
        <div className="hv-mail-row"><span>—</span><span>Bonus · AI assistant setup</span></div>
      </div>
    </div>
  );
}

function PanelChat() {
  return (
    <div className="hv-chat">
      <div className="hv-chat-head">
        <span className="hv-chat-dot"></span>
        <span className="hv-chat-name">ChatGPT</span>
      </div>
      <div className="hv-chat-msg">
        <div className="hv-chat-paste">
          <span className="hv-chat-paste-tag">— pasted</span>
          <p>You are the owner of [Your Business · Anytown, USA]. Last month, 14 customers stopped coming after 6+ months of regular visits. Write a 4-touch SMS win-back sequence — empathetic, no discount in the first message, with a soft offer only at touch 3…</p>
        </div>
        <div className="hv-chat-cursor" aria-hidden="true"></div>
      </div>
    </div>
  );
}

function PanelOutput() {
  return (
    <div className="hv-out">
      <div className="hv-out-head">
        <span className="hv-out-dot"></span>
        <span className="hv-out-name">Win-back sequence · 4 touches</span>
      </div>
      <div className="hv-out-body">
        <p><em>Touch 01 · Day 1.</em> No ask. Just notice.</p>
        <p><span className="hv-out-k">SMS</span> "Hey [name] — Jim here. Realized we hadn't seen you in a bit. Hope all's well."</p>
        <p><em>Touch 02 · Day 4.</em> Reason to come back.</p>
        <p><span className="hv-out-k">SMS</span> "We just rolled out [new thing]. Thought of you because you always ordered…"</p>
      </div>
    </div>
  );
}

window.HeroE = HeroE;