// BOUTIQUES
function BoutiquesPage() {
  const { navigate } = useRouter();
  const [active, setActive] = useState(BOUTIQUES[0].id);
  const a = BOUTIQUES.find((b) => b.id === active);

  return (
    <div className="page-enter">
      <style>{`
        .bq-hero { padding: 180px 0 60px; }
        .bq-hero__title { font-family: var(--display, var(--serif)); font-weight: 300; font-size: clamp(56px, 9vw, 130px); line-height: 0.95; max-width: 1100px; }
        .bq-hero__title em { color: var(--accent); }
        .bq-hero__sub { color: var(--fg-mute); font-size: 17px; max-width: 540px; margin-top: 28px; line-height: 1.65; }

        .bq-main { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
        .bq-main__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 80px); align-items: start; min-height: 600px; }
        @media (max-width: 880px) { .bq-main__grid { grid-template-columns: 1fr; } }

        .bq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
        .bq-row {
          display: grid; grid-template-columns: 40px 1fr auto;
          gap: 24px;
          padding: 30px 0;
          border-bottom: 1px solid var(--rule);
          align-items: center;
          cursor: pointer;
          transition: padding 0.3s ease;
        }
        .bq-row.is-on { padding-left: 12px; }
        .bq-row__no { font-family: var(--display, var(--serif)); font-size: 30px; color: var(--accent); }
        .bq-row__name { font-family: var(--display, var(--serif)); font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
        .bq-row__city { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); margin-top: 4px; }
        .bq-row__sub { color: var(--fg-mute); font-size: 14px; margin-top: 8px; }
        .bq-row__arrow { font-size: 24px; color: var(--fg-mute); transition: color 0.3s, transform 0.3s; }
        .bq-row.is-on .bq-row__arrow { color: var(--accent); transform: translateX(6px); }

        .bq-detail { position: sticky; top: 110px; }
        .bq-detail__img { aspect-ratio: 4/5; overflow: hidden; background: var(--surface); }
        .bq-detail__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
        .bq-detail__chip { display: inline-block; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; padding: 6px 10px; background: var(--accent); color: var(--bg); margin-bottom: 14px; }
        .bq-detail__name { font-family: var(--display, var(--serif)); font-size: 38px; line-height: 1.05; margin-top: 18px; }
        .bq-detail__addr { color: var(--fg-mute); font-size: 15px; line-height: 1.7; margin-top: 14px; }
        .bq-detail__addr b { color: var(--fg); font-weight: 500; }
        .bq-detail__note {
          margin-top: 22px; padding: 14px 18px;
          background: var(--surface);
          border-left: 1px solid var(--accent);
          font-size: 13px; color: var(--fg-mute);
          line-height: 1.55;
        }
        .bq-detail__note b { color: var(--fg); }
        .bq-detail__ctas { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
        .bq-detail__ctas .btn { width: 100%; }

        /* Hours notice */
        .bq-hours-flag {
          padding: 14px 18px;
          border: 1px dashed var(--rule-strong);
          font-size: 12px; color: var(--fg-mute);
          margin-top: 14px;
          line-height: 1.55;
        }
        .bq-hours-flag b { color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }
      `}</style>

      <div className="container bq-hero">
        <Reveal>
          <div className="eyebrow" style={{ color: 'var(--accent)' }}>Boutiques</div>
          <h1 className="bq-hero__title">Four <em>points</em> of arrival.</h1>
          <p className="bq-hero__sub">The Majlis in Dubai Design District is the heart of the house. Beyond it, three carefully chosen partners in Abu Dhabi and online.</p>
        </Reveal>
      </div>

      <section className="bq-main">
        <div className="container bq-main__grid">
          <div>
            <div className="bq-list">
              {BOUTIQUES.map((b, i) => (
                <div key={b.id} className={`bq-row ${active === b.id ? 'is-on' : ''}`} onClick={() => setActive(b.id)}>
                  <div className="bq-row__no">0{i + 1}</div>
                  <div>
                    <div className="bq-row__city">{b.city}</div>
                    <div className="bq-row__name">{b.name}</div>
                    <div className="bq-row__sub">{b.address} · {b.sub}</div>
                  </div>
                  <div className="bq-row__arrow">→</div>
                </div>
              ))}
            </div>
          </div>

          <Reveal key={a.id} className="bq-detail">
            <div className="bq-detail__img"><img src={a.image} alt={a.name} /></div>
            {a.primary && <div className="bq-detail__chip" style={{ marginTop: 24 }}>The Majlis</div>}
            {a.online && <div className="bq-detail__chip" style={{ marginTop: 24, background: 'var(--surface)', color: 'var(--accent)', border: '1px solid var(--accent)' }}>Online · GCC</div>}
            <div className="bq-detail__name">{a.name}</div>
            <div className="bq-detail__addr">
              <b>{a.address}</b><br/>
              {a.sub}<br/>
              {a.city}
            </div>

            <div className="bq-hours-flag">
              <b>Hours</b><br/>
              {a.online
                ? 'Open 24h via partner.'
                : 'Please confirm visit hours directly with the team. Walk‑in welcome at the Majlis; partner boutiques follow venue hours.'}
            </div>

            <div className="bq-detail__ctas">
              {a.id === 'majlis' && (
                <button className="btn btn--primary" onClick={() => navigate('contact', { tab: 'majlis' })}>Book a Private Viewing</button>
              )}
              {!a.online && (
                <a href={CONTACT.whatsapp} target="_blank" rel="noreferrer" className="btn btn--ghost arrow"><span>WhatsApp the Team</span></a>
              )}
              {a.mapUrl && a.mapUrl !== '#' && (
                <a href={a.mapUrl} target="_blank" rel="noreferrer" className="btn btn--ghost arrow"><span>Open in Maps</span></a>
              )}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BoutiquesPage });