// Public site screens — Home, Listings, Listing detail, Booking, Login, etc.

// ═══ HOME ════════════════════════════════════════════════════
const HomePage = ({ onNav, heroVariant, cardVariant }) => {
  const [favs, toggleFav] = useFavorites();
  const [dest, setDest] = React.useState('');
  const [date, setDate] = React.useState('');
  const [cat, setCat] = React.useState('');
  const [searchVertical, setSearchVertical] = React.useState('activity');
  const HD = window.HOTEL_DATA;
  const [checkIn, setCheckIn] = React.useState(HD ? HD.fmt(HD.addDays(HD.today, 7)) : '');
  const [checkOut, setCheckOut] = React.useState(HD ? HD.fmt(HD.addDays(HD.today, 10)) : '');

  // Hero composition variants
  const HeroA = () => (
    <div style={{position:'relative', height:'72vh', minHeight:560, maxHeight:760, overflow:'hidden', background:'var(--color-dark-800)'}}>
      <img src={IMG('hero1',2400,1600)} alt="" style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(45,27,14,.3) 0%, rgba(45,27,14,.65) 100%)'}}/>
      <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 32px'}}>
        <div style={{maxWidth:1440, margin:'0 auto', width:'100%'}}>
          <div className="eyebrow" style={{color:'var(--color-brand-300)'}}>VAGOONYA · AKTİVİTE</div>
          <h1 style={{color:'#fff', marginTop:16, fontSize:'clamp(54px, 7vw, 96px)', maxWidth:900, lineHeight:.98}}>Şehrin ritmine göre yaşa.</h1>
          <p style={{color:'rgba(255,255,255,.85)', fontSize:20, marginTop:20, maxWidth:580, lineHeight:1.5}}>
            Gün batımında bir tekne, eski taş sokaklarda bir rehber. Türkiye'nin her köşesinden
            yerel deneyimler — ilk elden.
          </p>
        </div>
      </div>
    </div>
  );

  const HeroB = () => (
    <div style={{background:'var(--color-surface)', padding:'80px 32px 0'}}>
      <div style={{maxWidth:1440, margin:'0 auto', display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:48, alignItems:'center'}}>
        <div>
          <div className="eyebrow" style={{color:'var(--color-brand-600)'}}>VAGOONYA · AKTİVİTE</div>
          <h1 style={{marginTop:14, fontSize:'clamp(48px, 6vw, 88px)', lineHeight:1}}>Şehrin ritmine <em style={{color:'var(--color-brand-600)', fontStyle:'italic', fontFamily:'Manrope'}}>göre yaşa.</em></h1>
          <p style={{fontSize:19, color:'var(--color-ink-dim)', marginTop:20, maxWidth:520, lineHeight:1.5}}>
            Gün batımında bir tekne, eski taş sokaklarda bir rehber. Türkiye'nin her köşesinden yerel deneyimler.
          </p>
          <div style={{display:'flex', gap:10, marginTop:28}}>
            <Btn variant="primary" size="lg" iconRight="arrow">Aktivite Ara</Btn>
            <Btn variant="ghost" size="lg">Nasıl çalışır?</Btn>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, height:560}}>
          <div style={{borderRadius:'var(--r-xl)', overflow:'hidden', marginTop:32}}><img src={IMG('hero-b1',600,900)} style={{width:'100%', height:'100%', objectFit:'cover'}}/></div>
          <div style={{borderRadius:'var(--r-xl)', overflow:'hidden'}}><img src={IMG('hero-b2',600,900)} style={{width:'100%', height:'100%', objectFit:'cover'}}/></div>
        </div>
      </div>
    </div>
  );

  const HeroC = () => (
    <div style={{position:'relative', padding:'100px 32px 140px', background:'var(--color-dark-800)', color:'#fff', overflow:'hidden'}}>
      <div style={{position:'absolute', inset:0, opacity:.35}}>
        <img src={IMG('hero-c',2400,1400)} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>
      <div style={{position:'relative', maxWidth:1200, margin:'0 auto', textAlign:'center'}}>
        <div className="eyebrow" style={{color:'var(--color-brand-300)'}}>VAGOONYA · 2026</div>
        <h1 style={{color:'#fff', fontSize:'clamp(60px, 8.5vw, 128px)', lineHeight:.92, marginTop:20, fontWeight:800, letterSpacing:'-0.05em'}}>
          Hayaline en<br/>yakın rota.
        </h1>
        <p style={{fontSize:20, color:'rgba(255,255,255,.75)', marginTop:28, maxWidth:620, margin:'28px auto 0'}}>
          30.000+ gezginin güvendiği yerel rehberler, gerçek deneyimler ve anında onay.
        </p>
      </div>
    </div>
  );

  const Hero = heroVariant === 'B' ? HeroB : heroVariant === 'C' ? HeroC : HeroA;

  return <div>
    <Hero/>

    {/* Search composer — floats under hero */}
    <div style={{padding:'0 32px', marginTop: heroVariant === 'B' ? 40 : -64, position:'relative', zIndex:10}}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>
        {/* Vertical toggle */}
        <div style={{display:'inline-flex', gap:4, padding:4, background:'var(--color-surface-raised)', borderRadius:'var(--r-pill) var(--r-pill) 0 0', boxShadow:'0 -2px 12px rgba(0,0,0,.04)', marginBottom:0, position:'relative', top:1}}>
          {[['activity','Aktivite','sailboat'],['hotel','Konaklama','home']].map(([k,l,ic]) =>
            <button key={k} onClick={()=>setSearchVertical(k)} style={{padding:'10px 22px', borderRadius:'var(--r-pill)', border:0, cursor:'default',
              fontSize:13, fontWeight:700, display:'flex', alignItems:'center', gap:6,
              background: searchVertical===k ? 'var(--color-brand-500)' : 'transparent',
              color: searchVertical===k ? 'var(--color-on-brand)' : 'var(--color-ink-dim)'}}>
              <Icon name={ic} size={14}/> {l}
            </button>)}
        </div>

        {searchVertical === 'activity' ? <div className="card" style={{padding:10, borderRadius:'0 var(--r-xl) var(--r-xl) var(--r-xl)',
          display:'grid', gridTemplateColumns:'1.2fr 1fr 1.2fr auto', alignItems:'stretch', gap:4,
          boxShadow:'var(--sh-elevated)'}}>
          <div style={{padding:'14px 20px', borderRight:'1px solid var(--color-line)'}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Nereye?</div>
            <input placeholder="Destinasyon ara" value={dest} onChange={e=>setDest(e.target.value)}
              style={{border:0, outline:'none', background:'transparent', fontSize:15, fontWeight:600, width:'100%', marginTop:4, color:'var(--color-ink-strong)'}}/>
          </div>
          <div style={{padding:'14px 20px', borderRight:'1px solid var(--color-line)'}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Ne zaman?</div>
            <input type="date" value={date} onChange={e=>setDate(e.target.value)}
              style={{border:0, outline:'none', background:'transparent', fontSize:15, fontWeight:600, width:'100%', marginTop:4, color:'var(--color-ink-strong)'}}/>
          </div>
          <div style={{padding:'14px 20px', borderRight:'1px solid var(--color-line)'}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Kategori</div>
            <select value={cat} onChange={e=>setCat(e.target.value)}
              style={{border:0, outline:'none', background:'transparent', fontSize:15, fontWeight:600, width:'100%', marginTop:4, color:'var(--color-ink-strong)', appearance:'none'}}>
              <option value="">Tüm kategoriler</option>
              {CATEGORIES.slice(0,8).map(c => <option key={c.slug} value={c.slug}>{c.name}</option>)}
            </select>
          </div>
          <Btn variant="primary" size="lg" iconRight="arrow" onClick={()=>onNav('listings')} style={{margin:6}}>Aktivite Ara</Btn>
        </div> : <div className="card" style={{padding:10, borderRadius:'0 var(--r-xl) var(--r-xl) var(--r-xl)',
          display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr auto', alignItems:'stretch', gap:4,
          boxShadow:'var(--sh-elevated)'}}>
          <div style={{padding:'14px 20px', borderRight:'1px solid var(--color-line)'}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Şehir / Otel</div>
            <input placeholder="Bodrum, Kapadokya..." value={dest} onChange={e=>setDest(e.target.value)}
              style={{border:0, outline:'none', background:'transparent', fontSize:15, fontWeight:600, width:'100%', marginTop:4, color:'var(--color-ink-strong)'}}/>
          </div>
          <div style={{padding:'14px 20px', borderRight:'1px solid var(--color-line)'}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Giriş</div>
            <input type="date" value={checkIn} onChange={e=>setCheckIn(e.target.value)}
              style={{border:0, outline:'none', background:'transparent', fontSize:15, fontWeight:600, width:'100%', marginTop:4, color:'var(--color-ink-strong)'}}/>
          </div>
          <div style={{padding:'14px 20px', borderRight:'1px solid var(--color-line)'}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Çıkış</div>
            <input type="date" value={checkOut} onChange={e=>setCheckOut(e.target.value)}
              style={{border:0, outline:'none', background:'transparent', fontSize:15, fontWeight:600, width:'100%', marginTop:4, color:'var(--color-ink-strong)'}}/>
          </div>
          <div style={{padding:'14px 20px', borderRight:'1px solid var(--color-line)'}}>
            <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Misafir</div>
            <div style={{fontSize:15, fontWeight:600, marginTop:4, color:'var(--color-ink-strong)'}}>2 yetişkin · 1 oda</div>
          </div>
          <Btn variant="primary" size="lg" iconRight="arrow" onClick={()=>onNav('hotels',{checkIn, checkOut})} style={{margin:6}}>Otel Ara</Btn>
        </div>}
      </div>
    </div>

    {/* Trust strip */}
    <div style={{padding:'56px 32px 24px', maxWidth:1440, margin:'0 auto'}}>
      <div style={{display:'flex', gap:12, flexWrap:'wrap', justifyContent:'center'}}>
        {['30.000+ gezgin','★ 4.8 ortalama puan','3 dilde destek','Anında onay','İptal güvencesi'].map(t =>
          <Pill key={t}>{t}</Pill>)}
      </div>
    </div>

    {/* Destinations */}
    <section style={{padding:'40px 32px', maxWidth:1440, margin:'0 auto'}}>
      <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:28}}>
        <div>
          <div className="eyebrow">DESTINASYONLAR</div>
          <h2 style={{marginTop:8}}>Türkiye'nin ruhu</h2>
        </div>
        <Btn variant="ghost" iconRight="arrow" onClick={()=>onNav('destinations')}>Tümünü gör</Btn>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:16}}>
        {DESTINATIONS.map(d => <div key={d.id} onClick={()=>onNav('destination-detail',{slug:d.slug})} style={{cursor:'default'}}>
          <div style={{aspectRatio:'4/5', borderRadius:'var(--r-lg)', overflow:'hidden', position:'relative', marginBottom:10}}>
            <img src={d.img} style={{width:'100%', height:'100%', objectFit:'cover', transition:'transform .5s ease'}} onMouseEnter={e=>e.currentTarget.style.transform='scale(1.05)'} onMouseLeave={e=>e.currentTarget.style.transform=''}/>
            <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg,transparent 50%, rgba(0,0,0,.6))'}}/>
            <div style={{position:'absolute', bottom:14, left:14, right:14, color:'#fff'}}>
              <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.02em'}}>{d.name}</div>
              <div style={{fontSize:12, opacity:.85}}>{d.count} aktivite</div>
            </div>
          </div>
        </div>)}
      </div>
    </section>

    {/* Categories */}
    <section style={{padding:'40px 32px', maxWidth:1440, margin:'0 auto'}}>
      <div style={{marginBottom:28}}>
        <div className="eyebrow">KATEGORİLER</div>
        <h2 style={{marginTop:8}}>Ne tarz bir gün istiyorsun?</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:12}}>
        {CATEGORIES.map(c => <div key={c.slug} onClick={()=>onNav('category-detail',{slug:c.slug})}
          className="card-interactive" style={{padding:'20px 16px', border:'1px solid var(--color-line)', borderRadius:'var(--r-md)',
            background:'var(--color-surface-raised)', display:'flex', alignItems:'center', gap:12, cursor:'default'}}>
          <div style={{width:40, height:40, borderRadius:'var(--r-sm)', background:'var(--color-brand-50)',
            color:'var(--color-brand-600)', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <Icon name={c.icon} size={20}/>
          </div>
          <div>
            <div style={{fontSize:13, fontWeight:700}}>{c.name}</div>
            <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{c.count} aktivite</div>
          </div>
        </div>)}
      </div>
    </section>

    {/* Featured listings */}
    <section style={{padding:'40px 32px', maxWidth:1440, margin:'0 auto'}}>
      <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:28}}>
        <div>
          <div className="eyebrow">ÖNE ÇIKANLAR</div>
          <h2 style={{marginTop:8}}>Bu hafta konuşulanlar</h2>
        </div>
        <Btn variant="ghost" iconRight="arrow" onClick={()=>onNav('listings')}>Tüm aktiviteler</Btn>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24}}>
        {LISTINGS.slice(0,6).map(l => <ListingCard key={l.id} l={l} variant={cardVariant||'standard'} favs={favs} toggleFav={toggleFav} onClick={()=>onNav('listing-detail',{slug:l.slug})}/>)}
      </div>
    </section>

    {/* Featured hotels */}
    {HD && <section style={{padding:'40px 32px', maxWidth:1440, margin:'0 auto'}}>
      <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:28}}>
        <div>
          <div className="eyebrow" style={{color:'var(--color-brand-600)'}}>KONAKLAMA</div>
          <h2 style={{marginTop:8}}>Öne çıkan oteller</h2>
          <div style={{fontSize:14, color:'var(--color-ink-dim)', marginTop:4}}>Tarih müsait, fiyat şeffaf</div>
        </div>
        <Btn variant="ghost" iconRight="arrow" onClick={()=>onNav('hotels')}>Tüm oteller</Btn>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18}}>
        {HD.hotels.slice(0,4).map(h => {
          const plan = HD.ratePlans.find(rp => rp.hotelId === h.id);
          const cal = plan ? (HD.calendar[plan.id]||[]) : [];
          const cheapest = cal.filter(c=>!c.stopSell).reduce((m,c)=>c.price<m?c.price:m, Infinity);
          const fav = favs && favs[h.id];
          return <div key={h.id} onClick={()=>onNav('hotel-detail',{slug:h.slug})} className="card card-interactive" style={{cursor:'default', overflow:'hidden'}}>
            <div style={{position:'relative', aspectRatio:'4/3'}}>
              <img src={h.hero} style={{width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0}}/>
              <div style={{position:'absolute', top:10, left:10, background:'rgba(0,0,0,.55)', color:'#fff', padding:'3px 8px', borderRadius:999, fontSize:10, fontWeight:700}}>{h.stars>0?'★'.repeat(h.stars):h.cat}</div>
              <button onClick={e=>{e.stopPropagation(); toggleFav(h.id);}} style={{position:'absolute', top:10, right:10, width:30, height:30, borderRadius:'50%', border:0, background:'rgba(255,255,255,.92)', cursor:'default', color: fav?'var(--color-brand-500)':'var(--color-ink)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name={fav?'heart-fill':'heart'} size={13}/></button>
            </div>
            <div style={{padding:'14px 16px'}}>
              <div style={{fontSize:11, color:'var(--color-ink-low)', display:'flex', justifyContent:'space-between'}}>
                <span><Icon name="pin" size={10}/> {h.destination}</span>
                <span style={{display:'flex', alignItems:'center', gap:4}}><span style={{background:'var(--color-brand-600)', color:'#fff', padding:'1px 5px', borderRadius:4, fontWeight:800, fontSize:10}}>{h.score}</span> {h.reviews}</span>
              </div>
              <div style={{fontFamily:'var(--font-display)', fontSize:16, fontWeight:700, marginTop:6, lineHeight:1.25, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{h.title}</div>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginTop:8, paddingTop:10, borderTop:'1px solid var(--color-line-soft)'}}>
                <span style={{fontSize:11, color:'var(--color-ink-low)'}}>gecelik</span>
                <span className="tnum" style={{fontSize:18, fontWeight:800, color:'var(--color-brand-600)', fontFamily:'var(--font-display)'}}>{cheapest===Infinity?'—':cheapest.toLocaleString('tr-TR')+' ₺'}</span>
              </div>
            </div>
          </div>;
        })}
      </div>
    </section>}

    {/* Editor's curated — full-bleed strip */}
    <section style={{padding:'56px 0 40px', marginTop:40, background:'var(--color-surface-muted)'}}>
      <div style={{maxWidth:1440, margin:'0 auto', padding:'0 32px'}}>
        <div style={{marginBottom:28}}>
          <div className="eyebrow" style={{color:'var(--color-brand-600)'}}>EDİTÖR SEÇKİSİ</div>
          <h2 style={{marginTop:8}}>Sahilde üç gün.</h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:16, height:420}}>
          {[
            {title:'Ege\'de 3 günlük mavi yolculuk', dest:'Bodrum → Kaş', img:IMG('curated1',1200,900)},
            {title:'İstanbul\'da tarih rotaları', dest:'7 yürüyüş, 3 gün', img:IMG('curated2',800,900)},
            {title:'Kapadokya: balondan tadıma', dest:'2 gün / 1 gece', img:IMG('curated3',800,900)},
          ].map((c,i) => <div key={i} style={{position:'relative', borderRadius:'var(--r-xl)', overflow:'hidden'}}>
            <img src={c.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
            <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7) 100%)'}}/>
            <div style={{position:'absolute', bottom:24, left:24, right:24, color:'#fff'}}>
              <div style={{fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', opacity:.9, marginBottom:8}}>{c.dest}</div>
              <div style={{fontSize: i===0 ? 28 : 22, fontWeight:700, letterSpacing:'-0.025em', lineHeight:1.15}}>{c.title}</div>
            </div>
          </div>)}
        </div>
      </div>
    </section>

    {/* Blog */}
    <section style={{padding:'56px 32px 20px', maxWidth:1440, margin:'0 auto'}}>
      <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:28}}>
        <div>
          <div className="eyebrow">BLOG</div>
          <h2 style={{marginTop:8}}>Günlükten notlar</h2>
        </div>
        <Btn variant="ghost" iconRight="arrow" onClick={()=>onNav('blog')}>Tüm yazılar</Btn>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24}}>
        {BLOGS.slice(0,3).map(b => <div key={b.id} className="card-interactive" style={{cursor:'default'}}>
          <div style={{aspectRatio:'16/10', borderRadius:'var(--r-lg)', overflow:'hidden', marginBottom:14}}>
            <img src={b.cover} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
          </div>
          <Pill tone="brand">{b.cat}</Pill>
          <h4 style={{fontSize:20, marginTop:10, lineHeight:1.3}}>{b.title}</h4>
          <p style={{color:'var(--color-ink-dim)', fontSize:14, marginTop:6, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{b.excerpt}</p>
          <div style={{fontSize:12, color:'var(--color-ink-low)', marginTop:12}}>{b.author} · {b.date} · {b.readMins} dk okuma</div>
        </div>)}
      </div>
    </section>
  </div>;
};

// ═══ LISTINGS INDEX ═══════════════════════════════════════════
const ListingsIndexPage = ({ onNav, cardVariant, vertical }) => {
  const [favs, toggleFav] = useFavorites();
  const [priceMax, setPriceMax] = React.useState(vertical==='Hotel' ? 15000 : 5000);
  const [minRating, setMinRating] = React.useState(0);
  const [destFilter, setDestFilter] = React.useState([]);
  const [catFilter, setCatFilter] = React.useState([]);
  const [sort, setSort] = React.useState('popular');
  const [showMap, setShowMap] = React.useState(false);
  const [durationPreset, setDurationPreset] = React.useState('');
  const isHotel = vertical === 'Hotel';

  // Hotel-mode date+guest state
  const HD = window.HOTEL_DATA;
  const [checkIn, setCheckIn] = React.useState(HD ? HD.fmt(HD.addDays(HD.today, 7)) : '');
  const [checkOut, setCheckOut] = React.useState(HD ? HD.fmt(HD.addDays(HD.today, 10)) : '');
  const [adults, setAdults] = React.useState(2);
  const [rooms, setRooms] = React.useState(1);
  const [starFilter, setStarFilter] = React.useState([]);
  const [mealPlanFilter, setMealPlanFilter] = React.useState([]);
  const nights = isHotel && checkIn && checkOut ? Math.max(1, Math.round((new Date(checkOut) - new Date(checkIn))/86400000)) : 1;

  const toggleArr = (arr, setArr, v) => setArr(arr.includes(v) ? arr.filter(x=>x!==v) : [...arr, v]);

  let filtered, hotelRows = [];
  if (isHotel && HD) {
    hotelRows = HD.hotels.map(h => {
      const plans = HD.ratePlans.filter(rp => rp.hotelId === h.id).map(rp => {
        const cal = HD.calendar[rp.id] || [];
        const range = cal.filter(c => c.date >= checkIn && c.date < checkOut);
        if (range.length < nights) return null;
        if (range.some(c => c.stopSell)) return null;
        const total = range.reduce((s,c)=>s+c.price,0) * rooms;
        return { ...rp, total, avgNight: total/Math.max(1, nights*rooms), mealPlan: rp.mealPlan, refundable: rp.refundable };
      }).filter(Boolean);
      const cheapest = plans.length ? plans.reduce((a,b)=>a.avgNight<b.avgNight?a:b) : null;
      return { hotel: h, plans, cheapest };
    });
    if (destFilter.length) hotelRows = hotelRows.filter(r => destFilter.includes(r.hotel.destination));
    if (starFilter.length) hotelRows = hotelRows.filter(r => starFilter.includes(r.hotel.stars));
    if (minRating > 0) hotelRows = hotelRows.filter(r => (r.hotel.score/2) >= minRating);
    hotelRows = hotelRows.filter(r => !r.cheapest || r.cheapest.avgNight <= priceMax);
    if (mealPlanFilter.length) hotelRows = hotelRows.filter(r => r.plans.some(p=>mealPlanFilter.includes(p.mealPlan)));
    if (sort === 'price-asc') hotelRows.sort((a,b)=>(a.cheapest?.avgNight||0)-(b.cheapest?.avgNight||0));
    if (sort === 'price-desc') hotelRows.sort((a,b)=>(b.cheapest?.avgNight||0)-(a.cheapest?.avgNight||0));
    if (sort === 'rating') hotelRows.sort((a,b)=>b.hotel.score-a.hotel.score);
  } else {
    filtered = LISTINGS.filter(l => l.price <= priceMax && l.rating >= minRating);
    if (destFilter.length) filtered = filtered.filter(l => destFilter.includes(l.dest));
    if (catFilter.length) filtered = filtered.filter(l => catFilter.includes(l.cat));
    if (sort === 'price-asc') filtered.sort((a,b)=>a.price-b.price);
    if (sort === 'price-desc') filtered.sort((a,b)=>b.price-a.price);
    if (sort === 'rating') filtered.sort((a,b)=>b.rating-a.rating);
  }

  const activeFilters = [...destFilter.map(d=>({key:`dest-${d}`, label:d, clear:()=>setDestFilter(destFilter.filter(x=>x!==d))})),
    ...(isHotel ? starFilter.map(s=>({key:`s-${s}`, label:`${s}★`, clear:()=>setStarFilter(starFilter.filter(x=>x!==s))})) : catFilter.map(c=>({key:`cat-${c}`, label:c, clear:()=>setCatFilter(catFilter.filter(x=>x!==c))}))),
    ...(isHotel ? mealPlanFilter.map(m=>({key:`m-${m}`, label:HD?.mealPlanLabel(m)||m, clear:()=>setMealPlanFilter(mealPlanFilter.filter(x=>x!==m))})) : []),
    ...(minRating>0 ? [{key:'r', label:`★ ${minRating}+`, clear:()=>setMinRating(0)}] : [])];

  const count = isHotel ? hotelRows.length : filtered.length;

  return <div style={{maxWidth:1440, margin:'0 auto', padding:'24px 32px 80px'}}>
    <div style={{fontSize:12, color:'var(--color-ink-low)', marginBottom:8}}>Ana Sayfa · {isHotel ? 'Konaklama' : 'Aktiviteler'}</div>

    {/* Vertical toggle */}
    <div style={{display:'flex', gap:6, marginBottom:18, padding:4, background:'var(--color-surface-muted)', borderRadius:'var(--r-pill)', width:'fit-content'}}>
      <button onClick={()=>onNav('listings')} style={{padding:'8px 18px', borderRadius:'var(--r-pill)', border:0, cursor:'default',
        fontSize:13, fontWeight:700,
        background: !isHotel ? 'var(--color-surface-raised)' : 'transparent',
        color: !isHotel ? 'var(--color-ink-strong)' : 'var(--color-ink-dim)',
        boxShadow: !isHotel ? 'var(--sh-sm)' : 'none'}}>
        <Icon name="sailboat" size={14} style={{marginRight:6, verticalAlign:-2}}/> Aktiviteler
      </button>
      <button onClick={()=>onNav('hotels')} style={{padding:'8px 18px', borderRadius:'var(--r-pill)', border:0, cursor:'default',
        fontSize:13, fontWeight:700,
        background: isHotel ? 'var(--color-surface-raised)' : 'transparent',
        color: isHotel ? 'var(--color-ink-strong)' : 'var(--color-ink-dim)',
        boxShadow: isHotel ? 'var(--sh-sm)' : 'none'}}>
        <Icon name="home" size={14} style={{marginRight:6, verticalAlign:-2}}/> Konaklama
      </button>
    </div>

    {/* Hotel: date+guest search bar */}
    {isHotel && <div className="card" style={{padding:6, marginBottom:20, display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr auto', gap:4, alignItems:'stretch', borderRadius:'var(--r-xl)', boxShadow:'var(--sh-elevated)'}}>
      <div style={{padding:'12px 18px', borderRight:'1px solid var(--color-line)'}}>
        <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Şehir / Otel</div>
        <input placeholder="Bodrum, Kapadokya, Antalya..." style={{border:0, outline:'none', background:'transparent', fontSize:14, fontWeight:600, width:'100%', marginTop:4}}/>
      </div>
      <div style={{padding:'12px 18px', borderRight:'1px solid var(--color-line)'}}>
        <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Giriş</div>
        <input type="date" value={checkIn} onChange={e=>setCheckIn(e.target.value)} style={{border:0, outline:'none', background:'transparent', fontSize:14, fontWeight:600, width:'100%', marginTop:4}}/>
      </div>
      <div style={{padding:'12px 18px', borderRight:'1px solid var(--color-line)'}}>
        <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Çıkış</div>
        <input type="date" value={checkOut} onChange={e=>setCheckOut(e.target.value)} style={{border:0, outline:'none', background:'transparent', fontSize:14, fontWeight:600, width:'100%', marginTop:4}}/>
      </div>
      <div style={{padding:'12px 18px', borderRight:'1px solid var(--color-line)'}}>
        <div style={{fontSize:11, fontWeight:700, color:'var(--color-ink-low)', letterSpacing:'.1em', textTransform:'uppercase'}}>Misafir & Oda</div>
        <div style={{fontSize:14, fontWeight:600, marginTop:4}}>{adults} yetişkin · {rooms} oda · {nights} gece</div>
      </div>
      <Btn variant="primary" size="lg" iconRight="arrow" style={{margin:6}}>Ara</Btn>
    </div>}

    <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:24}}>
      <div>
        <h2 style={{fontSize:40}}>{isHotel ? 'Konaklama' : 'Tüm Aktiviteler'}</h2>
        <div style={{fontSize:14, color:'var(--color-ink-dim)', marginTop:6}}>{count} {isHotel ? 'tesis' : 'aktivite'} bulundu{isHotel && ` · ${nights} gece × ${rooms} oda`}</div>
      </div>
      <div style={{display:'flex', gap:10, alignItems:'center'}}>
        <Segmented options={[{value:false, label:'Liste'},{value:true, label:'Harita'}]} value={showMap} onChange={setShowMap}/>
        <Select value={sort} onChange={setSort} options={[
          {value:'popular', label:'En popüler'},
          {value:'recommended', label:'Önerilen'},
          {value:'rating', label:'En yüksek puan'},
          {value:'price-asc', label:'Fiyat ↑'},
          {value:'price-desc', label:'Fiyat ↓'},
          {value:'newest', label:'En yeni'},
        ]} style={{width:'auto', padding:'8px 14px'}}/>
      </div>
    </div>

    {activeFilters.length > 0 && <div style={{display:'flex', gap:8, marginBottom:16, flexWrap:'wrap', alignItems:'center'}}>
      <span style={{fontSize:12, color:'var(--color-ink-low)', fontWeight:600}}>Aktif filtreler:</span>
      {activeFilters.map(f => <button key={f.key} onClick={f.clear}
        className="pill" style={{background:'var(--color-brand-50)', color:'var(--color-brand-700)', border:'1px solid var(--color-brand-300)', cursor:'default'}}>
        {f.label} <Icon name="x" size={11}/>
      </button>)}
      <button style={{fontSize:12, color:'var(--color-ink-dim)', textDecoration:'underline', border:0, background:'transparent', cursor:'default'}}
        onClick={()=>{setDestFilter([]); setCatFilter([]); setMinRating(0); setPriceMax(5000);}}>Tümünü temizle</button>
    </div>}

    <div style={{display:'grid', gridTemplateColumns:'280px 1fr', gap:28}}>
      {/* Filters */}
      <aside style={{position:'sticky', top:90, alignSelf:'start'}}>
        <div className="card" style={{padding:20}}>
          <div style={{fontSize:14, fontWeight:700, marginBottom:14, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
            <span>Filtreler</span><Icon name="filter" size={14} style={{color:'var(--color-ink-dim)'}}/>
          </div>

          <div style={{marginBottom:18, paddingBottom:18, borderBottom:'1px solid var(--color-line-soft)'}}>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', marginBottom:10, textTransform:'uppercase', letterSpacing:'.08em'}}>Destinasyon</div>
            <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
              {DESTINATIONS.map(d => <button key={d.slug} onClick={()=>toggleArr(destFilter, setDestFilter, d.name)}
                style={{padding:'5px 10px', borderRadius:'var(--r-pill)', fontSize:12, fontWeight:600, cursor:'default',
                  border:'1px solid var(--color-line-strong)',
                  background: destFilter.includes(d.name) ? 'var(--color-ink-strong)' : 'var(--color-surface-raised)',
                  color: destFilter.includes(d.name) ? 'var(--color-on-dark)' : 'var(--color-ink)'}}>{d.name}</button>)}
            </div>
          </div>

          <div style={{marginBottom:18, paddingBottom:18, borderBottom:'1px solid var(--color-line-soft)'}}>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', marginBottom:10, textTransform:'uppercase', letterSpacing:'.08em'}}>{isHotel ? 'Yıldız' : 'Kategori'}</div>
            {isHotel ? <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
              {[5,4,3,0].map(s => <button key={s} onClick={()=>toggleArr(starFilter, setStarFilter, s)}
                style={{padding:'5px 10px', borderRadius:'var(--r-pill)', fontSize:12, fontWeight:600, cursor:'default',
                  border:'1px solid var(--color-line-strong)',
                  background: starFilter.includes(s) ? 'var(--color-ink-strong)' : 'var(--color-surface-raised)',
                  color: starFilter.includes(s) ? 'var(--color-on-dark)' : 'var(--color-ink)'}}>{s===0 ? 'Butik/Villa' : `${s} ★`}</button>)}
            </div> : CATEGORIES.slice(0,7).map(c => <label key={c.slug} style={{display:'flex', alignItems:'center', gap:8, padding:'4px 0', cursor:'default', fontSize:13}}>
              <input type="checkbox" checked={catFilter.includes(c.name)} onChange={()=>toggleArr(catFilter, setCatFilter, c.name)}
                style={{accentColor:'var(--color-brand-500)', width:14, height:14}}/>
              <span style={{flex:1}}>{c.name}</span>
              <span style={{fontSize:11, color:'var(--color-ink-low)'}}>{c.count}</span>
            </label>)}
          </div>

          <div style={{marginBottom:18, paddingBottom:18, borderBottom:'1px solid var(--color-line-soft)'}}>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', marginBottom:10, textTransform:'uppercase', letterSpacing:'.08em'}}>{isHotel ? 'Gecelik fiyat (TRY)' : 'Fiyat (TRY)'}</div>
            <div style={{display:'flex', justifyContent:'space-between', fontSize:12, fontWeight:600, marginBottom:6}}>
              <span>0 ₺</span><span className="tnum">{priceMax.toLocaleString('tr-TR')} ₺</span>
            </div>
            <input type="range" min="500" max={isHotel?20000:10000} step={isHotel?250:100} value={priceMax} onChange={e=>setPriceMax(+e.target.value)}
              style={{width:'100%', accentColor:'var(--color-brand-500)'}}/>
          </div>

          {isHotel ? <div style={{marginBottom:18, paddingBottom:18, borderBottom:'1px solid var(--color-line-soft)'}}>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', marginBottom:10, textTransform:'uppercase', letterSpacing:'.08em'}}>Pansiyon</div>
            {['RoomOnly','BB','HB','FB','AllInclusive'].map(m => <label key={m} style={{display:'flex', alignItems:'center', gap:8, padding:'4px 0', fontSize:13}}>
              <input type="checkbox" checked={mealPlanFilter.includes(m)} onChange={()=>toggleArr(mealPlanFilter, setMealPlanFilter, m)} style={{accentColor:'var(--color-brand-500)', width:14, height:14}}/>
              <span>{HD?.mealPlanLabel(m)}</span>
            </label>)}
          </div> : <div style={{marginBottom:18, paddingBottom:18, borderBottom:'1px solid var(--color-line-soft)'}}>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', marginBottom:10, textTransform:'uppercase', letterSpacing:'.08em'}}>Süre</div>
            <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
              {['1–3 saat','Yarım gün','Tam gün','Çok günlük'].map(p => <Chip key={p} active={durationPreset===p} onClick={()=>setDurationPreset(durationPreset===p?'':p)}>{p}</Chip>)}
            </div>
          </div>}

          <div style={{marginBottom:18, paddingBottom:18, borderBottom:'1px solid var(--color-line-soft)'}}>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', marginBottom:10, textTransform:'uppercase', letterSpacing:'.08em'}}>Puan</div>
            <div style={{display:'flex', gap:6}}>
              {[0, 3, 4, 4.5].map(r => <Chip key={r} active={minRating===r} onClick={()=>setMinRating(r)}>
                {r===0 ? 'Hepsi' : `★ ${r}+`}
              </Chip>)}
            </div>
          </div>

          <div style={{marginBottom:18, paddingBottom:18, borderBottom:'1px solid var(--color-line-soft)'}}>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', marginBottom:10, textTransform:'uppercase', letterSpacing:'.08em'}}>Tarih</div>
            <Input type="date"/>
          </div>

          <div>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', marginBottom:10, textTransform:'uppercase', letterSpacing:'.08em'}}>Dil</div>
            {['Türkçe','İngilizce','Arapça'].map(l => <label key={l} style={{display:'flex', alignItems:'center', gap:8, padding:'4px 0', fontSize:13}}>
              <input type="checkbox" style={{accentColor:'var(--color-brand-500)', width:14, height:14}}/>
              <span>{l}</span>
            </label>)}
          </div>
        </div>
      </aside>

      {/* Results */}
      {showMap && !isHotel ? <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, height:680}}>
        <div style={{overflowY:'auto', paddingRight:8}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr', gap:12}}>
            {filtered.map(l => <ListingCard key={l.id} l={l} variant="wide" favs={favs} toggleFav={toggleFav} onClick={()=>onNav('listing-detail',{slug:l.slug})}/>)}
          </div>
        </div>
        <div className="map-bg" style={{borderRadius:'var(--r-lg)', position:'sticky', top:90, height:680}}>
          {filtered.slice(0,8).map((l,i) => {
            const x = 15 + (i * 11 % 70);
            const y = 20 + (i * 17 % 60);
            return <div key={l.id} style={{position:'absolute', left:`${x}%`, top:`${y}%`,
              transform:'translate(-50%, -100%)', zIndex: 10-i}}>
              <div style={{background:'var(--color-brand-500)', color:'var(--color-on-brand)',
                padding:'6px 12px', borderRadius:'var(--r-pill)', fontSize:12, fontWeight:700,
                boxShadow:'0 4px 12px rgba(0,0,0,.15)'}}>
                {l.price.toLocaleString('tr-TR')} ₺
              </div>
              <div style={{width:0, height:0, borderLeft:'6px solid transparent', borderRight:'6px solid transparent',
                borderTop:'8px solid var(--color-brand-500)', margin:'0 auto'}}/>
            </div>;
          })}
        </div>
      </div>
      : isHotel ? (hotelRows.length === 0 ? <div className="card" style={{padding:80, textAlign:'center'}}>
          <div style={{fontSize:48, marginBottom:12, color:'var(--color-ink-soft)'}}><Icon name="home" size={48}/></div>
          <h4>Bu tarihlerde müsait tesis bulunamadı</h4>
          <p style={{color:'var(--color-ink-dim)', marginTop:8, marginBottom:20}}>Tarihleri veya filtreleri değiştirmeyi dene.</p>
          <Btn variant="primary" onClick={()=>{setDestFilter([]); setStarFilter([]); setMealPlanFilter([]); setMinRating(0); setPriceMax(20000);}}>Filtreleri temizle</Btn>
        </div>
        : <div style={{display:'flex', flexDirection:'column', gap:16}}>
          {hotelRows.map(r => <HotelListCard key={r.hotel.id} row={r} nights={nights} rooms={rooms} favs={favs} toggleFav={toggleFav}
            onClick={()=>onNav('hotel-detail',{slug:r.hotel.slug, checkIn, checkOut, adults, rooms})}/>)}
        </div>)
      : filtered.length === 0 ? <div className="card" style={{padding:80, textAlign:'center'}}>
        <div style={{fontSize:48, marginBottom:12, color:'var(--color-ink-soft)'}}><Icon name="search" size={48}/></div>
        <h4>Bu filtrelerle aktivite bulunamadı</h4>
        <p style={{color:'var(--color-ink-dim)', marginTop:8, marginBottom:20}}>Bazı filtreleri temizlemeyi dene.</p>
        <Btn variant="primary" onClick={()=>{setDestFilter([]); setCatFilter([]); setMinRating(0); setPriceMax(10000);}}>Filtreleri temizle</Btn>
      </div>
      : <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
        {filtered.map(l => <ListingCard key={l.id} l={l} variant={cardVariant||'standard'} favs={favs} toggleFav={toggleFav} onClick={()=>onNav('listing-detail',{slug:l.slug})}/>)}
      </div>}
    </div>
  </div>;
};

// ─── HOTEL LIST CARD (wide, used in /hotels listings) ──────────
const HotelListCard = ({ row, nights, rooms, favs, toggleFav, onClick }) => {
  const h = row.hotel;
  const fav = favs && favs[h.id];
  const onHeart = (e) => { e.stopPropagation(); toggleFav && toggleFav(h.id); };
  const cheapest = row.cheapest;
  const HD = window.HOTEL_DATA;
  return <div onClick={onClick} className="card card-interactive" style={{display:'grid', gridTemplateColumns:'320px 1fr 240px', overflow:'hidden', cursor:'default'}}>
    <div style={{position:'relative', minHeight:240}}>
      <img src={h.hero} alt={h.title} style={{width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0}}/>
      {h.stars > 0 && <div style={{position:'absolute', top:12, left:12, background:'rgba(0,0,0,.55)', backdropFilter:'blur(6px)', color:'#fff', padding:'4px 10px', borderRadius:999, fontSize:11, fontWeight:700}}>{'★'.repeat(h.stars)}</div>}
      <button onClick={onHeart} style={{position:'absolute', top:12, right:12, width:34, height:34, borderRadius:'50%', border:0, background:'rgba(255,255,255,.9)', cursor:'default', color: fav?'var(--color-brand-500)':'var(--color-ink)', display:'flex', alignItems:'center', justifyContent:'center'}}>
        <Icon name={fav?'heart-fill':'heart'} size={16}/>
      </button>
    </div>
    <div style={{padding:'18px 22px', display:'flex', flexDirection:'column', gap:6, minWidth:0}}>
      <div style={{display:'flex', gap:10, alignItems:'center', flexWrap:'wrap'}}>
        <Pill tone="brand">{h.cat}</Pill>
        <span style={{fontSize:12, color:'var(--color-ink-dim)'}}><Icon name="pin" size={12} style={{verticalAlign:-1}}/> {h.destination}</span>
      </div>
      <div style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:700, letterSpacing:'-.01em', lineHeight:1.2}}>{h.title}</div>
      <div style={{fontSize:13, color:'var(--color-ink-dim)', display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden', maxWidth:520}}>{h.desc}</div>
      <div style={{display:'flex', gap:14, marginTop:6, flexWrap:'wrap', fontSize:12, color:'var(--color-ink-mid)'}}>
        {(h.amenities||[]).slice(0,5).map(([icon,label]) => <span key={label} style={{display:'flex', alignItems:'center', gap:4}}><Icon name={icon} size={13}/> {label}</span>)}
      </div>
      <div style={{marginTop:'auto', display:'flex', gap:10, alignItems:'center', fontSize:12, color:'var(--color-ink-dim)'}}>
        <span><b>Giriş</b> {h.checkIn}</span>·<span><b>Çıkış</b> {h.checkOut}</span>·<span>{h.roomTypes.length} oda tipi · {row.plans.length} fiyat planı</span>
      </div>
    </div>
    <div style={{padding:'18px 22px', borderLeft:'1px solid var(--color-line)', display:'flex', flexDirection:'column', justifyContent:'space-between', gap:10, background:'var(--color-surface-muted)'}}>
      <div style={{display:'flex', alignItems:'center', gap:10, justifyContent:'flex-end'}}>
        <div style={{textAlign:'right'}}>
          <div style={{fontSize:11, color:'var(--color-ink-dim)'}}>Mükemmel</div>
          <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{h.reviews} yorum</div>
        </div>
        <div className="tnum" style={{background:'var(--color-brand-600)', color:'#fff', borderRadius:'var(--r-md)', padding:'8px 12px', fontWeight:800, fontSize:18}}>{h.score}</div>
      </div>
      {cheapest ? <div style={{textAlign:'right'}}>
        <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{HD.mealPlanLabel(cheapest.mealPlan)}{cheapest.refundable ? ' · ✓ Esnek' : ''}</div>
        <div className="tnum" style={{fontSize:13, color:'var(--color-ink-low)', textDecoration:'line-through'}}>{Math.round(cheapest.total*1.12).toLocaleString('tr-TR')} ₺</div>
        <div className="tnum" style={{fontSize:24, fontWeight:800, color:'var(--color-brand-600)', fontFamily:'var(--font-display)', lineHeight:1.1}}>{cheapest.total.toLocaleString('tr-TR')} ₺</div>
        <div className="tnum" style={{fontSize:11, color:'var(--color-ink-low)'}}>{Math.round(cheapest.avgNight).toLocaleString('tr-TR')} ₺ × {nights} gece × {rooms} oda</div>
        <Btn variant="primary" size="sm" style={{marginTop:8, width:'100%'}}>Müsaitlik Gör</Btn>
      </div> : <div style={{textAlign:'right', color:'var(--color-ink-low)', fontSize:13}}>Seçilen tarihte müsait değil</div>}
    </div>
  </div>;
};

// ═══ LISTING DETAIL ═══════════════════════════════════════════
const ListingDetailPage = ({ slug, onNav }) => {
  const l = LISTINGS.find(x=>x.slug===slug) || LISTINGS[0];
  const [favs, toggleFav] = useFavorites();
  const [selectedOption, setSelectedOption] = React.useState(OPTIONS[0].id);
  const [adults, setAdults] = React.useState(2);
  const [children, setChildren] = React.useState(0);
  const [date, setDate] = React.useState('');

  const opt = OPTIONS.find(o=>o.id===selectedOption);
  const total = (opt?.pricing?.[0]?.price || l.price) * adults + (opt?.pricing?.[1]?.price || 0) * children;

  return <div style={{maxWidth:1440, margin:'0 auto', padding:'24px 32px 80px'}}>
    <div style={{fontSize:12, color:'var(--color-ink-low)', marginBottom:16}}>
      <span onClick={()=>onNav('home')} style={{cursor:'default'}}>Ana Sayfa</span> · <span onClick={()=>onNav('listings')} style={{cursor:'default'}}>Aktiviteler</span> · {l.title}
    </div>

    {/* Gallery */}
    <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:8, height:460, borderRadius:'var(--r-lg)', overflow:'hidden', position:'relative'}}>
      <img src={l.img} style={{width:'100%', height:'100%', objectFit:'cover'}} alt={l.title}/>
      <div style={{display:'grid', gridTemplateRows:'1fr 1fr', gap:8}}>
        <img src={IMG(l.slug+'-2',800,600)} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
        <img src={IMG(l.slug+'-3',800,600)} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>
      <button className="btn btn-secondary" style={{position:'absolute', bottom:16, right:16}}>
        <Icon name="grid" size={14}/> Tüm fotoğraflar (12)
      </button>
    </div>

    {/* Header */}
    <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginTop:28, gap:24}}>
      <div style={{flex:1}}>
        <div style={{display:'flex', gap:8, marginBottom:12}}>
          <Pill tone="brand">{l.cat}</Pill>
          <Pill icon="pin">{l.dest}</Pill>
        </div>
        <h1 style={{fontSize:44, letterSpacing:'-0.025em'}}>{l.title}</h1>
        <div style={{display:'flex', alignItems:'center', gap:16, marginTop:14, color:'var(--color-ink-dim)', fontSize:14}}>
          <Stars value={l.rating} count={l.reviewCount} showValue size={14}/>
          <span>·</span>
          <span>{l.duration}</span>
          <span>·</span>
          <span>Maks {l.maxGroup||12} kişi</span>
        </div>
      </div>
      <div style={{display:'flex', gap:8}}>
        <Btn variant="secondary" icon="share" size="sm">Paylaş</Btn>
        <Btn variant="secondary" icon={favs[l.id]?'heart-fill':'heart'} size="sm" onClick={()=>toggleFav(l.id)}>
          {favs[l.id]?'Kaydedildi':'Kaydet'}
        </Btn>
      </div>
    </div>

    {/* Two-column body */}
    <div style={{display:'grid', gridTemplateColumns:'1fr 400px', gap:48, marginTop:32, alignItems:'flex-start'}}>
      <div>
        {/* Quick facts */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:32}}>
          {[['clock','Süre',l.duration],['users','Grup',`Maks ${l.maxGroup||12}`],['globe','Dil','TR · EN · AR'],['check','Onay','Anında']].map(([i,t,v]) =>
            <div key={t} className="card" style={{padding:'14px 16px'}}>
              <Icon name={i} size={16} style={{color:'var(--color-brand-600)', marginBottom:6}}/>
              <div style={{fontSize:11, color:'var(--color-ink-dim)', fontWeight:600}}>{t}</div>
              <div style={{fontSize:14, fontWeight:700, marginTop:2}}>{v}</div>
            </div>)}
        </div>

        {/* Tabs */}
        <div style={{display:'flex', gap:24, borderBottom:'1px solid var(--color-line)', marginBottom:24}}>
          {['Genel','Program','Dahil Olanlar','Buluşma','Değerlendirmeler','Politika'].map((t,i) =>
            <div key={t} style={{padding:'12px 0', fontSize:13, fontWeight:600,
              color: i===0 ? 'var(--color-ink-strong)':'var(--color-ink-dim)',
              borderBottom: i===0 ? '2px solid var(--color-brand-500)':'2px solid transparent', marginBottom:-1, cursor:'default'}}>{t}</div>)}
        </div>

        {/* Highlights */}
        <section style={{marginBottom:32}}>
          <h3 style={{fontSize:22, marginBottom:16}}>Öne Çıkanlar</h3>
          <ul style={{listStyle:'none', padding:0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            {(l.highlights || ['Profesyonel kaptan ve mürettebat','Sınırsız Türk kahvesi','Galata Köprüsü rotası','Küçük grup · maks 12 kişi']).map(h => <li key={h} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:14}}>
              <span style={{width:22, height:22, borderRadius:'50%', background:'var(--color-brand-50)', color:'var(--color-brand-600)', display:'inline-flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1}}>
                <Icon name="check" size={13}/>
              </span>
              {h}
            </li>)}
          </ul>
        </section>

        {/* Description */}
        <section style={{marginBottom:32, maxWidth:640}}>
          <h3 style={{fontSize:22, marginBottom:14}}>Açıklama</h3>
          <p style={{fontSize:15, lineHeight:1.7, color:'var(--color-ink)'}}>
            {l.description || 'Akşam ışığında Boğaz\'ın en güzel hâlini yaşa. Rotamız Galata\'dan başlar, Beylerbeyi\'ne uzanır; Kız Kulesi önünden dönüş ile 2.5 saatlik bir yolculuk. Kaptanımız Boğaz\'ın tarihini anlatır, siz de gün batımına karşı Türk kahvenizi yudumlarsınız.'}
          </p>
          <p style={{fontSize:15, lineHeight:1.7, color:'var(--color-ink)', marginTop:14}}>
            Tekne, modern güvenlik donanımına sahip, temiz ve bakımlı. Maksimum 12 kişilik grup, sıcak
            ve samimi bir atmosfer yaratır. İstanbul'un ruhunu kısa bir sürede hissetmek için ideal.
          </p>
        </section>

        {/* Dahil/Hariç */}
        <section style={{marginBottom:32}}>
          <h3 style={{fontSize:22, marginBottom:16}}>Dahil · Hariç</h3>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
            <div>
              <div style={{fontSize:13, fontWeight:700, color:'var(--color-success-deep)', marginBottom:10}}>Dahil</div>
              {(l.includes || ['Tekne rezervasyonu','Kaptan + mürettebat','Karşılama ikramı','Can yeleği']).map(i =>
                <div key={i} style={{display:'flex', gap:10, padding:'6px 0', fontSize:14}}>
                  <Icon name="check" size={16} style={{color:'var(--color-success-deep)', flexShrink:0, marginTop:2}}/>{i}
                </div>)}
            </div>
            <div>
              <div style={{fontSize:13, fontWeight:700, color:'var(--color-danger-deep)', marginBottom:10}}>Hariç</div>
              {(l.excludes || ['Ulaşım','Yemek','Alkollü içecekler']).map(i =>
                <div key={i} style={{display:'flex', gap:10, padding:'6px 0', fontSize:14}}>
                  <Icon name="x" size={16} style={{color:'var(--color-danger-deep)', flexShrink:0, marginTop:2}}/>{i}
                </div>)}
            </div>
          </div>
        </section>

        {/* Meeting point */}
        <section style={{marginBottom:32}}>
          <h3 style={{fontSize:22, marginBottom:14}}>Buluşma Noktası</h3>
          <div className="card" style={{padding:0, overflow:'hidden'}}>
            <div className="map-bg" style={{height:240, position:'relative'}}>
              <div style={{position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-100%)'}}>
                <div style={{width:36, height:36, borderRadius:'50%', background:'var(--color-brand-500)', color:'#fff',
                  display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 4px 16px rgba(0,0,0,.2)'}}>
                  <Icon name="pin" size={18}/>
                </div>
              </div>
            </div>
            <div style={{padding:16, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div>
                <div style={{fontSize:14, fontWeight:700}}>Karaköy İskelesi, 2. Peron</div>
                <div style={{fontSize:12, color:'var(--color-ink-dim)'}}>Beyoğlu / İstanbul · 10 dk önce orada olun</div>
              </div>
              <Btn variant="ghost" size="sm">Adresi kopyala</Btn>
            </div>
          </div>
        </section>

        {/* Reviews summary */}
        <section style={{marginBottom:32}}>
          <h3 style={{fontSize:22, marginBottom:16}}>Değerlendirmeler · {l.reviewCount||264}</h3>
          <div className="card" style={{padding:24, display:'grid', gridTemplateColumns:'auto 1fr', gap:32}}>
            <div style={{textAlign:'center'}}>
              <div style={{fontSize:56, fontWeight:800, lineHeight:1, letterSpacing:'-0.03em'}} className="tnum">{l.rating.toFixed(1)}</div>
              <Stars value={l.rating} size={16}/>
              <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:6}}>{l.reviewCount} değerlendirme</div>
            </div>
            <div>
              {[[5,78],[4,16],[3,4],[2,1],[1,1]].map(([s,pct]) =>
                <div key={s} style={{display:'flex', alignItems:'center', gap:10, padding:'3px 0'}}>
                  <span style={{fontSize:12, width:14, color:'var(--color-ink-dim)'}}>{s}</span>
                  <Icon name="star" size={12} style={{color:'var(--color-warn-deep)'}}/>
                  <div style={{flex:1, height:6, background:'var(--color-surface-sunken)', borderRadius:3, overflow:'hidden'}}>
                    <div style={{width:`${pct}%`, height:'100%', background:'var(--color-brand-500)'}}/>
                  </div>
                  <span className="tnum" style={{fontSize:11, color:'var(--color-ink-dim)', width:32, textAlign:'right'}}>{pct}%</span>
                </div>)}
            </div>
          </div>

          <div style={{display:'flex', gap:6, margin:'20px 0 16px', flexWrap:'wrap'}}>
            {['Tümü','5★','4★','Çift','Aile','Solo','Görselli'].map((c,i) => <Chip key={c} active={i===0}>{c}</Chip>)}
          </div>

          <div style={{display:'grid', gap:16}}>
            {REVIEWS.slice(0,3).map(r => <div key={r.id} className="card" style={{padding:20}}>
              <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:10}}>
                <Avatar src={r.avatar} name={r.user} size={40}/>
                <div style={{flex:1}}>
                  <div style={{display:'flex', alignItems:'center', gap:8}}>
                    <strong style={{fontSize:14}}>{r.user}</strong>
                    {r.verified && <Pill tone="success" icon="shield">Doğrulandı</Pill>}
                    <Pill>{r.type}</Pill>
                  </div>
                  <div style={{display:'flex', alignItems:'center', gap:8, marginTop:2, fontSize:12, color:'var(--color-ink-low)'}}>
                    <Stars value={r.rating} size={11}/>
                    <span>· {r.date}</span>
                  </div>
                </div>
              </div>
              <div style={{fontSize:14, fontWeight:700, marginBottom:4}}>{r.title}</div>
              <p style={{fontSize:14, color:'var(--color-ink)', lineHeight:1.6}}>{r.comment}</p>
              {r.reply && <div style={{marginTop:14, padding:14, background:'var(--color-surface-muted)', borderRadius:'var(--r-sm)', borderLeft:'3px solid var(--color-brand-500)'}}>
                <div style={{fontSize:12, fontWeight:700, marginBottom:4}}>{r.reply.name} · Tedarikçi yanıtı</div>
                <div style={{fontSize:13, color:'var(--color-ink-dim)'}}>{r.reply.text}</div>
              </div>}
            </div>)}
          </div>
          <div style={{textAlign:'center', marginTop:20}}>
            <Btn variant="secondary">Tüm değerlendirmeleri göster</Btn>
          </div>
        </section>

        {/* Supplier card */}
        <section>
          <h3 style={{fontSize:22, marginBottom:14}}>Tedarikçi</h3>
          <div className="card" style={{padding:20, display:'flex', alignItems:'center', gap:16}}>
            <Avatar src={l.supplier?.logo || IMG('sup1',100,100)} name="Boğaz Denizcilik" size={56}/>
            <div style={{flex:1}}>
              <div style={{fontSize:16, fontWeight:700}}>{l.supplier?.name || 'Boğaz Denizcilik'}</div>
              <div style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:2}}>{l.supplier?.bio || '2014\'ten beri Boğaz\'da turlar.'}</div>
            </div>
            <Btn variant="secondary" icon="message">Mesaj gönder</Btn>
          </div>
        </section>
      </div>

      {/* Booking widget */}
      <aside style={{position:'sticky', top:90}}>
        <div className="card" style={{padding:24, boxShadow:'var(--sh-elevated)'}}>
          <div style={{display:'flex', alignItems:'baseline', gap:8, marginBottom:2}}>
            <span className="tnum" style={{fontSize:32, fontWeight:800}}>{l.price.toLocaleString('tr-TR')} ₺</span>
            <span style={{fontSize:14, color:'var(--color-ink-dim)'}}>· kişi başı</span>
          </div>
          <div style={{fontSize:12, color:'var(--color-success-deep)', fontWeight:600, marginBottom:20}}>
            <Icon name="check" size={12} style={{verticalAlign:'middle'}}/> Hemen onaylanır
          </div>

          <Field label="Tarih" style={{marginBottom:14}}>
            <Input type="date" value={date} onChange={e=>setDate(e.target.value)}/>
          </Field>

          <Field label="Paket" style={{marginBottom:14}}>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {OPTIONS.filter(o=>o.listingId===1).map(o => <label key={o.id} style={{
                display:'flex', alignItems:'flex-start', gap:10, padding:12, borderRadius:'var(--r-md)',
                border:`1.5px solid ${selectedOption===o.id ? 'var(--color-brand-500)' : 'var(--color-line)'}`,
                background: selectedOption===o.id ? 'var(--color-brand-50)' : 'var(--color-surface-raised)',
                cursor:'default'}}>
                <input type="radio" checked={selectedOption===o.id} onChange={()=>setSelectedOption(o.id)}
                  style={{accentColor:'var(--color-brand-500)', marginTop:2}}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:13, fontWeight:700}}>{o.name}</div>
                  <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:2}}>{o.desc}</div>
                  <div className="tnum" style={{fontSize:13, fontWeight:700, marginTop:6, color:'var(--color-brand-700)'}}>
                    {o.pricing[0].price.toLocaleString('tr-TR')} ₺ {o.pricing[0].label.includes('Grup') ? '· grup' : '/ kişi'}
                  </div>
                </div>
              </label>)}
            </div>
          </Field>

          <div style={{marginBottom:16}}>
            <div className="field-label">Katılımcılar</div>
            {[['Yetişkin','18+',adults,setAdults],['Çocuk','6–12',children,setChildren]].map(([lab,sub,val,setter]) =>
              <div key={lab} style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 0', borderBottom:'1px solid var(--color-line-soft)'}}>
                <div>
                  <div style={{fontSize:14, fontWeight:600}}>{lab}</div>
                  <div style={{fontSize:12, color:'var(--color-ink-low)'}}>{sub}</div>
                </div>
                <div style={{display:'flex', alignItems:'center', gap:12}}>
                  <button onClick={()=>setter(Math.max(lab==='Yetişkin'?1:0, val-1))} style={{width:30, height:30, borderRadius:'50%', border:'1px solid var(--color-line-strong)', background:'var(--color-surface-raised)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'default'}}>
                    <Icon name="minus" size={13}/>
                  </button>
                  <span className="tnum" style={{width:16, textAlign:'center', fontWeight:700}}>{val}</span>
                  <button onClick={()=>setter(val+1)} style={{width:30, height:30, borderRadius:'50%', border:'1px solid var(--color-line-strong)', background:'var(--color-surface-raised)', display:'flex', alignItems:'center', justifyContent:'center', cursor:'default'}}>
                    <Icon name="plus" size={13}/>
                  </button>
                </div>
              </div>)}
          </div>

          <div style={{padding:'14px 0', borderTop:'1px solid var(--color-line)', marginBottom:16}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <span style={{fontSize:14, color:'var(--color-ink-dim)'}}>Toplam</span>
              <span className="tnum" style={{fontSize:24, fontWeight:800}}>{total.toLocaleString('tr-TR')} ₺</span>
            </div>
          </div>

          <Btn variant="primary" size="lg" iconRight="arrow" onClick={()=>onNav('booking',{id:l.id})}
            style={{width:'100%', justifyContent:'center'}}>Rezervasyon Yap</Btn>
          <Btn variant="ghost" icon="message" style={{width:'100%', justifyContent:'center', marginTop:8}}>Mesaj Gönder</Btn>

          <div style={{fontSize:11, color:'var(--color-ink-low)', textAlign:'center', marginTop:14}}>
            Hemen onaylanır · İptal politikası geçerli
          </div>
        </div>
      </aside>
    </div>
  </div>;
};

// ═══ BOOKING FLOW ═════════════════════════════════════════════
const BookingFlowPage = ({ id, onNav }) => {
  const l = LISTINGS.find(x=>x.id===+id) || LISTINGS[0];
  const [step, setStep] = React.useState(1);
  const [participants, setParticipants] = React.useState([
    {first:'Elif', last:'Kaya', email:'elif@example.com', phone:'+90 532 000 00 00'},
    {first:'', last:'', email:'', phone:''}
  ]);

  const steps = ['Tarih/Seçim','Katılımcılar','Ödeme','Onay'];

  return <div style={{maxWidth:1200, margin:'0 auto', padding:'32px 32px 80px'}}>
    {/* Stepper */}
    <div style={{display:'flex', alignItems:'center', justifyContent:'center', gap:12, marginBottom:40}}>
      {steps.map((s, i) => <React.Fragment key={s}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:32, height:32, borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:13, fontWeight:700,
            background: i+1 < step ? 'var(--color-success-deep)' : i+1 === step ? 'var(--color-brand-500)' : 'var(--color-surface-sunken)',
            color: i+1 <= step ? '#fff' : 'var(--color-ink-dim)'}}>
            {i+1 < step ? <Icon name="check" size={15}/> : i+1}
          </div>
          <div style={{fontSize:13, fontWeight:600,
            color: i+1 === step ? 'var(--color-ink-strong)' : 'var(--color-ink-dim)'}}>{s}</div>
        </div>
        {i < steps.length-1 && <div style={{width:40, height:2, background: i+1 < step ? 'var(--color-success-deep)' : 'var(--color-line)'}}/>}
      </React.Fragment>)}
    </div>

    {step === 4 ? <div style={{textAlign:'center', padding:'60px 20px'}}>
      <div style={{width:80, height:80, borderRadius:'50%', background:'var(--color-success-soft)',
        color:'var(--color-success-deep)', display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom:24}}>
        <Icon name="check" size={40}/>
      </div>
      <h2 style={{fontSize:36}}>Rezervasyon onaylandı!</h2>
      <p style={{fontSize:16, color:'var(--color-ink-dim)', marginTop:10}}>E-postanıza tüm ayrıntılar gönderildi.</p>
      <div className="card" style={{padding:28, maxWidth:520, margin:'32px auto', textAlign:'left'}}>
        <div style={{fontSize:11, color:'var(--color-ink-dim)', fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase'}}>Referans Numarası</div>
        <div className="mono" style={{fontSize:28, fontWeight:700, marginTop:6, letterSpacing:'-0.02em'}}>VG-2026-04873</div>
        <div style={{borderTop:'1px solid var(--color-line)', marginTop:16, paddingTop:16, display:'grid', gap:10}}>
          {[['Aktivite',l.title],['Tarih','05 Mayıs 2026'],['Paket','Gün Batımı + Akşam Yemeği'],['Katılımcı','2 yetişkin'],['Toplam','4.200 ₺']].map(([k,v]) =>
            <div key={k} style={{display:'flex', justifyContent:'space-between', fontSize:13}}>
              <span style={{color:'var(--color-ink-dim)'}}>{k}</span><strong>{v}</strong>
            </div>)}
        </div>
      </div>
      <div style={{display:'flex', gap:10, justifyContent:'center'}}>
        <Btn variant="secondary" icon="download">Makbuzu indir</Btn>
        <Btn variant="primary" onClick={()=>onNav('home')}>Ana sayfaya dön</Btn>
      </div>
    </div>
    : <div style={{display:'grid', gridTemplateColumns:'1fr 360px', gap:32, alignItems:'flex-start'}}>
      <div className="card" style={{padding:32}}>
        {step === 1 && <><h3>Tarih ve paket seç</h3>
          <div style={{marginTop:20}}>
            <Field label="Tarih"><Input type="date"/></Field>
            <Field label="Paket" style={{marginTop:16}}>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                {OPTIONS.filter(o=>o.listingId===1).map((o,i) => <label key={o.id} style={{display:'flex', gap:12, padding:16, borderRadius:'var(--r-md)', border:`1.5px solid ${i===0?'var(--color-brand-500)':'var(--color-line)'}`, background:i===0?'var(--color-brand-50)':'var(--color-surface-raised)'}}>
                  <input type="radio" name="opt" defaultChecked={i===0} style={{accentColor:'var(--color-brand-500)', marginTop:2}}/>
                  <div style={{flex:1}}>
                    <div style={{fontWeight:700}}>{o.name}</div>
                    <div style={{fontSize:13, color:'var(--color-ink-dim)'}}>{o.desc}</div>
                  </div>
                  <div className="tnum" style={{fontWeight:700}}>{o.pricing[0].price.toLocaleString('tr-TR')} ₺</div>
                </label>)}
              </div>
            </Field>
          </div>
        </>}
        {step === 2 && <><h3>Katılımcı bilgileri</h3>
          <p style={{color:'var(--color-ink-dim)', fontSize:14, marginTop:6}}>Her katılımcı için ad-soyad ve iletişim gerekir.</p>
          {participants.map((p, i) => <div key={i} style={{marginTop:20, padding:20, border:'1px solid var(--color-line)', borderRadius:'var(--r-md)'}}>
            <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom:14}}>Katılımcı {i+1}</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
              <Field label="Ad"><Input value={p.first} onChange={e=>setParticipants(ps=>ps.map((x,j)=>j===i?{...x,first:e.target.value}:x))}/></Field>
              <Field label="Soyad"><Input value={p.last}/></Field>
              <Field label="E-posta"><Input value={p.email} type="email"/></Field>
              <Field label="Telefon"><Input value={p.phone}/></Field>
            </div>
          </div>)}
          <Btn variant="ghost" icon="plus" style={{marginTop:12}}>Katılımcı ekle</Btn>
          <Field label="Özel istekler" style={{marginTop:24}}><TextArea placeholder="Rehberinize notunuz..."/></Field>
        </>}
        {step === 3 && <><h3>Ödeme</h3>
          <div style={{display:'flex', gap:8, marginTop:20, marginBottom:20}}>
            {['VISA','MC','TROY','iyzico'].map(b => <div key={b} style={{padding:'6px 14px', border:'1px solid var(--color-line-strong)', borderRadius:6, fontSize:11, fontWeight:700, letterSpacing:'.06em'}}>{b}</div>)}
          </div>
          <Field label="Kart üzerindeki ad"><Input placeholder="Elif Kaya"/></Field>
          <Field label="Kart numarası" style={{marginTop:14}}><Input placeholder="•••• •••• •••• ••••" className="mono"/></Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:14}}>
            <Field label="Son kullanma"><Input placeholder="AA / YY"/></Field>
            <Field label="CVV"><Input placeholder="•••" className="mono"/></Field>
          </div>
        </>}

        <div style={{display:'flex', justifyContent:'space-between', marginTop:32, paddingTop:24, borderTop:'1px solid var(--color-line)'}}>
          <Btn variant="ghost" onClick={()=>step>1 && setStep(step-1)} disabled={step===1}>Geri</Btn>
          <Btn variant="primary" iconRight="arrow" onClick={()=>setStep(Math.min(4, step+1))}>
            {step === 3 ? 'Ödemeyi Tamamla' : 'Devam Et'}
          </Btn>
        </div>
      </div>

      {/* Summary */}
      <aside style={{position:'sticky', top:90}}>
        <div className="card" style={{padding:20}}>
          <div style={{aspectRatio:'16/10', borderRadius:'var(--r-sm)', overflow:'hidden', marginBottom:14}}>
            <img src={l.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
          </div>
          <Pill tone="brand">{l.cat}</Pill>
          <h4 style={{fontSize:17, marginTop:8}}>{l.title}</h4>
          <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4}}>{l.dest} · {l.duration}</div>

          <div style={{margin:'16px 0', paddingTop:16, borderTop:'1px solid var(--color-line)', fontSize:13}}>
            {[['Tarih','05 Mayıs 2026'],['Paket','Gün Batımı + Akşam Yemeği'],['Yetişkin × 2','4.200 ₺']].map(([k,v]) =>
              <div key={k} style={{display:'flex', justifyContent:'space-between', padding:'6px 0'}}>
                <span style={{color:'var(--color-ink-dim)'}}>{k}</span><span className="tnum" style={{fontWeight:600}}>{v}</span>
              </div>)}
          </div>
          <div style={{display:'flex', justifyContent:'space-between', paddingTop:12, borderTop:'1px solid var(--color-line)'}}>
            <span style={{fontSize:14, fontWeight:700}}>Toplam (TRY)</span>
            <span className="tnum" style={{fontSize:20, fontWeight:800}}>4.200 ₺</span>
          </div>
        </div>
      </aside>
    </div>}
  </div>;
};

// ═══ LOGIN ════════════════════════════════════════════════════
const LoginPage = ({ onNav, mode='login' }) => (
  <div style={{display:'grid', gridTemplateColumns:'45fr 55fr', minHeight:'100vh'}}>
    <div style={{position:'relative', background:'var(--color-dark-800)'}}>
      <img src={IMG('login-bg',1200,1800)} style={{width:'100%', height:'100%', objectFit:'cover', opacity:.7}}/>
      <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(45,27,14,.3), rgba(45,27,14,.8))'}}/>
      <div style={{position:'absolute', bottom:48, left:48, right:48, color:'#fff'}}>
        <div className="eyebrow" style={{color:'var(--color-brand-300)'}}>— Sarah L. · Solo traveler</div>
        <div style={{fontSize:28, fontWeight:700, marginTop:10, lineHeight:1.3, letterSpacing:'-0.02em'}}>"Came alone and felt very welcome. The captain shared stories about the Bosphorus history."</div>
      </div>
    </div>
    <div style={{padding:'80px 80px', display:'flex', alignItems:'center'}}>
      <div style={{width:'100%', maxWidth:400}}>
        <button onClick={()=>onNav('home')} style={{border:0, background:'transparent', padding:0, display:'flex', alignItems:'center', gap:10, marginBottom:48, cursor:'default'}}>
          <Logo size={80}/>
        </button>
        <h2 style={{fontSize:36}}>{mode==='register' ? 'Hoş geldin.' : 'Tekrar hoş geldin.'}</h2>
        <p style={{color:'var(--color-ink-dim)', marginTop:8}}>
          {mode==='register' ? 'Hesap oluştur, ilk rezervasyonunu yap.' : 'Hesabına giriş yap, kaldığın yerden devam et.'}
        </p>
        <div style={{display:'flex', gap:10, marginTop:28}}>
          <Btn variant="secondary" style={{flex:1, justifyContent:'center'}}>Google ile</Btn>
          <Btn variant="secondary" style={{flex:1, justifyContent:'center'}}>Apple ile</Btn>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:14, margin:'28px 0', fontSize:11, color:'var(--color-ink-low)', fontWeight:600, letterSpacing:'.08em', textTransform:'uppercase'}}>
          <span style={{flex:1, height:1, background:'var(--color-line)'}}/> YA DA <span style={{flex:1, height:1, background:'var(--color-line)'}}/>
        </div>
        {mode==='register' && <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:14}}>
          <Field label="Ad"><Input placeholder="Elif"/></Field>
          <Field label="Soyad"><Input placeholder="Kaya"/></Field>
        </div>}
        <Field label="E-posta"><Input type="email" placeholder="sen@example.com"/></Field>
        <Field label="Parola" style={{marginTop:14}}><Input type="password" placeholder="••••••••"/></Field>
        {mode==='login' && <div style={{textAlign:'right', marginTop:10}}>
          <Btn variant="link">Şifremi unuttum</Btn>
        </div>}
        <Btn variant="primary" size="lg" style={{width:'100%', justifyContent:'center', marginTop:20}}
          onClick={()=>onNav('home')}>{mode==='register' ? 'Kayıt Ol' : 'Giriş Yap'}</Btn>
        <div style={{textAlign:'center', marginTop:20, fontSize:13, color:'var(--color-ink-dim)'}}>
          {mode==='register' ? 'Hesabın var mı?' : 'Hesabın yok mu?'} <button onClick={()=>onNav(mode==='register'?'login':'register')} style={{color:'var(--color-brand-600)', fontWeight:700, border:0, background:'transparent', cursor:'default'}}>{mode==='register'?'Giriş yap':'Kayıt ol'}</button>
        </div>
      </div>
    </div>
  </div>
);

// ═══ TRAVELER ACCOUNT (combined) ═══════════════════════════════
const AccountPage = ({ onNav, current='bookings' }) => {
  const [favs, toggleFav] = useFavorites();
  const [tab, setTab] = React.useState('upcoming');
  const user = {name:'Elif Kaya', email:'elif@example.com', avatar:IMG('u1',80,80)};

  const nav = [
    ['bookings','Rezervasyonlarım','calendar', 3],
    ['wishlist','Favorilerim','heart', Object.values(favs).filter(Boolean).length || 4],
    ['reviews','Değerlendirmelerim','star'],
    ['messages','Mesajlarım','message', 2],
    ['settings','Hesap Ayarları','settings'],
  ];

  return <div style={{maxWidth:1440, margin:'0 auto', padding:'32px 32px 80px', display:'grid', gridTemplateColumns:'260px 1fr', gap:32, alignItems:'flex-start'}}>
    <aside className="card" style={{padding:20, position:'sticky', top:90}}>
      <div style={{display:'flex', alignItems:'center', gap:12, padding:'0 0 16px', borderBottom:'1px solid var(--color-line)'}}>
        <Avatar src={user.avatar} name={user.name} size={44}/>
        <div style={{minWidth:0}}>
          <div style={{fontSize:14, fontWeight:700}}>{user.name}</div>
          <div style={{fontSize:12, color:'var(--color-ink-dim)'}}>{user.email}</div>
        </div>
      </div>
      <nav style={{marginTop:14, display:'flex', flexDirection:'column', gap:2}}>
        {nav.map(([key,label,icon,count]) => <button key={key} onClick={()=>onNav('account-'+key)}
          style={{display:'flex', alignItems:'center', gap:10, padding:'10px 12px', border:0,
            background: current===key ? 'var(--color-brand-50)' : 'transparent',
            color: current===key ? 'var(--color-brand-700)' : 'var(--color-ink-dim)',
            borderRadius:'var(--r-md)', fontSize:14, fontWeight: current===key ? 700 : 500, cursor:'default', textAlign:'left'}}>
          <Icon name={icon} size={16}/><span style={{flex:1}}>{label}</span>
          {count && <span style={{fontSize:11, fontWeight:700, padding:'1px 7px', borderRadius:'var(--r-pill)',
            background:current===key?'var(--color-brand-500)':'var(--color-surface-sunken)',
            color:current===key?'#fff':'var(--color-ink)'}}>{count}</span>}
        </button>)}
      </nav>
    </aside>

    <main>
      {current==='bookings' && <>
        <h2 style={{fontSize:32, marginBottom:20}}>Rezervasyonlarım</h2>
        <div style={{marginBottom:20}}>
          <Segmented options={[{value:'upcoming',label:'Yaklaşan'},{value:'past',label:'Geçmiş'},{value:'cancelled',label:'İptal Edilen'}]} value={tab} onChange={setTab}/>
        </div>
        <div style={{display:'grid', gap:14}}>
          {BOOKINGS.filter(b => tab==='upcoming'?['Confirmed','Pending','AwaitingPayment'].includes(b.status) : tab==='past'?b.status==='Completed' : b.status==='Cancelled').map(b => {
            const l = LISTINGS.find(x=>x.id===b.listingId);
            return <div key={b.id} className="card" style={{padding:16, display:'grid', gridTemplateColumns:'120px 1fr auto', gap:16, alignItems:'center'}}>
              <div style={{aspectRatio:'4/3', borderRadius:'var(--r-sm)', overflow:'hidden'}}>
                <img src={l?.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
              </div>
              <div>
                <h4 style={{fontSize:16}}>{l?.title}</h4>
                <div style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:4}}>
                  {b.travelDate} · <span className="mono">{b.ref}</span> · {b.participants} kişi
                </div>
                <div style={{marginTop:8}}><StatusPill status={b.status}/></div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="tnum" style={{fontSize:18, fontWeight:700}}>{b.total.toLocaleString('tr-TR')} ₺</div>
                <div style={{display:'flex', gap:6, marginTop:8, justifyContent:'flex-end'}}>
                  <Btn variant="ghost" size="sm">Detay</Btn>
                  <Btn variant="secondary" size="sm">Mesaj</Btn>
                </div>
              </div>
            </div>;
          })}
        </div>
      </>}

      {current==='wishlist' && <>
        <h2 style={{fontSize:32, marginBottom:20}}>Favorilerim</h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
          {LISTINGS.slice(0,6).map(l => <ListingCard key={l.id} l={l} favs={{...favs,[l.id]:true}} toggleFav={toggleFav} onClick={()=>onNav('listing-detail',{slug:l.slug})}/>)}
        </div>
      </>}

      {current==='messages' && <div style={{display:'grid', gridTemplateColumns:'300px 1fr', gap:0, height:680, border:'1px solid var(--color-line)', borderRadius:'var(--r-lg)', overflow:'hidden', background:'var(--color-surface-raised)'}}>
        <div style={{borderRight:'1px solid var(--color-line)', overflowY:'auto'}}>
          <div style={{padding:'16px 16px 12px', borderBottom:'1px solid var(--color-line-soft)', fontSize:15, fontWeight:700}}>Mesajlar</div>
          {MESSAGES.map((m,i) => <div key={m.id} style={{padding:'14px 16px', borderBottom:'1px solid var(--color-line-soft)',
            background: i===0?'var(--color-brand-50)':'transparent', cursor:'default', display:'flex', gap:10}}>
            <Avatar src={m.avatar} name={m.supplier} size={40}/>
            <div style={{flex:1, minWidth:0}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
                <strong style={{fontSize:13}}>{m.supplier}</strong>
                <span style={{fontSize:11, color:'var(--color-ink-low)'}}>{m.time}</span>
              </div>
              <div style={{fontSize:12, color:'var(--color-ink-low)', marginTop:2}}>{m.listing}</div>
              <div style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{m.lastMsg}</div>
            </div>
            {m.unread > 0 && <div style={{width:20, height:20, borderRadius:'50%', background:'var(--color-brand-500)', color:'#fff', fontSize:11, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center'}}>{m.unread}</div>}
          </div>)}
        </div>
        <div style={{display:'flex', flexDirection:'column'}}>
          <div style={{padding:'14px 20px', borderBottom:'1px solid var(--color-line)', display:'flex', alignItems:'center', gap:12}}>
            <Avatar src={MESSAGES[0].avatar} size={36}/>
            <div>
              <strong style={{fontSize:14}}>{MESSAGES[0].supplier}</strong>
              <div style={{fontSize:12, color:'var(--color-ink-low)'}}>{MESSAGES[0].listing}</div>
            </div>
          </div>
          <div style={{flex:1, padding:20, overflowY:'auto', display:'flex', flexDirection:'column', gap:12, background:'var(--color-surface)'}}>
            {MESSAGES[0].thread.map((m,i) => <div key={i} style={{alignSelf: m.from==='you'?'flex-end':'flex-start', maxWidth:'70%'}}>
              <div style={{padding:'10px 14px', borderRadius:'var(--r-md)',
                background: m.from==='you'?'var(--color-brand-500)':'var(--color-surface-raised)',
                color: m.from==='you'?'var(--color-on-brand)':'var(--color-ink)',
                border: m.from==='you'?'0':'1px solid var(--color-line)',
                fontSize:14}}>{m.text}</div>
              <div style={{fontSize:11, color:'var(--color-ink-low)', marginTop:4, textAlign: m.from==='you'?'right':'left'}}>{m.time}</div>
            </div>)}
          </div>
          <div style={{padding:14, borderTop:'1px solid var(--color-line)', display:'flex', gap:8}}>
            <Input placeholder="Mesajınızı yazın..."/>
            <Btn variant="primary" icon="arrow"/>
          </div>
        </div>
      </div>}

      {current==='reviews' && <>
        <h2 style={{fontSize:32, marginBottom:20}}>Değerlendirmelerim</h2>
        <div className="card" style={{padding:20, marginBottom:20}}>
          <div style={{fontSize:14, fontWeight:700, marginBottom:12}}>Yazılacaklar</div>
          {BOOKINGS.filter(b=>b.status==='Completed').map(b => {
            const l = LISTINGS.find(x=>x.id===b.listingId);
            return <div key={b.id} style={{display:'flex', alignItems:'center', gap:14, padding:'12px 0', borderTop:'1px solid var(--color-line-soft)'}}>
              <div style={{width:60, aspectRatio:'1', borderRadius:'var(--r-sm)', overflow:'hidden'}}><img src={l?.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/></div>
              <div style={{flex:1}}>
                <div style={{fontSize:14, fontWeight:700}}>{l?.title}</div>
                <div style={{fontSize:12, color:'var(--color-ink-low)'}}>{b.travelDate} · <span className="mono">{b.ref}</span></div>
              </div>
              <Btn variant="primary" size="sm">Değerlendir</Btn>
            </div>;
          })}
        </div>
        <div className="card" style={{padding:20}}>
          <div style={{fontSize:14, fontWeight:700, marginBottom:12}}>Yazdıklarım</div>
          {REVIEWS.slice(0,2).map(r => <div key={r.id} style={{padding:'16px 0', borderTop:'1px solid var(--color-line-soft)'}}>
            <Stars value={r.rating} size={12}/>
            <div style={{fontSize:15, fontWeight:700, marginTop:6}}>{r.title}</div>
            <p style={{fontSize:14, color:'var(--color-ink-dim)', marginTop:4}}>{r.comment}</p>
          </div>)}
        </div>
      </>}

      {current==='settings' && <>
        <h2 style={{fontSize:32, marginBottom:20}}>Hesap Ayarları</h2>
        <Segmented options={['Profil','Güvenlik','Bildirimler','Dil & Bölge']} value="Profil" onChange={()=>{}}/>
        <div className="card" style={{padding:28, marginTop:20}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
            <Field label="Ad"><Input defaultValue="Elif"/></Field>
            <Field label="Soyad"><Input defaultValue="Kaya"/></Field>
            <Field label="E-posta"><Input defaultValue="elif@example.com"/></Field>
            <Field label="Telefon"><Input defaultValue="+90 532 000 00 00"/></Field>
          </div>
          <div style={{display:'flex', justifyContent:'flex-end', gap:10, marginTop:24, paddingTop:20, borderTop:'1px solid var(--color-line)'}}>
            <Btn variant="ghost">Vazgeç</Btn>
            <Btn variant="primary">Değişiklikleri Kaydet</Btn>
          </div>
        </div>
      </>}
    </main>
  </div>;
};

// ═══ DESTINATIONS + BLOG (simple) ══════════════════════════════
const DestinationsPage = ({ onNav }) => (
  <div style={{maxWidth:1440, margin:'0 auto', padding:'32px 32px 80px'}}>
    <div className="eyebrow">DESTİNASYONLAR</div>
    <h1 style={{fontSize:56, marginTop:8}}>Türkiye'nin her köşesi.</h1>
    <p style={{fontSize:18, color:'var(--color-ink-dim)', maxWidth:600, marginTop:14}}>Her biri kendine has ritmi olan 6 şehir — hangisinden başlamak istersin?</p>
    <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:16, marginTop:40}}>
      {DESTINATIONS.map((d, i) => <div key={d.id} onClick={()=>onNav('destination-detail',{slug:d.slug})}
        className="card-interactive" style={{position:'relative', borderRadius:'var(--r-xl)', overflow:'hidden',
          gridRow: i===0 ? 'span 2' : 'auto',
          height: i===0 ? 'auto' : 300, cursor:'default'}}>
        <img src={d.img} style={{width:'100%', height:'100%', objectFit:'cover', minHeight: i===0 ? 620 : 'auto'}}/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7))'}}/>
        <div style={{position:'absolute', bottom:20, left:20, right:20, color:'#fff'}}>
          <div style={{fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', opacity:.9}}>{d.count} aktivite</div>
          <div style={{fontSize:i===0?40:24, fontWeight:700, marginTop:6, letterSpacing:'-0.025em'}}>{d.name}</div>
          <div style={{fontSize:13, opacity:.85, marginTop:4}}>{d.tagline}</div>
        </div>
      </div>)}
    </div>
  </div>
);

const BlogIndexPage = ({ onNav }) => (
  <div style={{maxWidth:1240, margin:'0 auto', padding:'32px 32px 80px'}}>
    <div className="eyebrow">BLOG</div>
    <h1 style={{fontSize:56, marginTop:8}}>Günlükten notlar.</h1>
    <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:48, marginTop:40, alignItems:'flex-start'}}>
      <div>
        {/* Lead */}
        <div className="card-interactive" style={{marginBottom:32, cursor:'default'}}>
          <div style={{position:'relative', aspectRatio:'7/4', borderRadius:'var(--r-lg)', overflow:'hidden'}}>
            <img src={BLOGS[0].cover} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
            <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7))'}}/>
            <div style={{position:'absolute', bottom:28, left:28, right:28, color:'#fff'}}>
              <Pill tone="brand">{BLOGS[0].cat}</Pill>
              <h2 style={{color:'#fff', fontSize:40, marginTop:12, lineHeight:1.15, maxWidth:720}}>{BLOGS[0].title}</h2>
              <div style={{fontSize:13, opacity:.85, marginTop:10}}>{BLOGS[0].author} · {BLOGS[0].date} · {BLOGS[0].readMins} dk okuma</div>
            </div>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:24}}>
          {BLOGS.slice(1,3).map(b => <div key={b.id} className="card-interactive" style={{cursor:'default'}}>
            <div style={{aspectRatio:'16/10', borderRadius:'var(--r-lg)', overflow:'hidden', marginBottom:14}}>
              <img src={b.cover} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
            </div>
            <Pill tone="brand">{b.cat}</Pill>
            <h3 style={{fontSize:22, marginTop:10, lineHeight:1.3}}>{b.title}</h3>
            <p style={{fontSize:14, color:'var(--color-ink-dim)', marginTop:8}}>{b.excerpt}</p>
            <div style={{fontSize:12, color:'var(--color-ink-low)', marginTop:12}}>{b.author} · {b.date} · {b.readMins} dk</div>
          </div>)}
        </div>
      </div>
      <aside style={{position:'sticky', top:90}}>
        <div className="card" style={{padding:20}}>
          <div style={{fontSize:14, fontWeight:700, marginBottom:14}}>Kategoriler</div>
          {['Tümü','Rehber','Tavsiye','Gastronomi','Keşif','Doğa'].map((c,i) => <div key={c} style={{padding:'8px 0', fontSize:13, fontWeight:i===0?700:500, color:i===0?'var(--color-brand-600)':'var(--color-ink-dim)', cursor:'default'}}>{c}</div>)}
          <div style={{fontSize:14, fontWeight:700, marginTop:20, marginBottom:10, paddingTop:20, borderTop:'1px solid var(--color-line)'}}>Popüler Etiketler</div>
          <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
            {['bodrum','kapadokya','fotoğraf','balon','dalış','mavi tur','lezzet','ege'].map(t => <Pill key={t}>#{t}</Pill>)}
          </div>
        </div>
      </aside>
    </div>
  </div>
);

// ============================================================================
// CATEGORIES — tüm kategorileri gezinilebilir grid + hero kategoriler
// ============================================================================

const CategoriesPage = ({ onNav }) => {
  const hero = [
    {slug:'tekne', label:'Tekne Turları', count:248, img:'https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=1200&q=80&auto=format', icon:'⛵', desc:'Mavi yolculuklar, günlük turlar, özel kiralamalar'},
    {slug:'balon', label:'Balon & Hava', count:42, img:'https://images.unsplash.com/photo-1520985825844-b856f3a2ccdd?w=1200&q=80&auto=format', icon:'🎈', desc:'Kapadokya, Pamukkale — şafak uçuşları'},
    {slug:'atv-jeep', label:'ATV & Jeep Safari', count:134, img:'https://images.unsplash.com/photo-1518770660439-4636190af475?w=1200&q=80&auto=format', icon:'🏜️', desc:'Off-road macera, nehir ve kanyon turları'},
  ];
  const all = [
    {g:'Suda', items:[['tekne','Tekne Turları',248],['yat','Yat Kiralama',86],['dalis','Dalış',54],['surf','Sörf & Rüzgar',28],['kanoraft','Kano & Rafting',62],['yuzme','Yüzme & Şnorkel',41]]},
    {g:'Havada', items:[['balon','Sıcak Hava Balonu',42],['paraglide','Yamaç Paraşütü',38],['helikopter','Helikopter Turu',12],['skydive','Skydive',6]]},
    {g:'Karada', items:[['atv','ATV',89],['jeep','Jeep Safari',45],['bisiklet','Bisiklet',72],['trekking','Trekking',124],['ata','At Binme',31],['tirmanış','Tırmanış',18]]},
    {g:'Kültür', items:[['yemek','Yemek Turu',156],['sarap','Şarap & Üzüm',48],['muze','Müze & Tarih',92],['foto','Fotoğraf Turu',64],['yerel','Yerel Yaşam',37],['festival','Festival',22]]},
    {g:'Rahatlama', items:[['spa','Spa & Hamam',52],['wellness','Wellness',28],['termal','Termal',19],['yoga','Yoga & Meditasyon',34]]},
    {g:'Aile', items:[['cocuk','Çocuklu',138],['egitim','Eğitici',46],['hayvan','Hayvanat',29],['park','Tema Parkı',14]]},
    {g:'Özel', items:[['birthday','Doğum Günü',24],['proposal','Evlenme Teklifi',12],['grup','Grup Etkinliği',88],['kurumsal','Kurumsal',36]]},
  ];
  return (
    <div>
      <div style={{background:'var(--color-brand-50)', padding:'48px 0 40px'}}>
        <div style={{maxWidth:1280, margin:'0 auto', padding:'0 40px'}}>
          <Breadcrumbs items={[{label:'Ana Sayfa', onClick:()=>onNav('home')},{label:'Kategoriler'}]}/>
          <h1 style={{fontFamily:'var(--font-display)', fontSize:'clamp(36px,5vw,56px)', fontWeight:800, letterSpacing:'-.02em', marginTop:16}}>Ne yapmak istersin?</h1>
          <p style={{fontSize:18, color:'var(--color-ink-mid)', marginTop:12, maxWidth:640}}>
            Suda, havada, karada — Türkiye'nin dört bir yanından 1.200+ deneyim, 32 kategoride.
          </p>
          <div style={{marginTop:24, maxWidth:560}}>
            <Input placeholder="Kategori ara... (örn. dalış, balon, yemek)"/>
          </div>
        </div>
      </div>

      <div style={{maxWidth:1280, margin:'0 auto', padding:'48px 40px'}}>
        <h2 style={{fontFamily:'var(--font-display)', fontSize:32, fontWeight:700, letterSpacing:'-.01em', marginBottom:8}}>Öne çıkan kategoriler</h2>
        <p style={{fontSize:15, color:'var(--color-ink-dim)', marginBottom:28}}>En çok tercih edilen deneyim türleri</p>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginBottom:32}}>
          {hero.map(h =>
            <a key={h.slug} onClick={()=>onNav('listings',{cat:h.slug})} style={{display:'block', cursor:'pointer', borderRadius:'var(--r-lg)', overflow:'hidden', position:'relative', aspectRatio:'4/5', background:`linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.75) 100%), url(${h.img}) center/cover`, color:'#fff'}}>
              <div style={{position:'absolute', top:16, right:16, background:'rgba(255,255,255,.2)', backdropFilter:'blur(12px)', padding:'4px 10px', borderRadius:999, fontSize:12, fontWeight:700}}>{h.count} deneyim</div>
              <div style={{position:'absolute', bottom:0, left:0, right:0, padding:24}}>
                <div style={{fontSize:32, marginBottom:8}}>{h.icon}</div>
                <div style={{fontFamily:'var(--font-display)', fontSize:26, fontWeight:700, letterSpacing:'-.01em'}}>{h.label}</div>
                <div style={{fontSize:13, opacity:.85, marginTop:6, lineHeight:1.5}}>{h.desc}</div>
                <div style={{marginTop:14, fontSize:13, fontWeight:700, textDecoration:'underline'}}>Keşfet →</div>
              </div>
            </a>
          )}
        </div>

        {/* Konaklama hub — new vertical */}
        <div style={{marginBottom:56}}>
          <HotelCategoryHero onNav={onNav}/>
        </div>

        <h2 style={{fontFamily:'var(--font-display)', fontSize:32, fontWeight:700, letterSpacing:'-.01em', marginBottom:8}}>Tüm kategoriler</h2>
        <p style={{fontSize:15, color:'var(--color-ink-dim)', marginBottom:28}}>Gruplara göre gezinin</p>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(320px, 1fr))', gap:28}}>
          {all.map(g =>
            <div key={g.g} className="card" style={{padding:24}}>
              <div style={{fontSize:11, letterSpacing:'.14em', color:'var(--color-brand-600)', fontWeight:800, textTransform:'uppercase', marginBottom:14}}>{g.g}</div>
              <div style={{display:'flex', flexDirection:'column', gap:2}}>
                {g.items.map(([slug,label,c]) =>
                  <a key={slug} onClick={()=>onNav('listings',{cat:slug})} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 12px', borderRadius:'var(--r-md)', cursor:'pointer', transition:'background .15s'}} onMouseEnter={e=>e.currentTarget.style.background='var(--color-surface-muted)'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                    <span style={{fontSize:14, fontWeight:500}}>{label}</span>
                    <span className="tnum" style={{fontSize:12, color:'var(--color-ink-low)'}}>{c}</span>
                  </a>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ============================================================================
// ABOUT — kurumsal hikaye
// ============================================================================

const AboutPage = ({ onNav }) => (
  <div>
    <div style={{position:'relative', minHeight:520, background:'linear-gradient(120deg, rgba(13,22,30,.72), rgba(13,22,30,.32)), url(https://images.unsplash.com/photo-1527631746610-bca00a040d60?w=1800&q=80&auto=format) center/cover', color:'#fff', display:'flex', alignItems:'flex-end'}}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 40px 64px', width:'100%'}}>
        <Breadcrumbs items={[{label:'Ana Sayfa', onClick:()=>onNav('home')},{label:'Hakkımızda'}]} dark/>
        <div style={{maxWidth:780, marginTop:20}}>
          <div style={{fontSize:13, letterSpacing:'.2em', textTransform:'uppercase', opacity:.75, fontWeight:700}}>Vagoonya'nın Hikayesi</div>
          <h1 style={{fontFamily:'var(--font-display)', fontSize:'clamp(44px,6vw,72px)', fontWeight:800, letterSpacing:'-.025em', lineHeight:1.02, marginTop:18}}>
            Her koy, her tepe, her lezzet — bir rehber uzaklıkta.
          </h1>
          <p style={{fontSize:18, lineHeight:1.6, opacity:.9, marginTop:20, maxWidth:640}}>
            2019'da Bodrum'da bir teknecinin masasında başladık. Bugün 32 ilde 1.200'den fazla yerel tedarikçiyle çalışıyoruz.
          </p>
        </div>
      </div>
    </div>

    <div style={{maxWidth:1280, margin:'0 auto', padding:'80px 40px'}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:80, alignItems:'start'}}>
        <div>
          <div style={{fontSize:13, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--color-brand-600)', fontWeight:800}}>Misyon</div>
          <h2 style={{fontFamily:'var(--font-display)', fontSize:36, fontWeight:700, letterSpacing:'-.015em', marginTop:12}}>Yerel deneyimi hakkıyla yaşatmak.</h2>
        </div>
        <div style={{fontSize:17, lineHeight:1.7, color:'var(--color-ink-mid)'}}>
          <p style={{marginBottom:20}}>Vagoonya, "tatil" ile "deneyim" arasındaki farkın küçük teknelerde, köy sofralarında ve balon sepetlerinde yaşandığına inanıyor. Biz Türkiye'nin dört bir yanındaki bu hikaye sahiplerini — teknecileri, rehberleri, balon pilotlarını, aşçıları — aynı dijital pazar yerinde buluşturuyoruz.</p>
          <p>Her rezervasyon bir köy ekonomisine, bir aile işletmesine, bir lokal rehbere dokunuyor. 7 yılda 248.000 misafiri, 1.200 tedarikçiye ulaştırdık. Her yıl bu sayı büyüyor ve biz daha iyi bir platform olmak için çalışıyoruz.</p>
        </div>
      </div>
    </div>

    <div style={{background:'var(--color-surface-muted)', padding:'80px 0'}}>
      <div style={{maxWidth:1280, margin:'0 auto', padding:'0 40px'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:32}}>
          {[['248K','Mutlu misafir','2019-2026 toplam rezervasyon'],['1.200+','Tedarikçi ortak','32 ilde yerel işletme'],['4.87','Ortalama puan','38.420 doğrulanmış değerlendirme'],['%98','Tekrar tercih','misafir memnuniyeti']].map(([n,t,d]) =>
            <div key={t} style={{textAlign:'center'}}>
              <div style={{fontFamily:'var(--font-display)', fontSize:64, fontWeight:800, color:'var(--color-brand-600)', lineHeight:1, letterSpacing:'-.02em'}} className="tnum">{n}</div>
              <div style={{fontSize:16, fontWeight:700, marginTop:10}}>{t}</div>
              <div style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:4}}>{d}</div>
            </div>
          )}
        </div>
      </div>
    </div>

    <div style={{maxWidth:1280, margin:'0 auto', padding:'80px 40px'}}>
      <div style={{textAlign:'center', marginBottom:48}}>
        <div style={{fontSize:13, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--color-brand-600)', fontWeight:800}}>Değerlerimiz</div>
        <h2 style={{fontFamily:'var(--font-display)', fontSize:40, fontWeight:700, letterSpacing:'-.015em', marginTop:12}}>Neye inanıyoruz</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24}}>
        {[
          ['Yerele değer', 'Her rezervasyon bir aile işletmesine dokunuyor. Komisyonumuz şeffaf, ödemelerimiz hızlı.'],
          ['Şeffaflık', 'Gerçek misafir yorumları, net fiyatlar, gizli maliyet yok. İptal politikaları başvurudan önce görünür.'],
          ['Güvenlik', 'Her tedarikçi belge doğrulaması, sigorta kontrolü ve saha ziyaretinden geçer.'],
          ['Sürdürülebilirlik', 'Eko-dostu deneyimleri öne çıkarıyoruz. 2030 hedefi: karbon nötr operasyon.'],
          ['Erişilebilirlik', 'Fiyat aralığımız 120 ₺\'den başlıyor. Her bütçeye, her yaşa bir deneyim.'],
          ['Topluluk', 'Tedarikçilerimizle ayda bir atölye, yılda bir ortak buluşması düzenliyoruz.'],
        ].map(([t,d],i) =>
          <div key={t} className="card" style={{padding:28}}>
            <div style={{width:44, height:44, borderRadius:'var(--r-md)', background:'var(--color-brand-50)', color:'var(--color-brand-700)', display:'grid', placeItems:'center', fontSize:20, fontWeight:800}} className="tnum">0{i+1}</div>
            <div style={{fontSize:18, fontWeight:700, marginTop:16}}>{t}</div>
            <div style={{fontSize:14, lineHeight:1.6, color:'var(--color-ink-mid)', marginTop:8}}>{d}</div>
          </div>
        )}
      </div>
    </div>

    <div style={{maxWidth:1280, margin:'0 auto', padding:'0 40px 80px'}}>
      <div style={{textAlign:'center', marginBottom:48}}>
        <div style={{fontSize:13, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--color-brand-600)', fontWeight:800}}>Ekip</div>
        <h2 style={{fontFamily:'var(--font-display)', fontSize:40, fontWeight:700, letterSpacing:'-.015em', marginTop:12}}>Arkadaki insanlar</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20}}>
        {[
          ['Selin Aydın','Kurucu & CEO','SA','brand-500'],
          ['Murat Erkan','CTO','ME','info'],
          ['Deniz Polat','Tedarikçi Başarısı','DP','success-deep'],
          ['Aylin Kaya','Tasarım Lideri','AK','warning-deep'],
        ].map(([n,t,i,c]) =>
          <div key={n} className="card" style={{padding:24, textAlign:'center'}}>
            <div style={{width:88, height:88, borderRadius:'50%', background:`var(--color-${c})`, color:'#fff', display:'grid', placeItems:'center', fontSize:28, fontWeight:700, margin:'0 auto', fontFamily:'var(--font-display)'}}>{i}</div>
            <div style={{fontSize:17, fontWeight:700, marginTop:16}}>{n}</div>
            <div style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:4}}>{t}</div>
          </div>
        )}
      </div>
    </div>

    <div style={{background:'var(--color-ink-900)', color:'#fff', padding:'64px 0'}}>
      <div style={{maxWidth:900, margin:'0 auto', padding:'0 40px', textAlign:'center'}}>
        <h2 style={{fontFamily:'var(--font-display)', fontSize:36, fontWeight:700, letterSpacing:'-.015em'}}>Sen de tedarikçi ol.</h2>
        <p style={{fontSize:17, opacity:.8, marginTop:14, maxWidth:560, margin:'14px auto 0'}}>Deneyim hazırlıyorsan, Vagoonya'nın pazaryerinde yerini al. Başvuru 10 dakika, onay 3 iş günü.</p>
        <div style={{marginTop:28, display:'flex', gap:12, justifyContent:'center'}}>
          <Btn variant="primary" size="lg" onClick={()=>onNav('supplier-apply')}>Başvur</Btn>
          <Btn variant="ghost" size="lg" onClick={()=>onNav('contact')} style={{color:'#fff', borderColor:'rgba(255,255,255,.3)'}}>İletişime geç</Btn>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================================
// CONTACT
// ============================================================================

const ContactPage = ({ onNav }) => (
  <div style={{maxWidth:1280, margin:'0 auto', padding:'48px 40px 80px'}}>
    <Breadcrumbs items={[{label:'Ana Sayfa', onClick:()=>onNav('home')},{label:'İletişim'}]}/>
    <div style={{maxWidth:720, marginTop:20}}>
      <h1 style={{fontFamily:'var(--font-display)', fontSize:'clamp(40px,5vw,56px)', fontWeight:800, letterSpacing:'-.02em', lineHeight:1.05}}>Size nasıl yardımcı olabiliriz?</h1>
      <p style={{fontSize:18, color:'var(--color-ink-mid)', marginTop:14}}>Soru, öneri, rezervasyon yardımı — her konuda buradayız. 7/24 destek.</p>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16, marginTop:40}}>
      {[
        ['Telefon','+90 850 000 00 00','Pzt-Paz 08:00 – 24:00','phone','brand'],
        ['WhatsApp','+90 555 000 00 00','Anlık yanıt','message','success-deep'],
        ['E-posta','destek@vagoonya.com','24 saat içinde yanıt','mail','info'],
        ['Merkez Ofis','İstanbul, Kadıköy','Caferağa Mah. No:12','map','warning-deep'],
      ].map(([t,v,d,ic,c]) =>
        <div key={t} className="card" style={{padding:22}}>
          <div style={{width:40, height:40, borderRadius:'var(--r-md)', background:`var(--color-${c}-50, var(--color-${c}))`, color:c==='brand'?'var(--color-brand-700)':'#fff', display:'grid', placeItems:'center'}}>
            <Icon name={ic} size={18}/>
          </div>
          <div style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:14}}>{t}</div>
          <div style={{fontSize:15, fontWeight:700, marginTop:4, wordBreak:'break-all'}}>{v}</div>
          <div style={{fontSize:12, color:'var(--color-ink-low)', marginTop:6}}>{d}</div>
        </div>
      )}
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:40, marginTop:56}}>
      <div className="card" style={{padding:36}}>
        <h2 style={{fontFamily:'var(--font-display)', fontSize:26, fontWeight:700, letterSpacing:'-.01em'}}>Mesaj gönder</h2>
        <p style={{fontSize:14, color:'var(--color-ink-dim)', marginTop:6}}>Form üzerinden ulaştığınız mesajlara ortalama 2 saatte dönüyoruz.</p>
        <div style={{display:'grid', gap:16, marginTop:24}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
            <Field label="Ad Soyad" required><Input placeholder="Ayşe Yılmaz"/></Field>
            <Field label="E-posta" required><Input type="email" placeholder="ayse@ornek.com"/></Field>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
            <Field label="Telefon"><Input placeholder="+90 ..."/></Field>
            <Field label="Konu" required>
              <Select value="" onChange={()=>{}} options={[
                {value:'',label:'Seçin...'},
                {value:'rez',label:'Rezervasyon yardımı'},
                {value:'iade',label:'İade / iptal talebi'},
                {value:'tedarikci',label:'Tedarikçi başvurusu'},
                {value:'kurumsal',label:'Kurumsal grup'},
                {value:'basin',label:'Basın / medya'},
                {value:'diger',label:'Diğer'},
              ]}/>
            </Field>
          </div>
          <Field label="Rezervasyon Kodu (varsa)"><Input placeholder="#VGN-5032"/></Field>
          <Field label="Mesajınız" required><TextArea rows={5} placeholder="Nasıl yardımcı olabiliriz?"/></Field>
          <label style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:13, color:'var(--color-ink-mid)'}}>
            <input type="checkbox" style={{marginTop:2}}/>
            <span>Gizlilik politikasını okudum, kişisel verilerimin işlenmesine onay veriyorum.</span>
          </label>
          <div style={{display:'flex', justifyContent:'flex-end', marginTop:8}}>
            <Btn variant="primary" size="lg" icon="send">Gönder</Btn>
          </div>
        </div>
      </div>

      <div>
        <div className="card" style={{padding:0, overflow:'hidden', marginBottom:20}}>
          <div style={{aspectRatio:'4/3', background:'linear-gradient(135deg,#cfe3d8,#a7cbba)', position:'relative'}}>
            <div style={{position:'absolute', inset:0, display:'grid', placeItems:'center'}}>
              <div style={{background:'#fff', padding:'10px 16px', borderRadius:999, fontSize:13, fontWeight:700, boxShadow:'var(--s-md)'}}>📍 Kadıköy, İstanbul</div>
            </div>
            <svg viewBox="0 0 400 300" style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:.35}}>
              <path d="M0,180 Q100,140 200,160 T400,180 L400,300 L0,300 Z" fill="#2d5f4f"/>
              <path d="M0,200 Q120,170 240,190 T400,210 L400,300 L0,300 Z" fill="#3a7361" opacity=".7"/>
            </svg>
          </div>
          <div style={{padding:20}}>
            <div style={{fontWeight:700, fontSize:15}}>Vagoonya HQ</div>
            <div style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:6, lineHeight:1.6}}>Caferağa Mah. Moda Cad. No:12 K:3<br/>Kadıköy / İstanbul 34710</div>
            <div style={{marginTop:14, display:'flex', gap:8}}>
              <Btn variant="secondary" size="sm" icon="map">Yol tarifi</Btn>
              <Btn variant="ghost" size="sm">Kopyala</Btn>
            </div>
          </div>
        </div>

        <div className="card" style={{padding:24}}>
          <div style={{fontWeight:700, fontSize:15}}>Sık sorulanlara bakın</div>
          <div style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:6, lineHeight:1.6}}>Belki cevap bizde. Önce yardım merkezimizi dener misiniz?</div>
          <Btn variant="secondary" size="sm" style={{marginTop:14}} onClick={()=>onNav('help')}>Yardım Merkezi →</Btn>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================================
// HELP / FAQ
// ============================================================================

const HelpPage = ({ onNav }) => {
  const [open, setOpen] = React.useState('rez-0');
  const cats = [
    {id:'rez', label:'Rezervasyon', icon:'calendar', count:12},
    {id:'odeme', label:'Ödeme & İade', icon:'card', count:8},
    {id:'hesap', label:'Hesabım', icon:'user', count:6},
    {id:'tedarikci', label:'Tedarikçi', icon:'briefcase', count:10},
    {id:'guvenlik', label:'Güvenlik', icon:'shield', count:5},
  ];
  const faqs = {
    rez: [
      ['Nasıl rezervasyon yaparım?','Anasayfadan aradığınız deneyim türünü seçip tarih + katılımcı sayısı girin. Listeyi filtreleyip beğendiğiniz ilanın detay sayfasına gidin, paket ve saat seçerek "Hemen Rezerve Et" butonuna tıklayın. Ödeme adımında kart bilgilerinizi girdikten sonra onay e-postanız ulaşır.'],
      ['Rezervasyonumu ne zaman onaylanmış olur?','İlan üzerinde "Anında onay" rozeti varsa ödeme tamamlandığı anda onaylanır. Aksi halde tedarikçi en geç 12 saat içinde cevap verir; bu sürede ödeme bloke edilir, onay gelmezse otomatik iade alırsınız.'],
      ['Rezervasyonumu nasıl iptal ederim?','Hesabım > Rezervasyonlarım sayfasından ilgili rezervasyonu açın ve "İptal et" butonuna basın. İade oranı ilanın iptal politikasına göre hesaplanır ve sonraki ekranda gösterilir.'],
      ['Grup indirimi var mı?','8 kişi ve üzeri rezervasyonlarda %10 otomatik indirim uygulanır. 20+ kişi için özel teklif almak üzere bizimle iletişime geçebilirsiniz.'],
    ],
    odeme: [
      ['Hangi ödeme yöntemlerini kabul ediyorsunuz?','Tüm kredi/banka kartları (Visa, Mastercard, Troy, Amex), banka havalesi ve Vagoonya Cüzdanı. Yurt dışı kartlar için TL üzerinden işlem yapılır.'],
      ['Para birim seçenekleri nedir?','Varsayılan TL. USD, EUR ve GBP görüntüleme için desteklenir; ödeme her durumda TL cinsinden alınır.'],
      ['İade ne zaman hesabıma geçer?','Kart iadeleri 3-10 iş günü, havale iadeleri 1-3 iş günü içinde tamamlanır. İade başlangıç tarihi e-posta ile bildirilir.'],
    ],
    hesap: [
      ['Şifremi unuttum, ne yapmalıyım?','Giriş ekranındaki "Şifremi unuttum" linkine tıklayın, kayıtlı e-posta adresinize sıfırlama bağlantısı gönderiyoruz. Bağlantı 30 dakika geçerlidir.'],
      ['E-posta adresimi nasıl değiştiririm?','Hesabım > Ayarlar > Güvenlik sekmesinden yeni e-posta adresinizi girin. Her iki adrese de doğrulama e-postası gönderilir; her ikisini onayladıktan sonra değişiklik uygulanır.'],
    ],
    tedarikci: [
      ['Nasıl tedarikçi olurum?','Alt menüdeki "Tedarikçi Ol" bağlantısından başvuru formunu doldurun. Şirket belgeleri ve sigortanızı yükleyin; ekibimiz 3 iş günü içinde dönüş yapar.'],
      ['Komisyon oranı nedir?','Standart komisyon %10\'dur. Belirli hacim ve kalite eşiklerini geçen tedarikçiler %8\'e kadar inebilir. Kampanya dönemlerinde ek teşvikler uygulanabilir.'],
      ['Ödemelerimi ne zaman alırım?','Tamamlanan rezervasyonların tutarı, müsaitlik süresi (misafir şikayeti penceresi) geçtikten sonra 15\'er günlük batchlerle havale edilir. Kazançlar panelinden her zaman görüntülenebilir.'],
    ],
    guvenlik: [
      ['Deneyimler sigortalı mı?','Evet. Platformumuzdaki tüm tedarikçilerin geçerli sorumluluk sigortası olması zorunludur. Belgeler kaydolurken ve yılda bir doğrulanır.'],
      ['Kart bilgilerim güvende mi?','Ödemeler PCI DSS sertifikalı iyzico altyapısı üzerinden işlenir; kart bilgileri sunucularımızda saklanmaz. 3D Secure zorunludur.'],
    ],
  };
  const [active, setActive] = React.useState('rez');
  return (
    <div>
      <div style={{background:'var(--color-brand-50)', padding:'56px 0'}}>
        <div style={{maxWidth:1280, margin:'0 auto', padding:'0 40px'}}>
          <Breadcrumbs items={[{label:'Ana Sayfa', onClick:()=>onNav('home')},{label:'Yardım Merkezi'}]}/>
          <div style={{maxWidth:720, marginTop:16}}>
            <h1 style={{fontFamily:'var(--font-display)', fontSize:'clamp(40px,5vw,56px)', fontWeight:800, letterSpacing:'-.02em'}}>Yardım Merkezi</h1>
            <p style={{fontSize:18, color:'var(--color-ink-mid)', marginTop:12}}>Sık sorulanlardan canlı desteğe — aradığınız cevap burada.</p>
            <div style={{marginTop:22, position:'relative'}}>
              <Input placeholder="Nasıl rezervasyon iptal ederim?" style={{height:56, fontSize:16, paddingLeft:52}}/>
              <div style={{position:'absolute', left:18, top:18, color:'var(--color-ink-low)'}}><Icon name="search" size={20}/></div>
            </div>
          </div>
        </div>
      </div>

      <div style={{maxWidth:1280, margin:'0 auto', padding:'56px 40px'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:16, marginBottom:56}}>
          {cats.map(c =>
            <div key={c.id} onClick={()=>setActive(c.id)} className="card" style={{padding:20, cursor:'pointer', borderColor: active===c.id ? 'var(--color-brand-500)' : undefined, background: active===c.id ? 'var(--color-brand-50)' : undefined}}>
              <div style={{width:36, height:36, borderRadius:'var(--r-md)', background:'var(--color-surface)', display:'grid', placeItems:'center', color:'var(--color-brand-700)'}}>
                <Icon name={c.icon} size={18}/>
              </div>
              <div style={{fontSize:15, fontWeight:700, marginTop:14}}>{c.label}</div>
              <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4}}>{c.count} makale</div>
            </div>
          )}
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 300px', gap:48}}>
          <div>
            <h2 style={{fontFamily:'var(--font-display)', fontSize:28, fontWeight:700, letterSpacing:'-.01em', marginBottom:4}}>
              {cats.find(c=>c.id===active)?.label}
            </h2>
            <p style={{fontSize:14, color:'var(--color-ink-dim)', marginBottom:28}}>{(faqs[active]||[]).length} sık sorulan soru</p>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              {(faqs[active]||[]).map(([q,a], i) => {
                const key = `${active}-${i}`;
                const isOpen = open === key;
                return (
                  <div key={key} className="card" style={{padding:0, overflow:'hidden'}}>
                    <button onClick={()=>setOpen(isOpen ? '' : key)} style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, width:'100%', padding:'20px 24px', background:'transparent', border:0, textAlign:'left', cursor:'pointer', fontSize:16, fontWeight:600}}>
                      <span>{q}</span>
                      <span style={{color:'var(--color-ink-low)', fontSize:18, transform:isOpen?'rotate(180deg)':'none', transition:'transform .2s'}}>⌄</span>
                    </button>
                    {isOpen && <div style={{padding:'0 24px 22px', fontSize:15, lineHeight:1.7, color:'var(--color-ink-mid)'}}>{a}</div>}
                  </div>
                );
              })}
            </div>
          </div>

          <aside>
            <div className="card" style={{padding:24, background:'var(--color-surface-muted)'}}>
              <div style={{fontSize:14, fontWeight:700, marginBottom:6}}>Cevap bulamadınız mı?</div>
              <div style={{fontSize:13, color:'var(--color-ink-mid)', lineHeight:1.6, marginBottom:16}}>Destek ekibimiz 7/24 yanıt veriyor.</div>
              <div style={{display:'flex', flexDirection:'column', gap:8}}>
                <Btn variant="primary" size="sm" icon="message" onClick={()=>onNav('contact')}>Canlı Destek</Btn>
                <Btn variant="secondary" size="sm" icon="mail" onClick={()=>onNav('contact')}>E-posta</Btn>
                <Btn variant="ghost" size="sm" icon="phone">+90 850 000 00 00</Btn>
              </div>
            </div>

            <div className="card" style={{padding:24, marginTop:16}}>
              <div style={{fontSize:13, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--color-ink-low)', marginBottom:12}}>Popüler makaleler</div>
              <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:10}}>
                {['Rezervasyon iptali ne kadar sürer?','Grup rezervasyonunda nasıl indirim alırım?','Hediye çeki nasıl kullanılır?','Kötü hava durumunda ne oluyor?','Yurt dışı kartla ödeme'].map(t =>
                  <li key={t}><a style={{fontSize:13, color:'var(--color-info-deep)', cursor:'pointer', lineHeight:1.5}}>{t} →</a></li>
                )}
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { HomePage, ListingsIndexPage, ListingDetailPage, BookingFlowPage, LoginPage, AccountPage, DestinationsPage, BlogIndexPage, CategoriesPage, AboutPage, ContactPage, HelpPage });