/* Sample-request page — free 6-page report mailed in 48 hours.
   Single column. No order summary, no cadence picker — paid signup
   happens later, after the sample lands. Form posts to Tally short
   form b5N997 (5 fields, free sample request). */

function SignupPage() {
  const onSubmit = (e) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    const params = new URLSearchParams();
    for (const [k, v] of fd.entries()) if (v) params.set(k, v);
    window.location.href = "https://tally.so/r/b5N997?" + params.toString();
  };

  return (
    <>
      <SiteTopBar active="signup" />
      <main>
        <div className="signup-shell signup-shell--single">
          <form className="signup-form" onSubmit={onSubmit}>
            <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 sample.</em>
              </h1>
              <p>
                Tell me about your business and your AI competitive-intelligence analyst will build a free 6-page sample report on you, mailed inside 48 hours. If it's useful, we can talk about a subscription. If not, you don't owe me anything.
              </p>
            </header>

            <Section num="01" title={<>Who's <em>asking.</em></>}>
              <div className="signup-field-row">
                <Field label="Your name" required><input type="text" name="owner_name" placeholder="Your name" required/></Field>
                <Field label="Email" required><input type="email" name="owner_email" placeholder="you@example.com" required/></Field>
              </div>
            </Section>

            <Section num="02" title={<>Your <em>business.</em></>}>
              <p className="signup-help">The more specific the category, the sharper the sample. "Coffee shop" is fine; "third-wave coffee shop with a wholesale account at one bakery" is better.</p>
              <div className="signup-field-row">
                <Field label="Business name" required><input type="text" name="business_name" placeholder="The Pine Standard" required/></Field>
                <Field label="Website (or main listing)" required><input type="url" name="business_url" placeholder="thepinestandard.com" required/></Field>
              </div>
              <Field label="Category" required><input type="text" name="business_type_text" placeholder="Coffee shop · third-wave · single location" required/></Field>
            </Section>

            <Section num="03" title={<>Send the sample.</>}>
              <p className="signup-help">I'll have a real, custom 6-page report in your inbox inside 48 hours. No pitch deck, no follow-up sequence — just the report.</p>
              <div className="signup-submit">
                <p className="signup-submit-note">
                  By continuing, 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>
                <button type="submit" className="signup-submit-btn">
                  <span>Send me a sample</span>
                  <span>→</span>
                  <small>Inside 48 hours · Free</small>
                </button>
              </div>
            </Section>
          </form>
          <AfterSample />
        </div>
      </main>
      <SiteFooter/>
    </>
  );
}

function Section({ num, title, children }) {
  return (
    <section className="signup-section">
      <span className="signup-section-num">— {num}</span>
      <div className="signup-section-body">
        <h2>{title}</h2>
        {children}
      </div>
    </section>
  );
}

function Field({ label, required, children }) {
  return (
    <div className="signup-field">
      <label>— {label}{required && <strong>&nbsp;*</strong>}</label>
      {children}
    </div>
  );
}

/* 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>6 pages</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>Five prompts, a 6-page report, an AI assistant seeded with you, and a direct line to Jim.</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;