/* global React, ReactDOM */

const { useState } = React;

/* ----------------------------- icons ----------------------------- */
const Icon = ({ name }) => {
  const paths = {
    scan: <><path d="M3 7V4a1 1 0 0 1 1-1h3" /><path d="M21 7V4a1 1 0 0 0-1-1h-3" /><path d="M3 17v3a1 1 0 0 0 1 1h3" /><path d="M21 17v3a1 1 0 0 1-1 1h-3" /><path d="M7 12h10" /></>,
    target: <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" /></>,
    leads: <><circle cx="9" cy="8" r="3" /><path d="M3 20a6 6 0 0 1 12 0" /><circle cx="17" cy="9" r="2" /><path d="M21 18a4 4 0 0 0-6-3.5" /></>,
    verify: <><path d="M5 12l4 4 10-10" /><circle cx="12" cy="12" r="9.5" /></>,
    write: <><path d="M4 20l4-1 11-11-3-3L5 16l-1 4z" /><path d="M14 6l3 3" /></>,
    test: <><path d="M5 5h14" /><path d="M7 5v14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5" /><path d="M10 10v5" /><path d="M14 10v5" /></>,
    send: <><path d="M21 4L3 11l7 3 3 7 8-17z" /><path d="M10 14l4-4" /></>,
    learn: <><path d="M3 17l4-4 4 4 4-6 6 6" /><circle cx="7" cy="13" r="1.2" fill="currentColor" stroke="none" /><circle cx="11" cy="17" r="1.2" fill="currentColor" stroke="none" /><circle cx="15" cy="11" r="1.2" fill="currentColor" stroke="none" /></>
  };
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">{paths[name]}</svg>
  );
};

/* ----------------------------- nav ------------------------------- */
function Nav({ onCta }) {
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a className="nav-logo" href="#top">
          <span className="mark" />
          <span>Defrost</span>
        </a>
        <nav className="nav-links">
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <a href="/pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </nav>
        <button className="nav-cta" onClick={onCta}>Join waitlist</button>
      </div>
    </header>
  );
}

/* ----------------------------- hero ------------------------------ */
const HEADLINES = {
  punchy: { lead: "Cold outreach that", end: "runs itself." },
  bold: { lead: "Replies,", end: "not bounces." },
  editorial: { lead: "Outbound that thinks", end: "before it sends." }
};

const SUPABASE_URL = "https://nzyowpbrihiefliflmxj.supabase.co";

function WaitlistForm({ id = "form-1" }) {
  const [email, setEmail] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Please enter a valid email address.");
      return;
    }
    setError("");
    setSubmitting(true);

    const params = new URLSearchParams(window.location.search);
    const payload = {
      email: email.trim(),
      referred_by: params.get("ref") || null,
      utm_source: params.get("utm_source") || null,
      utm_medium: params.get("utm_medium") || null,
      utm_campaign: params.get("utm_campaign") || null,
    };

    try {
      const res = await fetch(SUPABASE_URL + "/functions/v1/waitlist-signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (res.ok && data.ref_code) {
        window.location.href =
          "/welcome?ref_code=" + encodeURIComponent(data.ref_code) +
          "&email=" + encodeURIComponent(payload.email);
      } else {
        setError(data.error || "Something went wrong. Please try again.");
        setSubmitting(false);
      }
    } catch (err) {
      setError("Network error. Please try again.");
      setSubmitting(false);
    }
  };

  return (
    <>
      <form className="hero-form" onSubmit={submit}>
        <input
          id={id}
          type="email"
          placeholder="you@company.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          disabled={submitting}
        />
        <button type="submit" disabled={submitting}>
          {submitting ? "Joining…" : <>Join waitlist <span aria-hidden>→</span></>}
        </button>
      </form>
      {error ? (
        <p style={{ marginTop: 12, fontSize: 13, color: "#B23A3A", fontFamily: "var(--mono)" }}>
          {error}
        </p>
      ) : null}
    </>
  );
}

function Hero({ headline }) {
  const h = HEADLINES[headline] || HEADLINES.punchy;
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <span className="eyebrow">Cold email · re-imagined</span>
          <h1 style={{ marginTop: 22 }}>
            {h.lead}<br />
            <span className="accent">{h.end}</span>
          </h1>
          <p className="hero-sub">
            Defrost researches every prospect, writes emails they actually want to read,
            and delivers them safely. Point it at your website and it builds your ICP,
            finds the leads, and sends — learning what works as it goes.
          </p>
          <WaitlistForm id="form-hero" />
          <div className="hero-meta">
            <span>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4 10-10" /></svg>
              No credit card
            </span>
            <span>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4 10-10" /></svg>
              Set up in 9 minutes
            </span>
            <span>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4 10-10" /></svg>
              Cancel anytime
            </span>
          </div>
        </div>

        <div className="hero-visual" aria-hidden="true">
          <div className="hero-bg-ast" />
          <div className="email-card primary">
            <div className="email-head">
              <span className="email-from">Maya · Acme.co</span>
              <span className="email-time">9:41 AM</span>
            </div>
            <div className="email-subject">Saw your Series B announcement, Liam</div>
            <div className="email-body">
              <span className="hi">Hi Liam,</span> congrats on closing the Series B last
              Tuesday — the line about <em>"engineering velocity over headcount"</em>
              in your blog post stood out to me. We help teams like yours...
            </div>
            <span className="email-tag">researched · 7 sources</span>
          </div>
          <div className="email-card secondary">
            <div className="email-head">
              <span className="email-from">Re: quick question</span>
              <span className="email-time">+ 2h</span>
            </div>
            <div className="email-subject" style={{ color: "var(--cyan-deep)", fontFamily: "var(--display)" }}>↳ Reply received</div>
            <div className="email-body">
              <span className="hi">Sure, this is timely.</span> Got 15 min Thursday?
              I want to hear how you're handling the deliverability piece.
            </div>
          </div>
          <div className="email-card tertiary">
            <div className="email-head">
              <span className="email-from">Spam Score</span>
              <span className="email-time" style={{ color: "var(--cyan-deep)" }}>0.4 / 10</span>
            </div>
            <div className="email-body" style={{ fontFamily: "var(--mono)", fontSize: 12 }}>
              ✓ no spam triggers<br />
              ✓ human-rated voice<br />
              ✓ inbox-safe headers
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* --------------------------- ticker ------------------------------ */
function Ticker() {
  const items = [
    "Built for founders, SDRs and agencies",
    "10× cheaper than human outbound",
    "SOC 2 Type II in progress",
    "Dedicated IPs · warmed automatically",
    "Native Gmail · Outlook · SMTP",
    "Anti-AI humanization · seven proven frameworks"
  ];
  const dup = [...items, ...items];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-row">
        {dup.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

/* --------------------------- problem ----------------------------- */
function Problem() {
  return (
    <section className="section problem">
      <div className="wrap">
        <span className="eyebrow">The problem</span>
        <p className="problem-quote" style={{ marginTop: 22 }}>
          Most cold email today is{" "}
          <span className="strike">templated</span>,{" "}
          <span className="strike">blasted</span>, and{" "}
          <span className="strike">ignored</span>. The replies you do get
          are usually <span className="hl">"please remove me"</span>.
        </p>
        <div className="problem-stats">
          <div>
            <div className="stat-num"><span className="pct">0.7%</span></div>
            <div className="stat-lbl">Average reply rate on a generic AI cold-email blast in 2026.</div>
          </div>
          <div>
            <div className="stat-num">23<span className="pct">×</span></div>
            <div className="stat-lbl">More likely to land in spam if you reference the wrong company.</div>
          </div>
          <div>
            <div className="stat-num">14<span className="pct">h</span></div>
            <div className="stat-lbl">Time a founder typically spends each week stitching tools together.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* --------------------------- pipeline ---------------------------- */
const PIPELINE_STEPS = [
  { n: "01", icon: "scan", t: "Website scan", d: "Point at your URL — we read every page." },
  { n: "02", icon: "target", t: "ICP built", d: "A buyer profile drawn from what you actually sell." },
  { n: "03", icon: "leads", t: "Leads found", d: "We source matching contacts at the right companies." },
  { n: "04", icon: "verify", t: "Leads verified", d: "Bounces filtered out before they cost you anything." },
  { n: "05", icon: "write", t: "Emails written", d: "Personalized to the human, not the company logo." },
  { n: "06", icon: "test", t: "A/B testing", d: "Variants run against each other automatically." },
  { n: "07", icon: "send", t: "Sending live", d: "Warmed inboxes, sane volume, real deliverability." },
  { n: "08", icon: "learn", t: "Learning & improving", d: "Every reply teaches the system what wins." }
];

function Pipeline() {
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">How it works</span>
            <h2 style={{ marginTop: 18 }}>From a URL to inbox-ready outbound — in eight moves.</h2>
          </div>
          <p className="desc">
            You hand Defrost your website. Defrost hands you back conversations.
            Everything in between — research, copy, deliverability, learning — happens on its own,
            with you in the loop whenever you want.
          </p>
        </div>

        <div className="pipeline">
          {PIPELINE_STEPS.map((s) => (
            <div className="pipe-step" key={s.n}>
              <div className="pipe-num">{s.n}</div>
              <div className="pipe-icon"><Icon name={s.icon} /></div>
              <div className="pipe-title">{s.t}</div>
              <div className="pipe-desc">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* --------------------------- features ---------------------------- */
function Features() {
  return (
    <section className="section" id="features" style={{ paddingTop: 0 }}>
      <div className="wrap">

        {/* Feature 1 */}
        <div className="feature">
          <div className="feature-text">
            <div className="feature-num">FEATURE 01 / RESEARCH</div>
            <h2>Deep research on every prospect, before a single word is written.</h2>
            <p>
              We scrape company websites, scan LinkedIn activity, detect buying signals,
              and build a dossier on each lead. Every email references something real —
              a recent launch, a hiring spree, a podcast quote, the actual stack they use.
            </p>
            <ul className="feature-list">
              <li>Pulls from blogs, job boards, press, GitHub, LinkedIn</li>
              <li>Surfaces buying signals — fundraising, hiring, tech changes</li>
              <li>Stores a transparent dossier you can edit before send</li>
            </ul>
          </div>
          <div className="feature-visual">
            <div className="dossier">
              <div className="dossier-card">
                <div className="src">Source · acme.co/blog</div>
                <div className="quote">"We're rebuilding the deploy pipeline around Bazel — three engineers shipped what used to take eight."</div>
                <span className="signal">signal · engineering velocity</span>
              </div>
              <div className="dossier-arrow">↓</div>
              <div className="dossier-card">
                <div className="src">Signal · linkedin/in/liam</div>
                <div className="quote">Liam Park · VP Eng — posted about hiring 4 platform engineers, last Tuesday.</div>
                <span className="signal">signal · hiring · platform</span>
              </div>
              <div className="dossier-arrow">↓</div>
              <div className="dossier-card" style={{ borderColor: "var(--cyan-deep)" }}>
                <div className="src" style={{ color: "var(--cyan-deep)" }}>Dossier ready</div>
                <div className="quote">3 hooks · 7 sources · 2 buying signals · ready to compose</div>
              </div>
            </div>
          </div>
        </div>

        {/* Feature 2 */}
        <div className="feature flip">
          <div className="feature-text">
            <div className="feature-num">FEATURE 02 / COMPOSE</div>
            <h2>Emails that read like a human wrote them. Because, in a way, one did.</h2>
            <p>
              Seven proven frameworks — PAS, Before/After/Bridge, problem-pull, and
              four more. Anti-AI humanization rewrites cadence and word choice so it
              doesn't trigger a single GPT-detector. Every send is spam-scored before
              it leaves your outbox.
            </p>
            <ul className="feature-list">
              <li>Seven cold-email frameworks, applied per prospect</li>
              <li>Anti-AI humanization — passes ZeroGPT and Originality.ai</li>
              <li>Pre-send spam scoring on subject, body, and headers</li>
            </ul>
          </div>
          <div className="feature-visual">
            <div className="compose">
              <div className="compose-meta">
                <span>TO · liam@acme.co</span>
                <span>DRAFT</span>
              </div>
              <div className="compose-frameworks">
                <span className="fwk-chip on">PAS</span>
                <span className="fwk-chip">BAB</span>
                <span className="fwk-chip">QVC</span>
                <span className="fwk-chip">AIDA</span>
                <span className="fwk-chip">PULL</span>
                <span className="fwk-chip">+2</span>
              </div>
              <div className="compose-body">
                <p><span className="h">Subject:</span> <span className="swap">your bazel rebuild</span></p>
                <p style={{ marginTop: 10 }}>
                  Liam — saw your post about <span className="swap">three engineers shipping
                  what eight used to</span>. Quick one: how are you handling
                  the CI cache layer now that builds are split that way?
                </p>
                <p style={{ marginTop: 10 }}>
                  We just helped <span className="swap">Linear</span> cut similar build
                  times by 40%. Worth a 15-minute swap of notes?
                </p>
                <p style={{ marginTop: 10 }}>— Maya</p>
              </div>
              <div className="compose-score">
                <span>Spam score · <span className="ok">0.4 / 10</span></span>
                <span>AI-detector · <span className="ok">2% (human)</span></span>
              </div>
            </div>
          </div>
        </div>

        {/* Feature 3 */}
        <div className="feature">
          <div className="feature-text">
            <div className="feature-num">FEATURE 03 / LEARN</div>
            <h2>Gets smarter every campaign. The longer you use it, the better it gets.</h2>
            <p>
              Defrost watches what gets opened, what gets replies, what gets unsubscribes.
              It tunes subject lines, openers, hooks and CTAs against your specific audience —
              not the internet's. By month three your reply rate is doing the talking.
            </p>
            <ul className="feature-list">
              <li>Per-segment learning — tone for founders, depth for VPs</li>
              <li>Auto-retires losing variants, doubles down on winners</li>
              <li>Plain-English explanations of what changed and why</li>
            </ul>
          </div>
          <div className="feature-visual" style={{ display: "flex", flexDirection: "column" }}>
            <div className="chart" style={{ flex: 1 }}>
              <div className="chart-head">
                <span>Reply rate · last 90 days</span>
                <span className="now">8.4%<span className="delta" style={{ marginLeft: 10 }}>+ 5.9 pts</span></span>
              </div>
              <svg className="chart-svg" viewBox="0 0 400 200" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="cg" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="var(--cyan-strong)" stopOpacity="0.55" />
                    <stop offset="100%" stopColor="var(--cyan-strong)" stopOpacity="0" />
                  </linearGradient>
                </defs>
                {/* gridlines */}
                {[40, 80, 120, 160].map(y => (
                  <line key={y} x1="0" x2="400" y1={y} y2={y} stroke="var(--line-soft)" strokeWidth="1" />
                ))}
                <path
                  d="M0,165 C40,160 70,150 100,140 C130,130 160,135 190,115 C220,95 250,80 280,70 C310,60 340,45 400,30"
                  fill="none" stroke="var(--cyan-deep)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
                />
                <path
                  d="M0,165 C40,160 70,150 100,140 C130,130 160,135 190,115 C220,95 250,80 280,70 C310,60 340,45 400,30 L400,200 L0,200 Z"
                  fill="url(#cg)"
                />
                {/* points */}
                {[[100,140],[190,115],[280,70],[400,30]].map(([x,y],i) => (
                  <circle key={i} cx={x} cy={y} r="3.5" fill="var(--paper)" stroke="var(--cyan-deep)" strokeWidth="2" />
                ))}
              </svg>
              <div className="chart-x">
                <span>Week 1</span><span>Wk 4</span><span>Wk 8</span><span>Wk 12</span>
              </div>
            </div>
            <div className="chart-bullets">
              <span className="b win">+ shorter subjects win for VPs</span>
              <span className="b win">+ Tuesday 9:40am</span>
              <span className="b">– "quick question" retired</span>
              <span className="b">– long P.S. blocks</span>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

/* --------------------------- compare ----------------------------- */
function Compare() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="compare">
          <span className="eyebrow" style={{ color: "rgba(255,255,255,.6)" }}>Defrost vs. the rest</span>
          <h2 style={{ marginTop: 18, color: "inherit" }}>Most outbound stacks make you pick two. We don't.</h2>
          <div className="compare-grid">
            <div className="compare-col">
              <h4>The usual stack</h4>
              <ul>
                <li>Five tools to stitch — scraper, enricher, AI, sender, inbox-warmup</li>
                <li>Generic AI copy that every detector flags as a robot</li>
                <li>Single shared mailbox at risk of getting blacklisted</li>
                <li>You tune campaigns by hand, week after week</li>
                <li>"Personalization" that swaps {`{firstName}`} and calls it a day</li>
              </ul>
            </div>
            <div className="compare-col us">
              <h4>Defrost</h4>
              <ul>
                <li>One product, one URL in — campaigns go out the same afternoon</li>
                <li>Seven frameworks plus humanization that reads like a person wrote it</li>
                <li>Dedicated, auto-warmed inboxes per sending domain</li>
                <li>The system learns your audience and tunes itself</li>
                <li>Real research dossiers — every email references something true</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* --------------------------- pricing ----------------------------- */
function PricingTeaser() {
  return (
    <section className="section" id="pricing" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="pricing-teaser">
          <span className="eyebrow">Pricing — early access</span>
          <h2 style={{ marginTop: 18 }}>Pricing that pays for itself on the first booked call.</h2>
          <p>Simple plans. No per-seat tax. Founding-member pricing locked in for 12 months when you join the waitlist this quarter.</p>

          <div className="pricing-tiers">
            <div className="tier">
              <div className="tier-name">Solo</div>
              <div className="tier-price">$49<small> / mo</small></div>
              <div className="tier-desc">For founders running their own outbound. 500 verified contacts, 1 sending mailbox.</div>
            </div>
            <div className="tier featured">
              <div className="tier-badge">FOUNDING</div>
              <div className="tier-name">Team</div>
              <div className="tier-price">$199<small> / mo</small></div>
              <div className="tier-desc">For lean sales teams. 5,000 contacts, 5 mailboxes, A/B testing, learning loop.</div>
            </div>
            <div className="tier">
              <div className="tier-name">Agency</div>
              <div className="tier-price">$499<small> / mo</small></div>
              <div className="tier-desc">Multi-workspace, white-label reporting, unlimited mailboxes, priority research.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------- faq ------------------------------- */
const FAQ_ITEMS = [
  { q: "Is this just another AI cold-email tool?", a: "No. Most AI tools generate text and stop. Defrost runs the whole pipeline: research, ICP, lead sourcing, verification, copy, A/B testing, sending, deliverability, and learning. The output reads like a human wrote it because every email is grounded in real, sourced facts about the recipient." },
  { q: "Will my emails land in spam?", a: "We auto-warm a dedicated inbox for every sending domain you connect, score every send for spam triggers, and cap volume at deliverability-safe rates. Most customers see inbox-placement above 95% in the first month." },
  { q: "What about CAN-SPAM, GDPR, and CASL?", a: "Defrost adds a compliant footer to every email, honours unsubscribe within minutes, scrubs against suppression lists you upload, and supports EU-only data residency on request. We also keep a full audit log of every contact and message." },
  { q: "How long until I see replies?", a: "Most teams have campaigns out the door within a day of signing up. The learning loop kicks in around week three; by week eight, reply rates are typically 3–5× the industry baseline." },
  { q: "Do I need to bring my own leads?", a: "No. Point Defrost at your website and we'll build the ICP and source matching leads. You can also import lists if you have them — we'll verify, enrich, and dossier-build on top." },
  { q: "Can I see the email before it sends?", a: "Yes — every email can be reviewed, edited, or auto-approved on a per-segment basis. Most users start in review mode and graduate to auto-send once they trust the voice." }
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq" style={{ paddingTop: 60 }}>
      <div className="wrap">
        <div className="faq">
          <div>
            <span className="eyebrow">FAQ</span>
            <h2 style={{ marginTop: 18 }}>Reasonable doubts, reasonable answers.</h2>
          </div>
          <div className="faq-list">
            {FAQ_ITEMS.map((item, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} role="button" tabIndex={0}>
                  <span>{item.q}</span>
                  <span className="ind" />
                </div>
                <div className="faq-a">{item.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* --------------------------- final cta --------------------------- */
function FinalCTA() {
  return (
    <section className="cta-final">
      <div className="wrap">
        <h2>Stop sending<br />cold emails.<br />Start melting them.</h2>
        <p>Join the waitlist for early access. Founding-member pricing locked in for 12 months.</p>
        <WaitlistForm id="form-final" />
      </div>
    </section>
  );
}

/* ---------------------------- footer ----------------------------- */
function Footer() {
  const yr = new Date().getFullYear();
  return (
    <footer className="foot">
      <div className="wrap foot-grid">
        <div className="foot-brand">
          <div className="mark-row">
            <span className="mark" />
            <span>Defrost</span>
          </div>
          <p>Cold outreach that runs itself — research, copy, sending, learning. All from a URL.</p>
        </div>
        <div className="foot-col">
          <h5>Product</h5>
          <ul>
            <li><a href="/#how">How it works</a></li>
            <li><a href="/#features">Features</a></li>
            <li><a href="/pricing">Pricing</a></li>
            <li><a href="/#faq">FAQ</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Manifesto</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h5>Legal</h5>
          <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">DPA</a></li>
          </ul>
        </div>
      </div>
      <div className="wrap foot-bottom">
        <span>© {yr} Defrost · All rights reserved</span>
        <span>Made in the cold</span>
      </div>
    </footer>
  );
}

/* ----------------------------- app ------------------------------- */
function App() {
  const focusForm = () => {
    const el = document.getElementById("form-hero");
    if (el) { el.focus(); el.scrollIntoView({ behavior: "smooth", block: "center" }); }
  };

  return (
    <>
      <Nav onCta={focusForm} />
      <Hero headline="punchy" />
      <Ticker />
      <Problem />
      <Pipeline />
      <Features />
      <Compare />
      <FAQ />
      <FinalCTA />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);