/* Hero G — The Merged.
   E's plain-English workflow headline + triptych, with D's cost anchor
   lifted into a tightened sub. Adds a small "method" blip below the
   triptych: how Recon scrapes reviews, in one line. */

const { useState: useStateG, useEffect: useEffectG } = React;

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

  useEffectG(() => {
    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-g">
      <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>Your AI competitive-intelligence analyst</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 hv-g-sub">
            Every 30 days, your AI competitive-intelligence analyst reads your market — customers and competitors — and turns it into five copy-paste prompts. Paste them into ChatGPT or Claude. Get back <span className="hv-g-cost">work a consultant would charge thousands for.</span>
          </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} />
          <MethodBlip />
        </div>
      </div>

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

/* BenefitsBand — sits below the hero on the home page. Surfaces the six
   subscription benefits that live on the Pricing page so they aren't
   buried at the bottom of the funnel. Reuses .hv-stage's token scope. */
function BenefitsBand() {
  const items = [
    { num: "01", h: "Five prompts every month",          p: <>Hand-written for your business. Names you, names your category, names your competitors. <em>Not templates</em> — real prompts you paste and run.</> },
    { num: "02", h: "A six-page report",                  p: <>The thinking behind the prompts. What's moving in your category, who's saying what, and <em>three things</em> you can do this month.</> },
    { num: "03", h: "Twelve sources, ranked",             p: <>Google, Yelp, Reddit, YouTube, niche forums. Ranked by what you can <em>act on inside 30 days</em>, not raw volume.</> },
    { num: "04", h: "Every signal cites its source",      p: <>No mystery rankings. Each claim ties back to the public channel it came from — <em>spot-check us</em> on anything.</> },
    { num: "05", h: "Tailored to your monthly priorities", p: <>Each month's report leans toward what you actually use. <em>The longer you stay,</em> the more your report fits your business — not a generic template.</> },
    { num: "06", h: "Reply and Jim sees it",              p: <>No support queue. Reply to any issue and it lands in <em>my inbox</em>. Replies usually within a day.</> },
  ];
  return (
    <section className="hv-band">
      <div className="hv-band-inner">
        <div className="hv-band-head">
          <div className="hv-label">
            <span className="hv-dot"></span>
            <span className="hv-label-num">The subscription</span>
            <span>What every issue includes</span>
          </div>
          <h2 className="hv-band-h">What you get every <em>month.</em></h2>
          <p className="hv-band-lede">The non-negotiables. We don't gate any of these — same six things, every issue, every business.</p>
        </div>
        <div className="hv-band-grid">
          {items.map(it => (
            <div className="hv-band-cell" key={it.num}>
              <span className="hv-band-num">— {it.num}</span>
              <h3>{it.h}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
        <div className="hv-band-tail">
          <span className="hv-band-tail-rule"></span>
          <p><em>Same price every month.</em> No tiers, no upsells. Cancel any month — reply to your latest issue with the word <em>cancel</em> and we won't bill you again.</p>
          <span className="hv-band-tail-rule"></span>
        </div>
        <div className="hv-band-cta">
          <a className="hv-cta-primary" href="/site/pricing.html"><span>See pricing</span><span className="hv-arrow">→</span></a>
          <a className="hv-cta-secondary" href="/site/signup.html"><span>Start with a free sample</span><span className="hv-arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* AndOneMoreThing — the "moat" reveal. Sits below the 6-tile grid. Frames
   the embedded assistant as a separate moment (not a tile), and names the
   compounding-loop mechanic in plain language without breathless tone. */
function AndOneMoreThing() {
  const examples = [
    "Draft a reply to a tough Google review",
    "Help me plan a promo for next month",
    "Explain something from this month's report",
  ];
  return (
    <section className="hv-moat">
      <div className="hv-moat-inner">
        <div className="hv-moat-label">
          <span className="hv-dot"></span>
          <span>One more thing — included with every subscription</span>
        </div>
        <h2 className="hv-moat-h">
          Your own analyst, <em>between reports.</em>
        </h2>
        <p className="hv-moat-lede">
          Every paid subscriber gets a private chat that already knows your category, your competitors, and the goals you told us about. Use it any day of the month — no login, no account, no app to install.
        </p>
        <ul className="hv-moat-examples">
          {examples.map((e) => (
            <li key={e}>{e}</li>
          ))}
        </ul>
        <p className="hv-moat-body">
          The longer you use it, the more useful your next report gets. Not because we save your questions — <em>we don't.</em> But we keep track of <em>what kind</em> of things you ask about (more promo planning than competitor research, more weekday lunch than weekend dinner) so each month's report leans toward what you actually use.
        </p>
        <p className="hv-moat-foot">
          One link in your welcome email. Type a question. Get an answer.
        </p>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <HeroG />
      <BenefitsBand />
      {/* AndOneMoreThing: gated during the 7-day one-customer pilot of the
          embedded assistant (bi-20260517-001). Un-comment after pilot passes
          DEPLOY-ASSISTANT.md §9. The component below is fully built and live;
          just this one tag is the feature flag. */}
      {/* <AndOneMoreThing /> */}
    </>
  );
}

window.HeroG = HeroG;
window.BenefitsBand = BenefitsBand;
window.AndOneMoreThing = AndOneMoreThing;
window.HomePage = HomePage;