/* global React */
// Flashy Jewellery — UI components and sections

const { useState, useEffect, useMemo, useRef } = React;

const fmt = (n) => n.toLocaleString("en-US");

// ---------------------- icons ----------------------
const IconSearch = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
    <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" strokeLinecap="round" />
  </svg>
);
const IconUser = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
    <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4.42 3.58-8 8-8s8 3.58 8 8" strokeLinecap="round" />
  </svg>
);
const IconBag = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
    <path d="M5 8h14l-1 12H6L5 8Z" /><path d="M9 8V6a3 3 0 0 1 6 0v2" />
  </svg>
);
const IconHeart = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M12 21s-7-4.5-9.5-9c-1.2-2.1-.3-5 2.4-6 2-.7 4 .2 5 2 1-1.8 3-2.7 5-2 2.7 1 3.6 3.9 2.4 6C19 16.5 12 21 12 21Z" />
  </svg>
);
const IconClose = () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M6 6l12 12M18 6 6 18" strokeLinecap="round" /></svg>);
const IconChevron = ({ dir = "down", size = 10 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    {dir === "down" ? <path d="m6 9 6 6 6-6" strokeLinecap="round" /> : <path d="m9 6 6 6-6 6" strokeLinecap="round" />}
  </svg>
);
const IconWhatsApp = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="currentColor">
    <path d="M16 2C8.27 2 2 8.27 2 16c0 2.51.66 4.87 1.82 6.9L2 30l7.3-1.7A14 14 0 1 0 16 2Zm0 25.8c-2.5 0-4.8-.78-6.7-2.1l-4.04 1.02 1.07-3.97A11.7 11.7 0 1 1 16 27.8Zm6.4-8.86c-.35-.18-2.1-1.04-2.43-1.16-.33-.12-.57-.18-.8.18-.25.35-.93 1.16-1.14 1.4-.21.25-.42.27-.78.09-.36-.18-1.5-.55-2.86-1.77-1.06-.95-1.77-2.12-1.98-2.47-.21-.36-.02-.55.16-.73.16-.16.36-.42.54-.63.18-.21.24-.36.36-.6.12-.25.06-.46-.03-.65-.09-.18-.8-1.95-1.1-2.66-.3-.7-.6-.6-.81-.61H10.8c-.21 0-.55.08-.84.4-.29.33-1.1 1.08-1.1 2.63 0 1.55 1.13 3.04 1.29 3.25.16.21 2.22 3.4 5.39 4.76.75.32 1.34.52 1.8.66.76.24 1.45.2 2 .12.61-.09 1.88-.77 2.15-1.5.27-.74.27-1.37.19-1.5-.09-.13-.32-.21-.67-.39Z" />
  </svg>
);
const IconCheck = ({ size = 22 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="m5 12 4 4L19 6" strokeLinecap="round" strokeLinejoin="round" /></svg>);
const Stars = ({ n = 5 }) => <span className="stars">{"★".repeat(n) + "☆".repeat(5 - n)}</span>;

const Price = ({ amount }) => (
  <span className="price tabular"><span className="ccy">AED</span>{fmt(amount)}</span>
);

// ---------------------- utility bar + nav ----------------------
function UtilityBar() {
  return (
    <div className="utility">
      <div className="utility-inner">
        <div className="utility-marquee">
          <span>Complimentary shipping above AED 2,000</span>
          <span className="dot" />
          <span>21 years at the Dubai Gold Souk</span>
          <span className="dot" />
          <span>GIA &amp; IDT certified diamonds</span>
        </div>
        <div className="utility-right">
          <span>AED · EN</span>
          <span>WhatsApp +971 56 126 8540</span>
        </div>
      </div>
    </div>
  );
}

function Nav({ bagCount, onBag, onBook, onShop }) {
  return (
    <header className="nav" data-screen-label="00 Nav">
      <div className="nav-inner">
        <nav className="nav-links">
          <a className="nav-link" onClick={onShop}>Shop <IconChevron /></a>
          <a className="nav-link">Engagement</a>
          <a className="nav-link">High Jewellery</a>
          <a className="nav-link">Diamonds</a>
          <a className="nav-link">Custom Design</a>
        </nav>
        <a className="brand-wordmark">Flashy <span className="amp">&amp;</span> Co.</a>
        <div className="nav-icons">
          <button className="icon-btn" aria-label="Search"><IconSearch /></button>
          <button className="icon-btn" aria-label="Account"><IconUser /></button>
          <button className="icon-btn" aria-label="Bag" onClick={onBag}>
            <IconBag />
            {bagCount > 0 && <span className="bag-count">{bagCount}</span>}
          </button>
          <button className="book-pill" onClick={onBook}>Book Consultation</button>
        </div>
      </div>
    </header>
  );
}

// ---------------------- hero ----------------------
function Hero({ onShop, onBook, variant }) {
  if (variant === "single") return <HeroSingle onShop={onShop} onBook={onBook} />;
  return (
    <section className="hero" data-screen-label="01 Hero">
      <span className="hero-monogram">F</span>
      <div className="wrap hero-grid">
        <div>
          <div className="hero-eyebrow mono-cap" style={{ color: "var(--gold-deep)" }}>Dubai Gold Souk · Est. heritage</div>
          <h1 className="hero-headline">
            Everyday<br />Luxury,<br /><span className="ital">special</span> price.
          </h1>
          <p className="hero-sub">
            Certified natural &amp; lab-grown diamonds, 18K gold and rare coloured gemstones — handcrafted in the heart of Deira, shipped worldwide.
          </p>
          <div className="hero-ctas">
            <button className="btn" onClick={onShop}><span>Shop the collection</span><span className="btn-icon-arrow" /></button>
            <button className="btn btn-ghost" onClick={onBook}>Book a consultation</button>
          </div>
          <div className="hero-trust">
            <div><Stars n={5} /><div style={{ marginTop: 4 }}><strong>5.0</strong> on Tripadvisor</div></div>
            <div><div className="serif" style={{ fontSize: 22, color: "var(--gold-deep)", lineHeight: 1 }}>GIA</div><div style={{ marginTop: 4 }}>Certified diamonds</div></div>
            <div><div className="serif" style={{ fontSize: 22, color: "var(--gold-deep)", lineHeight: 1 }}>21</div><div style={{ marginTop: 4 }}>Years in the Souk</div></div>
          </div>
        </div>
        <div className="hero-art">
          <div className="tile tile-feature">
            <img src="media/highjewellery-sapphire-bloom-bracelet.webp" alt="" />
            <span className="tile-tag">High Jewellery</span>
          </div>
          <div className="tile">
            <img src="media/ring-halo-engagement.webp" alt="" />
          </div>
          <div className="tile">
            <img src="media/bracelet-rainbow-sapphire-tennis.webp" alt="" />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroSingle({ onShop, onBook }) {
  return (
    <section className="hero" data-screen-label="01 Hero" style={{ padding: "32px 0 96px" }}>
      <div className="wrap" style={{ position: "relative", aspectRatio: "16/8", background: "linear-gradient(155deg, var(--champagne-pale), var(--bone))", display: "flex", alignItems: "center", padding: "64px" }}>
        <div style={{ maxWidth: 560, position: "relative", zIndex: 2 }}>
          <div className="mono-cap" style={{ color: "var(--gold-deep)", marginBottom: 24 }}>— Dubai Gold Souk, since heritage</div>
          <h1 className="hero-headline" style={{ fontSize: "clamp(48px,6vw,92px)" }}>
            The piece you'll <span className="ital">never</span> take off.
          </h1>
          <p className="hero-sub" style={{ marginTop: 24 }}>Certified diamonds, 18K gold, fairly priced — straight from our master jewellers in the Gold Souk.</p>
          <div className="hero-ctas">
            <button className="btn" onClick={onShop}><span>Shop the collection</span><span className="btn-icon-arrow" /></button>
            <button className="btn btn-ghost" onClick={onBook}>Book a consultation</button>
          </div>
        </div>
        <img src="media/highjewellery-sapphire-bloom-bracelet.webp" alt="" style={{ position: "absolute", right: "-4%", top: "50%", transform: "translateY(-50%)", width: "55%", aspectRatio: "1/1", objectFit: "contain", mixBlendMode: "multiply" }} />
      </div>
    </section>
  );
}

// ---------------------- trust strip ----------------------
function TrustStrip() {
  return (
    <div className="trust-strip">
      <div className="trust-strip-inner">
        <div className="trust-item">
          <div className="ti-num serif">21</div>
          <div><strong>Years in the Souk</strong><div className="small">Deira, Dubai</div></div>
        </div>
        <div className="trust-item">
          <div className="ti-num serif">★</div>
          <div><strong>5.0 / 5 Tripadvisor</strong><div className="small">Verified reviews</div></div>
        </div>
        <div className="trust-item">
          <div className="ti-num serif">◆</div>
          <div><strong>GIA &amp; IDT Certified</strong><div className="small">Diamond reports included</div></div>
        </div>
        <div className="trust-item">
          <div className="ti-num serif">✈</div>
          <div><strong>Worldwide Shipping</strong><div className="small">Complimentary above AED 2,000</div></div>
        </div>
      </div>
    </div>
  );
}

// ---------------------- product card ----------------------
function ProductCard({ p, onOpen }) {
  return (
    <article className="prod" onClick={() => onOpen(p)} data-screen-label={`Card · ${p.name}`}>
      <div className="prod-img-wrap">
        {p.badge && <span className="prod-badge cert">{p.badge}</span>}
        <button className="prod-wishlist" aria-label="Save" onClick={(e) => e.stopPropagation()}><IconHeart /></button>
        <img src={p.img} alt={p.name} />
        <button className="prod-quick" onClick={(e) => { e.stopPropagation(); onOpen(p); }}>Quick view</button>
      </div>
      <div className="prod-meta">
        <h4 className="name">{p.name}</h4>
        <div className="specs">{p.metal}</div>
        <div className="price-row">
          <Price amount={p.price} />
          <span className="swatch-row">
            <span className={`swatch ${p.swatch}`} />
          </span>
        </div>
      </div>
    </article>
  );
}

// ---------------------- categories ----------------------
function CategoriesSection() {
  return (
    <section className="section" data-screen-label="02 Categories">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="mono-cap label">— The House</div>
            <h2 className="h-1">Shop the collection</h2>
            <p className="lede">Two-hundred-and-fifty SKUs across rings, bracelets, earrings, pendants, men's, kids' and investment-grade bullion.</p>
          </div>
          <div className="sec-head-right">
            <button className="btn-text">View all 250+ pieces</button>
          </div>
        </div>
        <div className="cat-grid">
          {window.CATEGORIES.map((c, i) => (
            <article key={i} className={`cat-card ${c.cls}`}>
              <span className="cat-arrow">→</span>
              <img src={c.img} alt="" />
              <div className="cat-meta">
                <div className="cat-name">{c.name}</div>
                <div className="cat-count">{c.count} pieces</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------- engagement & bridal (with filters) ----------------------
const FILTERS = [
  { id: "all", label: "All Engagement" },
  { id: "Solitaire", label: "Solitaire" },
  { id: "Halo", label: "Halo" },
  { id: "Three Stone", label: "Three Stone" },
  { id: "Eternity", label: "Eternity" },
  { id: "Stacking", label: "Stacking" },
  { id: "Statement", label: "Colour Stone" },
];

function EngagementSection({ onOpen, refEl }) {
  const [filter, setFilter] = useState("all");
  const products = useMemo(() => {
    const rings = window.PRODUCTS.filter(p => p.cat === "rings");
    if (filter === "all") return rings;
    return rings.filter(p => p.subcat === filter);
  }, [filter]);

  return (
    <section className="section" ref={refEl} data-screen-label="03 Engagement">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="mono-cap label">— Engagement &amp; Bridal</div>
            <h2 className="h-1">The yes ring,<br/>by our atelier.</h2>
            <p className="lede">Sixty-eight engagement and bridal designs — certified solitaires, halos, three-stones and eternities. Each book-able for a one-on-one consultation with our diamond stylist.</p>
          </div>
          <div className="sec-head-right">
            <button className="btn-text">All bridal sets →</button>
          </div>
        </div>
        <div style={{ marginBottom: 28, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, alignItems: "center" }}>
          <div className="pills">
            {FILTERS.map(f => (
              <button key={f.id} className="pill" data-active={filter === f.id} onClick={() => setFilter(f.id)}>{f.label}</button>
            ))}
          </div>
          <div className="small">{products.length} {products.length === 1 ? "piece" : "pieces"}</div>
        </div>
        <div className="prod-grid">
          {products.map(p => <ProductCard key={p.id} p={p} onOpen={onOpen} />)}
        </div>
      </div>
    </section>
  );
}

// ---------------------- tennis bracelets feature ----------------------
function TennisFeature({ onOpen }) {
  const featured = window.PRODUCTS.filter(p => p.subcat === "Tennis" || p.subcat === "Cuban" || p.id === "b5" || p.id === "b3").slice(0, 4);
  return (
    <section className="section-sm" style={{ background: "var(--bone)" }} data-screen-label="04 Tennis">
      <div className="wrap">
        <div className="sec-head" style={{ marginBottom: 32 }}>
          <div>
            <div className="mono-cap label">— Trending</div>
            <h2 className="h-2">Tennis &amp; statement bracelets</h2>
          </div>
          <button className="btn-text">View 118 bracelets →</button>
        </div>
        <div className="feat-row">
          {featured.map(p => (
            <article key={p.id} className="feat-card" onClick={() => onOpen(p)}>
              <img src={p.img} alt="" />
              <div className="feat-name">{p.name}</div>
              <div className="feat-price tabular">AED {fmt(p.price)} · {p.metal}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------- editorial bento (custom design + bullion) ----------------------
function BentoSection({ onBook, onOpen }) {
  const bullion = window.PRODUCTS.find(p => p.id === "u1");
  return (
    <section className="section" data-screen-label="05 Bento">
      <div className="wrap">
        <div className="bento">
          <div className="bento-hero">
            <div>
              <div className="badge">Custom design</div>
              <h3 className="serif">Bring us a sketch, a stone, a <span className="ital">memory.</span></h3>
              <p>From the first sketch to the final polish, our master jewellers will craft the piece you've been picturing — sixty minutes with our designer, then we build it from the gold up.</p>
            </div>
            <div className="bh-actions">
              <button className="btn btn-gold" onClick={onBook}><span>Book a designer</span><span className="btn-icon-arrow" /></button>
              <button className="btn btn-ghost">The process →</button>
            </div>
            <div className="bh-img">
              <img src="media/ring-emerald.webp" alt="" />
            </div>
          </div>
          <div className="bento-side">
            <div className="bento-card bullion" onClick={() => onOpen(bullion)}>
              <div>
                <div className="mono-cap" style={{ color: "var(--gold-soft)" }}>— Investment grade</div>
                <h4>Gold Bullion 50g · 999.9 fine</h4>
              </div>
              <div>
                <div className="tabular serif" style={{ fontSize: 28, color: "var(--gold-soft)" }}>AED 28,700</div>
                <div className="small">Assay certified · stocked daily</div>
              </div>
              <div className="bc-img">
                <img src="media/gold-bar-bullion-50g.webp" alt="" />
              </div>
            </div>
            <div className="bento-card" onClick={() => onOpen(window.PRODUCTS.find(p => p.id === "b9"))}>
              <div>
                <div className="mono-cap label">— High Jewellery</div>
                <h4>Sapphire Bloom Bracelet</h4>
              </div>
              <div>
                <div className="tabular serif" style={{ fontSize: 24, color: "var(--gold-deep)" }}>AED 45,000</div>
                <div className="small">One-of-a-kind · enquire</div>
              </div>
              <div className="bc-img">
                <img src="media/highjewellery-sapphire-bloom-bracelet.webp" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------- gifts by price ----------------------
function GiftsSection() {
  return (
    <section className="section" data-screen-label="06 Gifts">
      <div className="wrap">
        <div className="sec-head" style={{ marginBottom: 32 }}>
          <div>
            <div className="mono-cap label">— Gift Finder</div>
            <h2 className="h-2">By the budget you have in mind.</h2>
          </div>
          <button className="btn-text">298 gift ideas →</button>
        </div>
        <div className="gifts-grid">
          {window.GIFT_BANDS.map((g, i) => (
            <article key={i} className="gift-band">
              <div>
                <div className="gb-from">{g.from} AED</div>
                <div className="gb-amt tabular"><span className="ccy">AED</span>{g.amount}</div>
                <div className="gb-count">{g.count} · {g.anchor}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "flex-end" }}>
                <span className="arrow-circle">→</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------- instagram (shoppable mock) ----------------------
function InstagramSection({ onOpen }) {
  const tiles = [
    { p: window.PRODUCTS.find(p => p.id === "r2"), likes: "2,431" },
    { p: window.PRODUCTS.find(p => p.id === "b2"), likes: "1,894" },
    { p: window.PRODUCTS.find(p => p.id === "n1"), likes: "1,520" },
    { p: window.PRODUCTS.find(p => p.id === "b5"), likes: "987" },
    { p: window.PRODUCTS.find(p => p.id === "p1"), likes: "3,201" },
    { p: window.PRODUCTS.find(p => p.id === "e1"), likes: "748" },
  ];
  return (
    <section className="section" data-screen-label="07 Instagram">
      <div className="wrap">
        <div className="ig-head">
          <div>
            <div className="mono-cap label">— On Instagram</div>
            <h2 className="h-2">As seen on <span className="script">@flashy.jewellery</span></h2>
          </div>
          <div className="ig-handle">
            <b>Follow us</b> · A quarter-million strong
          </div>
        </div>
        <div className="ig-grid">
          {tiles.map((t, i) => (
            <div key={i} className="ig-tile" onClick={() => onOpen(t.p)}>
              <img src={t.p.img} alt="" />
              <div className="ig-hearts">♥ {t.likes}</div>
              <div className="ig-overlay">
                <div className="igo-name">{t.p.name}</div>
                <div className="igo-shop">Shop AED {fmt(t.p.price)} →</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------- testimonials ----------------------
function TestimonialsSection() {
  return (
    <section className="testi-wrap section" data-screen-label="08 Testimonials">
      <div className="wrap">
        <div className="sec-head" style={{ marginBottom: 40 }}>
          <div>
            <div className="mono-cap label">— Five Stars, Six Reviews</div>
            <h2 className="h-2">From the Gold Souk floor.</h2>
            <p className="lede">A small but verbatim Tripadvisor sample — 5.0 / 5 across six reviews. No invented testimonials, no inflated counts.</p>
          </div>
          <button className="btn-text">Read all on Tripadvisor →</button>
        </div>
        <div className="testi-grid">
          {window.TESTIMONIALS.map((t, i) => (
            <article key={i} className="testi-card">
              <div>
                <Stars n={t.stars} />
                <blockquote>"{t.body}"</blockquote>
              </div>
              <div>
                <div className="who"><b>{t.who}</b> · {t.date}</div>
                <div className="testi-source">{t.src}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------- visit ----------------------
function VisitSection({ onBook }) {
  return (
    <section data-screen-label="09 Visit">
      <div className="visit-grid">
        <div className="visit-info">
          <div className="mono-cap" style={{ color: "var(--gold-soft)" }}>— Visit us</div>
          <h2 className="h-1" style={{ marginTop: 8 }}>Find us in <span className="ital">the Souk.</span></h2>
          <p className="lede" style={{ color: "rgba(250,246,238,0.6)", marginTop: 20, maxWidth: 460 }}>
            We've kept the same shop on Sikkat Al Khail Road for twenty-one years. Walk in, tap on WhatsApp, or book a private appointment — Lea or Ghaith will be expecting you.
          </p>
          <dl>
            <dt>Address</dt>
            <dd>Gold Souk, Sikkat Al Khail Rd<br/>Deira, Dubai — UAE<br/><span className="small">Near Gate 1, look for the gold script.</span></dd>
            <dt>Hours</dt>
            <dd>Sat — Thu · 09:00 – 21:00<br/>Friday · 12:00 – 21:00</dd>
            <dt>WhatsApp</dt>
            <dd>+971 56 126 8540<br/><span className="small">English · Arabic · Hindi · Tagalog</span></dd>
            <dt>Email</dt>
            <dd>hello@flashyjewellery.com</dd>
          </dl>
          <div className="visit-actions">
            <button className="btn btn-gold" onClick={onBook}><span>Book an appointment</span><span className="btn-icon-arrow" /></button>
            <a className="btn btn-ghost" href="https://maps.app.goo.gl/moBkMe9Htjtt4ewH8" target="_blank" rel="noopener">Open in maps</a>
          </div>
        </div>
        <div className="visit-map">
          <iframe
            title="Flashy Jewellery location"
            src="https://www.google.com/maps?q=Flashy%20Jewellery%20Gold%20Souk%20Sikkat%20Al%20Khail%20Road%20Deira%20Dubai&z=16&output=embed"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
          <svg className="map-svg" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M40 0 L0 0 0 40" fill="none" stroke="rgba(20,17,14,0.04)" strokeWidth="1" />
              </pattern>
            </defs>
            <rect width="600" height="600" fill="var(--bone)" />
            <rect width="600" height="600" fill="url(#grid)" />
            {/* roads */}
            <path d="M0 240 Q 300 200 600 280" stroke="rgba(20,17,14,0.10)" strokeWidth="42" fill="none" />
            <path d="M0 240 Q 300 200 600 280" stroke="var(--ivory)" strokeWidth="36" fill="none" />
            <path d="M180 0 Q 240 300 200 600" stroke="rgba(20,17,14,0.10)" strokeWidth="28" fill="none" />
            <path d="M180 0 Q 240 300 200 600" stroke="var(--ivory)" strokeWidth="24" fill="none" />
            <path d="M380 0 L 360 600" stroke="rgba(20,17,14,0.08)" strokeWidth="22" fill="none" />
            <path d="M380 0 L 360 600" stroke="var(--ivory)" strokeWidth="18" fill="none" />
            {/* blocks */}
            <rect x="50" y="320" width="100" height="60" fill="rgba(20,17,14,0.05)" />
            <rect x="60" y="400" width="90" height="80" fill="rgba(20,17,14,0.04)" />
            <rect x="230" y="320" width="100" height="50" fill="rgba(201,161,74,0.12)" stroke="var(--gold)" strokeWidth="1" />
            <rect x="230" y="380" width="100" height="70" fill="rgba(20,17,14,0.04)" />
            <rect x="400" y="320" width="160" height="80" fill="rgba(20,17,14,0.05)" />
            <rect x="420" y="430" width="120" height="60" fill="rgba(20,17,14,0.04)" />
            {/* labels */}
            <text x="100" y="354" textAnchor="middle" fontSize="9" fill="rgba(20,17,14,0.5)" fontFamily="Inter">SOUK</text>
            <text x="280" y="350" textAnchor="middle" fontSize="9" fill="var(--gold-deep)" fontFamily="Inter" fontWeight="600">FLASHY</text>
            <text x="480" y="364" textAnchor="middle" fontSize="9" fill="rgba(20,17,14,0.5)" fontFamily="Inter">DEIRA</text>
            <text x="80" y="225" fontSize="9" fill="rgba(20,17,14,0.45)" fontFamily="Inter">Sikkat Al Khail Rd</text>
          </svg>
          <div className="map-pin">
            <span className="pin-dot" />
            <span className="pin-label">Flashy &amp; Co. · Gate 1</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------- footer ----------------------
function Footer() {
  return (
    <footer className="footer" data-screen-label="10 Footer">
      <div className="wrap">
        <div className="wordmark serif">Flashy <span className="amp">&amp;</span> Co.</div>
        <div className="footer-grid">
          <div>
            <h5>The Newsletter</h5>
            <p style={{ fontSize: 13.5, margin: 0, color: "rgba(250,246,238,0.6)" }}>Drops, restocks and Gold Souk stories. We send one beautiful email a month — no more.</p>
            <div className="news-input">
              <input type="email" placeholder="your@email.com" />
              <button>→</button>
            </div>
          </div>
          <div>
            <h5>Shop</h5>
            <ul>
              <li><a>Engagement Rings</a></li>
              <li><a>Tennis Bracelets</a></li>
              <li><a>Earrings</a></li>
              <li><a>Pendants &amp; Necklaces</a></li>
              <li><a>Men's Jewellery</a></li>
              <li><a>Gold Bullion</a></li>
            </ul>
          </div>
          <div>
            <h5>The House</h5>
            <ul>
              <li><a>Our Atelier</a></li>
              <li><a>Custom Design</a></li>
              <li><a>Certification</a></li>
              <li><a>After-sales &amp; Repair</a></li>
              <li><a>Sustainability</a></li>
            </ul>
          </div>
          <div>
            <h5>Visit &amp; Care</h5>
            <ul>
              <li><a>Find the boutique</a></li>
              <li><a>Book a consultation</a></li>
              <li><a>WhatsApp +971 56 126 8540</a></li>
              <li><a>Shipping &amp; returns</a></li>
              <li><a>Care guide</a></li>
            </ul>
          </div>
          <div>
            <h5>Follow</h5>
            <ul>
              <li><a>Instagram · @flashy.jewellery</a></li>
              <li><a>TikTok</a></li>
              <li><a>YouTube</a></li>
              <li><a>Facebook</a></li>
              <li><a>Pinterest</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Flashy Jewellery LLC · Gold Souk, Deira, Dubai · VAT 100-xxxx-xxxx</span>
          <div className="payments">
            <span className="payment-pill">VISA</span>
            <span className="payment-pill">Mastercard</span>
            <span className="payment-pill">Amex</span>
            <span className="payment-pill">Apple Pay</span>
            <span className="payment-pill">Tabby</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------------------- modals ----------------------
function QuickView({ p, onClose, onAdd, onBook }) {
  if (!p) return null;
  const waMsg = encodeURIComponent(`Hi Flashy, I'd like to know more about ${p.name} (AED ${fmt(p.price)}).`);
  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close"><IconClose /></button>
        <div className="qv-img"><img src={p.img} alt="" /></div>
        <div className="qv-body">
          <div className="qv-cert">{p.cert}</div>
          <h3>{p.name}</h3>
          <div className="qv-price tabular"><span className="ccy">AED</span>{fmt(p.price)}</div>
          <p style={{ margin: 0, color: "var(--ash)", fontSize: 14, lineHeight: 1.55 }}>
            A signature piece from our atelier in the Dubai Gold Souk. Comes with the original certificate, a presentation box, and lifetime cleaning &amp; polishing.
          </p>
          <dl className="qv-specs">
            <div><dt>Metal</dt><dd>{p.metal}</dd></div>
            <div><dt>Stone</dt><dd>{p.stone}</dd></div>
            <div><dt>Certification</dt><dd>{p.cert}</dd></div>
            <div><dt>Origin</dt><dd>Dubai Gold Souk</dd></div>
          </dl>
          <div className="qv-actions">
            <button className="btn" onClick={() => onAdd(p)}>Add to bag</button>
            <button className="btn btn-ghost" onClick={() => onBook(p)}>Book a viewing</button>
          </div>
          <a className="qv-wa" href={`https://wa.me/971561268540?text=${waMsg}`} target="_blank" rel="noopener">
            <IconWhatsApp size={16} /> Enquire on WhatsApp
          </a>
        </div>
      </div>
    </div>
  );
}

function BookingModal({ open, onClose, onDone, prefill }) {
  const [mode, setMode] = useState("instore");
  const [service, setService] = useState("engagement");
  const [slot, setSlot] = useState("4:00 PM");
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [done, setDone] = useState(false);
  const slots = ["11:00 AM", "1:30 PM", "4:00 PM", "6:30 PM"];

  useEffect(() => { if (open) { setDone(false); } }, [open]);
  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    setDone(true);
    if (onDone) onDone();
  };

  return (
    <div className="overlay" onClick={onClose}>
      <div className="modal modal-narrow" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close"><IconClose /></button>
        {done ? (
          <div className="book-confirm">
            <div className="check"><IconCheck /></div>
            <h3 className="serif" style={{ fontSize: 32, margin: 0 }}>You're booked.</h3>
            <p style={{ color: "var(--ash)", maxWidth: 340 }}>
              We'll send a WhatsApp confirmation to {phone || "your number"} within the hour. {prefill ? `Your piece — ${prefill.name} — will be ready for viewing.` : ""}
            </p>
            <button className="btn" onClick={onClose}>Close</button>
          </div>
        ) : (
          <form className="book-body" onSubmit={submit}>
            <div className="book-eyebrow">Private consultation</div>
            <h3>Book your time with us.</h3>
            <p>30 – 60 minutes with one of our diamond stylists. No obligation.</p>
            {prefill && (
              <div style={{ background: "var(--bone)", padding: "14px 16px", marginBottom: 18, display: "flex", gap: 14, alignItems: "center" }}>
                <img src={prefill.img} alt="" style={{ width: 50, height: 50, objectFit: "contain", mixBlendMode: "multiply" }} />
                <div style={{ fontSize: 13 }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 16 }}>{prefill.name}</div>
                  <div className="small">Reserved for your viewing · AED {fmt(prefill.price)}</div>
                </div>
              </div>
            )}
            <div className="book-tabs">
              <button type="button" className="book-tab" data-active={mode === "instore"} onClick={() => setMode("instore")}>
                <div className="bt-label">In-store</div>
                <div className="bt-meta">45 – 60 min · Dubai Gold Souk</div>
              </button>
              <button type="button" className="book-tab" data-active={mode === "online"} onClick={() => setMode("online")}>
                <div className="bt-label">Online</div>
                <div className="bt-meta">30 – 45 min · Zoom / Google Meet</div>
              </button>
            </div>
            <div className="field-grid">
              <div className="field">
                <label>Service</label>
                <select value={service} onChange={(e) => setService(e.target.value)}>
                  <option value="engagement">Engagement Ring · 60 min</option>
                  <option value="couples">Couple Rings · 45 min</option>
                  <option value="styling">Diamond Styling · 45 min</option>
                  <option value="gold">Gold Selection · 30 min</option>
                  <option value="custom">Custom Design · 60 min</option>
                </select>
              </div>
              <div className="field">
                <label>Date</label>
                <input type="date" defaultValue="2026-05-24" />
              </div>
            </div>
            <label style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ash)" }}>Available times</label>
            <div className="book-slots">
              {slots.map(s => (
                <button type="button" key={s} className="slot" data-active={slot === s} onClick={() => setSlot(s)}>{s}</button>
              ))}
            </div>
            <div className="field-grid">
              <div className="field">
                <label>Your name</label>
                <input value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Aaliyah" required />
              </div>
              <div className="field">
                <label>WhatsApp</label>
                <input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="+971 50 000 0000" required />
              </div>
            </div>
            <div className="book-submit-row">
              <button type="submit" className="btn">Confirm appointment</button>
              <span className="small">No payment now · we'll confirm via WhatsApp.</span>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

function CartDrawer({ open, onClose, items, onQty, onRemove, onBook }) {
  if (!open) return null;
  const subtotal = items.reduce((s, i) => s + i.p.price * i.qty, 0);
  const freeShip = subtotal >= 2000;
  return (
    <>
      <div className="overlay" onClick={onClose} style={{ background: "rgba(20,17,14,0.4)" }} />
      <aside className="drawer">
        <div className="drawer-head">
          <h3>Your bag ({items.reduce((s, i) => s + i.qty, 0)})</h3>
          <button className="icon-btn" onClick={onClose}><IconClose /></button>
        </div>
        <div className="drawer-body">
          {items.length === 0 ? (
            <div className="cart-empty">
              <div className="h-3">Your bag is empty.</div>
              <p>Begin with our engagement collection, or book a private consultation with our stylist.</p>
              <button className="btn" style={{ marginTop: 12 }} onClick={onClose}>Continue shopping</button>
            </div>
          ) : items.map(({ p, qty }) => (
            <div key={p.id} className="cart-item">
              <div className="ci-img"><img src={p.img} alt="" /></div>
              <div>
                <div className="ci-name">{p.name}</div>
                <div className="ci-meta">{p.metal} · {p.cert}</div>
                <div className="ci-qty">
                  <button onClick={() => onQty(p.id, qty - 1)}>−</button>
                  <span className="tabular">{qty}</span>
                  <button onClick={() => onQty(p.id, qty + 1)}>+</button>
                  <button onClick={() => onRemove(p.id)} style={{ marginLeft: 8, color: "var(--ash)" }}>Remove</button>
                </div>
              </div>
              <div className="ci-price">AED {fmt(p.price * qty)}</div>
            </div>
          ))}
        </div>
        {items.length > 0 && (
          <div className="drawer-foot">
            <div className="subtotal"><span>Subtotal</span><span className="tabular">AED {fmt(subtotal)}</span></div>
            <div className="ship-note">{freeShip ? "✓ Complimentary worldwide shipping" : `AED ${fmt(2000 - subtotal)} away from free worldwide shipping`}</div>
            <div className="subtotal total"><span>Total</span><span className="tabular">AED {fmt(subtotal)}</span></div>
            <div className="drawer-actions">
              <button className="btn">Secure checkout</button>
              <button className="btn btn-ghost" onClick={onBook}>Book a viewing instead</button>
            </div>
          </div>
        )}
      </aside>
    </>
  );
}

function WhatsAppFab() {
  return (
    <a className="wa-fab" href="https://wa.me/971561268540?text=Hi%20Flashy%2C%20I%27d%20like%20a%20consultation" target="_blank" rel="noopener">
      <IconWhatsApp /> Chat on WhatsApp
    </a>
  );
}

function Toast({ msg }) {
  if (!msg) return null;
  return <div className="toast"><span className="check"><IconCheck size={16} /></span> {msg}</div>;
}

// Expose components
Object.assign(window, {
  UtilityBar, Nav, Hero, TrustStrip, CategoriesSection, EngagementSection,
  TennisFeature, BentoSection, GiftsSection, InstagramSection, TestimonialsSection,
  VisitSection, Footer, QuickView, BookingModal, CartDrawer, WhatsAppFab, Toast,
  ProductCard, Price, Stars,
});