// ===== App root =====

function Hero({ slotsLeft, onSlotClaim }) {
  // Mobile-only scroll CTA, high-intent paid-ad traffic taps this and lands
  // on the form in one motion. Hidden on desktop where the form is already
  // visible side-by-side. Fires a Meta Pixel custom event so we can measure
  // how many ad clickers actually use it.
  const heroCtaClick = () => {
    if (typeof window !== "undefined" && typeof window.fbq === "function") {
      try { window.fbq("trackCustom", "HeroCTAClick", { placement: "mobile_hero" }); } catch (e) { /* ignore */ }
    }
    // Scroll so the first input is comfortably visible, with enough room above
    // to still see the form heading + scarcity strip for context.
    const formCard = document.getElementById("form-card");
    if (!formCard) return;
    const firstInput = formCard.querySelector("input, select");
    if (firstInput) {
      const r = firstInput.getBoundingClientRect();
      const targetY = Math.max(0, window.scrollY + r.top - 240);
      window.scrollTo({ top: targetY, behavior: "smooth" });
    } else {
      window.scrollTo({ top: formCard.offsetTop - 60, behavior: "smooth" });
    }
  };

  return (
    <section className="hero">
      <div className="hero-bg" aria-hidden="true">
        <div className="bg-glow bg-glow-1"></div>
        <div className="bg-glow bg-glow-2"></div>
      </div>
      <div className="container hero-grid">
        <div className="hero-left">
          <div className="eyebrow">America's most-trusted gold buyer · since 2008</div>
          <h1>
            Get the <em>highest payout</em> for your gold.<br />
            Guaranteed, or we ship it back free.
          </h1>

          {/* Mobile-only scroll CTA, sits directly under the headline */}
          <button type="button" className="hero-mobile-cta" onClick={heroCtaClick}>
            Claim My Free Kit
            <span className="arrow">→</span>
          </button>

          <p className="sub">
            <strong>2-3× more than pawn shops</strong> verified by GIA-certified appraisers, insured up to $100,000, and paid to your account within <strong>24 hours</strong>. The honest alternative to the corner shop.
          </p>
          <ul className="hero-bullets">
            <li><I.Truck size={20} /> <span><b>Free insured FedEx kit</b> shipped to your door $100,000 coverage included.</span></li>
            <li><I.Coins size={20} /> <span><b>Paid in 24 hours</b> by Zelle, ACH, PayPal, wire, or check, your choice.</span></li>
            <li><I.ShieldCheck size={20} /> <span><b>100% guarantee.</b> Don't love your offer? We return it free, fully insured.</span></li>
            <li><I.Award size={20} /> <span><b>BBB A+ accredited</b> for 15+ years · 12,847 verified 5-star reviews.</span></li>
          </ul>
          <div className="hero-rating">
            <div className="avatars">
              <span>JM</span><span>RD</span><span>SK</span><span>LP</span><span>TW</span>
            </div>
            <div>
              <div className="stars">★★★★★</div>
              <div className="copy"><strong>4.9 / 5</strong> from 12,847 verified customers · Trustpilot · Google · BBB</div>
            </div>
          </div>
          <HeroCollage />
        </div>
        <div className="hero-right">
          <LeadForm slotsLeft={slotsLeft} onSlotClaim={onSlotClaim} />
          <div className="kit-preview">
            <ImgSlot label="FREE APPRAISAL KIT · PHOTO" tone="dark" aspect="16/9" src={IMG.kit} alt="FedEx prepaid appraisal kit" />
            <div className="kit-caption">
              <I.Bag size={16} />
              <span><strong>Your free kit ships today.</strong> Prepaid label, tamper-evident bag, full $100,000 insurance, all inside.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  const [slotsLeft, setSlotsLeft] = React.useState(47);

  React.useEffect(() => {
    let cancelled = false;
    const tick = () => {
      if (cancelled) return;
      setSlotsLeft((s) => Math.max(9, s - 1));
      const next = 40000 + Math.random() * 50000;
      setTimeout(tick, next);
    };
    const t0 = setTimeout(tick, 38000);
    return () => { cancelled = true; clearTimeout(t0); };
  }, []);

  const scrollToForm = () => {
    const formCard = document.getElementById("form-card");
    if (!formCard) return;
    const firstInput = formCard.querySelector("input, select");
    if (firstInput) {
      const r = firstInput.getBoundingClientRect();
      const targetY = Math.max(0, window.scrollY + r.top - 240);
      window.scrollTo({ top: targetY, behavior: "smooth" });
    } else {
      window.scrollTo({ top: formCard.offsetTop - 60, behavior: "smooth" });
    }
  };

  const onSlotClaim = () => setSlotsLeft((s) => Math.max(1, s - 1));

  return (
    <React.Fragment>
      <TrustStrip />
      <Nav />
      <Hero slotsLeft={slotsLeft} onSlotClaim={onSlotClaim} />
      <PressStrip />
      <HowItWorks />
      <WhatWeBuy />
      <SocialProof />
      <Compare />
      <Calculator onCTA={scrollToForm} />
      <FAQ />
      <FinalCTA onCTA={scrollToForm} slotsLeft={slotsLeft} />
      <Footer />
      <StickyCTA slotsLeft={slotsLeft} />
      <ExitIntent onClaim={scrollToForm} />
    </React.Fragment>
  );
}

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