// Vagoonya Mobile — Discover (home tab) + Search + Filters

// ─── Discover (root tab) ────────────────────────────────
const DiscoverScreen = ({ dark = false }) => {
  const cats = [
    ['compass', 'Tekne', 248, '#fff4ef'],
    ['mountain', 'Doğa', 184, '#eef5ec'],
    ['sparkles', 'Balon', 32, '#fde9d6'],
    ['utensils', 'Gastro', 96, '#f2ebe0'],
    ['anchor', 'Dalış', 41, '#dde9ee'],
    ['home', 'Konaklama', 312, '#f3eadc'],
  ];

  const collections = [
    { title: 'Bodrum mavisi', sub: '12 deneyim · sezon başı', img: PHOTO.bodrum, tag: 'Editör seçimi' },
    { title: 'Kapadokya gün doğumu', sub: '6 deneyim · 24 saat satışı kaldı', img: PHOTO.balloon, tag: 'Sınırlı' },
    { title: 'Sahil köyleri', sub: '18 otel · butik ve aile', img: PHOTO.hotel4, tag: 'Konaklama' },
  ];

  return (
    <MobileScreen bg="var(--surface)">
      {/* Top: warm cream header */}
      <div style={{ padding: '10px 20px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexShrink: 0 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.08em', fontWeight: 700, color: 'var(--brand-700)' }}>VAGOONYA</div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.025em', color: 'var(--ink-strong)' }}>Merhaba Eren <span style={{ filter: 'sepia(0.2)' }}>·</span></div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button style={iconBtnStyle}><Icon name="search" size={20}/></button>
          <button style={iconBtnStyle}>
            <Icon name="bell" size={20}/>
            <span style={{ position: 'absolute', top: 6, right: 6, width: 8, height: 8, borderRadius: '50%', background: 'var(--brand-500)', border: '2px solid var(--surface)' }}/>
          </button>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 16 }}>
        {/* Hero search composer */}
        <div style={{ padding: '0 20px', marginBottom: 24 }}>
          <div style={{
            position: 'relative', borderRadius: 'var(--r-xl)', overflow: 'hidden',
            background: `url(${PHOTO.fethiye}) center/cover`,
            minHeight: 220,
          }}>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,18,9,0.25) 30%, rgba(31,18,9,0.78) 100%)' }}/>
            <div style={{ position: 'relative', padding: '22px 22px 18px', minHeight: 220, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: '0.1em', fontWeight: 700, color: 'rgba(255,244,239,0.85)' }}>BU HAFTA SONU</div>
                <h2 style={{ margin: '4px 0 0', fontSize: 26, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 700, color: '#fff', maxWidth: 240, textWrap: 'balance' }}>
                  Bodrum tekneleri sezona açıldı.
                </h2>
              </div>

              {/* Composer pill */}
              <div style={{
                background: 'rgba(255,255,255,0.96)', backdropFilter: 'blur(20px)',
                borderRadius: 'var(--r-pill)', padding: '6px 6px 6px 16px',
                display: 'flex', alignItems: 'center', gap: 10,
                boxShadow: 'var(--shadow-md)',
              }}>
                <Icon name="search" size={18} color="var(--ink-low)"/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, color: 'var(--ink-low)', fontWeight: 600, letterSpacing: '0.04em' }}>NEREYE</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-strong)', fontWeight: 700 }}>Bodrum, Türkiye</div>
                </div>
                <button style={{
                  height: 40, padding: '0 18px', borderRadius: 'var(--r-pill)', border: 0,
                  background: 'var(--brand-500)', color: 'var(--on-brand)',
                  fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
                }}>Ara</button>
              </div>
            </div>
          </div>
        </div>

        {/* Vertical toggle */}
        <div style={{ padding: '0 20px', marginBottom: 22 }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
            padding: 4, background: 'var(--surface-muted)', borderRadius: 'var(--r-pill)',
          }}>
            <div style={{
              padding: '10px 16px', borderRadius: 'var(--r-pill)',
              background: 'var(--surface-raised)', boxShadow: 'var(--shadow-sm)',
              fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)', textAlign: 'center',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              <Icon name="compass" size={16} color="var(--brand-500)"/>
              Aktiviteler
            </div>
            <div style={{ padding: '10px 16px', fontSize: 13, fontWeight: 600, color: 'var(--ink-dim)', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
              <Icon name="home" size={16}/>
              Konaklama
            </div>
          </div>
        </div>

        {/* Categories */}
        <section style={{ marginBottom: 26 }}>
          <SectionHeader title="Kategoriler" link="Tümü"/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, padding: '12px 20px 0' }}>
            {cats.map(([icon, label, count, bg]) => (
              <div key={label} style={{
                background: 'var(--surface-raised)', borderRadius: 'var(--r-md)',
                padding: '14px 10px', textAlign: 'center', border: '1px solid var(--line-soft)',
              }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 8px' }}>
                  <Icon name={icon} size={22} color="var(--brand-600)"/>
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)' }}>{label}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-low)', marginTop: 2 }}>{count} deneyim</div>
              </div>
            ))}
          </div>
        </section>

        {/* Featured */}
        <section style={{ marginBottom: 28 }}>
          <SectionHeader title="Sezon başı favorileri" subtitle="Editörlerin seçtiği 12 deneyim" link="Hepsi"/>
          <div style={{ display: 'flex', gap: 12, padding: '14px 20px 4px', overflowX: 'auto' }}>
            <TourCard title="Bodrum mavi tur · gizli koy turu" dest="Bodrum" duration="6 saat" rating={4.8} count={264} price={1200} img={PHOTO.boat} category="Tekne"/>
            <TourCard title="Kapadokya balon turu · gün doğumu" dest="Kapadokya" duration="3 saat" rating={4.9} count={1342} price={3450} img={PHOTO.balloon} category="Doğa"/>
            <TourCard title="Fethiye Ölüdeniz yamaç paraşütü" dest="Fethiye" duration="2 saat" rating={4.7} count={892} price={2100} img={PHOTO.fethiye} category="Macera" saved/>
          </div>
        </section>

        {/* Collections — editorial cards */}
        <section style={{ marginBottom: 28 }}>
          <SectionHeader title="Koleksiyonlar"/>
          <div style={{ display: 'grid', gap: 14, padding: '14px 20px 0' }}>
            {collections.map((c, i) => (
              <div key={c.title} style={{
                position: 'relative', borderRadius: 'var(--r-lg)', overflow: 'hidden',
                aspectRatio: '16/9', background: `url(${c.img}) center/cover`,
              }}>
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,18,9,0.1) 40%, rgba(31,18,9,0.86) 100%)' }}/>
                <div style={{ position: 'absolute', top: 12, left: 12 }}>
                  <Pill tone="brand">{c.tag}</Pill>
                </div>
                <div style={{ position: 'absolute', left: 16, right: 16, bottom: 14, color: '#fff' }}>
                  <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.025em', textWrap: 'balance' }}>{c.title}</h3>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', marginTop: 4 }}>{c.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Hotels rail */}
        <section style={{ marginBottom: 28 }}>
          <SectionHeader title="Sahil otelleri" subtitle="Boutique seçim · 312 tesis" link="Tümü"/>
          <div style={{ display: 'flex', gap: 12, padding: '14px 20px 4px', overflowX: 'auto' }}>
            <HotelCard title="Marin Hotel Yalıkavak — boutique sea view" dest="Bodrum" stars={5} score="9.2" scoreLabel="Mükemmel" price={4500} img={PHOTO.hotel1} mealPlan="BB" refundable/>
            <HotelCard title="Lale Cave Suites — Göreme manzarası" dest="Kapadokya" stars={4} score="9.5" scoreLabel="Olağanüstü" price={3200} img={PHOTO.hotel2} mealPlan="HB" refundable/>
            <HotelCard title="Olympos Lodge — orman içinde" dest="Antalya" stars={4} score="8.8" scoreLabel="Çok iyi" price={2400} img={PHOTO.hotel3} mealPlan="BB"/>
          </div>
        </section>

        {/* Travel tip card */}
        <section style={{ padding: '0 20px', marginBottom: 16 }}>
          <div className="card" style={{ padding: 18, display: 'flex', gap: 14, alignItems: 'center' }}>
            <div style={{ width: 48, height: 48, borderRadius: 'var(--r-md)', background: 'var(--brand-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name="sparkles" size={22} color="var(--brand-500)"/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)' }}>İlk rezervasyonda %10 indirim</div>
              <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 2 }}>HOSGELDIN10 koduyla geçerli</div>
            </div>
            <Icon name="arrow-right" size={18} color="var(--ink-low)"/>
          </div>
        </section>
      </div>

      <BottomTabBar active="discover" dark={dark}/>
    </MobileScreen>
  );
};

const SectionHeader = ({ title, subtitle, link }) => (
  <div style={{ padding: '0 20px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
    <div>
      <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink-strong)' }}>{title}</h3>
      {subtitle && <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 2 }}>{subtitle}</div>}
    </div>
    {link && (
      <button style={{ background: 'none', border: 0, fontSize: 13, fontWeight: 700, color: 'var(--brand-600)', cursor: 'pointer' }}>{link}</button>
    )}
  </div>
);

const iconBtnStyle = {
  width: 40, height: 40, borderRadius: '50%', background: 'var(--surface-raised)',
  border: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center',
  cursor: 'pointer', position: 'relative', color: 'var(--ink)',
};

// ─── Search active (input focused, recent + suggestions) ─────
const SearchActive = () => (
  <MobileScreen>
    <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--line-soft)' }}>
      <button style={{ width: 36, height: 36, background: 'none', border: 0, cursor: 'pointer', color: 'var(--ink)' }}>
        <Icon name="chevron-left" size={22}/>
      </button>
      <div style={{ flex: 1, position: 'relative' }}>
        <Input icon="search" placeholder="Ara..." style={{ background: 'var(--surface-muted)' }} autoFocus value="Bod"/>
      </div>
      <button style={{ width: 36, height: 36, background: 'none', border: 0, cursor: 'pointer', color: 'var(--ink-low)' }}>
        <Icon name="close" size={20}/>
      </button>
    </div>

    <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0 16px' }}>
      <div className="t-eyebrow" style={{ padding: '14px 20px 6px', color: 'var(--ink-low)' }}>ÖNERİLER</div>
      {[
        ['map-pin', 'Bodrum', 'Muğla, Türkiye · 248 deneyim'],
        ['map-pin', 'Bodrum mavi tur', '24 deneyim'],
        ['compass', 'Bodrum tekne turu', 'Kategori · 18 deneyim'],
        ['home', 'Bodrum otelleri', '142 tesis'],
      ].map(([icon, title, sub], i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px', cursor: 'pointer' }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--surface-muted)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name={icon} size={18} color="var(--ink-dim)"/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-strong)' }}>
              <span style={{ fontWeight: 700, color: 'var(--brand-600)' }}>{title.slice(0, 3)}</span>{title.slice(3)}
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-low)', marginTop: 2 }}>{sub}</div>
          </div>
          <Icon name="arrow-right" size={16} color="var(--ink-soft)"/>
        </div>
      ))}

      <div className="t-eyebrow" style={{ padding: '20px 20px 6px', color: 'var(--ink-low)' }}>SON ARAMALAR</div>
      {['Kapadokya balon', 'Fethiye yamaç paraşütü', 'Antalya tekne'].map(s => (
        <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 20px', cursor: 'pointer' }}>
          <Icon name="clock" size={18} color="var(--ink-soft)"/>
          <div style={{ flex: 1, fontSize: 14, color: 'var(--ink)' }}>{s}</div>
          <button style={{ background: 'none', border: 0, color: 'var(--ink-low)', cursor: 'pointer' }}>
            <Icon name="close" size={16}/>
          </button>
        </div>
      ))}
    </div>

    {/* Mobile keyboard placeholder */}
    <div style={{ height: 280, background: 'var(--surface-muted)', borderTop: '1px solid var(--line)', position: 'relative' }}>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-soft)', fontSize: 11, letterSpacing: '0.1em' }}>QWERTY KEYBOARD</div>
    </div>
  </MobileScreen>
);

// ─── Search results (list) ──────────────────────────────
const SearchResultsList = ({ vertical = 'activity' }) => {
  const isHotel = vertical === 'hotel';
  return (
    <MobileScreen>
      {/* Compact search header */}
      <div style={{ padding: '10px 16px 12px', borderBottom: '1px solid var(--line-soft)', flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <button style={{ width: 36, height: 36, background: 'none', border: 0, cursor: 'pointer', color: 'var(--ink)' }}>
            <Icon name="chevron-left" size={22}/>
          </button>
          <div style={{
            flex: 1, height: 44, borderRadius: 'var(--r-pill)', background: 'var(--surface-muted)',
            padding: '0 14px', display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <Icon name="search" size={16} color="var(--ink-dim)"/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)', lineHeight: 1.1 }}>Bodrum</div>
              <div style={{ fontSize: 11, color: 'var(--ink-dim)', lineHeight: 1.1, marginTop: 2 }}>{isHotel ? '5 May–8 May · 2 misafir, 1 oda' : '5 May · 2 misafir'}</div>
            </div>
          </div>
        </div>

        {/* Filter chips */}
        <div style={{ display: 'flex', gap: 8, marginTop: 12, overflowX: 'auto', paddingBottom: 2 }}>
          <FilterChip icon="filter" label="Filtreler" active count={3}/>
          <FilterChip label="Sıralama: Önerilen" caret/>
          {isHotel ? <>
            <FilterChip label="Yıldız" caret/>
            <FilterChip label="Pansiyon" caret/>
            <FilterChip label="Ücretsiz iptal"/>
          </> : <>
            <FilterChip label="Süre" caret/>
            <FilterChip label="Anında onay"/>
            <FilterChip label="Aile dostu"/>
          </>}
        </div>
      </div>

      {/* Results meta */}
      <div style={{ padding: '12px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: 12, color: 'var(--ink-dim)' }}><strong style={{ color: 'var(--ink)' }}>248</strong> deneyim · Bodrum</div>
        <button style={{ background: 'none', border: '1px solid var(--line)', borderRadius: 'var(--r-pill)', padding: '6px 12px', display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, color: 'var(--ink)', cursor: 'pointer' }}>
          <Icon name="map" size={14}/> Harita
        </button>
      </div>

      {/* Results list */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 20px 16px', display: 'grid', gap: 14 }}>
        {(isHotel ? [
          { title: 'Marin Hotel Yalıkavak — boutique sea view', dest: 'Yalıkavak · 1.2 km merkeze', stars: 5, score: '9.2', scoreLabel: 'Mükemmel', count: 412, price: 4500, img: PHOTO.hotel1, mealPlan: 'BB', refundable: true },
          { title: 'Lale Cave Suites', dest: 'Göreme · merkez', stars: 4, score: '9.5', scoreLabel: 'Olağanüstü', count: 286, price: 3200, img: PHOTO.hotel2, mealPlan: 'HB', refundable: true },
          { title: 'Olympos Lodge', dest: 'Çıralı · sahil', stars: 4, score: '8.8', scoreLabel: 'Çok iyi', count: 174, price: 2400, img: PHOTO.hotel3, mealPlan: 'BB', refundable: false },
          { title: 'Bodrum Loft', dest: 'Gümüşlük · 600m sahile', stars: 4, score: '8.6', scoreLabel: 'Çok iyi', count: 92, price: 1900, img: PHOTO.bodrum, mealPlan: 'RO', refundable: true },
        ] : [
          { title: 'Bodrum mavi tur · gizli koy turu', dest: 'Bodrum', duration: '6 saat', rating: 4.8, count: 264, price: 1200, img: PHOTO.boat, category: 'Tekne' },
          { title: 'Yelkenli ile gün batımı turu', dest: 'Yalıkavak', duration: '4 saat', rating: 4.9, count: 184, price: 1850, img: PHOTO.boat, category: 'Tekne', saved: true },
          { title: 'Bodrum kalesi & antik şehir turu', dest: 'Bodrum', duration: '3 saat', rating: 4.6, count: 92, price: 600, img: PHOTO.bodrum, category: 'Kültür' },
          { title: 'Tüplü dalış kursu (acemi)', dest: 'Turgutreis', duration: '5 saat', rating: 4.8, count: 142, price: 2400, img: PHOTO.bodrum, category: 'Dalış' },
        ]).map((r, i) => (
          <FullWidthResultCard key={i} {...r} isHotel={isHotel}/>
        ))}
      </div>

      <BottomTabBar active="search"/>
    </MobileScreen>
  );
};

const FilterChip = ({ icon, label, active = false, count, caret }) => (
  <div style={{
    flexShrink: 0, padding: '8px 14px', borderRadius: 'var(--r-pill)',
    background: active ? 'var(--ink-strong)' : 'var(--surface-raised)',
    color: active ? 'var(--on-dark)' : 'var(--ink)',
    border: `1px solid ${active ? 'var(--ink-strong)' : 'var(--line)'}`,
    fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer',
  }}>
    {icon && <Icon name={icon} size={14}/>}
    {label}
    {count && <span style={{
      background: active ? 'var(--brand-500)' : 'var(--brand-50)',
      color: active ? '#fff' : 'var(--brand-700)',
      fontSize: 10, fontWeight: 700, padding: '1px 6px', borderRadius: 8, minWidth: 16, textAlign: 'center',
    }}>{count}</span>}
    {caret && <Icon name="chevron-down" size={12}/>}
  </div>
);

const FullWidthResultCard = ({ title, dest, duration, rating, count, price, img, category, saved, isHotel, stars, score, scoreLabel, mealPlan, refundable }) => (
  <div className="card" style={{ display: 'flex', overflow: 'hidden', cursor: 'pointer' }}>
    <div style={{ width: 130, flexShrink: 0, position: 'relative', background: `url(${img}) center/cover`, backgroundColor: 'var(--surface-muted)' }}>
      <button style={{
        position: 'absolute', top: 8, right: 8, width: 32, height: 32, borderRadius: '50%',
        background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(8px)', border: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
      }}>
        <Icon name="heart" size={16} color={saved ? 'var(--brand-500)' : 'var(--ink)'} style={saved ? { fill: 'var(--brand-500)' } : {}}/>
      </button>
    </div>
    <div style={{ flex: 1, padding: '12px 14px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 6 }}>
      <div>
        {!isHotel && <Pill tone="dark" size="sm">{category}</Pill>}
        {isHotel && (
          <div style={{ display: 'flex', gap: 1, color: 'var(--brand-500)', marginBottom: 4 }}>
            {Array.from({ length: stars }).map((_, i) => <Icon key={i} name="star" size={11}/>)}
          </div>
        )}
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink-strong)', lineHeight: 1.25, marginTop: isHotel ? 0 : 6, textWrap: 'pretty', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{title}</div>
        <div style={{ fontSize: 11, color: 'var(--ink-low)', marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
          <Icon name="map-pin" size={11}/>{dest}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          {isHotel ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{ background: 'var(--brand-500)', color: 'var(--on-brand)', fontSize: 11, fontWeight: 800, padding: '2px 6px', borderRadius: 4 }}>{score}</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink)' }}>{scoreLabel}</div>
            </div>
          ) : <Stars value={rating} size={11} showValue count={count}/>}
          <div style={{ fontSize: 11, color: 'var(--ink-dim)', marginTop: 4 }}>
            {isHotel ? `${mealPlan} · ${refundable ? 'ücretsiz iptal' : 'iade yok'}` : duration}
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 11, color: 'var(--ink-low)' }}>{isHotel ? 'gece' : 'kişi'}</div>
          <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--ink-strong)', letterSpacing: '-0.02em', lineHeight: 1 }}>₺{price.toLocaleString('tr-TR')}</div>
        </div>
      </div>
    </div>
  </div>
);

// ─── Map view (results overlaid on map) ─────────────────
const SearchMapView = () => (
  <MobileScreen>
    {/* Map */}
    <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(ellipse 70% 40% at 30% 60%, #c4dfe6 0%, #a3c2cd 50%, transparent 90%),
          radial-gradient(ellipse 60% 50% at 70% 30%, #cbd9b2 0%, #b3c896 50%, transparent 90%),
          linear-gradient(180deg, #d8e3e7 0%, #c2d0d6 100%)
        `,
      }}>
        {/* Roads */}
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
          <path d="M0 200 Q 100 250 200 220 T 400 250" stroke="#fff" strokeWidth="3" fill="none" opacity="0.7"/>
          <path d="M50 0 Q 100 150 80 300 T 120 600" stroke="#fff" strokeWidth="2" fill="none" opacity="0.6"/>
          <path d="M0 400 Q 200 380 400 410" stroke="#f5efe7" strokeWidth="3" fill="none" opacity="0.8"/>
        </svg>
      </div>

      {/* Top search bar (floating) */}
      <div style={{ position: 'absolute', top: 12, left: 16, right: 16, display: 'flex', gap: 8 }}>
        <button style={{
          width: 44, height: 44, borderRadius: '50%', background: 'var(--surface-raised)',
          border: 0, boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)', cursor: 'pointer',
        }}>
          <Icon name="chevron-left" size={22}/>
        </button>
        <div style={{
          flex: 1, height: 44, borderRadius: 'var(--r-pill)', background: 'var(--surface-raised)',
          padding: '0 16px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-md)',
        }}>
          <Icon name="search" size={16} color="var(--ink-dim)"/>
          <div style={{ flex: 1, fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>Bodrum · 5 May, 2 kişi</div>
          <Icon name="filter" size={16} color="var(--ink-dim)"/>
        </div>
      </div>

      {/* Map pins (price tags) */}
      {[
        { x: '20%', y: '32%', price: '₺1.2k', active: false },
        { x: '52%', y: '46%', price: '₺2.1k', active: true },
        { x: '36%', y: '60%', price: '₺850', active: false },
        { x: '70%', y: '58%', price: '₺3.4k', active: false },
        { x: '60%', y: '72%', price: '₺1.9k', active: false },
        { x: '28%', y: '78%', price: '₺640', active: false },
      ].map((p, i) => (
        <div key={i} style={{
          position: 'absolute', left: p.x, top: p.y, transform: 'translate(-50%, -100%)',
          padding: '6px 12px', borderRadius: 'var(--r-pill)',
          background: p.active ? 'var(--ink-strong)' : 'var(--surface-raised)',
          color: p.active ? 'var(--on-dark)' : 'var(--ink-strong)',
          fontSize: 12, fontWeight: 800, boxShadow: 'var(--shadow-md)',
          border: `1px solid ${p.active ? 'var(--ink-strong)' : 'var(--line)'}`,
          whiteSpace: 'nowrap',
          ...(p.active && { transform: 'translate(-50%, -110%) scale(1.1)' }),
        }}>{p.price}</div>
      ))}

      {/* Re-search */}
      <div style={{ position: 'absolute', top: 78, left: '50%', transform: 'translateX(-50%)' }}>
        <button style={{
          padding: '8px 16px', borderRadius: 'var(--r-pill)', background: 'var(--ink-strong)',
          color: 'var(--on-dark)', fontSize: 12, fontWeight: 700, border: 0, cursor: 'pointer',
          boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <Icon name="refresh" size={14}/> Bu alanda ara
        </button>
      </div>

      {/* List toggle (bottom-right) */}
      <button style={{
        position: 'absolute', bottom: 130, right: 16, padding: '10px 16px', borderRadius: 'var(--r-pill)',
        background: 'var(--ink-strong)', color: 'var(--on-dark)', fontSize: 13, fontWeight: 700,
        border: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8, boxShadow: 'var(--shadow-md)',
      }}>
        <Icon name="list" size={16}/> Liste
      </button>

      {/* Bottom card preview */}
      <div style={{ position: 'absolute', left: 16, right: 16, bottom: 14, background: 'var(--surface-raised)', borderRadius: 'var(--r-lg)', padding: 12, display: 'flex', gap: 12, boxShadow: 'var(--shadow-md)' }}>
        <div style={{ width: 80, aspectRatio: '1', borderRadius: 'var(--r-md)', background: `url(${PHOTO.boat}) center/cover` }}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <Pill tone="dark" size="sm">Tekne</Pill>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-strong)', marginTop: 4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>Yelkenli ile gün batımı turu</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 6 }}>
            <Stars value={4.9} size={11} showValue count={184}/>
            <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink-strong)' }}>₺2.100</div>
          </div>
        </div>
      </div>
    </div>
  </MobileScreen>
);

// ─── Filters bottom sheet ───────────────────────────────
const FiltersSheet = () => (
  <MobileScreen bg="var(--ink-strong)">
    {/* Dim backdrop */}
    <div style={{ flex: 1, position: 'relative', background: 'rgba(31,18,9,0.55)' }}>
      {/* Sheet from bottom (covering ~85%) */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: 'var(--surface-raised)',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        height: '88%', display: 'flex', flexDirection: 'column', overflow: 'hidden',
        boxShadow: '0 -16px 40px rgba(31,18,9,0.25)',
      }}>
        {/* Grabber */}
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8 }}>
          <div style={{ width: 36, height: 4, borderRadius: 2, background: 'var(--ink-soft)' }}/>
        </div>
        <div style={{ padding: '12px 20px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--ink-strong)', letterSpacing: '-0.02em' }}>Filtreler</div>
          <button style={{ background: 'none', border: 0, fontSize: 13, fontWeight: 700, color: 'var(--brand-600)', cursor: 'pointer' }}>Sıfırla</button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px 16px' }}>
          {/* Price range */}
          <FilterSection title="Fiyat aralığı" sub="₺640 – ₺8.4k">
            <div style={{ marginTop: 14, position: 'relative', height: 48 }}>
              {/* histogram */}
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: 32 }}>
                {[10, 28, 60, 90, 75, 55, 40, 30, 22, 16, 12, 8, 6, 4, 3, 2].map((h, i) => (
                  <div key={i} style={{
                    flex: 1, height: `${h}%`,
                    background: i >= 2 && i <= 12 ? 'var(--brand-300)' : 'var(--line)',
                    borderRadius: 2,
                  }}/>
                ))}
              </div>
              {/* track */}
              <div style={{ position: 'relative', height: 4, background: 'var(--line)', borderRadius: 2, marginTop: 4 }}>
                <div style={{ position: 'absolute', left: '12%', right: '20%', top: 0, bottom: 0, background: 'var(--brand-500)', borderRadius: 2 }}/>
                <div style={{ position: 'absolute', left: '12%', top: '50%', transform: 'translate(-50%, -50%)', width: 22, height: 22, borderRadius: '50%', background: '#fff', border: '2px solid var(--brand-500)', boxShadow: 'var(--shadow-sm)' }}/>
                <div style={{ position: 'absolute', left: '80%', top: '50%', transform: 'translate(-50%, -50%)', width: 22, height: 22, borderRadius: '50%', background: '#fff', border: '2px solid var(--brand-500)', boxShadow: 'var(--shadow-sm)' }}/>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 18 }}>
              <Field label="Min"><Input value="₺1.200"/></Field>
              <Field label="Max"><Input value="₺3.800"/></Field>
            </div>
          </FilterSection>

          {/* Süre */}
          <FilterSection title="Süre">
            <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
              {['<2 saat', '2–4 saat', 'Yarım gün', 'Tam gün', 'Birden fazla gün'].map((s, i) => (
                <Chip key={s} active={i === 1 || i === 3}>{s}</Chip>
              ))}
            </div>
          </FilterSection>

          {/* Kategori */}
          <FilterSection title="Kategori">
            <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
              {['Tekne', 'Doğa', 'Macera', 'Gastronomi', 'Kültür', 'Dalış', 'Wellness'].map((s) => (
                <Chip key={s} active={s === 'Tekne' || s === 'Doğa'}>{s}</Chip>
              ))}
            </div>
          </FilterSection>

          {/* Özellikler */}
          <FilterSection title="Özellikler">
            <div style={{ display: 'grid', gap: 6, marginTop: 10 }}>
              {['Anında onay', 'Ücretsiz iptal', 'Aile dostu', 'Türkçe rehber', 'Ulaşım dahil', 'Vegan menüsü'].map((f, i) => (
                <label key={f} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 4px', cursor: 'pointer' }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 6, border: '1.5px solid var(--line-strong)',
                    background: i < 2 ? 'var(--brand-500)' : 'transparent',
                    borderColor: i < 2 ? 'var(--brand-500)' : 'var(--line-strong)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    {i < 2 && <Icon name="check" size={14} color="#fff"/>}
                  </div>
                  <div style={{ fontSize: 14, color: 'var(--ink)' }}>{f}</div>
                </label>
              ))}
            </div>
          </FilterSection>

          {/* Puan */}
          <FilterSection title="Misafir puanı">
            <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
              {['4.5+', '4.0+', '3.5+', '3.0+'].map((s, i) => (
                <Chip key={s} active={i === 0}>{s}</Chip>
              ))}
            </div>
          </FilterSection>
        </div>

        {/* Sticky footer */}
        <div style={{ padding: 16, borderTop: '1px solid var(--line-soft)', display: 'flex', gap: 10, background: 'var(--surface-raised)' }}>
          <Btn variant="ghost" size="lg">Kapat</Btn>
          <Btn variant="primary" size="lg" block>248 sonucu göster</Btn>
        </div>
      </div>
    </div>
  </MobileScreen>
);

const FilterSection = ({ title, sub, children }) => (
  <div style={{ paddingTop: 16, paddingBottom: 16, borderBottom: '1px solid var(--line-soft)' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
      <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink-strong)' }}>{title}</div>
      {sub && <div style={{ fontSize: 12, color: 'var(--ink-dim)' }}>{sub}</div>}
    </div>
    {children}
  </div>
);

const Chip = ({ active, children }) => (
  <div style={{
    padding: '8px 14px', borderRadius: 'var(--r-pill)',
    background: active ? 'var(--ink-strong)' : 'var(--surface-muted)',
    color: active ? 'var(--on-dark)' : 'var(--ink)',
    fontSize: 13, fontWeight: 600, cursor: 'pointer',
    border: `1px solid ${active ? 'var(--ink-strong)' : 'transparent'}`,
  }}>{children}</div>
);

Object.assign(window, {
  DiscoverScreen, SearchActive, SearchResultsList, SearchMapView, FiltersSheet,
  SectionHeader, FilterChip, FullWidthResultCard, FilterSection, Chip,
});