/* 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">
            The answers to grow your business are already out there.<br/>
            <em>We read them, rank them, and hand you the moves.</em>
          </h1>

          <p className="hv-e-sub hv-g-sub">
            Every 30 days, your AI competitive-intelligence analyst reads your customers, your competitors, and the whole open web — then hands you a report, the three moves to make this month, and the exact words to paste into ChatGPT so it writes it up for you. Do it yourself, hand it to your staff, or brief the team. <span className="hv-g-cost">Work a consultant would charge thousands for.</span>
          </p>

          <p className="hv-e-poetic">
            <em>Complicated on our end. Simple on yours.</em>
          </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: "Your Recon Report",                   p: <><em>A full report, a few minutes to read.</em> Three moves to ship this month, the thinking behind them, and what's actually changing in your category. <em>Read it Monday morning — then do it yourself, hand it to your staff, or brief the team for action.</em></> },
    { num: "02", h: "Five prompts you paste and run",      p: <>The exact words you paste into ChatGPT or Claude — hand-written for your business, naming you, your category, your competitors. <em>Not templates</em>: you paste, the model writes the work.</> },
    { num: "03", h: "Public sources across the web, ranked", p: <>Google, Yelp, Reddit, X, YouTube, TikTok, Instagram, Hacker News, industry newsletters and forums. Every signal ties back to where it came from — <em>spot-check us</em> on anything.</> },
    { num: "04", h: "Google Profile score & monthly fixes", p: <>We score your Google listing out of 100 and hand you the <em>exact fixes</em> for this month — categories, photos, Q&amp;A, posts. Tracked every issue so you watch the number move.</> },
    { num: "05", h: "Your business AI, on tap",            p: <>Text it like a friend who runs your marketing. <em>"What should I post this week?"</em> It already knows your business and gets sharper every issue. One link in your welcome email — no account, no setup.</> },
    { num: "06", h: "Reply and we see it",                 p: <>No support queue. Reply to any issue and it lands in <em>our 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>Send me my free Recon Report now</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 = [
    "What should I post this week?",
    "Why did my reviews dip last month?",
    "Draft a reply to this tough Google review",
    "Help me plan a promo for next month",
  ];
  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 business AI, <em>on tap.</em>
        </h2>
        <p className="hv-moat-lede">
          Text it like a friend who happens to run your marketing. Every paid subscriber gets a private chat that already knows your category, your competitors, and this month's report. Use it any day — <em>no login, no account, no app to install.</em>
        </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;