/* global React, ReactDOM, Icon, FFMark, AppraisalModal, ServiceModal, HowItWorksTour */
const { useState, useEffect, useRef } = React;

// Hero photo URLs — Finer Finds' own photography
const HERO_IMAGES = {
  loupe: "assets/img/hero-loupe.webp",
  watch: "assets/img/hero-watch.webp",
  velvet: "assets/img/hero-velvet.webp",
};

const CATEGORY_IMAGES = {
  watches: "assets/img/cat-watches.webp",
  jewelry: "assets/img/cat-jewelry.webp",
  handbags: "assets/img/cat-handbags.webp",
};

// Rotating collection carousel — Finer Finds' own pieces (watches, jewelry, handbags)
const COLLECTION_IMAGES = [
  "assets/img/collection-1.webp",
  "assets/img/collection-2.webp",
  "assets/img/collection-3.webp",
  "assets/img/collection-4.webp",
  "assets/img/collection-5.webp",
  "assets/img/collection-6.webp",
  "assets/img/collection-7.webp",
  "assets/img/collection-8.webp",
  "assets/img/collection-9.webp",
];

// TODO: replace with the live ecommerce shop URL when provided
const SHOP_URL = "https://shop.finerfinds.com/collections/all";

// ============================================
// NAV
// ============================================
const SERVICE_LINKS = [
  { id: "appraisals", label: "Appraisals" },
  { id: "authentication", label: "Authentication" },
  { id: "watch-service", label: "Watch Service / Polish" },
  { id: "jewelry-repairs", label: "Jewelry Repairs" },
];

function NavServices({ onService }) {
  const [open, setOpen] = useState(false);
  return (
    <div
      className={`nav-dd ${open ? "open" : ""}`}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <button className="nav-dd-trigger" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        Services
        <svg className="nav-dd-caret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
      </button>
      <div className="nav-dd-menu">
        {SERVICE_LINKS.map(it => (
          <button key={it.id} className="nav-dd-item" onClick={() => { onService(it.id); setOpen(false); }}>
            {it.label}
          </button>
        ))}
      </div>
    </div>
  );
}

function Nav({ onAppraisal, onService }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    function onScroll() { setScrolled(window.scrollY > 40); }
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);
  useEffect(() => {
    function onKey(e) { if (e.key === "Escape") setMobileOpen(false); }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  const closeMobile = () => setMobileOpen(false);
  return (
    <header className={`nav ${scrolled || mobileOpen ? "scrolled" : ""}`}>
      <div className="shell nav-inner">
        <a href="#top" className="nav-logo" onClick={closeMobile}>
          <span className="mark"><FFMark /></span>
          <span className="word">Finer Finds</span>
        </a>
        <nav className="nav-links">
          <a href="#how-it-works">How it Works</a>
          <NavServices onService={onService} />
          <a href="#shop">Shop</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </nav>
        <div className="nav-right">
          <a href="tel:+13109094794" className="nav-phone">
            <Icon.Phone />
            <span>(310) 909-4794</span>
          </a>
          <button className="btn btn-gold btn-pill" onClick={onAppraisal}>Get a Free Valuation</button>
          <button
            className="nav-mobile-toggle"
            aria-label={mobileOpen ? "Close menu" : "Menu"}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen(o => !o)}
          >
            {mobileOpen ? <Icon.X size={22} /> : <Icon.Menu />}
          </button>
        </div>
      </div>

      <div className={`nav-mobile-panel ${mobileOpen ? "open" : ""}`}>
        <a href="#how-it-works" onClick={closeMobile}>How it Works</a>
        <div className="nav-mobile-group">
          <span className="nav-mobile-label">Services</span>
          {SERVICE_LINKS.map(it => (
            <button key={it.id} className="nav-mobile-sub" onClick={() => { onService(it.id); closeMobile(); }}>
              {it.label}
            </button>
          ))}
        </div>
        <a href="#shop" onClick={closeMobile}>Shop</a>
        <a href="#about" onClick={closeMobile}>About</a>
        <a href="#contact" onClick={closeMobile}>Contact</a>
        <a href="tel:+13109094794" className="nav-mobile-phone" onClick={closeMobile}>
          <Icon.Phone /> (310) 909-4794
        </a>
        <button className="btn btn-gold" onClick={() => { onAppraisal(); closeMobile(); }}>Get a Free Valuation</button>
      </div>
    </header>
  );
}

// ============================================
// HERO
// ============================================
function Hero({ image }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" style={{ backgroundImage: `url(${image})` }} />
      <div className="hero-overlay" />
      <div className="shell hero-shell">
        <span className="eyebrow hero-eyebrow">Beverly Hills · By Appointment</span>
        <h1>Buy &amp; sell fine jewelry, watches &amp; handbags <em>at top market value.</em></h1>
        <div className="hero-ctas">
          <a href="#services" className="btn btn-gold">Sell <Icon.Arrow /></a>
          <a href="#shop" className="btn btn-outline-cream">Buy <Icon.Arrow /></a>
        </div>
        <p className="hero-trust">
          <span>Authenticated</span>
          <span className="dot">·</span>
          <span>Confidential</span>
          <span className="dot">·</span>
          <span>No obligation</span>
        </p>
      </div>
    </section>
  );
}

// ============================================
// WHAT WE BUY
// ============================================
function WhatWeBuy({ onAppraisal }) {
  const cards = [
    { id: "watches", title: "Watches", sub: "Rolex, Patek Philippe, Audemars Piguet, Vacheron Constantin, Cartier and beyond.", img: CATEGORY_IMAGES.watches },
    { id: "jewelry", title: "Jewelry", sub: "Diamond, signed estate, vintage, and modern fine jewelry.", img: CATEGORY_IMAGES.jewelry },
    { id: "handbags", title: "Handbags", sub: "Hermès, Chanel, Louis Vuitton, and select designers.", img: CATEGORY_IMAGES.handbags },
  ];
  return (
    <section id="services" className="reveal-on-scroll">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">What We Buy</span>
          <h2>Three categories, considered with care.</h2>
        </div>
        <div className="what-grid reveal-stagger">
          {cards.map(c => (
            <article key={c.id} className="what-card" onClick={() => onAppraisal(c.id)}>
              <div className="what-card-img">
                <div style={{ backgroundImage: `url(${c.img})` }} />
              </div>
              <div className="what-card-body">
                <h3 className="what-card-title">{c.title}</h3>
                <p className="what-card-sub">{c.sub}</p>
                <span className="what-card-arrow">Get a valuation <Icon.Arrow /></span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// HOW IT WORKS (inline)
// ============================================
function HowItWorks({ onTour }) {
  const steps = [
    { num: "01", title: "Tell Us About Your Items", body: "Share photos along with any certificates or documentation you have. The more detail you give us, the sharper your evaluation." },
    { num: "02", title: "Schedule a Visit", body: "Pick a date and time to meet privately with a Finer Finds specialist at our Beverly Hills office. Your evaluation is free, with no obligation to sell." },
    { num: "03", title: "Meet With a Specialist for Your Offer", body: "After reviewing your pieces in person, we present a clear purchase offer — no fees, no commissions." },
    { num: "04", title: "Get Paid", body: "Accept the offer and receive immediate payment by bank transfer." },
  ];
  return (
    <section id="how-it-works" className="how reveal-on-scroll">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">How It Works</span>
          <h2>A simple, considered process.</h2>
        </div>
        <div className="steps-grid reveal-stagger">
          {steps.map(s => (
            <div className="step" key={s.num}>
              <div className="step-num">{s.num}</div>
              <div className="step-title">{s.title}</div>
              <p className="step-body">{s.body}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <button className="btn btn-outline-navy" onClick={onTour}>Walk me through it <Icon.Arrow /></button>
        </div>
      </div>
    </section>
  );
}

// ============================================
// DIFFERENCE
// ============================================
function Difference() {
  const cols = [
    { icon: <Icon.Loupe />, title: "GIA-certified expertise", body: "Every appraisal performed by a GIA-certified gemologist with deep market context — and the patience to explain it." },
    { icon: <Icon.Document />, title: "Insurance-grade appraisals", body: "Third-party appraisals accepted by major home insurance carriers for jewelry riders, on request." },
  ];
  return (
    <section className="reveal-on-scroll">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">The Difference</span>
          <h2>Why sellers choose Finer Finds.</h2>
        </div>
        <div className="diff-grid reveal-stagger">
          {cols.map(c => (
            <div className="diff-col" key={c.title}>
              <div className="diff-icon">{c.icon}</div>
              <h3 className="diff-title">{c.title}</h3>
              <p className="diff-body">{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// ABOUT — MEET SERGE
// ============================================
function About() {
  return (
    <section id="about" className="about reveal-on-scroll">
      <div className="shell about-grid">
        <figure className="about-figure">
          <img src="assets/img/about-serge.webp" alt="Serge, founder of Finer Finds, examining a timepiece in the Beverly Hills office" loading="lazy" />
          <span className="about-figure-accent" />
        </figure>
        <div className="about-text">
          <span className="eyebrow">About</span>
          <h2>Meet Serge</h2>
          <blockquote className="about-quote">
            "We're not just a marketplace — we're curators of stories told through meticulously selected luxury goods."
          </blockquote>
          <p className="about-body">Meet Serge — the ever-dapper face of Finer Finds. With an old-money charm and an eye for all things beautiful, he lives for the thrill of discovering rare pieces and curating them into collections that speak to their history and craftsmanship.</p>
          <p className="about-body">More than a connoisseur of luxury, Serge is a staunch advocate for sustainability — he believes luxury shouldn't come at the cost of our planet. Through pre-loved pieces and the stories he tells, he invites you into a world where elegance and responsibility coexist.</p>
          <a href="#contact" className="btn btn-outline-navy">Book an appointment <Icon.Arrow /></a>
        </div>
      </div>
    </section>
  );
}

// ============================================
// RECENT ACQUISITIONS
// ============================================
function Reviews() {
  const reviews = [
    { name: "Parag Shah", time: "a month ago", text: "One of the few places I genuinely trust when it comes to vintage. There are so many in LA, but I\u2019ve encountered very few at the level of Finer Finds. The curation is super thoughtful \u2014 from the watches to the clothing." },
    { name: "Chanel Tashakor", time: "a month ago", text: "A true hidden gem with one-of-a-kind finds and an incredible mix of clothing, accessories, and luxury timepieces from all over the world. Every corner holds something special. Serge is wonderful to work with \u2014 so warm and welcoming." },
    { name: "Hrag Terzian", time: "Local Guide \u00b7 2 years ago", text: "I\u2019ve been searching for a classy steel watch at a reasonable price, and I\u2019m glad I reached out to Finer Finds. Serge was super helpful and knowledgeable \u2014 he pointed me to a gorgeous Seiko under $600 that looks beautiful." },
    { name: "Fares Azar", time: "a year ago", text: "Been searching for a clean vintage Cartier Must, and Serge was the only one to find me the right one \u2014 and lower than market price! I\u2019m definitely getting more watches from him." },
    { name: "GND", time: "2 years ago", text: "It was great working with Serge. He personally helped me find the best watch for my wife. He has a ton of experience and knowledge of watches, along with a great selection of beautiful pieces. I\u2019m so happy with my purchase!" }
  ];
  const scroll = (e, dir) => { const t = e.currentTarget.parentElement.querySelector(".reviews-track"); if (t) t.scrollBy({ left: dir * 386, behavior: "smooth" }); };
  return (
    <section className="reviews-band reveal-on-scroll" id="reviews">
      <div className="shell">
        <div className="reviews-head">
          <span className="eyebrow">What clients say</span>
          <h2>Reviewed on Google</h2>
          <div className="reviews-rating"><span className="reviews-rating-stars">★★★★★</span><span className="reviews-rating-num">5.0</span><span className="reviews-rating-on">out of 5 on Google</span></div>
          <a className="reviews-all" href="https://www.google.com/maps?cid=9632541473793101604" target="_blank" rel="noopener">Read all reviews on Google <Icon.Arrow /></a>
        </div>
        <div className="reviews-carousel">
          <button className="reviews-arrow reviews-arrow--prev" aria-label="Previous reviews" onClick={(e) => scroll(e, -1)}>‹</button>
          <div className="reviews-track">
            {reviews.map((r, i) => (
              <article className="review-card" key={i}>
                <div className="review-stars" aria-label="Rated 5 out of 5">★★★★★</div>
                <p className="review-text">{r.text}</p>
                <div className="review-meta">
                  <svg className="review-g" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h6.47a5.4 5.4 0 0 1-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/><path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09A12 12 0 0 0 12 24z"/><path fill="#FBBC05" d="M5.27 14.29A7.21 7.21 0 0 1 4.89 12c0-.8.14-1.57.38-2.29V6.62H1.29A12 12 0 0 0 0 12c0 1.94.46 3.77 1.29 5.38l3.98-3.09z"/><path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0A12 12 0 0 0 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z"/></svg>
                  <span className="review-name">{r.name}</span>
                  <span className="review-time">{r.time}</span>
                </div>
              </article>
            ))}
          </div>
          <button className="reviews-arrow reviews-arrow--next" aria-label="Next reviews" onClick={(e) => scroll(e, 1)}>›</button>
        </div>
      </div>
    </section>
  );
}

function Acquisitions() {
  const loop = COLLECTION_IMAGES.concat(COLLECTION_IMAGES);
  return (
    <section className="shop reveal-on-scroll" id="shop">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">In the Collection</span>
          <h2>Recently acquired, recently restored.</h2>
        </div>
      </div>
      <div className="collection-carousel" aria-label="Pieces from the collection">
        <div className="collection-track">
          {loop.map((src, i) => (
            <div className="collection-slide" key={i} aria-hidden={i >= COLLECTION_IMAGES.length}>
              <div style={{ backgroundImage: `url(${src})` }} />
            </div>
          ))}
        </div>
      </div>
      <div className="shell">
        <div className="shop-bottom">
          <a className="btn btn-outline-gold" href={SHOP_URL} target="_blank" rel="noopener">Browse the collection <Icon.Arrow /></a>
        </div>
      </div>
    </section>
  );
}

// ============================================
// TRUST STRIP
// ============================================
function Trust() {
  return (
    <section className="trust reveal-on-scroll">
      <div className="shell">
        <div className="trust-label eyebrow muted">Credentials & Press</div>
        <div className="trust-row">
          <div className="trust-mark">
            <span className="top">GIA</span>
            <span className="bot">Certified Gemologist</span>
          </div>
          <span className="trust-divider" />
          <div className="trust-mark">
            <span className="top">NAJA</span>
            <span className="bot">Member, Appraisers Assn.</span>
          </div>
          <span className="trust-divider" />
          <div className="trust-mark">
            <span className="top bold">BBB</span>
            <span className="bot">Accredited</span>
          </div>
          <span className="trust-divider" />
          <div className="trust-mark">
            <span className="top">Press</span>
            <span className="bot">TBD</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================
// LOCATION + STYLIZED MAP
// ============================================
function StylizedMap() {
  return (
    <svg viewBox="0 0 600 480" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <rect width="600" height="480" fill="#1B2A3D" />

      {/* Subtle Beverly Hills street grid (diagonal, like Wilshire-Rodeo) */}
      <g stroke="#F4EFE3" strokeOpacity="0.08" strokeWidth="1.2">
        {Array.from({ length: 14 }).map((_, i) => (
          <line key={`h${i}`} x1="-40" y1={20 + i * 36} x2="640" y2={20 + i * 36 - 80} />
        ))}
        {Array.from({ length: 18 }).map((_, i) => (
          <line key={`v${i}`} x1={i * 40 - 60} y1="-20" x2={i * 40 + 80} y2="500" />
        ))}
      </g>

      {/* Main avenues — slightly brighter */}
      <g stroke="#F4EFE3" strokeOpacity="0.18" strokeWidth="2">
        <line x1="-40" y1="200" x2="640" y2="120" />
        <line x1="-40" y1="320" x2="640" y2="240" />
        <line x1="180" y1="-20" x2="320" y2="500" />
        <line x1="380" y1="-20" x2="520" y2="500" />
      </g>

      {/* Labels — sparse */}
      <g fill="#D9BC7C" fillOpacity="0.55" fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontSize="14">
        <text x="40" y="180" transform="rotate(-7 40 180)">Wilshire Blvd</text>
        <text x="50" y="380" transform="rotate(-7 50 380)">Santa Monica Blvd</text>
        <text x="220" y="60" transform="rotate(75 220 60)">Rodeo Dr</text>
        <text x="420" y="60" transform="rotate(75 420 60)">Beverly Dr</text>
      </g>

      {/* Park */}
      <g fill="#F4EFE3" fillOpacity="0.05">
        <rect x="80" y="80" width="80" height="50" />
        <text x="120" y="110" textAnchor="middle" fill="#D9BC7C" fillOpacity="0.45" fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontSize="11">Beverly Gardens</text>
      </g>

      {/* Gold marker pin */}
      <g transform="translate(300, 240)">
        {/* halo */}
        <circle r="42" fill="#B8924A" fillOpacity="0.10" />
        <circle r="22" fill="#B8924A" fillOpacity="0.18" />
        {/* pin */}
        <path d="M0,-22 C-12,-22 -22,-12 -22,0 C-22,14 0,32 0,32 C0,32 22,14 22,0 C22,-12 12,-22 0,-22 Z" fill="#B8924A" />
        <circle cy="0" r="6" fill="#1B2A3D" />
      </g>
    </svg>
  );
}

function Location({ onAppraisal }) {
  return (
    <section id="contact" className="reveal-on-scroll">
      <div className="shell">
        <div className="location-grid">
          <div className="location-text">
            <span className="eyebrow">Visit Us</span>
            <h2 style={{ marginTop: 18 }}>By appointment, in Beverly Hills.</h2>
            <p>
              Our office sits steps from Rodeo Drive — quiet, by appointment only, with evening and weekend slots for sellers who would rather not be seen carrying a Birkin through the lobby of a hotel.
            </p>
            <div className="location-info">
              <div className="row">
                <span className="lbl">Location</span>
                <span className="val">Beverly Hills, CA</span>
              </div>
              <div className="row">
                <span className="lbl">Hours</span>
                <span className="val">Monday – Saturday<br/>By appointment</span>
              </div>
              <div className="row">
                <span className="lbl">Phone</span>
                <a className="val gold" href="tel:+13109094794">(310) 909-4794</a>
              </div>
              <div className="row">
                <span className="lbl">Email</span>
                <a className="val gold" href="mailto:serge@finerfinds.com">serge@finerfinds.com</a>
              </div>
            </div>
            <button className="btn btn-outline-gold" onClick={onAppraisal}>Book an appointment</button>
          </div>
          <div className="location-map">
            <StylizedMap />
            <div className="pin-card">Beverly Hills · by appointment</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================
// FAQ
// ============================================
function FAQ() {
  const items = [
    { q: "How is my offer calculated?",
      a: "Each offer reflects current auction comparables, our private-buyer demand, and the condition of the piece. Where applicable, your specialist will walk you through the inputs so the number is never a surprise." },
    { q: "Is the appraisal really free?",
      a: "Yes. Verbal market appraisals are complimentary. There is no obligation to sell — many of our visitors leave with a clearer understanding of what they own and a number to think about." },
    { q: "Do I need an appointment?",
      a: "Yes. We see clients privately, by appointment, so each piece receives full attention. Walk-in visits are not accepted; this is intentional and protects your privacy as much as ours." },
    { q: "What if I'm not ready to sell today?",
      a: "Most pieces only become more interesting with time. We are happy to provide a written valuation for your records, or to consign the piece on your behalf when the moment is right." },
    { q: "Do you buy items that aren't in mint condition?",
      a: "We do. Patina, light wear, and provenance are part of a piece's story. We adjust the offer accordingly and tell you exactly why — never opaque deductions." },
    { q: "How am I paid?",
      a: "Wire transfer, certified check, or in person. Most sellers receive payment the day they accept; international wires settle next business day." },
  ];
  const [openIdx, setOpenIdx] = useState(0);
  return (
    <section className="faq reveal-on-scroll">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">Common Questions</span>
          <h2>Asked, and answered.</h2>
        </div>
        <div className="faq-list reveal-stagger">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${openIdx === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpenIdx(openIdx === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="icon" />
              </button>
              <div className="faq-a"><div><div className="faq-a-inner">{it.a}</div></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// FOOTER
// ============================================
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-wave">
        <svg viewBox="0 0 1200 32" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern id="wave" x="0" y="0" width="56" height="32" patternUnits="userSpaceOnUse" patternTransform="rotate(-10)">
              <path d="M0 16 Q14 6 28 16 T56 16" stroke="#B8924A" strokeWidth="1.2" fill="none" opacity="0.85" />
              <line x1="14" y1="11" x2="14" y2="21" stroke="#B8924A" strokeWidth="0.9" opacity="0.7" />
              <line x1="42" y1="11" x2="42" y2="21" stroke="#B8924A" strokeWidth="0.9" opacity="0.7" />
            </pattern>
          </defs>
          <rect width="1200" height="32" fill="url(#wave)" />
        </svg>
      </div>
      <div className="shell">
        <div className="footer-inner">
          <div className="footer-col footer-brand">
            <div className="logo-row">
              <span className="mark"><FFMark /></span>
              <span className="word">Finer Finds</span>
            </div>
            <p className="tagline">A considered alternative to the showroom counter — Beverly Hills, since 2014.</p>
          </div>
          <div className="footer-col footer-nav">
            <h4>Navigate</h4>
            <ul>
              <li><a href="#how-it-works">How it Works</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#shop">Shop the collection</a></li>
              <li><a href="#about">About Serge</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col footer-contact">
            <h4>Visit</h4>
            <p className="row">Beverly Hills, CA</p>
            <p className="row">By appointment · Mon–Sat</p>
            <p className="row"><a href="tel:+13109094794">(310) 909-4794</a></p>
            <p className="row"><a href="mailto:serge@finerfinds.com">serge@finerfinds.com</a></p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Finer Finds, LLC · All rights reserved · CA Pawnbroker License #[TBD]</span>
          <div className="social-row">
            <a href="#" aria-label="Instagram"><Icon.Instagram /></a>
            <a href="#" aria-label="LinkedIn"><Icon.LinkedIn /></a>
          </div>
          <span className="designed">Designed in Los Angeles.</span>
        </div>
      </div>
    </footer>
  );
}

// ============================================
// APP
// ============================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroImage": "loupe",
  "accentBurgundy": false,
  "showWavePattern": true
}/*EDITMODE-END*/;

function App() {
  const [tweakValues, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];
  const [modalOpen, setModalOpen] = useState(false);
  const [tourOpen, setTourOpen] = useState(false);
  const [initialCat, setInitialCat] = useState("");
  const [serviceOpen, setServiceOpen] = useState(false);
  const [activeService, setActiveService] = useState(null);

  function openAppraisal(cat) {
    setInitialCat(typeof cat === "string" ? cat : "");
    setModalOpen(true);
  }
  function closeAppraisal() { setModalOpen(false); }
  function openTour() { setTourOpen(true); }
  function closeTour() { setTourOpen(false); }
  function openService(id) { setActiveService(id); setServiceOpen(true); }
  function closeService() { setServiceOpen(false); }

  // Apply tweak: switch hero image
  const heroImg = HERO_IMAGES[tweakValues.heroImage] || HERO_IMAGES.loupe;

  // Scroll-reveal observer — fades sections + grids in as they enter view
  useEffect(() => {
    const els = document.querySelectorAll(".reveal-on-scroll, .reveal-stagger");
    if (typeof IntersectionObserver === "undefined") {
      els.forEach(el => el.classList.add("is-visible"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.18, rootMargin: "0px 0px -40px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Apply tweak: optional burgundy accent on eyebrows / step nums
  useEffect(() => {
    const root = document.documentElement;
    if (tweakValues.accentBurgundy) {
      root.style.setProperty("--ff-gold", "#6E2A2C");
      root.style.setProperty("--ff-gold-bright", "#8B3A3C");
      root.style.setProperty("--ff-gold-soft", "#C0928E");
    } else {
      root.style.removeProperty("--ff-gold");
      root.style.removeProperty("--ff-gold-bright");
      root.style.removeProperty("--ff-gold-soft");
    }
  }, [tweakValues.accentBurgundy]);

  return (
    <>
      <Nav onAppraisal={() => openAppraisal()} onService={openService} />
      <Hero onAppraisal={openAppraisal} onTour={openTour} image={heroImg} />
      <WhatWeBuy onAppraisal={openAppraisal} />
      <HowItWorks onTour={openTour} />
      <Difference />
      <Acquisitions />
      <Trust />
      <About />
      <Reviews />
      <Location onAppraisal={() => openAppraisal()} />
      <FAQ />
      <Footer />

      <AppraisalModal open={modalOpen} onClose={closeAppraisal} initialCategory={initialCat} />
      <ServiceModal open={serviceOpen} service={activeService} onClose={closeService} />
      <HowItWorksTour open={tourOpen} onClose={closeTour} />

      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection label="Hero" />
          <window.TweakRadio
            label="Background"
            value={tweakValues.heroImage}
            onChange={v => setTweak("heroImage", v)}
            options={["loupe", "watch", "velvet"]}
          />
          <window.TweakSection label="Accent" />
          <window.TweakToggle
            label="Burgundy accents"
            value={tweakValues.accentBurgundy}
            onChange={v => setTweak("accentBurgundy", v)}
          />
        </window.TweaksPanel>
      )}
    </>
  );
}

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