/* House of Windsor — screen components */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* Reusable: image with placeholder fallback */
function HeroImage({ src, alt, ratio = '4/5', label }) {
  return (
    <div style={{ position: 'relative', aspectRatio: ratio, overflow: 'hidden', background: 'var(--platinum)' }}>
      {src ? (
        <img src={src} alt={alt} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      ) : (
        <div className="img-placeholder" style={{ width: '100%', height: '100%' }}>{label || alt}</div>
      )}
    </div>
  );
}

/* Trust strip with logos */
function TrustStrip({ onBook }) {
  return (
    <div style={{ background: 'var(--royal-blue)', color: 'var(--ivory)', padding: '28px 0' }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
        gap: 24, alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Stars n={5} size={14} />
          <div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{HOWJ.rating.score.toFixed(1)} / 5 on Tripadvisor</div>
            <div style={{ fontSize: 11, opacity: 0.65, letterSpacing: '0.08em' }}>{HOWJ.rating.count} verified reviews</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center', justifyContent: 'center' }}>
          {HOWJ.certifications.map(c => (
            <span key={c} style={{
              fontFamily: 'var(--font-label)', fontSize: 13, letterSpacing: '0.32em',
              padding: '8px 12px', border: '1px solid rgba(247,244,239,0.25)',
              color: 'var(--gold-soft)',
            }}>{c}</span>
          ))}
        </div>
        <div style={{ textAlign: 'right', fontSize: 13 }}>
          <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 4 }}>Visit</div>
          <div>Shop 31, Building 1 · Gold &amp; Diamond Park</div>
        </div>
      </div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   HOME
═══════════════════════════════════════════════════════════════ */
function HomeScreen({ setRoute, onBook }) {
  return (
    <>
      {/* HERO */}
      <section style={{ paddingTop: 40, paddingBottom: 64 }}>
        <div className="container" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center',
        }} >
          <div style={{ minWidth: 0 }}>
            <div className="ornament" style={{ marginBottom: 28 }}>
              <span style={{ fontFamily: 'var(--font-label)', fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase' }}>
                Est. Dubai · Gold &amp; Diamond Park
              </span>
            </div>
            <h1 className="display-xl" style={{ margin: 0 }}>
              Certified diamonds,
              <br />
              <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--gold-deep)' }}>designed personally.</em>
            </h1>
            <p className="body-lg" style={{ maxWidth: 460, marginTop: 28, opacity: 0.85 }}>
              Bespoke engagement rings and fine jewellery by Mehul Joshi, hand-crafted at his bench in the heart of Dubai's Gold &amp; Diamond Park. Every stone certified — GIA, IGI, HRD or IDL.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <button className="btn btn-gold btn-lg" onClick={onBook}>Book a Private Consultation</button>
              <button className="btn btn-ghost btn-lg" onClick={() => setRoute('collections')}>Explore Collections</button>
            </div>
            <div style={{ marginTop: 40 }}>
              <TripadvisorChip />
            </div>
          </div>
          <div style={{ minWidth: 0, position: 'relative' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div style={{ marginTop: 40 }}>
                <HeroImage src="assets/media/images/howj-craftsmanship.webp" alt="A diamond held in tweezers at the workshop bench" ratio="3/4" />
                <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 10, opacity: 0.55 }}>
                  At the bench
                </div>
              </div>
              <div>
                <HeroImage src="assets/media/images/ta-photo3.webp" alt="Round-brilliant solitaire on the hand" ratio="3/4" />
                <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 10, opacity: 0.55 }}>
                  Solitaire 1.20 ct · GIA
                </div>
              </div>
            </div>
            {/* Floating quote */}
            <div className="card" style={{
              position: 'absolute', bottom: -32, left: -32, maxWidth: 320,
              padding: 24, background: 'var(--cream-card)',
            }} >
              <Stars n={5} size={11} />
              <p style={{ margin: '12px 0 12px', fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.4 }}>
                "Mehul and his team went above and beyond — I was over the moon with the valuation."
              </p>
              <div className="meta" style={{ opacity: 0.55 }}>UK client · Oct 2023</div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .container > div { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <TrustStrip onBook={onBook} />

      {/* FEATURED COLLECTIONS */}
      <section>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20, marginBottom: 48 }}>
            <div>
              <div className="eyebrow">The collections</div>
              <h2 className="display-lg" style={{ margin: '8px 0 0' }}>What we make.</h2>
            </div>
            <button onClick={() => setRoute('collections')} className="btn btn-ghost">All collections →</button>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
            {[
              { c: HOWJ.collections[0], span: 6, h: 520 }, // engagement
              { c: HOWJ.collections[3], span: 6, h: 520 }, // earrings
              { c: HOWJ.collections[1], span: 4, h: 380 }, // wedding
              { c: HOWJ.collections[2], span: 4, h: 380 }, // diamond rings
              { c: HOWJ.collections[5], span: 4, h: 380 }, // bracelets
            ].map(({ c, span, h }, i) => (
              <button
                key={c.id}
                onClick={() => setRoute(`collection:${c.id}`)}
                className="collection-tile"
                style={{
                  gridColumn: `span ${span}`,
                  height: h,
                  position: 'relative', overflow: 'hidden',
                  background: 'var(--platinum)',
                  border: 0, padding: 0, textAlign: 'left',
                  cursor: 'pointer',
                }}
              >
                <img src={c.feature || c.image} alt={c.name}
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 700ms ease' }} />
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(180deg, rgba(14,22,38,0.05) 0%, rgba(14,22,38,0.55) 80%)',
                }} />
                <div style={{
                  position: 'absolute', left: 28, right: 28, bottom: 24,
                  color: 'var(--ivory)',
                }} >
                  <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 6 }}>{String(i + 1).padStart(2, '0')}</div>
                  <h3 className="display-sm" style={{ margin: 0, color: 'var(--ivory)', fontFamily: 'var(--font-serif)', fontWeight: 500 }}>{c.name}</h3>
                  <p style={{ margin: '6px 0 0', fontSize: 14, opacity: 0.85 }}>{c.tagline}</p>
                </div>
              </button>
            ))}
          </div>
        </div>
        <style>{`
          .collection-tile:hover img { transform: scale(1.05); }
          @media (max-width: 860px) {
            .container > div[style*="grid-template-columns: repeat(12"] > button { grid-column: span 12 !important; height: 360px !important; }
          }
        `}</style>
      </section>

      {/* BESPOKE TEASER */}
      <section style={{ background: 'var(--royal-blue)', color: 'var(--ivory)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} >
          <div>
            <HeroImage src="assets/media/images/howj-craftsmanship.webp" alt="Mehul setting a stone" ratio="5/4" />
          </div>
          <div>
            <div className="eyebrow" style={{ color: 'var(--champagne-gold)' }}>Tailor-Made</div>
            <h2 className="display-lg" style={{ margin: '8px 0 24px', color: 'var(--ivory)' }}>
              From a pencil sketch to a piece in your hand — in about a week.
            </h2>
            <p className="body-lg" style={{ opacity: 0.85 }}>
              The bespoke commission is what House of Windsor is built for. We sketch, we model in wax, you try it on, and only then do we cast.
            </p>
            <ol style={{ marginTop: 28, padding: 0, listStyle: 'none', display: 'grid', gap: 14 }}>
              {HOWJ.bespokeSteps.slice(0, 5).map((s, i) => (
                <li key={s.n} style={{ display: 'flex', gap: 16, alignItems: 'baseline' }}>
                  <span style={{ fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--gold-soft)', minWidth: 36 }}>{s.n}</span>
                  <span style={{ fontFamily: 'var(--font-label)', letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 13 }}>{s.title}</span>
                  <span style={{ flex: 1, height: 1, background: 'var(--line-dark)', margin: '0 12px', minWidth: 20, alignSelf: 'center' }} />
                  <span style={{ fontSize: 13, opacity: 0.6 }}>{s.detail}</span>
                </li>
              ))}
            </ol>
            <div style={{ marginTop: 32 }}>
              <button className="btn btn-ghost-light" onClick={() => setRoute('bespoke')}>Read the bespoke process →</button>
            </div>
          </div>
        </div>
      </section>

      {/* FOUNDER STRIP */}
      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="eyebrow">Heritage</div>
              <h2 className="display-lg" style={{ margin: '8px 0 24px' }}>Mumbai to Dubai. Over a decade at the bench.</h2>
              <p className="body-lg" style={{ opacity: 0.85 }}>
                Mehul Joshi moved from his hometown of Mumbai to Dubai to open House of Windsor with a single conviction — that a diamond house should be small enough that the owner still sets your stone himself. He still does.
              </p>
              <p className="body" style={{ marginTop: 14, opacity: 0.75 }}>
                Alongside Mehul, you'll meet Vicky (who will guide your design brief) and Kunal (sizing, aftercare and the reason a string of clients have been coming back for more than a decade).
              </p>
              <div style={{ marginTop: 28 }}>
                <button className="btn btn-ghost" onClick={() => setRoute('about')}>Meet the team →</button>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div style={{ marginTop: 32 }}>
                <HeroImage src="assets/media/images/ta-showroom-1.webp" alt="The showroom" ratio="3/4" />
              </div>
              <div className="img-placeholder" style={{ aspectRatio: '3/4' }}>
                Founder portrait<br/>—<br/>Mehul Joshi
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS STRIP */}
      <section style={{ background: 'var(--cream-card)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20, marginBottom: 40 }}>
            <div>
              <div className="eyebrow">In their words</div>
              <h2 className="display-lg" style={{ margin: '8px 0 0' }}>A 5.0 average. 29 reviews.</h2>
              <p className="body" style={{ marginTop: 12, opacity: 0.75, maxWidth: 520 }}>
                A few from the Tripadvisor record. Some of these clients have been with Mehul for more than a decade.
              </p>
            </div>
            <button className="btn btn-ghost" onClick={() => setRoute('testimonials')}>Read all →</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
            {HOWJ.testimonials.slice(0, 3).map(t => (
              <article key={t.author} className="card" style={{ padding: 28 }}>
                <Stars n={t.stars} />
                <div className="eyebrow" style={{ marginTop: 18, fontSize: 10 }}>{t.title}</div>
                <p style={{ fontFamily: 'var(--font-serif)', fontSize: 20, lineHeight: 1.45, margin: '10px 0 24px' }}>
                  "{t.quote}"
                </p>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, opacity: 0.55, letterSpacing: '0.08em' }}>
                  <span>{t.author}</span>
                  <span>{t.date}</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* VISIT TEASER */}
      <section style={{ background: 'var(--midnight)', color: 'var(--ivory)' }}>
        <div className="container" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--champagne-gold)' }}>Visit the showroom</div>
            <h2 className="display-lg" style={{ margin: '8px 0 20px', color: 'var(--ivory)' }}>
              Sheikh Zayed Road, 4th Interchange.
            </h2>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.5, opacity: 0.9 }}>
              {HOWJ.contact.addressLines.map((l, i) => <div key={i}>{l}</div>)}
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-gold" onClick={onBook}>Book Consultation</button>
              <button className="btn btn-ghost-light" onClick={() => setRoute('visit')}>How to find us →</button>
            </div>
          </div>
          <div>
            <HeroImage src="assets/media/images/ta-welcome-storefront.webp" alt="House of Windsor storefront at Gold &amp; Diamond Park" ratio="4/3" />
          </div>
        </div>
      </section>
    </>
  );
}

/* ════════════════════════════════════════════════════════════
   COLLECTIONS INDEX
═══════════════════════════════════════════════════════════════ */
function CollectionsScreen({ setRoute, onBook }) {
  return (
    <>
      <section style={{ paddingTop: 56, paddingBottom: 24 }}>
        <div className="container">
          <div className="eyebrow">All collections</div>
          <h1 className="display-xl" style={{ margin: '12px 0 24px', maxWidth: 900 }}>
            Seven collections, one workshop, every stone certified.
          </h1>
          <p className="body-lg" style={{ maxWidth: 620, opacity: 0.8 }}>
            A working catalogue — pieces shown here are representative of what we make and what we have to hand. Each is an entry point to a private consultation; nothing is sold from this page.
          </p>
        </div>
      </section>
      <section style={{ paddingTop: 32 }}>
        <div className="container">
          <div style={{ display: 'grid', gap: 56 }}>
            {HOWJ.collections.map((c, i) => (
              <article key={c.id} style={{
                display: 'grid',
                gridTemplateColumns: i % 2 === 0 ? '1.2fr 1fr' : '1fr 1.2fr',
                gap: 48, alignItems: 'center',
                paddingBottom: 56, borderBottom: '1px solid var(--line)',
              }} className="collection-row">
                <div style={{ order: i % 2 === 0 ? 1 : 2 }}>
                  <HeroImage src={c.feature || c.image} alt={c.name} ratio={c.shape === 'wide' ? '4/3' : c.shape === 'square' ? '1/1' : '4/5'} />
                </div>
                <div style={{ order: i % 2 === 0 ? 2 : 1 }}>
                  <div className="eyebrow">{String(i + 1).padStart(2, '0')} / 07</div>
                  <h2 className="display-lg" style={{ margin: '8px 0 16px' }}>{c.name}</h2>
                  <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--gold-deep)', margin: 0 }}>
                    {c.tagline}
                  </p>
                  <p className="body" style={{ marginTop: 18, opacity: 0.8 }}>{c.copy}</p>
                  {c.stones && (
                    <div style={{ display: 'flex', gap: 24, marginTop: 22, fontSize: 13, opacity: 0.6, letterSpacing: '0.06em' }}>
                      <span><span className="eyebrow" style={{ marginRight: 8 }}>Stones</span>{c.stones}</span>
                    </div>
                  )}
                  <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                    <button className="btn btn-gold btn-sm" onClick={() => setRoute(`collection:${c.id}`)}>View pieces</button>
                    <button className="btn btn-ghost btn-sm" onClick={() => onBook(c.name)}>Enquire</button>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 860px) {
            .collection-row { grid-template-columns: 1fr !important; }
            .collection-row > div { order: 0 !important; }
          }
        `}</style>
      </section>
    </>
  );
}

/* ════════════════════════════════════════════════════════════
   COLLECTION DETAIL
═══════════════════════════════════════════════════════════════ */
function CollectionDetail({ collectionId, setRoute, onBook }) {
  const c = HOWJ.collections.find(x => x.id === collectionId);
  if (!c) return null;

  // Build a small grid of "pieces" — placeholders that signal what would be shown
  const pieces = buildPieces(c);

  return (
    <>
      <section style={{ paddingTop: 40, paddingBottom: 40 }}>
        <div className="container">
          <button onClick={() => setRoute('collections')} style={{
            background: 'none', border: 0, padding: 0, fontSize: 12, letterSpacing: '0.18em',
            textTransform: 'uppercase', opacity: 0.6, cursor: 'pointer', marginBottom: 28,
          }}>
            ← All collections
          </button>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }} className="detail-hero">
            <div>
              <div className="eyebrow">Collection</div>
              <h1 className="display-xl" style={{ margin: '12px 0 16px' }}>{c.name}</h1>
              <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 26, color: 'var(--gold-deep)', margin: 0 }}>
                {c.tagline}
              </p>
              <p className="body-lg" style={{ marginTop: 22, opacity: 0.8, maxWidth: 520 }}>{c.copy}</p>
              <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-gold" onClick={() => onBook(c.name)}>Enquire about a piece</button>
                <button className="btn btn-ghost" onClick={() => setRoute('bespoke')}>Commission bespoke →</button>
              </div>
            </div>
            <HeroImage src={c.feature || c.image} alt={c.name} ratio="1/1" />
          </div>
        </div>
        <style>{`@media (max-width: 860px) { .detail-hero { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28 }}>
            <h3 className="display-sm">From the showroom</h3>
            <span className="eyebrow">Price on consultation</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 20 }}>
            {pieces.map((p, i) => (
              <article key={i} className="card" style={{ padding: 0, background: '#fff' }}>
                <HeroImage src={p.image} alt={p.name} ratio="1/1" label={p.label} />
                <div style={{ padding: 18 }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, marginBottom: 4 }}>{p.name}</div>
                  <div className="meta" style={{ opacity: 0.55, fontSize: 11 }}>{p.spec}</div>
                  <button onClick={() => onBook(c.name)} style={{
                    marginTop: 14, background: 'none', border: 0, padding: 0,
                    fontFamily: 'var(--font-label)', fontSize: 12, letterSpacing: '0.18em',
                    textTransform: 'uppercase', color: 'var(--gold-deep)',
                    borderBottom: '1px solid var(--champagne-gold)',
                  }}>Enquire</button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--cream-card)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="eyebrow">Not quite right?</div>
            <h3 className="display-md" style={{ margin: '8px 0 16px' }}>Commission your own.</h3>
            <p className="body-lg" style={{ opacity: 0.8 }}>
              Anything you've seen here we can adapt — change the centre stone, the metal, the proportions. Or start from a sketch of your own.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
              <button className="btn btn-gold" onClick={() => setRoute('bespoke')}>Start a bespoke piece</button>
            </div>
          </div>
          <HeroImage src="assets/media/images/howj-craftsmanship.webp" alt="At the bench" ratio="4/3" />
        </div>
      </section>
    </>
  );
}

function buildPieces(c) {
  const baseImg = c.feature || c.image;
  const altImages = [
    'assets/media/images/ta-photo0.webp',
    'assets/media/images/ta-photo1.webp',
    'assets/media/images/ta-photo2.webp',
    'assets/media/images/ta-photo3.webp',
    'assets/media/images/ta-photo4.webp',
    'assets/media/images/ta-jewellery-1.webp',
    'assets/media/images/ta-ring-closeup.webp',
  ];
  const cat = c.name;
  const samples = {
    'Engagement Rings': [
      { name: 'Solitaire Brilliante', spec: '1.20 ct · GIA · Platinum', image: altImages[3] },
      { name: 'Halo Cushion', spec: '1.50 ct · IGI · 18k White', image: altImages[6] },
      { name: 'Three-Stone Pavé', spec: '0.90 ct centre · HRD', image: altImages[2] },
      { name: 'Tapered Baguette', spec: '1.05 ct · GIA · Platinum', image: altImages[4] },
    ],
    'Wedding & Eternity Bands': [
      { name: 'Plain Court · 3mm', spec: 'Platinum or 18k', image: 'assets/media/images/howj-wedding-rings.webp' },
      { name: 'Pavé Half-Eternity', spec: '0.40 ct total · 18k', image: altImages[5] },
      { name: 'Channel-Set Baguette', spec: '0.55 ct · Platinum', image: altImages[0] },
      { name: 'Hammered Court · 5mm', spec: 'Platinum or Palladium', image: 'assets/media/images/ta-ring-closeup.webp' },
    ],
    'Diamond Rings': [
      { name: 'Cluster Cocktail', spec: '2.10 ct total · IGI', image: altImages[1] },
      { name: 'Diamond Crossover', spec: '0.85 ct · Platinum', image: altImages[2] },
      { name: 'Pavé Dress Band', spec: '0.60 ct · 18k', image: altImages[5] },
      { name: 'Marquise Solitaire', spec: '1.30 ct · GIA', image: altImages[3] },
    ],
    'Earrings & Studs': [
      { name: 'Round Brilliant Studs', spec: '1.00 ct ea · GIA · 18k', image: 'assets/media/images/howj-lab-stud-earrings-price.webp' },
      { name: 'Lab-Grown Studs', spec: '1.50 ct ea · IGI', image: altImages[0] },
      { name: 'Diamond Hoops', spec: '0.60 ct total · Platinum', image: altImages[1] },
      { name: 'Pavé Drops', spec: '1.20 ct total · 18k', image: altImages[5] },
    ],
    'Necklaces & Pendants': [
      { name: 'Solitaire Pendant', spec: '0.50 ct · 18k chain', image: altImages[5] },
      { name: 'Floral Pavé Cluster', spec: '1.20 ct total · Platinum', image: altImages[1] },
      { name: 'Journey Necklace', spec: '0.90 ct graduated · 18k', image: altImages[4] },
      { name: 'Pavé Disc', spec: '1.10 ct total · 18k', image: altImages[2] },
    ],
    'Bracelets': [
      { name: 'Diamond Tennis · 4 ct', spec: 'GIA · 18k', image: 'assets/media/images/ta-tennis-bracelet.webp' },
      { name: 'Diamond Tennis · 7 ct', spec: 'GIA · Platinum', image: altImages[0] },
      { name: 'Slim Diamond Cuff', spec: '1.40 ct · 18k', image: altImages[3] },
      { name: 'Bangle Stack', spec: 'Trio · 18k', image: altImages[1] },
    ],
    'Gemstone & Coloured Stone': [
      { name: 'Ruby & Diamond Band', spec: '0.80 ct ruby · 18k', image: 'assets/media/images/ta-exclusive-design.webp' },
      { name: 'Sapphire Halo Ring', spec: '1.10 ct sapphire', image: altImages[2] },
      { name: 'Emerald Pendant', spec: '0.70 ct emerald', image: altImages[5] },
      { name: 'Tourmaline Cocktail', spec: 'Commission', image: altImages[1] },
    ],
  };
  return samples[cat] || [];
}

/* ════════════════════════════════════════════════════════════
   BESPOKE
═══════════════════════════════════════════════════════════════ */
function BespokeScreen({ setRoute, onBook }) {
  const [activeStep, setActiveStep] = useStateS(0);
  return (
    <>
      <section style={{ paddingTop: 48 }}>
        <div className="container" style={{ maxWidth: 900 }}>
          <div className="eyebrow">Tailor-Made</div>
          <h1 className="display-xl" style={{ margin: '12px 0 24px' }}>
            A diamond <em style={{ fontFamily: 'var(--font-serif)' }}>is</em> the brief.
            <br />The piece around it is yours.
          </h1>
          <p className="body-lg" style={{ opacity: 0.85, maxWidth: 700 }}>
            Bespoke is what House of Windsor was built for. A private commission means we draw, model and craft to your hand alone — most pieces in about a week, all from the workshop at the Park.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 32 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 56 }} className="bespoke-grid">
            {/* Step rail */}
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 4, position: 'sticky', top: 100, alignSelf: 'start' }}>
              {HOWJ.bespokeSteps.map((s, i) => (
                <li key={s.n}>
                  <button
                    onClick={() => setActiveStep(i)}
                    style={{
                      width: '100%', textAlign: 'left',
                      padding: '20px 0', background: 'none', border: 0,
                      borderTop: '1px solid var(--line)',
                      display: 'flex', gap: 16, alignItems: 'baseline',
                      color: activeStep === i ? 'var(--charcoal)' : 'rgba(35,38,43,0.45)',
                      transition: 'color 200ms',
                    }}
                  >
                    <span style={{
                      fontFamily: 'var(--font-serif)', fontSize: 24,
                      color: activeStep === i ? 'var(--gold-deep)' : 'inherit',
                    }}>{s.n}</span>
                    <span style={{
                      fontFamily: 'var(--font-label)', letterSpacing: '0.18em',
                      textTransform: 'uppercase', fontSize: 13,
                    }}>{s.title}</span>
                  </button>
                </li>
              ))}
            </ol>

            {/* Active step content */}
            <div>
              {HOWJ.bespokeSteps.map((s, i) => activeStep === i && (
                <div key={s.n} className="reveal">
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="step-detail">
                    <HeroImage
                      src={[
                        'assets/media/images/ta-welcome-storefront.webp',
                        null,
                        null,
                        'assets/media/images/howj-craftsmanship.webp',
                        'assets/media/images/ta-photo3.webp',
                      ][i]}
                      label={['Consultation','Sketches & 3D render','Wax & resin model','Bench & setting','Hand-over'][i]}
                      ratio="4/5"
                    />
                    <div>
                      <div className="eyebrow" style={{ color: 'var(--gold-deep)' }}>Step {s.n} of 05</div>
                      <h2 className="display-lg" style={{ margin: '8px 0 20px' }}>{s.title}</h2>
                      <p className="body-lg" style={{ opacity: 0.85 }}>{s.copy}</p>
                      <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                        <div className="eyebrow" style={{ marginBottom: 6 }}>Typical</div>
                        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20 }}>{s.detail}</div>
                      </div>
                      <div style={{ marginTop: 32, display: 'flex', gap: 8 }}>
                        <button
                          className="btn btn-ghost btn-sm"
                          disabled={i === 0}
                          onClick={() => setActiveStep(i - 1)}
                          style={{ opacity: i === 0 ? 0.4 : 1 }}
                        >← Previous</button>
                        <button
                          className="btn btn-gold btn-sm"
                          onClick={() => i < HOWJ.bespokeSteps.length - 1 ? setActiveStep(i + 1) : onBook('Bespoke / Tailor-Made')}
                        >{i < HOWJ.bespokeSteps.length - 1 ? 'Next step →' : 'Start a commission →'}</button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .bespoke-grid { grid-template-columns: 1fr !important; }
            .bespoke-grid ol { position: static !important; }
            .step-detail { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* Call to commission */}
      <section style={{ background: 'var(--royal-blue)', color: 'var(--ivory)' }}>
        <div className="container" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <DiamondGlyph size={20} color="var(--gold-soft)" />
          <h2 className="display-lg" style={{ color: 'var(--ivory)', margin: '20px 0 16px' }}>
            Ready to brief us?
          </h2>
          <p className="body-lg" style={{ opacity: 0.85, marginBottom: 32 }}>
            Send a few words about the piece you're imagining — Mehul or Vicky will reply within a business day with first thoughts.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-gold" onClick={() => onBook('Bespoke / Tailor-Made')}>Request a Custom Design</button>
            <a className="btn btn-ghost-light" href={`https://wa.me/${HOWJ.contact.whatsapp}`} target="_blank" rel="noreferrer">WhatsApp Mehul</a>
          </div>
        </div>
      </section>
    </>
  );
}

/* ════════════════════════════════════════════════════════════
   DIAMONDS & CERTIFICATION
═══════════════════════════════════════════════════════════════ */
function DiamondsScreen({ onBook }) {
  return (
    <>
      <section style={{ paddingTop: 48 }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow">Diamonds &amp; Certification</div>
          <h1 className="display-xl" style={{ margin: '12px 0 24px' }}>
            Every stone we set carries paper.
          </h1>
          <p className="body-lg" style={{ opacity: 0.85, maxWidth: 720 }}>{HOWJ.diamondsContent.intro}</p>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 8 }}>The four laboratories we work with</div>
          <h2 className="display-md" style={{ margin: '0 0 36px' }}>GIA · IGI · HRD · IDL</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
            {HOWJ.diamondsContent.labs.map(l => (
              <div key={l.code} style={{ padding: 28, background: '#fff' }}>
                <div style={{
                  fontFamily: 'var(--font-label)', fontSize: 20, letterSpacing: '0.18em',
                  color: 'var(--gold-deep)', borderBottom: '1px solid var(--champagne-gold)',
                  paddingBottom: 12, marginBottom: 16, display: 'inline-block',
                }}>{l.code}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, lineHeight: 1.25 }}>{l.name}</div>
                <p className="body" style={{ marginTop: 12, opacity: 0.75, fontSize: 14 }}>{l.detail}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--midnight)', color: 'var(--ivory)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 40 }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--gold-soft)' }}>The four Cs</div>
              <h2 className="display-lg" style={{ margin: '8px 0 0', color: 'var(--ivory)' }}>How we read a diamond.</h2>
            </div>
            <p className="body" style={{ maxWidth: 360, opacity: 0.7, margin: 0 }}>
              We will walk you through these in the showroom, with a loupe and the actual stone in front of you.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 1, background: 'var(--line-dark)' }}>
            {HOWJ.diamondsContent.fourCs.map((x, i) => (
              <div key={x.c} style={{ padding: 32, background: 'var(--midnight)' }}>
                <div style={{
                  fontFamily: 'var(--font-serif)', fontSize: 84, color: 'var(--gold-soft)',
                  lineHeight: 0.9, fontWeight: 300,
                }}>{x.c[0]}</div>
                <div className="eyebrow" style={{ marginTop: 4, color: 'var(--gold-soft)' }}>{x.c}</div>
                <h3 className="display-sm" style={{ margin: '14px 0 12px', color: 'var(--ivory)', fontWeight: 500 }}>{x.headline}</h3>
                <p className="body" style={{ opacity: 0.75, fontSize: 14 }}>{x.copy}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="cert-cta">
            <HeroImage src="assets/media/images/howj-craftsmanship.webp" alt="Diamond inspection" ratio="4/5" />
            <div>
              <div className="eyebrow">Natural &amp; Lab-Grown</div>
              <h2 className="display-md" style={{ margin: '8px 0 16px' }}>Both are diamond. We carry both.</h2>
              <p className="body-lg" style={{ opacity: 0.85 }}>
                We stock IGI-certified lab-grown diamonds alongside natural stones, and explain exactly how the two differ on cut grade, return on resale and on the eye. The choice is yours; the certification is non-negotiable.
              </p>
              <div style={{ marginTop: 28 }}>
                <button className="btn btn-gold" onClick={() => onBook()}>Book a stone consultation</button>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 860px) { .cert-cta { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </>
  );
}

/* ════════════════════════════════════════════════════════════
   ABOUT / HERITAGE
═══════════════════════════════════════════════════════════════ */
function AboutScreen({ setRoute, onBook }) {
  return (
    <>
      <section style={{ paddingTop: 48 }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow">Heritage</div>
          <h1 className="display-xl" style={{ margin: '12px 0 24px' }}>
            One bench. One owner. <em style={{ fontFamily: 'var(--font-serif)' }}>Over a decade.</em>
          </h1>
          <p className="body-lg" style={{ opacity: 0.85, maxWidth: 740 }}>
            House of Windsor is an independent fine-jewellery house in Dubai's Gold &amp; Diamond Park, founded by Mehul Joshi. It exists because Mehul wanted a diamond house that was still small enough that the founder could know each client by name. It has stayed that small on purpose.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 32 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'start' }} className="about-grid">
            <div style={{ position: 'sticky', top: 100 }}>
              <div className="img-placeholder" style={{ aspectRatio: '4/5' }}>
                Founder portrait<br/>—<br/>Mehul Joshi, at the bench
              </div>
              <div style={{ marginTop: 18 }}>
                <div className="eyebrow" style={{ marginBottom: 6 }}>Founder</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 28 }}>Mehul Joshi</div>
                <div className="meta" style={{ opacity: 0.55 }}>Mumbai → Dubai · Over a decade at the bench</div>
              </div>
            </div>
            <div style={{ display: 'grid', gap: 24 }}>
              <p className="body-lg" style={{ opacity: 0.9 }}>
                Mehul learned the trade in Mumbai's diamond district, where the workshops sit shoulder-to-shoulder with the showrooms and a piece passes through six pairs of hands on its way to the velvet tray. He moved to Dubai to set up House of Windsor inside the Gold &amp; Diamond Park because the Park does the same thing — workshop and counter under one roof. He still sets stones himself.
              </p>
              <p className="body-lg" style={{ opacity: 0.9 }}>
                The house has built its reputation on trust. Diamonds are hand-picked, then certified by GIA, IGI, HRD or IDL before they are set. The bespoke process is owner-led from first sketch to final polish. A number of clients have been with the house for more than ten years — some are now buying for their children.
              </p>
              <blockquote style={{
                margin: 0, padding: '28px 32px',
                borderLeft: '3px solid var(--champagne-gold)',
                background: 'var(--cream-card)',
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 24, lineHeight: 1.4,
              }}>
                "We are strong believers in the power of trust. Our customers come first, and we let them guide us by attention to their feedback."
                <footer style={{ marginTop: 16, fontStyle: 'normal', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55, fontFamily: 'var(--font-label)' }}>
                  — Mehul Joshi
                </footer>
              </blockquote>
              <p className="body-lg" style={{ opacity: 0.9 }}>
                On a busy Saturday at the Park you'll find Mehul at the bench, Vicky with a sketchpad walking a client through proportions, and Kunal at the front of the showroom resizing a ring while the client waits. That is the entire model.
              </p>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr !important; } .about-grid > div { position: static !important; } }`}</style>
      </section>

      <section style={{ background: 'var(--cream-card)' }}>
        <div className="container">
          <div className="eyebrow">The people you'll meet</div>
          <h2 className="display-lg" style={{ margin: '8px 0 36px' }}>The team.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 32 }}>
            {HOWJ.team.map(p => (
              <article key={p.name}>
                <div className="img-placeholder" style={{ aspectRatio: '3/4' }}>Portrait<br/>{p.name}</div>
                <div style={{ marginTop: 18 }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 24 }}>{p.name}</div>
                  <div className="meta" style={{ color: 'var(--gold-deep)' }}>{p.role}</div>
                  <p className="body" style={{ marginTop: 12, opacity: 0.78 }}>{p.bio}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--royal-blue)', color: 'var(--ivory)', textAlign: 'center' }}>
        <div className="container" style={{ maxWidth: 720, margin: '0 auto' }}>
          <h2 className="display-lg" style={{ color: 'var(--ivory)' }}>Come and meet us.</h2>
          <p className="body-lg" style={{ opacity: 0.85, marginTop: 12 }}>
            A consultation is a quiet conversation. We will walk you through the showroom, show you a few stones under the loupe, and you will leave with a clearer idea of what you'd like — whether or not you commission us.
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-gold" onClick={() => onBook()}>Book a Consultation</button>
            <button className="btn btn-ghost-light" onClick={() => setRoute('visit')}>How to find us</button>
          </div>
        </div>
      </section>
    </>
  );
}

/* ════════════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════════════ */
function TestimonialsScreen({ onBook }) {
  return (
    <>
      <section style={{ paddingTop: 48 }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow">In their words</div>
          <h1 className="display-xl" style={{ margin: '12px 0 16px' }}>
            5.0 / 5 · 29 reviews · still trading.
          </h1>
          <p className="body-lg" style={{ opacity: 0.85, maxWidth: 720 }}>
            The Tripadvisor record runs from 2016 to December 2025. A few of the clients quoted here have been visiting Mehul for more than ten years. Every review is verified on the platform.
          </p>
          <div style={{ marginTop: 24 }}>
            <TripadvisorChip />
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24 }}>
            {HOWJ.testimonials.map(t => (
              <article key={t.author} className="card" style={{ padding: 32, background: '#fff' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Stars n={t.stars} />
                  <span className="meta" style={{ opacity: 0.5 }}>{t.date}</span>
                </div>
                <h3 className="display-sm" style={{ margin: '14px 0 12px', fontWeight: 500 }}>{t.title}</h3>
                <p style={{ fontFamily: 'var(--font-serif)', fontSize: 20, lineHeight: 1.45, margin: 0 }}>"{t.quote}"</p>
                <div style={{
                  marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--line)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontSize: 13, opacity: 0.6,
                }}>
                  <span>{t.author}</span>
                  <span className="eyebrow" style={{ fontSize: 9, color: 'var(--gold-deep)' }}>Verified · Tripadvisor</span>
                </div>
              </article>
            ))}
          </div>

          <div style={{ marginTop: 56, padding: 32, background: 'var(--cream-card)', border: '1px solid var(--line)', textAlign: 'center' }}>
            <p className="body" style={{ opacity: 0.7, maxWidth: 680, margin: '0 auto', fontSize: 14 }}>
              <strong style={{ fontWeight: 500 }}>A note on the "3× UK valuation" stories.</strong> Several UK clients have had pieces re-valued for insurance back home at a multiple of what they paid here. We mention this only because they did — it is reviewer testimony, not a guarantee. Every quote we issue is for the stone and the work, alone.
            </p>
          </div>

          <div style={{ marginTop: 48, textAlign: 'center' }}>
            <button className="btn btn-gold btn-lg" onClick={() => onBook()}>Become one of these</button>
          </div>
        </div>
      </section>
    </>
  );
}

/* ════════════════════════════════════════════════════════════
   VISIT / CONTACT
═══════════════════════════════════════════════════════════════ */
function VisitScreen({ onBook }) {
  const mapQuery = `${HOWJ.contact.geo.lat},${HOWJ.contact.geo.lng} House of Windsor Jewellers`;
  const mapUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(mapQuery)}`;
  const mapEmbedUrl = `https://www.google.com/maps?q=${encodeURIComponent(mapQuery)}&z=16&output=embed`;
  return (
    <>
      <section style={{ paddingTop: 48, paddingBottom: 24 }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow">Visit the showroom</div>
          <h1 className="display-xl" style={{ margin: '12px 0 16px' }}>
            Sheikh Zayed Road. 4th Interchange. Shop 31.
          </h1>
          <p className="body-lg" style={{ opacity: 0.85, maxWidth: 700 }}>
            Walk-ins welcome during opening hours, but a private consultation booked ahead means we'll have stones ready, a chair waiting, and Mehul or Vicky free to sit with you.
          </p>
        </div>
      </section>

      <section style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }} className="visit-grid">
            <div style={{ padding: 40, background: '#fff' }}>
              <div className="eyebrow">Address</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.4, marginTop: 8 }}>
                {HOWJ.contact.addressLines.map((l, i) => <div key={i}>{l}</div>)}
              </div>
              <a
                href={mapUrl} target="_blank" rel="noreferrer"
                className="btn btn-ghost btn-sm" style={{ marginTop: 20 }}
              >Open in Google Maps →</a>

              <div className="eyebrow" style={{ marginTop: 36, marginBottom: 10 }}>Hours</div>
              <div style={{ fontSize: 15 }}>
                {HOWJ.contact.hours.map(h => (
                  <div key={h.day} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px dashed var(--line)' }}>
                    <span>{h.day}</span><span style={{ fontFamily: 'var(--font-serif)' }}>{h.time}</span>
                  </div>
                ))}
              </div>

              <div className="eyebrow" style={{ marginTop: 36, marginBottom: 10 }}>Contact</div>
              <div style={{ fontSize: 15, lineHeight: 2 }}>
                <div><a href={`tel:${HOWJ.contact.phoneLandlineTel}`}>📞 {HOWJ.contact.phoneLandline}</a></div>
                <div><a href={`https://wa.me/${HOWJ.contact.whatsapp}`}>💬 WhatsApp · {HOWJ.contact.phoneMobile}</a></div>
                <div><a href={`mailto:${HOWJ.contact.email}`}>✉ {HOWJ.contact.email}</a></div>
              </div>
            </div>

            <div style={{ background: 'var(--royal-blue)', position: 'relative', minHeight: 480, overflow: 'hidden' }}>
              <iframe
                title="Google Maps for House of Windsor Jewellers"
                src={mapEmbedUrl}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                style={{ width: '100%', height: '100%', minHeight: 480, border: 0, display: 'block', filter: 'grayscale(.1) contrast(1.04)' }}
              />
              <div style={{
                position: 'absolute', left: 24, bottom: 24,
                textAlign: 'center', color: 'var(--ivory)',
                background: 'rgba(13, 27, 53, .86)',
                border: '1px solid rgba(247,244,239,.22)',
                padding: '18px 20px',
                maxWidth: 280,
              }}>
                <div style={{ color: 'var(--champagne-gold)', display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
                  <DiamondGlyph size={28} />
                </div>
                <div className="eyebrow" style={{ color: 'var(--gold-soft)', marginBottom: 6 }}>You are here</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 24 }}>House of Windsor</div>
                <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4 }}>{HOWJ.contact.geo.lat}°N, {HOWJ.contact.geo.lng}°E</div>
                <a href={mapUrl} target="_blank" rel="noreferrer" className="btn btn-ghost-light btn-sm" style={{ marginTop: 20 }}>
                  Get directions
                </a>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <section style={{ background: 'var(--cream-card)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="find-grid">
            <HeroImage src="assets/media/images/ta-welcome-storefront.webp" alt="House of Windsor storefront" ratio="4/3" />
            <div>
              <div className="eyebrow">How to find us</div>
              <h2 className="display-md" style={{ margin: '8px 0 20px' }}>Inside the Park.</h2>
              <ul style={{ padding: 0, listStyle: 'none', display: 'grid', gap: 16 }}>
                <li>
                  <strong style={{ fontFamily: 'var(--font-label)', letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 12 }}>Driving · </strong>
                  <span style={{ opacity: 0.8 }}>Sheikh Zayed Road, exit at the 4th Interchange (Umm Suqeim Road). Free parking at the Gold &amp; Diamond Park.</span>
                </li>
                <li>
                  <strong style={{ fontFamily: 'var(--font-label)', letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 12 }}>Metro · </strong>
                  <span style={{ opacity: 0.8 }}>Equiti Metro Station (Red Line), 12 min walk or a short taxi.</span>
                </li>
                <li>
                  <strong style={{ fontFamily: 'var(--font-label)', letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 12 }}>Once inside · </strong>
                  <span style={{ opacity: 0.8 }}>Enter Building 1 from the central courtyard. We're Shop 31, on the ground floor, towards the south end.</span>
                </li>
                <li>
                  <strong style={{ fontFamily: 'var(--font-label)', letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 12 }}>Tourists · </strong>
                  <span style={{ opacity: 0.8 }}>Around 18 minutes by taxi from Downtown Dubai, 22 minutes from the Marina.</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 860px) { .find-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <section>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'start' }} className="faq-grid">
            <div>
              <div className="eyebrow">Frequently asked</div>
              <h2 className="display-lg" style={{ margin: '8px 0 12px' }}>Before you book.</h2>
              <p className="body" style={{ opacity: 0.75 }}>
                Anything not covered? Message us on WhatsApp — we answer within working hours.
              </p>
            </div>
            <div style={{ display: 'grid', gap: 0 }}>
              {HOWJ.faqs.map((f, i) => <FAQ key={i} q={f.q} a={f.a} />)}
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </>
  );
}

function FAQ({ q, a }) {
  const [open, setOpen] = useStateS(false);
  return (
    <div style={{ borderTop: '1px solid var(--line)' }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', textAlign: 'left', padding: '20px 0',
          background: 'none', border: 0,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16, color: 'var(--charcoal)',
        }}
      >
        <span style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500 }}>{q}</span>
        <span style={{ fontSize: 22, color: 'var(--gold-deep)', transition: 'transform 200ms', transform: open ? 'rotate(45deg)' : 'rotate(0)' }}>+</span>
      </button>
      {open && (
        <div className="reveal" style={{ padding: '0 0 20px', opacity: 0.78, fontSize: 15, lineHeight: 1.7 }}>{a}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  HomeScreen, CollectionsScreen, CollectionDetail,
  BespokeScreen, DiamondsScreen, AboutScreen,
  TestimonialsScreen, VisitScreen,
});
