// All main page sections — Hero, Trust, Collections, Diamonds, Bespoke, Boutiques, Testimonials, Heritage, Footer

// ====================== HERO ======================
const HERO_IMAGES = {
  storefront: 'assets/boutique-storefront.webp',
  interior: 'assets/boutique-interior.webp',
  jewel1: 'assets/hero-4.webp',
  jewel2: 'assets/hero-1.webp',
};

const HERO_VARIANTS = {
  storefront: {
    img: HERO_IMAGES.storefront,
    headline: <React.Fragment>Dubai's diamond house<br/><em>since</em> nineteen sixty-six.</React.Fragment>,
    caption: 'Deira Gold Souq · Gold & Diamond Park · Madinat Jumeirah',
  },
  interior: {
    img: HERO_IMAGES.interior,
    headline: <React.Fragment>The bench. <em>The boutique.</em><br/>The benchmark since 1966.</React.Fragment>,
    caption: 'Designed in-house. Set in-house. Hand-finished in-house.',
  },
  jewel: {
    img: HERO_IMAGES.jewel1,
    headline: <React.Fragment>Certified diamonds, <em>crafted</em> in Dubai since 1966.</React.Fragment>,
    caption: 'Engagement · Wedding & Eternity · Bespoke',
  },
};

const Hero = ({ variant = 'storefront', onBook }) => {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS.storefront;
  return (
    <section className="mm-hero" id="top">
      <div className="mm-hero-bg" style={{ backgroundImage: `url(${v.img})` }} />
      <div className="mm-hero-vignette" />
      <div className="mm-hero-top">
        <div>EST. MCMLXVI &nbsp;·&nbsp; DUBAI, U.A.E.</div>
        <div className="mm-hero-top-right">
          <div>House of B. V. Mamiya</div>
          <div style={{ opacity: 0.6, marginTop: 4 }}>Three boutiques · One bench</div>
        </div>
      </div>
      <div className="mm-hero-inner">
        <div>
          <h1 className="mm-hero-title">{v.headline}</h1>
          <div className="mm-hero-sub">{v.caption}</div>
          <div className="mm-hero-cta">
            <Btn variant="gold" onClick={onBook}>Book a Private Consultation <Icon name="arrow" size={14} /></Btn>
            <Btn variant="ghost-on-dark" href="https://wa.me/971554758003"><Icon name="whatsapp" size={14} /> WhatsApp Us</Btn>
          </div>
        </div>
      </div>
      <div className="mm-hero-bottom-meta">
        <div>Scroll — The House</div>
        <div>Tripadvisor 4.8 / 171 · #28 of 905 Shopping in Dubai</div>
      </div>
    </section>
  );
};

// ====================== TRUST STRIP ======================
const TrustStrip = () => (
  <section className="mm-trust">
    <div className="mm-trust-inner">
      <div className="mm-trust-cell">
        <div className="mm-trust-label">Tripadvisor</div>
        <div className="mm-trust-value">
          4.8 <span className="mm-stars">
            {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={14} />)}
          </span>
        </div>
        <div className="mm-trust-foot">171 reviews · #28 of 905 Shopping in Dubai</div>
      </div>
      <div className="mm-trust-cell">
        <div className="mm-trust-label">Established</div>
        <div className="mm-trust-value">1966</div>
        <div className="mm-trust-foot">Nearly sixty years on the bench.</div>
      </div>
      <div className="mm-trust-cell">
        <div className="mm-trust-label">Manufacture</div>
        <div className="mm-trust-value">In-house</div>
        <div className="mm-trust-foot">AutoCAD craftsmen. Dubai-set, Dubai-finished.</div>
      </div>
      <div className="mm-trust-cell">
        <div className="mm-trust-label">Authentication</div>
        <div className="mm-trust-value">100% Certified</div>
        <div className="mm-trust-foot">Authentication and warranty with every piece.</div>
      </div>
    </div>
  </section>
);

// ====================== COLLECTIONS ======================
const SectionHead = ({ eyebrow, n, title, kicker, dark }) => (
  <div className="mm-section-head">
    <div className="mm-section-eyebrow-row">
      <Eyebrow n={n}>{eyebrow}</Eyebrow>
      <h2>{title}</h2>
    </div>
    {kicker && <p>{kicker}</p>}
  </div>
);

const Collections = ({ onProductOpen, onBook }) => {
  const [active, setActive] = React.useState('engagement');
  const col = COLLECTIONS.find(c => c.id === active);
  return (
    <section className="mm-section" id="collections">
      <div className="mm-container">
        <SectionHead
          n="01"
          eyebrow="The Collections"
          title={<React.Fragment>What lives in <em className="italic-accent">the cases.</em></React.Fragment>}
          kicker="From the four-thousand-dirham princess solitaire to the twenty-eight-thousand-dirham sandstorm necklace set. Prices indicative — confirm in-boutique."
        />
        <div className="mm-tabs" role="tablist">
          {COLLECTIONS.map(c => (
            <button key={c.id}
              className={`mm-tab ${active === c.id ? 'on' : ''}`}
              onClick={() => setActive(c.id)}
              role="tab" aria-selected={active === c.id}>
              {c.label}
            </button>
          ))}
        </div>
        <div className="mm-product-grid">
          {col.items.map(it => (
            <div key={it.sku} className="mm-product" onClick={() => onProductOpen(it)}>
              <div className="mm-product-img">
                <img src={it.img} alt={it.name} loading="lazy" />
                <span className="mm-product-sku">{it.sku}</span>
                <div className="mm-product-quick">
                  <Btn variant="gold" small onClick={(e) => { e.stopPropagation(); onBook(); }}>Enquire</Btn>
                  <Btn variant="ghost-on-dark" small href="https://wa.me/971554758003" onClick={(e) => e.stopPropagation()}><Icon name="whatsapp" size={12} /> WhatsApp</Btn>
                </div>
              </div>
              <div>
                <div className="mm-product-name">{it.name}</div>
                <div className="mm-product-meta">
                  <span className="mm-product-shape">{it.shape} cut</span>
                  <span className="mm-product-price">{formatAED(it.price)} <small>from</small></span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 56 }}>
          <Btn variant="ghost" href="#bespoke">View the Bespoke Service <Icon name="arrow" size={14} /></Btn>
        </div>
      </div>
    </section>
  );
};

// ====================== DIAMONDS ======================
const Diamonds = ({ onBook }) => {
  const [active, setActive] = React.useState('round');
  const shape = SHAPES.find(s => s.id === active);
  return (
    <section className="mm-section" id="diamonds" style={{ background: 'var(--paper)' }}>
      <div className="mm-container">
        <SectionHead
          n="02"
          eyebrow="The Diamonds"
          title={<React.Fragment>Ten shapes. <em className="italic-accent">One bench.</em></React.Fragment>}
          kicker="Natural and lab-grown stones from selected cutters. Every piece is supplied with authentication and our lifetime warranty."
        />
        <div className="mm-shapes">
          <div className="mm-shape-grid" role="tablist">
            {SHAPES.map(s => (
              <button key={s.id}
                className={`mm-shape-cell ${active === s.id ? 'on' : ''}`}
                onClick={() => setActive(s.id)}
                aria-label={s.name}
                role="tab" aria-selected={active === s.id}>
                <img src={s.img} alt={s.name} />
                <span className="mm-shape-name">{s.name.split(' ')[0]}</span>
              </button>
            ))}
          </div>
          <div className="mm-shape-info">
            <div className="mm-shape-info-text">
              <div className="mm-shape-info-eyebrow">Shape · {String(SHAPES.findIndex(x => x.id === active) + 1).padStart(2, '0')} of 10</div>
              <h3>{shape.name}</h3>
              <p>{shape.note}</p>
              <div className="mm-shape-specs">
                <div><div className="lbl">Origin</div><div className="val">Natural / Lab</div></div>
                <div><div className="lbl">Setting</div><div className="val">18K Gold / Pt</div></div>
                <div><div className="lbl">Carat range</div><div className="val">0.30 — 5.00+</div></div>
                <div><div className="lbl">Cert.</div><div className="val">Authenticated</div></div>
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 4, flexWrap: 'wrap' }}>
                <Btn variant="gold" small onClick={onBook}>Discuss this shape</Btn>
                <Btn variant="ghost-on-dark" small href="https://wa.me/971554758003"><Icon name="whatsapp" size={12} /> WhatsApp</Btn>
              </div>
            </div>
            <div className="mm-shape-info-art">
              <img className="mm-shape-big" src={shape.img} alt={shape.name} />
              <div className="mm-shape-info-art-cap">Plan view · approx.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ====================== BESPOKE ======================
const Bespoke = ({ onBook }) => (
  <section className="mm-section mm-bespoke" id="bespoke">
    <div className="mm-container">
      <div className="mm-bespoke-grid">
        <div className="mm-bespoke-art" style={{ backgroundImage: 'url(assets/hero-1.webp)' }}>
          <div className="mm-bespoke-art-label">The Bench · Dubai</div>
        </div>
        <div>
          <Eyebrow n="03">The Bespoke Service</Eyebrow>
          <h2 style={{ marginTop: 18 }}>
            Bring a sketch, <em className="italic-accent">a picture,</em><br/>or simply an idea.
          </h2>
          <p className="mm-bespoke-lede">
            Our AutoCAD craftsmen draft your piece in-store. In-boutique designs are realised
            in under an hour. The setting, the soldering, the polish — all done on our Dubai
            bench. We don't sub-contract the work.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
            <Btn variant="primary" onClick={onBook}>Request a Custom Design <Icon name="arrow" size={14} /></Btn>
            <Btn variant="ghost" href="https://wa.me/971554758003"><Icon name="whatsapp" size={14} /> WhatsApp the Bench</Btn>
          </div>
          <div className="mm-process">
            {PROCESS.map(p => (
              <div key={p.n} className="mm-process-step">
                <div className="mm-process-n">{p.n}</div>
                <div className="mm-process-t">{p.t}</div>
                <div className="mm-process-d">{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ====================== BOUTIQUES ======================
const Boutiques = ({ onBook }) => {
  const [active, setActive] = React.useState('deira');
  const b = BOUTIQUES.find(x => x.id === active);
  return (
    <section className="mm-section mm-boutique-section" id="boutiques">
      <div className="mm-container">
        <SectionHead
          n="04"
          eyebrow="The Boutiques"
          title={<React.Fragment>Four addresses. <em className="italic-accent">One family.</em></React.Fragment>}
          kicker="The Souq, the Park, the Madinat. Same bench, same warranty, same people you've been seeing for forty years."
        />
        <div className="mm-boutique-grid">
          <div className="mm-boutique-tabs">
            {BOUTIQUES.map((bt, i) => (
              <button key={bt.id}
                className={`mm-boutique-tab ${active === bt.id ? 'on' : ''}`}
                onClick={() => setActive(bt.id)}
                aria-pressed={active === bt.id}>
                <span className="mm-bt-n">{String(i + 1).padStart(2, '0')}</span>
                <span>
                  <div className="mm-bt-name">{bt.name}</div>
                  <div className="mm-bt-sub">{bt.sub}</div>
                </span>
                <span className="mm-bt-arrow"><Icon name="arrow" size={14} /></span>
              </button>
            ))}
          </div>
          <div className="mm-boutique-detail">
            <BoutiqueMap active={active} />
            <div className="mm-boutique-detail-img" style={{ backgroundImage: `url(${b.image})` }}>
              <div className="mm-boutique-badge">{b.badge}</div>
            </div>
            <div className="mm-boutique-detail-body">
              <div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 36, lineHeight: 1.1 }}>{b.name}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-mute)', marginTop: 6 }}>{b.sub}</div>
              </div>
              <div className="mm-boutique-row">
                <span className="mm-br-icon"><Icon name="pin" size={18} /></span>
                <div>
                  <div className="mm-br-label">Address</div>
                  <div className="mm-br-val">{b.address}</div>
                </div>
              </div>
              <div className="mm-boutique-row">
                <span className="mm-br-icon"><Icon name="phone" size={18} /></span>
                <div>
                  <div className="mm-br-label">Hours · Phone · WhatsApp</div>
                  <div className="mm-br-val">
                    {b.hours}<br/>
                    <a href={b.telHref}>{b.tel}</a> &middot; <a href={b.waHref}>{b.whatsapp}</a>
                  </div>
                  <div className="mm-br-note">{b.hoursNote}</div>
                </div>
              </div>
              <div className="mm-boutique-actions">
                <Btn variant="primary" small onClick={onBook}>Book a Visit</Btn>
                <Btn variant="ghost" small href={b.waHref}><Icon name="whatsapp" size={12} /> WhatsApp</Btn>
                <Btn variant="ghost" small href={b.telHref}><Icon name="phone" size={12} /> Call</Btn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const BoutiqueMap = ({ active }) => {
  const boutique = BOUTIQUES.find(b => b.id === active) || BOUTIQUES[0];
  const query = encodeURIComponent(`${boutique.name} ${boutique.address}`);
  return (
    <div className="mm-map">
      <iframe
        title={`${boutique.name} location`}
        src={`https://www.google.com/maps?q=${query}&z=16&output=embed`}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
      />
      <span className="mm-map-pin-label">{boutique.name}</span>
    </div>
  );
};

// Retained only as an unused design reference; the hosted demo renders live map embeds.
const BoutiqueMapSketch = ({ active }) => (
  <div className="mm-map" aria-hidden="true">
    <svg className="mm-map-svg" viewBox="0 0 600 220" preserveAspectRatio="none">
      <rect width="600" height="220" fill="var(--ivory-deep)" />
      {/* coastline */}
      <path d="M0,120 C60,80 140,90 220,70 C300,52 360,80 420,60 C480,42 540,72 600,52 L600,0 L0,0 Z" fill="var(--paper)" opacity="0.7" />
      <path d="M0,120 C60,80 140,90 220,70 C300,52 360,80 420,60 C480,42 540,72 600,52"
            stroke="var(--gold)" strokeWidth="0.5" fill="none" opacity="0.7" />
      {/* roads */}
      <path d="M0,140 L600,90" stroke="var(--line-strong)" strokeWidth="0.4" strokeDasharray="3 4" fill="none" />
      <path d="M0,180 L600,160" stroke="var(--line-strong)" strokeWidth="0.4" strokeDasharray="3 4" fill="none" />
      <path d="M300,0 L260,220" stroke="var(--line-strong)" strokeWidth="0.4" strokeDasharray="3 4" fill="none" />
      <text x="36" y="210" fontFamily="var(--mono)" fontSize="8" letterSpacing="2" fill="var(--ink-mute)">DUBAI · U.A.E.</text>
      <text x="540" y="210" fontFamily="var(--mono)" fontSize="8" letterSpacing="2" fill="var(--ink-mute)" textAnchor="end">N →</text>
    </svg>
    {BOUTIQUES.map(b => (
      <React.Fragment key={b.id}>
        <span className={`mm-map-pin ${active === b.id ? 'on' : ''}`}
              style={{ left: `${b.pin.x * 100}%`, top: `${b.pin.y * 100}%` }} />
        {active === b.id && (
          <span className="mm-map-pin-label"
                style={{ left: `${b.pin.x * 100}%`, top: `${b.pin.y * 100}%` }}>
            {b.name}
          </span>
        )}
      </React.Fragment>
    ))}
  </div>
);

// ====================== TESTIMONIALS ======================
const Testimonials = () => {
  const [idx, setIdx] = React.useState(0);
  const r = REVIEWS[idx];
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % REVIEWS.length), 7000);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="mm-section mm-testimonials" id="testimonials">
      <div className="mm-container">
        <SectionHead
          n="05"
          eyebrow="The Word on the Souq"
          title={<React.Fragment>Forty years of <em className="italic-accent">repeat custom.</em></React.Fragment>}
          kicker="Real, dated reviews from Tripadvisor. The names — Abhijeet, Joyce, Sam, Joy, Rohan — are still on the floor."
        />
        <div className="mm-testimonial-stage">
          <div>
            <div className="mm-testimonial">{r.quote}</div>
            <div className="mm-testimonial-meta">
              <span className="who">{r.who}</span>
              <span className="when">{r.when}</span>
              <span className="src">via {r.source}</span>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
            <div className="mm-testimonial-dots">
              {REVIEWS.map((_, i) => (
                <button key={i} className={`mm-testimonial-dot ${i === idx ? 'on' : ''}`} onClick={() => setIdx(i)} aria-label={`Review ${i+1}`} />
              ))}
            </div>
            <div className="mm-testimonial-nav">
              <button onClick={() => setIdx((idx - 1 + REVIEWS.length) % REVIEWS.length)} aria-label="Previous"><Icon name="arrowL" size={16} /></button>
              <button onClick={() => setIdx((idx + 1) % REVIEWS.length)} aria-label="Next"><Icon name="arrow" size={16} /></button>
            </div>
          </div>
        </div>
        <div className="mm-testimonial-foot">
          <div className="mm-trip-trust">
            <span className="num">4.8</span>
            <div>
              <div className="mm-stars" style={{ color: 'var(--gold-soft)' }}>
                {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={14} />)}
              </div>
              <div className="meta">171 reviews · Tripadvisor</div>
            </div>
          </div>
          <div className="meta" style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.7 }}>
            Ranked #28 of 905 Shopping in Dubai
          </div>
        </div>
      </div>
    </section>
  );
};

// ====================== HERITAGE ======================
const Heritage = () => (
  <section className="mm-section" id="heritage">
    <div className="mm-container">
      <SectionHead
        n="06"
        eyebrow="The House"
        title={<React.Fragment>A single store in Deira, <em className="italic-accent">1966.</em></React.Fragment>}
        kicker="Founded by B. V. Mamiya. Stewarded today by Tony Mamiya, Partner. Family-run; bench-led."
      />
      <div className="mm-heritage-grid">
        <div className="mm-heritage-img" style={{ backgroundImage: 'url(assets/boutique-storefront.webp)' }}>
          <div className="mm-heritage-img-label">The Souq, today</div>
        </div>
        <div className="mm-timeline">
          {TIMELINE.map(t => (
            <div key={t.year} className="mm-timeline-item">
              <div className="mm-timeline-year">{t.year}</div>
              <div>
                <div className="mm-timeline-title">{t.title}</div>
                <div className="mm-timeline-body">{t.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ====================== FOOTER ======================
const Footer = () => (
  <footer className="mm-footer" id="contact">
    <div className="mm-container">
      <div className="mm-footer-grid">
        <div>
          <div className="mm-footer-lockup">
            Mamiya<br/><em className="italic-accent" style={{ color: 'var(--gold-soft)' }}>Jewellers.</em>
            <small>Dubai diamonds since 1966.</small>
          </div>
          <p style={{ opacity: 0.7, fontSize: 14, maxWidth: '36ch' }}>
            B. V. Mamiya Jewellers — Deira Gold Souq, P.O. Box 2378, Dubai, United Arab Emirates.
          </p>
        </div>
        <div>
          <h4>Boutiques</h4>
          <ul>
            <li><a href="#boutiques">Deira Gold Souq</a></li>
            <li><a href="#boutiques">Gold & Diamond Park</a></li>
            <li><a href="#boutiques">Eva — GDP</a></li>
            <li><a href="#boutiques">Eva Gems — Madinat</a></li>
          </ul>
        </div>
        <div>
          <h4>Browse</h4>
          <ul>
            <li><a href="#collections">Engagement</a></li>
            <li><a href="#collections">Wedding & Eternity</a></li>
            <li><a href="#collections">Diamond Jewellery</a></li>
            <li><a href="#diamonds">Shop by Shape</a></li>
            <li><a href="#bespoke">Bespoke Service</a></li>
            <li><a href="#heritage">Heritage</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li><a href="tel:+97142266026">+971 4 226 6026 · Deira</a></li>
            <li><a href="tel:+97143406772">+971 4 340 6772 · GDP</a></li>
            <li><a href="https://wa.me/971554758003">WhatsApp · +971 55 475 8003</a></li>
            <li><a href="mailto:sales@mamiyadiamonds.com">sales@mamiyadiamonds.com</a></li>
            <li><a href="https://www.instagram.com/mamiya_diamonds/">Instagram · @mamiya_diamonds</a></li>
          </ul>
        </div>
      </div>
      <div className="mm-footer-foot">
        <div>&copy; 1966 – 2026 Mamiya Jewellers. All rights reserved.</div>
        <div>Heritage. Trustworthy. Crafted.</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Hero, TrustStrip, Collections, Diamonds, Bespoke, Boutiques, Testimonials, Heritage, Footer });