/* global React */
const { useState, useEffect, useRef } = React;

// ────────────────────────────────────────────────────────────
// DATA — verbatim from brief / research files; no inventions.
// ────────────────────────────────────────────────────────────

const COLLECTIONS = [
  {
    id: "gate",
    roman: "I.",
    name: "GATE",
    mantra: "Why wear it, when you can experience it.",
    image: "media/lifestyle-gate-rings.webp",
    intro:
      "A story of innovation. Gate transcends the idea of lock and key concept — to seal special secrets and emotions, inspire, dream.",
  },
  {
    id: "lamina",
    roman: "II.",
    name: "LAMINA",
    mantra: "Stillness in Motion.",
    image: "media/lamina-ring-diamonds.webp",
    intro:
      "Inspired by the fluidity and purity of nature. Exquisite pieces representing the curves and natural movement of the leaves.",
  },
  {
    id: "sway",
    roman: "III.",
    name: "SWAY",
    mantra: "Made to be a statement.",
    image: "media/sway-bracelet-wing.webp",
    intro:
      "A limitless expression of who you are — capturing the magnificence of a falcon taking flight: elegance, strength & grace.",
  },
];

// Real AED prices from the brief table. Metal options curated where the
// brand offers white/rose/yellow variants.
const PRODUCTS = [
  {
    id: "gate-bracelet-yellow",
    name: "Gate Bracelet",
    collection: "Gate",
    type: "Bracelet",
    aed: 23500,
    metals: ["yellow", "rose", "white"],
    image: "media/gate-bracelet-yellow.webp",
    badge: "Signature",
    desc: "Sealing a story. The Gate bracelet's lock-and-key motif transcends a fastening into a quiet declaration.",
    specs: {
      Metal: "18k Yellow Gold",
      Stones: "Brilliant-cut Diamonds 0.21 ct",
      Width: "6.5 mm",
      Origin: "Handcrafted in Italy",
      Reference: "9321BR",
    },
  },
  {
    id: "sway-floating-ring",
    name: "Sway Floating Diamond Ring",
    collection: "Sway",
    type: "Ring",
    aed: 5000,
    metals: ["white", "yellow"],
    image: "media/sway-floating-ring.webp",
    badge: "Most-loved",
    desc: "A single brilliant suspended within the falcon's arc — graceful, weightless, alive.",
    specs: {
      Metal: "18k White Gold",
      Stones: "Brilliant-cut Diamond",
      Origin: "Handcrafted in Italy",
    },
  },
  {
    id: "lamina-ring",
    name: "Lamina Ring",
    collection: "Lamina",
    type: "Ring",
    aed: 8800,
    metals: ["yellow", "rose", "white"],
    image: "media/lamina-ring-diamonds.webp",
    desc: "Two leaves and a diamond bar — stillness in motion, captured in 18k gold.",
    specs: {
      Metal: "18k Yellow & White Gold",
      Stones: "Pavé Diamonds",
      Origin: "Handcrafted in Italy",
    },
  },
  {
    id: "gate-pendant-yellow",
    name: "Gate Pendant Diamond-Paved",
    collection: "Gate",
    type: "Pendant",
    aed: 9200,
    metals: ["yellow", "rose", "white"],
    image: "media/gate-pendant-yellow.webp",
    desc: "The lock-and-key motif distilled into a daily talisman.",
    specs: {
      Metal: "18k Yellow Gold",
      Stones: "Pavé Diamonds",
      Origin: "Handcrafted in Italy",
    },
  },
  {
    id: "sway-floating-necklace",
    name: "Sway Floating Necklace",
    collection: "Sway",
    type: "Necklace",
    aed: 8000,
    metals: ["white"],
    image: "media/sway-floating-necklace.webp",
    desc: "Wings of pavé diamonds suspended at the neckline.",
    specs: {
      Metal: "18k White Gold",
      Stones: "Pavé Brilliant Diamonds",
      Origin: "Handcrafted in Italy",
    },
  },
  {
    id: "gate-stud",
    name: "Gate Stud Earrings",
    collection: "Gate",
    type: "Earrings",
    aed: 4600,
    metals: ["yellow", "white"],
    image: "media/gate-stud-earrings.webp",
    badge: "Under 5k",
    desc: "An everyday Gate — the lock motif at its most quiet.",
    specs: {
      Metal: "18k Yellow Gold",
      Stones: "Brilliant Diamonds",
      Origin: "Handcrafted in Italy",
    },
  },
  {
    id: "lamina-earrings",
    name: "Lamina Earrings",
    collection: "Lamina",
    type: "Earrings",
    aed: 7000,
    metals: ["yellow"],
    image: "media/lamina-earrings.webp",
    desc: "Two gold leaves catch the light at the ear.",
    specs: {
      Metal: "18k Yellow Gold",
      Origin: "Handcrafted in Italy",
    },
  },
  {
    id: "gate-bracelet-rose",
    name: "Gate Bracelet",
    collection: "Gate",
    type: "Bracelet",
    aed: 19500,
    metals: ["rose", "yellow", "white"],
    image: "media/gate-bracelet-rose.webp",
    desc: "The plain Gate bracelet — pure 18k rose gold, lock at centre.",
    specs: {
      Metal: "18k Rose Gold",
      Origin: "Handcrafted in Italy",
    },
  },
];

const FORMAT_AED = (n) =>
  new Intl.NumberFormat("en-AE", { maximumFractionDigits: 0 }).format(n);

const METAL_LABEL = { yellow: "Yellow Gold", rose: "Rose Gold", white: "White Gold" };

// ────────────────────────────────────────────────────────────
// Wordmark — original LA◆SON style mark with diamond
// (re-drawn from scratch; not a logo trace)
// ────────────────────────────────────────────────────────────
function Wordmark({ size = 22, light = false }) {
  return (
    <span
      className="wordmark"
      style={{ fontSize: size, color: light ? "var(--ivory)" : "currentColor" }}
    >
      LA<span className="wm-diamond" />SON
    </span>
  );
}

// ────────────────────────────────────────────────────────────
// Navbar
// ────────────────────────────────────────────────────────────
function Navbar({ onBook, mode = "dark" }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const light = mode === "light";
  return (
    <nav
      className={"nav " + (light ? "nav-light " : "") + (scrolled ? "nav-scrolled" : "")}
      style={{
        background: scrolled
          ? light
            ? "rgba(247,241,230,0.94)"
            : "rgba(12,10,8,0.85)"
          : "transparent",
        backdropFilter: scrolled ? "blur(14px)" : "none",
        padding: scrolled ? "16px 0" : "22px 0",
        borderBottom: scrolled
          ? light
            ? "1px solid rgba(20,16,12,0.06)"
            : "1px solid rgba(247,241,230,0.06)"
          : "1px solid transparent",
      }}
    >
      <div className="nav-inner">
        <div className="nav-links">
          <a href="#collections">Collections</a>
          <a href="#atelier">Atelier</a>
          <a href="#maison">Maison</a>
          <a href="#showrooms">Showrooms</a>
        </div>
        <a href="#top" style={{ textAlign: "center" }}>
          <Wordmark size={22} />
        </a>
        <div className="nav-right">
          <svg className="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
            <circle cx="11" cy="11" r="7" />
            <path d="M20 20l-3.5-3.5" />
          </svg>
          <svg className="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
            <path d="M5 8h14l-1.4 11.1a2 2 0 0 1-2 1.9H8.4a2 2 0 0 1-2-1.9L5 8z" />
            <path d="M9 8V6a3 3 0 0 1 6 0v2" />
          </svg>
          <button className="nav-cta" onClick={onBook}>Book Appointment</button>
        </div>
      </div>
    </nav>
  );
}

// ────────────────────────────────────────────────────────────
// Hero
// ────────────────────────────────────────────────────────────
function Hero({ variant, heroImage, onBook }) {
  return (
    <section className="hero" data-variant={variant} id="top">
      <div className="hero-grid">
        <div className="hero-text">
          <div>
            <div className="hero-eyebrow">
              <span className="dot" />
              <span>Lawson — Maison · Est. since ~2019</span>
            </div>
            <h1 className="display">
              A New Era<br />
              of <em>Fine</em><br />
              Jewelry.
            </h1>
            <div className="hero-sub">
              Leave your mark&nbsp;…&nbsp;<br />unfold your dreams.
            </div>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={onBook}>
                Book a Private Appointment <span className="arrow" />
              </button>
              <a href="#collections" className="btn btn-ghost-light">
                Explore Collections <span className="arrow" />
              </a>
            </div>
          </div>
          <div className="hero-meta">
            <span>Dubai · London<br />By Appointment</span>
            <div className="scroll-cue">
              <span>Scroll</span>
              <span className="line" />
            </div>
            <span style={{ textAlign: "right" }}>Cinematic edition<br />MMXXVI / I</span>
          </div>
        </div>
        <div className="hero-img-wrap">
          <img src={heroImage} alt="Sway bracelet on hand" className="hero-img" />
          <div className="hero-img-overlay" />
          <div className="hero-piece-label">
            <span className="piece-name">Sway Bracelet</span>
            Worn — In Pavé Diamonds<br />Collection No. III
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Ethos strip
// ────────────────────────────────────────────────────────────
function Ethos() {
  const items = [
    { num: "i", label: "Handcrafted in Italy" },
    { num: "ii", label: "18k Gold & Diamonds" },
    { num: "iii", label: "London + Dubai" },
    { num: "iv", label: "By Appointment" },
  ];
  return (
    <section className="ethos">
      <div className="wrap">
        <div className="ethos-row">
          {items.map((it) => (
            <div key={it.num} className="ethos-item">
              <span className="num">{it.num}.</span>
              <span>{it.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Collections
// ────────────────────────────────────────────────────────────
function CollectionsSection() {
  return (
    <section className="section" id="collections" style={{ background: "var(--ivory)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">§ Collections</span>
            <h2 className="display">Three<br />stories, <em>in gold</em><br />and diamond.</h2>
          </div>
          <div className="right">
            Each Lawson collection begins with a concept — a gate, a leaf, a falcon in flight — and is
            handed to a masterful team of Italian craftsmen with a profound savoir-faire. Distinctive,
            creative, daring.
          </div>
        </div>
        <div className="collections">
          {COLLECTIONS.map((c) => (
            <a key={c.id} className="collection-card" href={`#${c.id}`}>
              <div className="img-wrap">
                <img src={c.image} alt={c.name} />
              </div>
              <div className="pin">
                <span className="dot" /> Collection {c.roman.replace(".", "")}
              </div>
              <div className="body">
                <div className="roman">{c.roman}</div>
                <h3 className="display">{c.name}</h3>
                <div className="mantra">"{c.mantra}"</div>
                <div className="more">Read the story <span style={{fontSize:16,letterSpacing:0}}>→</span></div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Product card
// ────────────────────────────────────────────────────────────
function ProductCard({ p, onOpen }) {
  const [metal, setMetal] = useState(p.metals[0]);
  return (
    <div className="product-card" onClick={() => onOpen(p)}>
      <div className="pc-img">
        <img src={p.image} alt={p.name} />
        {p.badge && <div className="pc-badge">{p.badge}</div>}
        <div className="pc-quick">Quick view</div>
      </div>
      <div className="pc-body">
        <div>
          <div className="pc-name">{p.name}</div>
          <div className="pc-meta">
            <span>{p.collection}</span>
            <span style={{ opacity: 0.35 }}>·</span>
            <span>{p.type}</span>
            <span className="metal-dots">
              {p.metals.map((m) => (
                <span
                  key={m}
                  className={"metal-dot " + m + (m === metal ? " active" : "")}
                  onClick={(e) => { e.stopPropagation(); setMetal(m); }}
                  title={METAL_LABEL[m]}
                />
              ))}
            </span>
          </div>
        </div>
        <div className="pc-price">
          <span className="currency">AED</span>
          <span className="mono-price">{FORMAT_AED(p.aed)}</span>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// Atelier (featured products)
// ────────────────────────────────────────────────────────────
function Atelier({ onOpen }) {
  const [filter, setFilter] = useState("All");
  const filters = ["All", "Gate", "Lamina", "Sway"];
  const filtered = filter === "All" ? PRODUCTS : PRODUCTS.filter((p) => p.collection === filter);
  return (
    <section className="section atelier" id="atelier">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">§ The Atelier</span>
            <h2 className="display">Pieces, <em>in</em><br />residence.</h2>
          </div>
          <div className="right">
            A curated selection from the current collections. Every piece is handmade in Italy; gold
            weight and stone carat may vary slightly. Real prices, shown in&nbsp;AED.
          </div>
        </div>
        <div className="atelier-filter">
          {filters.map((f) => (
            <button
              key={f}
              className={"filter-pill " + (filter === f ? "active" : "")}
              onClick={() => setFilter(f)}
            >
              {f}
            </button>
          ))}
          <div className="spacer" />
          <div className="count">{filtered.length} pieces</div>
        </div>
        <div className="product-rail">
          {filtered.map((p) => (
            <ProductCard key={p.id} p={p} onOpen={onOpen} />
          ))}
        </div>
        <div style={{ marginTop: 56, textAlign: "center" }}>
          <a href="#" className="btn btn-ghost-dark">View the full atelier <span className="arrow" /></a>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Maison (founders + craft)
// ────────────────────────────────────────────────────────────
function Maison() {
  return (
    <section className="section maison" id="maison">
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">§ The Maison</span>
            <h2 className="display">A family of three.<br /><em>Crafted</em> in Italy.</h2>
          </div>
          <div className="right">
            A family brand of three — Wasan, Khalid &amp; Shahad — handcrafting each piece in Italy
            alongside a masterful team of artisans. Online since circa 2019; private clients across
            the Gulf and beyond.
          </div>
        </div>

        <div className="maison-grid">
          <div className="maison-img">
            <img src="media/lifestyle-gate-him.webp" alt="Atelier" />
            <div className="caption">Made in Italy · Studio plate II</div>
          </div>
          <div className="maison-text">
            <p className="body-copy">
              "Jewelry isn't a mere aesthetic; it is an <em>extension of your personality</em>.
              Distinctive, Creative and Daring — every Lawson piece begins as a concept and ends in
              the hands of a masterful team of Italian craftsmen with a profound savoir-faire."
            </p>
            <a href="#" className="btn btn-ghost-light">Read the maison story <span className="arrow" /></a>

            <div className="founders">
              <div className="founder">
                <div className="name">Wasan</div>
                <div className="role">Co-founder</div>
              </div>
              <div className="founder">
                <div className="name">Khalid</div>
                <div className="role">Co-founder</div>
              </div>
              <div className="founder">
                <div className="name">Shahad</div>
                <div className="role">Co-founder</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Occasions (Proposals & Gifting)
// ────────────────────────────────────────────────────────────
function Occasions() {
  return (
    <section className="section" style={{ background: "var(--ivory)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">§ Occasions</span>
            <h2 className="display">For the <em>moments</em><br />that stay.</h2>
          </div>
          <div className="right">
            Whether a proposal, an anniversary, or a quiet declaration — our specialists curate by
            occasion, price band, and the wearer. Private appointments include hand-selected
            previews and bespoke commission options.
          </div>
        </div>
        <div className="occasions">
          <a href="#" className="occasion-card">
            <img src="media/lifestyle-sway-ring.webp" alt="Proposals" />
            <div className="body">
              <span className="eyebrow eyebrow-light">§ I.</span>
              <h3 className="display">Proposals.</h3>
              <div className="desc">Sway and Gate rings — for the question that changes everything. From AED 4,000.</div>
              <div className="btn-link">Explore proposals <span style={{fontSize:16}}>→</span></div>
            </div>
          </a>
          <a href="#" className="occasion-card">
            <img src="media/lifestyle-sway-necklace.webp" alt="Gifting" />
            <div className="body">
              <span className="eyebrow eyebrow-light">§ II.</span>
              <h3 className="display">Gifting.</h3>
              <div className="desc">Studs, pendants, and Lamina pieces — curated by occasion and budget. Under AED 10,000.</div>
              <div className="btn-link">Curated gifts <span style={{fontSize:16}}>→</span></div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Appointment band
// ────────────────────────────────────────────────────────────
function AppointmentBand({ onBook }) {
  return (
    <section className="appointment-band">
      <div className="app-decoration">APPOINTMENT</div>
      <div className="wrap" style={{ position: "relative" }}>
        <div className="appointment-inner">
          <div>
            <span className="eyebrow eyebrow-light">§ Private Showroom</span>
            <h2 className="display" style={{ marginTop: 24 }}>
              Visit our private showroom in <em>Dubai Design District.</em>
            </h2>
            <div className="sub">
              Spend an hour with a specialist. Preview pieces from Gate, Lamina &amp; Sway in person,
              or commission something entirely your own.
            </div>
          </div>
          <div className="cta-stack">
            <button className="btn btn-primary" onClick={onBook}>
              Book a Private Appointment <span className="arrow" />
            </button>
            <a
              className="whatsapp-link"
              href="https://wa.me/971544055525?text=Hi%20Lawson%2C%20I%27d%20like%20to%20book%20a%20private%20appointment"
              target="_blank"
              rel="noopener noreferrer"
            >
              WhatsApp +971 54 405 5525 <span style={{ fontSize: 14, letterSpacing: 0 }}>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Showrooms
// ────────────────────────────────────────────────────────────
function Showrooms() {
  return (
    <section className="section" id="showrooms" style={{ background: "var(--ivory)" }}>
      <div className="wrap">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">§ Showrooms</span>
            <h2 className="display">Two cities. <em>By</em><br />invitation.</h2>
          </div>
          <div className="right">
            Our flagship private showroom sits inside Dubai Design District; our London trading
            address is in W1H. Both are by appointment — hours confirmed on booking.
          </div>
        </div>
        <div className="showrooms-grid">
          <div className="showroom">
            <h3 className="city display">Dubai</h3>
            <div className="country">United Arab Emirates</div>
            <div className="addr">Building 4A-506,<br />Dubai Design District.</div>
            <div className="meta-row"><span className="label">Phone</span><span className="val">+971 4 425 2208</span></div>
            <div className="meta-row"><span className="label">WhatsApp</span><span className="val">+971 54 405 5525</span></div>
            <div className="meta-row"><span className="label">Email</span><span className="val">info@lawsonjewelry.com</span></div>
            <div className="by-appt">
              <span className="by-appt-label">By appointment</span>
              <a href="#" className="btn-link">Reserve a slot <span style={{fontSize:14}}>→</span></a>
            </div>
          </div>
          <div className="showroom">
            <h3 className="city display">London</h3>
            <div className="country">United Kingdom</div>
            <div className="addr">One Seymour Street, Suite 22,<br />London W1H 7JW.</div>
            <div className="meta-row"><span className="label">Entity</span><span className="val">Lawson Jewelry LTD</span></div>
            <div className="meta-row"><span className="label">Email</span><span className="val">info@lawsonjewelry.com</span></div>
            <div className="meta-row"><span className="label">Hours</span><span className="val">To be confirmed</span></div>
            <div className="by-appt">
              <span className="by-appt-label">By appointment</span>
              <a href="#" className="btn-link">Enquire <span style={{fontSize:14}}>→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Footer
// ────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <div className="brand"><Wordmark size={28} light /></div>
            <div className="brand-sub">
              "Leave your mark&nbsp;…&nbsp;unfold your dreams."
              <br />
              A new era of fine jewelry — handcrafted in Italy.
            </div>
          </div>
          <div>
            <h5>Collections</h5>
            <ul>
              <li><a href="#gate">Gate</a></li>
              <li><a href="#lamina">Lamina</a></li>
              <li><a href="#sway">Sway</a></li>
              <li><a href="#">All pieces</a></li>
            </ul>
          </div>
          <div>
            <h5>Maison</h5>
            <ul>
              <li><a href="#maison">The Founders</a></li>
              <li><a href="#">Made in Italy</a></li>
              <li><a href="#">Commissions</a></li>
              <li><a href="#">Press</a></li>
            </ul>
          </div>
          <div>
            <h5>Showrooms</h5>
            <ul>
              <li>Dubai · d3 4A-506</li>
              <li>London · W1H 7JW</li>
              <li><a href="#">Appointments</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="tel:+97144252208">+971 4 425 2208</a></li>
              <li><a href="https://wa.me/971544055525" target="_blank" rel="noreferrer">WhatsApp</a></li>
              <li><a href="mailto:info@lawsonjewelry.com">info@lawsonjewelry.com</a></li>
              <li><a href="#">Instagram · Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© Lawson Jewelry LTD · London · Dubai</div>
          <div>Online since circa 2019 · Crafted in Italy</div>
        </div>
      </div>
    </footer>
  );
}

// ────────────────────────────────────────────────────────────
// Quick-view drawer (product)
// ────────────────────────────────────────────────────────────
function QuickView({ product, onClose, onBook }) {
  const [metal, setMetal] = useState(product ? product.metals[0] : "yellow");
  useEffect(() => {
    if (product) setMetal(product.metals[0]);
  }, [product]);
  const open = !!product;
  return (
    <>
      <div className={"qv-backdrop " + (open ? "open" : "")} onClick={onClose} />
      <aside className={"qv-drawer " + (open ? "open" : "")}>
        {product && (
          <>
            <div className="qv-img">
              <img src={product.image} alt={product.name} />
              <button className="qv-close" onClick={onClose}>
                <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.2">
                  <line x1="1" y1="1" x2="13" y2="13" />
                  <line x1="13" y1="1" x2="1" y2="13" />
                </svg>
              </button>
            </div>
            <div className="qv-body">
              <div className="qv-eyebrow">§ {product.collection} Collection</div>
              <h3 className="qv-name display">{product.name}</h3>
              <div className="qv-price"><span style={{ fontSize: 11, letterSpacing: "0.22em", color: "rgba(20,16,12,0.5)" }}>AED&nbsp;</span><span className="mono-price">{FORMAT_AED(product.aed)}</span></div>
              <div className="qv-desc">"{product.desc}"</div>

              {product.metals.length > 1 && (
                <div className="qv-metals">
                  <div className="qv-metals-label">Metal — {METAL_LABEL[metal]}</div>
                  <div className="qv-metals-row">
                    {product.metals.map((m) => (
                      <button
                        key={m}
                        className={"qv-metal-pick " + (m === metal ? "active" : "")}
                        onClick={() => setMetal(m)}
                      >
                        <span className={"dot metal-dot " + m} />
                        <span className="label">{METAL_LABEL[m]}</span>
                      </button>
                    ))}
                  </div>
                </div>
              )}

              <div className="qv-specs">
                {Object.entries(product.specs).map(([k, v]) => (
                  <div className="qv-spec-row" key={k}>
                    <span className="k">{k}</span>
                    <span>{v}</span>
                  </div>
                ))}
              </div>

              <div className="qv-ctas">
                <button className="btn btn-primary">Add to bag <span className="arrow" /></button>
                <button className="btn btn-ghost-dark" onClick={() => { onClose(); onBook(); }}>
                  Book to view
                </button>
              </div>
              <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(20,16,12,0.5)", textAlign: "center", paddingTop: 14 }}>
                Free secure shipping · Lifetime craftsmanship guarantee
              </div>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

// expose
Object.assign(window, {
  Wordmark, Navbar, Hero, Ethos, CollectionsSection, ProductCard,
  Atelier, Maison, Occasions, AppointmentBand, Showrooms, Footer, QuickView,
  PRODUCTS, COLLECTIONS, FORMAT_AED, METAL_LABEL,
});