// ===== Page sections =====

// ---------- Reusable image slot (real photo with placeholder fallback) ----------
function ImgSlot({ label, tone = "dark", aspect = "4/3", className = "", style = {}, src, alt }) {
  const [failed, setFailed] = React.useState(false);
  const showImg = src && !failed;
  return (
    <div className={"img-slot img-slot-" + tone + " " + className + (showImg ? " img-slot-has-photo" : "")} style={{ aspectRatio: aspect, ...style }}>
      {showImg && (
        <img src={src} alt={alt || label} loading="lazy" onError={() => setFailed(true)} />
      )}
      {!showImg && (
        <React.Fragment>
          <span className="img-slot-label">{label}</span>
          <span className="img-slot-corner tl" aria-hidden="true"></span>
          <span className="img-slot-corner tr" aria-hidden="true"></span>
          <span className="img-slot-corner bl" aria-hidden="true"></span>
          <span className="img-slot-corner br" aria-hidden="true"></span>
        </React.Fragment>
      )}
    </div>
  );
}

// ---------- Photo URL set (curated Unsplash IDs, verified) ----------
const IMG = {
  hero1: "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?w=900&q=80&auto=format&fit=crop",
  hero2: "https://images.unsplash.com/photo-1605100804763-247f67b3557e?w=900&q=80&auto=format&fit=crop",
  hero3: "https://huivvubvcpqtgzx8.public.blob.vercel-storage.com/leads/2026/05/uhh8o7aomp5pj51o.jpg",
  kit:   "https://huivvubvcpqtgzx8.public.blob.vercel-storage.com/leads/2026/05/tcw7c0x7mp5oor4k.jpg",
  step1: "https://huivvubvcpqtgzx8.public.blob.vercel-storage.com/leads/2026/05/tcw7c0x7mp5oor4k.jpg",
  step2: "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=900&q=80&auto=format&fit=crop",
  step3: "https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?w=900&q=80&auto=format&fit=crop",
  buyGold:    "https://images.unsplash.com/photo-1611107683227-e9060eccd846?w=700&q=80&auto=format&fit=crop",
  buySilver:  "https://images.unsplash.com/photo-1560329649-c952ee843f92?w=700&q=80&auto=format&fit=crop",
  buyDiamond: "https://images.unsplash.com/photo-1631897817977-a1005c199b36?w=700&q=80&auto=format&fit=crop",
  buyCoins:   "https://images.unsplash.com/photo-1755369394394-685cd2ea3140?w=700&q=80&auto=format&fit=crop",
  custLinda:  "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=300&q=80&auto=format&fit=crop&crop=faces",
  custMarcus: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&q=80&auto=format&fit=crop&crop=faces",
  custSandra: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=300&q=80&auto=format&fit=crop&crop=faces",
  goldBar:    "https://images.unsplash.com/photo-1611174743420-3d7df880ce32?w=1100&q=80&auto=format&fit=crop",
  goldBarsOverhead: "https://images.unsplash.com/photo-1620120966883-d977b57a96ec?w=1600&q=70&auto=format&fit=crop",
};

// ---------- Hero collage (3 image placeholders) ----------
function HeroCollage() {
  return (
    <div className="hero-collage" aria-hidden="true">
      <div className="collage-card card-1">
        <ImgSlot label="GOLD CHAINS · LIFESTYLE" tone="dark" aspect="3/4" src={IMG.hero1} alt="Gold jewelry chain" />
      </div>
      <div className="collage-card card-2">
        <ImgSlot label="HEIRLOOM RINGS" tone="cream" aspect="1/1" src={IMG.hero2} alt="Heirloom ring with diamonds" />
      </div>
      <div className="collage-card card-3">
        <ImgSlot label="KIT IN HAND" tone="dark" aspect="4/5" src={IMG.hero3} alt="Prepaid shipping kit ready to mail" />
      </div>
      <div className="collage-stat">
        <div className="cs-num">$2,840</div>
        <div className="cs-label">average customer payout</div>
      </div>
    </div>
  );
}

// ---------- How it works ----------
function HowItWorks() {
  const steps = [
    {
      icon: <I.Bag size={26} />,
      title: "Request your free kit",
      body: "Tell us where to send your prepaid, insured shipping kit. It arrives in 1-2 business days, discreetly packaged.",
      img: "FEDEX KIT · UNBOXING",
      src: IMG.step1,
      alt: "Prepaid FedEx appraisal kit on a doorstep"
    },
    {
      icon: <I.Truck size={26} />,
      title: "Mail it back, fully insured",
      body: "Drop your sealed pack at any FedEx, covered up to $100,000 the moment it leaves your hands. We pay shipping both ways.",
      img: "HANDOFF AT FEDEX COUNTER",
      src: IMG.step2,
      alt: "Handing the sealed package to a courier"
    },
    {
      icon: <I.Coins size={26} />,
      title: "Get paid in 24 hours",
      body: "Our certified appraisers grade your items the day we receive them. Approve the offer and your money lands the same day.",
      img: "DEPOSIT NOTIFICATION · SUCCESS",
      src: IMG.step3,
      alt: "Bank deposit notification on a phone"
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">How it works</div>
          <h2>Three steps. <em>Zero risk.</em></h2>
          <p>Most customers go from request to deposit in under 5 days. Everything is insured, tracked, and 100% refundable if you change your mind.</p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <ImgSlot label={s.img} tone="dark" aspect="16/10" className="step-img" src={s.src} alt={s.alt} />
              <div className="step-body">
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <div className="step-icon">{s.icon}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- What we buy gallery ----------
function WhatWeBuy() {
  const items = [
    { label: "GOLD JEWELRY · STILL LIFE", title: "Gold Jewelry", body: "Chains, rings, earrings, bracelets, broken pieces, any karat (10k-24k), any condition.", src: IMG.buyGold, alt: "Assorted gold jewelry pieces" },
    { label: "STERLING SILVER · FLATWARE", title: "Silver & Sterling", body: "Sterling flatware, holloware, tea sets, .925 jewelry, silver bullion bars and coins.", src: IMG.buySilver, alt: "Sterling silver flatware" },
    { label: "DIAMOND CLOSE-UP", title: "Diamonds", body: "Loose stones and diamond jewelry 0.25 ct or larger. GIA, AGS, or in-house re-grading.", src: IMG.buyDiamond, alt: "Diamond close-up" },
    { label: "GOLD COINS · STACK", title: "Coins & Watches", body: "Gold/silver coins, bullion, dental gold, luxury watches by Rolex, Cartier, Omega, Patek.", src: IMG.buyCoins, alt: "Stack of gold coins" },
  ];
  return (
    <section className="section alt">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">What we buy</div>
          <h2>Anything precious. <em>Even broken pieces.</em></h2>
          <p>Single ring, drawer full, or estate collection, we pay top dollar for it all. Not sure? Send it. The appraisal is always free.</p>
        </div>
        <div className="buy-grid">
          {items.map((it, i) => (
            <div className="buy-card" key={i}>
              <ImgSlot label={it.label} tone="dark" aspect="1/1" src={it.src} alt={it.alt} />
              <div className="buy-body">
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Press strip ----------
function PressStrip() {
  return (
    <div className="press-strip">
      <div className="container press-strip-inner">
        <span className="label">As featured in</span>
        <div className="press-logos">
          <span className="press-logo">Forbes</span>
          <span className="press-logo bold">FORTUNE</span>
          <span className="press-logo condensed">The Wall Street Journal</span>
          <span className="press-logo">Bloomberg</span>
          <span className="press-logo bold">USA TODAY</span>
          <span className="press-logo condensed">NBC News</span>
        </div>
      </div>
    </div>
  );
}

// ---------- Trust badges cluster ----------
function TrustBadges() {
  const badges = [
    { top: "BBB", mid: "A+", bot: "Accredited Business" },
    { top: "Trustpilot", mid: "4.9 / 5", bot: "12,847 reviews", stars: true },
    { top: "Google Reviews", mid: "4.9 ★", bot: "8,210 ratings" },
    { top: "Norton", mid: "SECURED", bot: "256-bit SSL" },
    { top: "SOC 2", mid: "TYPE II", bot: "Audited & Certified" },
    { top: "Insured by", mid: "FedEx", bot: "Up to $100,000" },
  ];
  return (
    <div className="trust-badges">
      {badges.map((b, i) => (
        <div className="t-badge" key={i}>
          <div className="t-top">{b.top}</div>
          <div className="t-mid">{b.mid}</div>
          {b.stars && <div className="t-stars">★★★★★</div>}
          <div className="t-bot">{b.bot}</div>
        </div>
      ))}
    </div>
  );
}

// ---------- Social proof: counter + testimonials ----------
function SocialProof() {
  const reviews = [
    {
      stars: 5, payout: "$4,820", initials: "LT",
      quote: "I shipped a box of my late mother's jewelry. They emailed me with the offer within hours $1,200 more than the local pawn shop quoted. Money was in my account the next morning.",
      who: "Linda T.", where: "Austin, TX",
      img: "CUSTOMER PORTRAIT · LINDA",
      src: IMG.custLinda, alt: "Linda T., verified customer"
    },
    {
      stars: 5, payout: "$1,375", initials: "MB",
      quote: "Skeptical at first, but the photo estimate was within $40 of the final check. Free FedEx kit showed up in 2 days. Effortless from start to finish.",
      who: "Marcus B.", where: "Cleveland, OH",
      img: "CUSTOMER PORTRAIT · MARCUS",
      src: IMG.custMarcus, alt: "Marcus B., verified customer"
    },
    {
      stars: 5, payout: "$9,640", initials: "SR",
      quote: "Sold a collection of gold coins and broken chains. The team explained every line item, every weight, every grade. Pawn shop offered me less than half. Not a contest.",
      who: "Sandra R.", where: "Phoenix, AZ",
      img: "CUSTOMER PORTRAIT · SANDRA",
      src: IMG.custSandra, alt: "Sandra R., verified customer"
    },
  ];
  return (
    <section className="section" id="reviews">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Trusted by 128,000+ Americans</div>
          <h2>We've paid out <em>more than $347 million</em> and counting.</h2>
          <p>Independent reviews on Trustpilot, Google, and the BBB. Every testimonial below is from a verified customer.</p>
        </div>
        <div className="proof-grid">
          <PayoutCounter />
          <div className="testimonials">
            {reviews.map((r, i) => (
              <div className="testimonial" key={i}>
                <div className="t-photo">
                  <ImgSlot label={r.img} tone="dark" aspect="1/1" className="t-photo-slot" src={r.src} alt={r.alt} />
                </div>
                <div className="t-content">
                  <div className="stars">{"★".repeat(r.stars)}</div>
                  <p className="quote">"{r.quote}"</p>
                  <div className="who">
                    <span><strong>{r.who}</strong> · {r.where}</span>
                    <span className="payout">Paid {r.payout}</span>
                  </div>
                  <div style={{ marginTop: 6 }}>
                    <span className="verified"><I.CheckCircle size={12} stroke={2.4} /> Verified customer · Reviewed on Trustpilot</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 56 }}>
          <div className="trust-badges-head">Recognized & secured by</div>
          <TrustBadges />
        </div>
      </div>
    </section>
  );
}

// ---------- Comparison table ----------
function Compare() {
  const rows = [
    { label: "Payout vs. industry average", us: "Up to 3× higher", pawn: "Lowest", mail: "Lower" },
    { label: "Free insured shipping ($100k)", us: "yes", pawn: "n/a", mail: "limited" },
    { label: "Paid in 24 hours", us: "yes", pawn: "yes", mail: "no" },
    { label: "BBB A+ accredited (15+ yrs)", us: "yes", pawn: "varies", mail: "no" },
    { label: "Free return shipping if you decline", us: "yes", pawn: "n/a", mail: "no" },
    { label: "GIA-certified appraisers on staff", us: "yes", pawn: "no", mail: "no" },
    { label: "Live video appraisal available", us: "yes", pawn: "no", mail: "no" },
    { label: "Written best-offer guarantee", us: "yes", pawn: "no", mail: "no" },
  ];
  const Cell = ({ v }) => {
    if (v === "yes") return <span className="good"><I.Check size={18} stroke={2.6} /></span>;
    if (v === "no") return <span className="bad"><I.X size={18} stroke={2.6} /></span>;
    if (v === "n/a") return <span className="meh"></span>;
    if (v === "varies" || v === "limited") return <span className="meh">{v}</span>;
    return <span style={{ fontWeight: 700 }}>{v}</span>;
  };
  return (
    <section className="section alt">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Why we pay more</div>
          <h2>The honest comparison <em>nobody else will show you.</em></h2>
          <p>We cut out the storefront, the middleman, and the markup. The savings go into your payout, guaranteed in writing.</p>
        </div>
        <div className="compare">
          <div className="compare-row head">
            <div></div>
            <div>Gold Buying Experts</div>
            <div>Local Pawn Shop</div>
            <div>Mail-In Competitor</div>
          </div>
          {rows.map((r, i) => (
            <div className="compare-row" key={i}>
              <div>{r.label}</div>
              <div className="compare-cell"><Cell v={r.us} /></div>
              <div className="compare-cell"><Cell v={r.pawn} /></div>
              <div className="compare-cell"><Cell v={r.mail} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Instant Calculator ----------
function Calculator({ onCTA }) {
  // simple internal model, no spot references shown in UI
  // base payout per gram by karat (illustrative house valuation)
  const KARATS = [
    { k: "10k", per: 32.4 },
    { k: "14k", per: 45.3 },
    { k: "18k", per: 58.2 },
    { k: "22k", per: 71.1 },
    { k: "24k", per: 77.8 },
  ];
  const [karatIdx, setKarat] = React.useState(1); // 14k default
  const [grams, setGrams] = React.useState(14);

  const per = KARATS[karatIdx].per;
  const lowPayout = per * grams * 0.92;
  const highPayout = per * grams * 1.08;

  const fmt = (n) => "$" + n.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  const pct = Math.min(100, (grams / 100) * 100);

  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Instant Estimate</div>
          <h2>How much is your gold <em>actually worth?</em></h2>
          <p>Real-time calculation against our certified appraisal valuations. No email required to see the number.</p>
        </div>
        <div className="calc-grid">
          <div className="calc-left">
            <div className="eyebrow" style={{ color: "var(--gold-3)" }}><I.Calculator size={13} stroke={2} style={{ verticalAlign: "-2px" }} /> Estimate calculator</div>
            <h3>Choose your karat &amp; weight</h3>
            <p className="sub">Don't know exactly? Customers average <strong>21g</strong>. Use the slider, your actual offer is exact to the milligram.</p>

            <div className="calc-row">
              <label>Karat / purity</label>
              <div className="calc-karat">
                {KARATS.map((k, i) => (
                  <button key={k.k} className={i === karatIdx ? "active" : ""} onClick={() => setKarat(i)}>{k.k}</button>
                ))}
              </div>
            </div>

            <div className="calc-row calc-slider">
              <label>Weight <span style={{ color: "var(--gold-3)" }}>· <span className="mono" style={{ fontWeight: 600 }}>{grams}g</span> ({(grams * 0.03527).toFixed(2)} oz)</span></label>
              <input type="range" min="1" max="100" step="1" value={grams}
                onChange={(e) => setGrams(+e.target.value)}
                style={{ "--p": pct + "%" }} />
              <div className="ticks"><span>1g</span><span>25g</span><span>50g</span><span>75g</span><span>100g</span></div>
            </div>

            <div style={{ fontSize: 12, color: "var(--muted-dark)", marginTop: 18, display: "flex", gap: 14, alignItems: "center" }}>
              <I.Scale size={14} /> Reference: a wedding band is 4-8g · a heavy chain 25-40g · a class ring 8-15g.
            </div>
          </div>
          <div className="calc-right">
            <ImgSlot label="GOLD BAR · DIAGONAL" tone="dark" className="calc-deco" src={IMG.goldBar} alt="Gold bullion bar" />
            <div className="eyebrow">Your estimated payout</div>
            <div className="estimate">{fmt(highPayout)}</div>
            <div className="range">Range: <span className="mono">{fmt(lowPayout)} {fmt(highPayout)}</span></div>
            <ul>
              <li><I.Check size={14} stroke={2.4} /> Free insured FedEx shipping kit included</li>
              <li><I.Check size={14} stroke={2.4} /> Money sent within 24 hrs of acceptance</li>
              <li><I.Check size={14} stroke={2.4} /> Written best-offer guarantee, beat us, we add 10%</li>
              <li><I.Check size={14} stroke={2.4} /> 100% no-obligation, free return if you decline</li>
            </ul>
            <button className="calc-cta" onClick={onCTA}>Get My Free Appraisal Kit <I.ArrowRight size={14} stroke={2.4} /></button>
            <div className="calc-disclaim">Estimate is image-and-input based. Final offer reflects exact assay weight, purity, and condition at the time we receive your items.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const items = [
    {
      q: "How do I know I'm getting the best price?",
      a: "We publish a written best-offer guarantee: if any licensed buyer beats our final offer within 7 days, we match it AND add 10% on top. Independent third-party audits show we consistently pay 2-3× what pawn shops offer and outperform every major mail-in competitor."
    },
    {
      q: "Is the shipping really free and insured?",
      a: "Yes. Your kit includes a prepaid FedEx label, tamper-evident bag, and full insurance up to $100,000 from the moment FedEx scans it. If you have higher-value items, email us, we'll arrange armored courier at no cost to you."
    },
    {
      q: "What happens if I don't like the offer?",
      a: "Decline the offer, for any reason or no reason, and we ship everything back to you, fully insured, on our dime. No fees, no restocking, no questions. About 4% of customers decline, and 98% of those say they'd use us again."
    },
    {
      q: "How fast do I actually get paid?",
      a: "Same day we receive your kit, our GIA-certified appraisers grade your items and email you with the offer. Once you accept, you choose: ACH/Zelle (within 1 hour), wire (same business day), PayPal (within 4 hours), or overnight check."
    },
    {
      q: "What kinds of items do you buy?",
      a: "Gold and silver jewelry (any condition, broken is fine), dental gold, gold/silver coins, sterling silver flatware, platinum jewelry, luxury watches, and diamond jewelry of 0.25 carat or larger. Not sure? Send it, appraisal is always free."
    },
    {
      q: "Is my personal information safe?",
      a: "Our site is 256-bit SSL encrypted, SOC 2 Type II audited, and we are PCI-DSS compliant. We do not sell, rent, or share your information, ever. We're also a BBB A+ accredited business with 17 years of clean record."
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section alt" id="faq">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Questions, answered</div>
          <h2>Common <em>concerns</em>, addressed.</h2>
          <p>Still have questions? Email a senior specialist at <strong>hello@goldbuyingexperts.com</strong> we reply within the hour, 7 days a week.</p>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={"faq-item " + (open === i ? "open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="ico"><I.Plus size={20} stroke={2} /></span>
              </button>
              <div className="faq-a"><p style={{ margin: 0 }}>{it.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Final CTA + Footer ----------
function FinalCTA({ onCTA, slotsLeft }) {
  return (
    <section className="final-cta">
      <div className="final-deco" aria-hidden="true">
        <ImgSlot label="GOLD BARS · OVERHEAD" tone="dark" aspect="3/1" src={IMG.goldBarsOverhead} alt="Gold bars" />
      </div>
      <div className="container">
        <div className="eyebrow">Don't let it sit in a drawer</div>
        <h2>Turn unused gold into <em>cash this week.</em></h2>
        <p>{slotsLeft} same-day appraisal slots remain today. Free kit, paid in 24 hours, 100% guaranteed.</p>
        <button className="cta-btn" onClick={onCTA}>Claim My Free Appraisal Kit <I.ArrowRight size={16} stroke={2.4} style={{ verticalAlign: "-3px" }} /></button>
        <div className="final-trust">
          <span><I.Lock size={12} stroke={2} /> 256-bit secure</span>
          <span><I.ShieldCheck size={12} stroke={2} /> BBB A+ accredited</span>
          <span><I.Truck size={12} stroke={2} /> $100,000 insured</span>
          <span><I.Award size={12} stroke={2} /> 17 yrs in business</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div>
          <Logo size={42} layout="horizontal" tone="dark" />
          <div style={{ color: "var(--muted)", marginTop: 12 }}>hello@goldbuyingexperts.com</div>
          <div style={{ marginTop: 10 }}>
            <a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Best-offer guarantee</a> · <a href="#">Contact</a>
          </div>
        </div>
        <div className="legal">
          © 2008-2026 Gold Buying Experts, LLC. All trademarks property of their respective owners. Estimates are not binding offers. Final payouts depend on assay weight, purity, and condition of items. Items are insured up to $100,000 in transit by FedEx. BBB A+ accredited business since 2009.
        </div>
      </div>
    </footer>
  );
}

window.ImgSlot = ImgSlot;
window.IMG = IMG;
window.HeroCollage = HeroCollage;
window.HowItWorks = HowItWorks;
window.WhatWeBuy = WhatWeBuy;
window.PressStrip = PressStrip;
window.SocialProof = SocialProof;
window.Compare = Compare;
window.Calculator = Calculator;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;