/* Free-sample page — embeds the live Tally free-sample form (b5N997)
   directly, so there's a single intake with no duplicate fields. The form
   collects business name, business address (used to match the exact Google
   listing), email, category, and up to 5 competitors; the sample report
   is mailed back inside 48 hours. */

function SignupPage() {
  // Load Tally's embed loader so the iframe auto-resizes (dynamicHeight=1).
  React.useEffect(() => {
    const SRC = "https://tally.so/widgets/embed.js";
    const run = () => { if (window.Tally) window.Tally.loadEmbeds(); };
    if (window.Tally) { run(); return; }
    let s = document.querySelector('script[src="' + SRC + '"]');
    if (s) { s.addEventListener("load", run); return; }
    s = document.createElement("script");
    s.src = SRC;
    s.onload = run;
    s.onerror = run;
    document.body.appendChild(s);
  }, []);

  return (
    <>
      <SiteTopBar active="signup" />
      <main>
        <div className="signup-shell signup-shell--single">
          <header className="signup-form-head">
            <div className="site-label">
              <span className="site-dot"></span>
              <span className="site-label-num">Free sample</span>
              <span>Your AI competitive-intelligence analyst — preview yours</span>
            </div>
            <h1>
              Get your <em>free Recon Report.</em>
            </h1>
            <p>
              Fill this out and your AI competitive-intelligence analyst will build a free sample report on your business — <em>plus your Google Profile scorecard with the exact fixes for this month</em> — mailed inside 48 hours. If it's useful, we can talk about a subscription. If not, you don't owe us anything.
            </p>
          </header>

          <div className="signup-embed">
            <iframe
              data-tally-src="https://tally.so/embed/b5N997?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1"
              loading="lazy"
              width="100%"
              height="820"
              frameBorder="0"
              marginHeight={0}
              marginWidth={0}
              title="Recon — free sample report"
              style={{ width: "100%", border: 0, minHeight: 820 }}>
            </iframe>
            <p className="signup-embed-note">
              By submitting, you agree to our short&nbsp;<a href="/legal.html#terms" style={{ color: "var(--terracotta)" }}>terms</a>&nbsp;and&nbsp;<a href="/legal.html#privacy" style={{ color: "var(--terracotta)" }}>privacy promise</a>.
            </p>
          </div>

          <AfterSample />
        </div>
      </main>
      <SiteFooter/>
    </>
  );
}

/* AfterSample — quiet reinforcement of what a subscription looks like
   after the free sample lands. Sits below the form, not competing with
   submit; no CTA, just orientation. */
function AfterSample() {
  return (
    <aside className="after-sample">
      <div className="after-sample-head">
        <span className="after-sample-eyebrow">— After the sample</span>
        <h2>If it's <em>useful,</em> here's what a subscription looks like.</h2>
        <p>No card now. No follow-up sequence. If the sample is useful, you reply and we start.</p>
      </div>
      <div className="after-sample-grid">
        <div className="after-sample-cell">
          <span className="after-sample-k">— 01 · Free sample</span>
          <p><em>A full report + Google Profile scorecard</em> on your business, in your inbox inside 48 hours. Yours to keep.</p>
        </div>
        <div className="after-sample-cell">
          <span className="after-sample-k">— 02 · If you say yes</span>
          <p><em>$1,000</em> one-time setup, then <em>$500/mo</em>. Same price every month, no tiers.</p>
        </div>
        <div className="after-sample-cell">
          <span className="after-sample-k">— 03 · Every month after</span>
          <p>The full report, five ready-to-run prompts (the exact words you paste into ChatGPT), your Google Profile scorecard with fixes, a business AI that already knows you, and a direct line to the team.</p>
        </div>
        <div className="after-sample-cell">
          <span className="after-sample-k">— 04 · Cancel anytime</span>
          <p>Reply with the word <em>cancel</em>. No contract, no hold music, no clawback.</p>
        </div>
      </div>
      <p className="after-sample-tail">
        <span className="after-sample-tail-rule"></span>
        <span>Full pricing &amp; what's included → <a href="/site/pricing.html">reconai.io/site/pricing</a></span>
      </p>
    </aside>
  );
}

window.SignupPage = SignupPage;
window.AfterSample = AfterSample;