// Vagoonya Mobile — Activity & Hotel detail screens

// ─── Activity Detail ────────────────────────────────────
const ActivityDetail = () => {
  const photos = [PHOTO.boat, PHOTO.bodrum, PHOTO.beach, PHOTO.sunset];
  return (
    <MobileScreen>
      {/* Photo gallery */}
      <div style={{ position: 'relative', height: 320, flexShrink: 0, overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: `url(${PHOTO.boat}) center/cover` }}/>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,18,9,0.35) 0%, rgba(31,18,9,0) 30%)' }}/>

        {/* Top bar — glass icons */}
        <div style={{ position: 'absolute', top: 8, left: 12, right: 12, display: 'flex', justifyContent: 'space-between' }}>
          <button style={glassBtn}><Icon name="chevron-left" size={22} color="#fff"/></button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={glassBtn}><Icon name="share" size={20} color="#fff"/></button>
            <button style={glassBtn}><Icon name="heart" size={20} color="#fff"/></button>
          </div>
        </div>

        {/* Photo counter */}
        <div style={{ position: 'absolute', bottom: 14, right: 14, padding: '6px 12px', borderRadius: 'var(--r-pill)', background: 'rgba(31,18,9,0.65)', color: '#fff', fontSize: 12, fontWeight: 700, backdropFilter: 'blur(8px)' }}>
          1 / 24
        </div>

        {/* Thumbnail strip */}
        <div style={{ position: 'absolute', left: 14, bottom: 14, display: 'flex', gap: 6 }}>
          {photos.slice(1, 4).map((p, i) => (
            <div key={i} style={{ width: 44, height: 44, borderRadius: 8, background: `url(${p}) center/cover`, border: '2px solid rgba(255,255,255,0.6)' }}/>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto' }}>
        {/* Title block */}
        <div style={{ padding: '20px 20px 18px' }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
            <Pill tone="dark" size="sm">Tekne · Day Cruise</Pill>
            <Pill tone="success" size="sm" icon="sparkles">Anında onay</Pill>
          </div>
          <h1 style={{ margin: 0, fontSize: 24, fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-strong)', lineHeight: 1.2, textWrap: 'balance' }}>
            Bodrum mavi tur · gizli koy turu, öğle yemeği dahil
          </h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 12, flexWrap: 'wrap' }}>
            <Stars value={4.8} size={13} showValue count={264}/>
            <div style={{ fontSize: 12, color: 'var(--ink-dim)', display: 'flex', alignItems: 'center', gap: 4 }}>
              <Icon name="map-pin" size={12} color="var(--ink-low)"/> Bodrum, Muğla
            </div>
          </div>
        </div>

        <hr className="hair" style={{ margin: '0 20px' }}/>

        {/* Quick facts grid */}
        <div style={{ padding: '18px 20px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
          {[
            ['clock', 'Süre', '6 saat'],
            ['users', 'Grup', 'Maks 12 kişi'],
            ['language', 'Dil', 'TR · EN'],
            ['utensils', 'Dahil', 'Öğle yemeği + içecek'],
          ].map(([icon, label, val]) => (
            <div key={label} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 40, height: 40, borderRadius: 'var(--r-md)', background: 'var(--brand-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={icon} size={18} color="var(--brand-600)"/>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--ink-low)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)' }}>{val}</div>
              </div>
            </div>
          ))}
        </div>

        <hr className="hair" style={{ margin: '0 20px' }}/>

        {/* Description */}
        <div style={{ padding: '18px 20px' }}>
          <h3 style={{ margin: 0, marginBottom: 8, fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Bu turda ne var</h3>
          <p style={{ margin: 0, fontSize: 14, color: 'var(--ink-dim)', lineHeight: 1.55 }}>
            Bodrum'un en sakin koylarına, klasik tahta tekne ile bir günlük yolculuk. Aquarium, Kara Ada, Ortakent koyu — her durakta yüzme molası, tekne üzerinde Türk mutfağından açık büfe öğle yemeği.
          </p>
          <button style={{ marginTop: 8, background: 'none', border: 0, color: 'var(--brand-600)', fontSize: 13, fontWeight: 700, padding: 0, cursor: 'pointer' }}>Devamını oku ›</button>
        </div>

        <hr className="hair" style={{ margin: '0 20px' }}/>

        {/* Itinerary */}
        <div style={{ padding: '18px 20px' }}>
          <h3 style={{ margin: 0, marginBottom: 14, fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Program</h3>
          <div style={{ position: 'relative', paddingLeft: 28 }}>
            <div style={{ position: 'absolute', left: 9, top: 6, bottom: 6, width: 2, background: 'var(--line)' }}/>
            {[
              ['09:30', 'Buluşma · Bodrum marinası', '15 dk önce gelmen önerilir'],
              ['10:00', 'Aquarium koyu', '45 dk yüzme molası'],
              ['12:30', 'Tekne üzerinde öğle yemeği', 'Açık büfe + içecek'],
              ['14:00', 'Kara Ada', 'Şnorkel ve dalış'],
              ['16:00', 'Marinaya dönüş', 'Marina çıkışı'],
            ].map(([time, place, desc], i, arr) => (
              <div key={i} style={{ display: 'flex', gap: 14, paddingBottom: i === arr.length - 1 ? 0 : 16, position: 'relative' }}>
                <div style={{ position: 'absolute', left: -28, top: 4, width: 18, height: 18, borderRadius: '50%', background: 'var(--brand-500)', border: '3px solid var(--surface)' }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--brand-600)', fontFamily: 'var(--font-mono)' }}>{time}</div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)', marginTop: 1 }}>{place}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 2 }}>{desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <hr className="hair" style={{ margin: '0 20px' }}/>

        {/* Reviews */}
        <div style={{ padding: '18px 20px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Yorumlar</h3>
            <button style={{ background: 'none', border: 0, fontSize: 13, fontWeight: 700, color: 'var(--brand-600)', cursor: 'pointer' }}>Tümü</button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 14, background: 'var(--surface-muted)', borderRadius: 'var(--r-md)' }}>
            <div style={{ textAlign: 'center' }}>
              <div className="tnum" style={{ fontSize: 32, fontWeight: 800, color: 'var(--ink-strong)', lineHeight: 1, letterSpacing: '-0.03em' }}>4.8</div>
              <Stars value={4.8} size={11}/>
              <div style={{ fontSize: 11, color: 'var(--ink-dim)', marginTop: 2 }}>264 yorum</div>
            </div>
            <div style={{ flex: 1, display: 'grid', gap: 4 }}>
              {[['5', 80], ['4', 14], ['3', 4], ['2', 1], ['1', 1]].map(([s, w]) => (
                <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11 }}>
                  <span style={{ color: 'var(--ink-dim)', width: 10 }}>{s}</span>
                  <div style={{ flex: 1, height: 6, background: 'var(--line)', borderRadius: 3, overflow: 'hidden' }}>
                    <div style={{ width: `${w}%`, height: '100%', background: 'var(--brand-500)' }}/>
                  </div>
                  <span className="tnum" style={{ color: 'var(--ink-low)', width: 24, textAlign: 'right' }}>{w}%</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 16, display: 'grid', gap: 14 }}>
            {[
              { name: 'Sofia V', date: '2 hafta önce', rating: 5, text: 'Kaptan ve mürettebat çok ilgili, yemek beklediğimizden iyiydi. Aquarium koyu rüya gibi.', verified: true },
              { name: 'Murat D', date: '1 ay önce', rating: 5, text: 'Tam zamanında başladı, herkes Türkçe konuşuyor. Ailecek harika geçti.', verified: true },
            ].map((r, i) => (
              <div key={i} style={{ borderTop: i > 0 ? '1px solid var(--line-soft)' : 0, paddingTop: i > 0 ? 14 : 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                  <Avatar name={r.name} size={36}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)', display: 'flex', alignItems: 'center', gap: 6 }}>
                      {r.name}
                      {r.verified && <span style={{ color: 'var(--success-deep)', display: 'inline-flex' }}><Icon name="shield-check" size={13}/></span>}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--ink-low)', display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Stars value={r.rating} size={10}/> · {r.date}
                    </div>
                  </div>
                </div>
                <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: 'var(--ink)' }}>{r.text}</p>
              </div>
            ))}
          </div>
        </div>

        <hr className="hair" style={{ margin: '0 20px' }}/>

        {/* Location map preview */}
        <div style={{ padding: '18px 20px' }}>
          <h3 style={{ margin: 0, marginBottom: 12, fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Buluşma noktası</h3>
          <div style={{ borderRadius: 'var(--r-md)', overflow: 'hidden', height: 140, position: 'relative', background: 'linear-gradient(135deg, #c4dfe6, #cbd9b2)' }}>
            <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
              <path d="M0 80 Q 100 60 200 80 T 400 90" stroke="#fff" strokeWidth="2.5" fill="none" opacity="0.7"/>
              <path d="M50 0 L 80 140" stroke="#fff" strokeWidth="2" fill="none" opacity="0.6"/>
            </svg>
            <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -100%)' }}>
              <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--brand-500)', border: '3px solid #fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--sh-card)' }}>
                <Icon name="map-pin" size={14} color="#fff"/>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 10, fontSize: 13, color: 'var(--ink)', fontWeight: 600 }}>Bodrum Marina, D-Pier 12</div>
          <div style={{ fontSize: 12, color: 'var(--ink-dim)' }}>Neyzen Tevfik Cd. No:3, 48400 Bodrum</div>
        </div>

        <div style={{ height: 110 }}/>{/* spacer for booking bar */}
      </div>

      {/* Sticky booking bar */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 16px 26px',
        background: 'var(--surface-raised)', borderTop: '1px solid var(--line-soft)',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: 'var(--ink-dim)' }}>Kişi başı</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
            <span className="tnum" style={{ fontSize: 22, fontWeight: 800, color: 'var(--ink-strong)', letterSpacing: '-0.025em' }}>₺1.200</span>
            <span style={{ fontSize: 11, color: 'var(--ink-dim)' }}>5 May</span>
          </div>
        </div>
        <Btn variant="primary" size="lg" style={{ minWidth: 168 }}>Tarih Seç</Btn>
      </div>
    </MobileScreen>
  );
};

const glassBtn = {
  width: 40, height: 40, borderRadius: '50%',
  background: 'rgba(31,18,9,0.4)', backdropFilter: 'blur(14px) saturate(180%)',
  border: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
};

// ─── Hotel Detail ───────────────────────────────────────
const HotelDetail = () => (
  <MobileScreen>
    {/* Photo gallery */}
    <div style={{ position: 'relative', height: 320, flexShrink: 0 }}>
      <div style={{ position: 'absolute', inset: 0, background: `url(${PHOTO.hotel1}) center/cover` }}/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,18,9,0.3) 0%, rgba(31,18,9,0) 30%)' }}/>

      <div style={{ position: 'absolute', top: 8, left: 12, right: 12, display: 'flex', justifyContent: 'space-between' }}>
        <button style={glassBtn}><Icon name="chevron-left" size={22} color="#fff"/></button>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={glassBtn}><Icon name="share" size={20} color="#fff"/></button>
          <button style={glassBtn}><Icon name="heart" size={20} color="#fff"/></button>
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: 14, right: 14, padding: '6px 12px', borderRadius: 'var(--r-pill)', background: 'rgba(31,18,9,0.65)', color: '#fff', fontSize: 12, fontWeight: 700, backdropFilter: 'blur(8px)' }}>1 / 48</div>
    </div>

    <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 110 }}>
      {/* Header */}
      <div style={{ padding: '20px 20px 16px' }}>
        <div style={{ display: 'flex', gap: 2, color: 'var(--brand-500)', marginBottom: 8 }}>
          {[1,2,3,4,5].map(i => <Icon key={i} name="star-fill" size={12}/>)}
        </div>
        <h1 style={{ margin: 0, fontSize: 24, fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-strong)', lineHeight: 1.2, textWrap: 'balance' }}>
          Marin Hotel Yalıkavak — boutique sea view
        </h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, fontSize: 12, color: 'var(--ink-dim)' }}>
          <Icon name="map-pin" size={12} color="var(--ink-low)"/>
          Yalıkavak, Bodrum · 1.2 km merkeze
          <span style={{ color: 'var(--brand-600)', fontWeight: 700, marginLeft: 4 }}>Haritada gör</span>
        </div>

        {/* Score block */}
        <div style={{ marginTop: 16, padding: 14, background: 'var(--surface-muted)', borderRadius: 'var(--r-md)', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ background: 'var(--brand-500)', color: 'var(--on-brand)', padding: '8px 12px', borderRadius: 'var(--r-sm)', fontSize: 18, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.02em' }}>9.2</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>Mükemmel</div>
            <div style={{ fontSize: 12, color: 'var(--ink-dim)' }}>412 misafir yorumu</div>
          </div>
          <Icon name="chevron-right" size={18} color="var(--ink-low)"/>
        </div>
      </div>

      <hr className="hair" style={{ margin: '0 20px' }}/>

      {/* Amenities */}
      <div style={{ padding: '18px 20px' }}>
        <h3 style={{ margin: 0, marginBottom: 14, fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Otelin sunduğu</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, textAlign: 'center' }}>
          {[
            ['wifi', 'Wi-Fi'], ['pool', 'Havuz'], ['utensils', 'Restoran'], ['spa', 'Spa'],
            ['car', 'Park'], ['coffee', 'Kahvaltı'], ['anchor', 'Plaj'], ['more', 'Tümü'],
          ].map(([icon, label]) => (
            <div key={label} style={{ padding: '10px 4px' }}>
              <div style={{ width: 44, height: 44, borderRadius: 'var(--r-md)', background: 'var(--brand-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 6px' }}>
                <Icon name={icon} size={20} color="var(--brand-600)"/>
              </div>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink)' }}>{label}</div>
            </div>
          ))}
        </div>
      </div>

      <hr className="hair" style={{ margin: '0 20px' }}/>

      {/* Date selector compact */}
      <div style={{ padding: '18px 20px' }}>
        <div style={{ display: 'flex', gap: 8, padding: 12, border: '1.5px solid var(--line)', borderRadius: 'var(--r-md)' }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
            <Icon name="calendar" size={18} color="var(--ink-dim)"/>
            <div>
              <div style={{ fontSize: 11, color: 'var(--ink-low)', fontWeight: 600 }}>GİRİŞ</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>5 May</div>
            </div>
          </div>
          <div style={{ width: 1, background: 'var(--line)' }}/>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
            <Icon name="calendar" size={18} color="var(--ink-dim)"/>
            <div>
              <div style={{ fontSize: 11, color: 'var(--ink-low)', fontWeight: 600 }}>ÇIKIŞ</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>8 May</div>
            </div>
          </div>
          <div style={{ width: 1, background: 'var(--line)' }}/>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
            <Icon name="users" size={18} color="var(--ink-dim)"/>
            <div>
              <div style={{ fontSize: 11, color: 'var(--ink-low)', fontWeight: 600 }}>MİSAFİR</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>2, 1 oda</div>
            </div>
          </div>
        </div>
      </div>

      <hr className="hair" style={{ margin: '0 20px' }}/>

      {/* Room types */}
      <div style={{ padding: '18px 20px' }}>
        <h3 style={{ margin: 0, marginBottom: 12, fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Odalar</h3>
        <div style={{ display: 'grid', gap: 12 }}>
          {[
            { name: 'Deluxe Sea View', size: '32 m²', cap: '2', price: 4500, plan: 'BB · kahvaltı dahil', refundable: true, img: PHOTO.hotel1 },
            { name: 'Junior Suite', size: '48 m²', cap: '2 + 1', price: 6200, plan: 'HB · yarım pansiyon', refundable: true, img: PHOTO.hotel2 },
            { name: 'Garden Studio', size: '26 m²', cap: '2', price: 3800, plan: 'RO · kahvaltı dışında', refundable: false, img: PHOTO.villa },
          ].map((r, i) => (
            <div key={i} className="card" style={{ overflow: 'hidden' }}>
              <div style={{ display: 'flex' }}>
                <div style={{ width: 110, aspectRatio: '1', background: `url(${r.img}) center/cover`, flexShrink: 0 }}/>
                <div style={{ flex: 1, padding: '12px 14px' }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)' }}>{r.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-dim)', marginTop: 4, display: 'flex', gap: 8 }}>
                    <span><Icon name="bed" size={11} style={{ display: 'inline', marginRight: 2 }}/> {r.size}</span>
                    <span>·</span>
                    <span>{r.cap} kişi</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--ink)', marginTop: 6 }}>{r.plan}</div>
                  {r.refundable && (
                    <div style={{ fontSize: 11, color: 'var(--success-deep)', fontWeight: 700, marginTop: 4 }}>✓ Ücretsiz iptal</div>
                  )}
                </div>
              </div>
              <div style={{ borderTop: '1px solid var(--line-soft)', padding: '10px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <span className="tnum" style={{ fontSize: 17, fontWeight: 800, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>₺{r.price.toLocaleString('tr-TR')}</span>
                  <span style={{ fontSize: 11, color: 'var(--ink-dim)' }}> / 3 gece, vergi dahil</span>
                </div>
                <Btn variant="primary" size="sm">Seç</Btn>
              </div>
            </div>
          ))}
        </div>
      </div>

      <hr className="hair" style={{ margin: '0 20px' }}/>

      {/* About + policies */}
      <div style={{ padding: '18px 20px' }}>
        <h3 style={{ margin: 0, marginBottom: 8, fontSize: 17, fontWeight: 700, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Bu otel hakkında</h3>
        <p style={{ margin: 0, fontSize: 14, color: 'var(--ink-dim)', lineHeight: 1.55 }}>
          Yalıkavak'ın güneyinde, sahile 80 metre mesafede 18 odalı butik otel. Açık deniz manzaralı odalar, geleneksel Ege mutfağı, küçük spa. Sezon mayıs–ekim arası.
        </p>

        <div style={{ marginTop: 14, padding: 14, background: 'var(--surface-muted)', borderRadius: 'var(--r-md)', display: 'grid', gap: 8 }}>
          {[
            ['Check-in', '15:00 sonrası'],
            ['Check-out', '12:00 öncesi'],
            ['İptal', 'Girişten 7 gün önce ücretsiz'],
            ['Çocuk politikası', '6 yaş altı ücretsiz'],
          ].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
              <span style={{ color: 'var(--ink-dim)' }}>{k}</span>
              <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* Sticky bar */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 16px 26px',
      background: 'var(--surface-raised)', borderTop: '1px solid var(--line-soft)',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 11, color: 'var(--ink-dim)' }}>3 gece</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
          <span className="tnum" style={{ fontSize: 22, fontWeight: 800, color: 'var(--ink-strong)', letterSpacing: '-0.025em' }}>₺13.500</span>
          <span style={{ fontSize: 11, color: 'var(--ink-dim)' }}>vergi dahil</span>
        </div>
      </div>
      <Btn variant="primary" size="lg" style={{ minWidth: 168 }}>Oda Seç</Btn>
    </div>
  </MobileScreen>
);

Object.assign(window, { ActivityDetail, HotelDetail, glassBtn });