// ═══ HOTEL VERTICAL ═══════════════════════════════════════════════
// Domain: RatePlan, RatePlanCalendar, AddOn, CancellationPolicy, PromoCode
// + supplier (rate plan list, calendar grid, listing form hotel-aware)
// + admin (rate plans, calendar, cancellation policies, promos)
// + public (hotel detail, hotel booking 6-step, hotel category hub)

// ─── DATA ─────────────────────────────────────────────────────
const HOTEL_DATA = (() => {
  const today = new Date(); today.setHours(0,0,0,0);
  const addDays = (d, n) => { const x = new Date(d); x.setDate(x.getDate()+n); return x; };
  const fmt = (d) => d.toISOString().slice(0,10);
  const dayLabel = (d) => d.toLocaleDateString('tr-TR', {day:'2-digit', month:'short'});
  const weekday = (d) => ['Pzr','Pzt','Sal','Çar','Per','Cum','Cmt'][d.getDay()];

  const hotels = [
    { id: 901, slug:'bodrum-marin-hotel-yalikavak', title:'Marin Hotel Yalıkavak',
      cat:'Otel', destination:'Bodrum', verticalType:'Hotel',
      stars:5, score:9.2, reviews:482, priceFrom:4250,
      address:'Yalıkavak Mah. Marina Cd. No:18, Bodrum',
      hero:'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1800&q=80&auto=format',
      gallery:[
        'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1400&q=80&auto=format',
        'https://images.unsplash.com/photo-1582719508461-905c673771fd?w=1400&q=80&auto=format',
        'https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=1400&q=80&auto=format',
        'https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?w=1400&q=80&auto=format',
        'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=1400&q=80&auto=format',
      ],
      checkIn:'14:00', checkOut:'12:00',
      desc:'Yalıkavak Marina\'ya 200m mesafede, 96 odalı, denize sıfır butik otel. 2 restoran, spa, infinity havuz.',
      amenities:[
        ['wifi','Ücretsiz Wi-Fi'],['waves','Özel Plaj'],['utensils','2 Restoran'],
        ['heart-pulse','Spa & Hamam'],['car','Vale'],['dumbbell','Fitness'],
        ['snowflake','Klima'],['baby','Çocuk Kulübü'],['ban-cigarette','Sigara İçilmez'],
        ['paw','Evcil Hayvan'],['accessibility','Engelli Erişimi'],['airport','Havalimanı Servisi'],
      ],
      roomTypes:[
        { id:1, name:'Standart Çift Kişilik', size:28, beds:'1 büyük yatak', maxGuests:2, view:'Bahçe',
          img:'https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=900&q=80&auto=format',
          features:['Klima','Mini Bar','Çay/Kahve','LCD TV','Sayfa Banyosu'] },
        { id:2, name:'Deluxe Deniz Manzaralı', size:38, beds:'1 büyük yatak veya 2 ayrı', maxGuests:3, view:'Deniz',
          img:'https://images.unsplash.com/photo-1582719508461-905c673771fd?w=900&q=80&auto=format',
          features:['Balkon','Klima','Yağmurlama Duş','Nespresso','Bornoz/Terlik'] },
        { id:3, name:'Suite Marina', size:62, beds:'1 büyük yatak + oturma odası', maxGuests:4, view:'Marina',
          img:'https://images.unsplash.com/photo-1591088398332-8a7791972843?w=900&q=80&auto=format',
          features:['Jakuzi','Salon','Mini Mutfak','VIP Karşılama','Late Check-out'] },
      ],
    },
    { id: 902, slug:'kapadokya-cave-suites', title:'Kapadokya Cave Suites',
      cat:'Butik Otel', destination:'Kapadokya', verticalType:'Hotel',
      stars:4, score:9.4, reviews:328, priceFrom:3800,
      address:'Aydınlı Mah. Göreme/Nevşehir',
      hero:'https://images.unsplash.com/photo-1641128324972-af3212f0f6bd?w=1800&q=80&auto=format',
      gallery:[],
      checkIn:'14:00', checkOut:'11:00',
      desc:'Göreme\'nin kalbinde kayadan oyma 18 süit. Özel teraslar, balon manzarası.',
      amenities:[['wifi','Wi-Fi'],['utensils','Kahvaltı'],['mountain','Balon Manzarası'],['heart-pulse','Spa']],
      roomTypes:[
        { id:1, name:'Cave Standart', size:24, beds:'1 büyük yatak', maxGuests:2, view:'Vadi', features:[] },
        { id:2, name:'Cave Suite Terrace', size:42, beds:'1 büyük yatak', maxGuests:3, view:'Balon Vadisi', features:[] },
      ],
    },
    { id: 903, slug:'fethiye-villa-blu', title:'Villa Blu Fethiye',
      cat:'Villa', destination:'Fethiye', verticalType:'Hotel',
      stars:0, score:9.0, reviews:84, priceFrom:8200,
      checkIn:'16:00', checkOut:'10:00',
      desc:'Özel havuzlu, 4 yatak odalı, Ölüdeniz manzaralı tatil villası.',
      hero:'https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1800&q=80&auto=format',
      gallery:[],
      amenities:[],
      roomTypes:[{ id:1, name:'Tüm Villa (4 yatak odası)', size:240, beds:'4 yatak odası', maxGuests:8, view:'Deniz', features:[] }],
    },
  ];

  // Rate plans for hotel 901
  const ratePlans = [
    { id:101, hotelId:901, roomTypeId:1, code:'STD-BB-FLEX', name:'Standart · Kahvaltı Dahil · Esnek', mealPlan:'BB', refundable:true, policyId:1, active:true, basePrice:4250 },
    { id:102, hotelId:901, roomTypeId:1, code:'STD-RO-NRF', name:'Standart · Sadece Oda · İade Yok', mealPlan:'RoomOnly', refundable:false, policyId:3, active:true, basePrice:3650 },
    { id:103, hotelId:901, roomTypeId:2, code:'DLX-BB-FLEX', name:'Deluxe Deniz · Kahvaltı · Esnek', mealPlan:'BB', refundable:true, policyId:1, active:true, basePrice:5950 },
    { id:104, hotelId:901, roomTypeId:2, code:'DLX-HB-FLEX', name:'Deluxe Deniz · Yarım Pansiyon', mealPlan:'HB', refundable:true, policyId:1, active:true, basePrice:7400 },
    { id:105, hotelId:901, roomTypeId:3, code:'STE-AI-FLEX', name:'Suite Marina · Her Şey Dahil', mealPlan:'AllInclusive', refundable:true, policyId:2, active:true, basePrice:12800 },
    { id:106, hotelId:901, roomTypeId:3, code:'STE-BB-NRF', name:'Suite Marina · Kahvaltı · İade Yok', mealPlan:'BB', refundable:false, policyId:3, active:true, basePrice:9400 },
  ];

  // Generate 60 days of calendar for each rate plan
  const calendar = {};
  ratePlans.forEach(rp => {
    calendar[rp.id] = [];
    for (let i=0; i<60; i++) {
      const d = addDays(today, i);
      const dow = d.getDay();
      const isWeekend = dow===5 || dow===6;
      const isHighSeason = d.getMonth()>=5 && d.getMonth()<=8; // Jun-Sep
      let mult = 1; if (isWeekend) mult *= 1.18; if (isHighSeason) mult *= 1.35;
      const stopSell = (i===22 || i===23); // sample sold-out
      const cta = (i===28); // closed to arrival sample
      calendar[rp.id].push({
        date: fmt(d), dateObj:d, dayLabel: dayLabel(d), weekday: weekday(d),
        price: Math.round(rp.basePrice * mult / 50) * 50,
        currency:'TRY',
        minStay: isHighSeason ? 3 : 1,
        maxStay: 30,
        closedToArrival: cta,
        closedToDeparture: false,
        stopSell,
        availableRooms: stopSell ? 0 : (3 + Math.floor(Math.random()*8)),
        totalRooms: 10,
      });
    }
  });

  const cancellationPolicies = [
    { id:1, code:'FLEX_48', name:'Esnek · 48 saat', refundable:true,
      rules:[
        {hours:48, refund:100, label:'48+ saat önce'},
        {hours:24, refund:50, label:'24-48 saat'},
        {hours:0, refund:0, label:'24 saatten az'},
      ], usedBy:48 },
    { id:2, code:'STD_24', name:'Standart · 24 saat', refundable:true,
      rules:[
        {hours:24, refund:100, label:'24+ saat önce'},
        {hours:0, refund:0, label:'24 saatten az'},
      ], usedBy:23 },
    { id:3, code:'NON_REF', name:'İade Edilemez', refundable:false,
      rules:[{hours:0, refund:0, label:'Her durumda'}], usedBy:31 },
    { id:4, code:'FLEX_7DAY', name:'Süper Esnek · 7 gün', refundable:true,
      rules:[
        {hours:168, refund:100, label:'7+ gün önce'},
        {hours:72, refund:75, label:'3-7 gün'},
        {hours:24, refund:50, label:'1-3 gün'},
        {hours:0, refund:0, label:'24 saatten az'},
      ], usedBy:12 },
  ];

  const addOns = [
    { id:1, hotelId:901, code:'AIRPORT', name:'Havalimanı Transferi (tek yön)', price:1200, perNight:false, perPerson:false, icon:'car' },
    { id:2, hotelId:901, code:'BREAKFAST', name:'Kahvaltı Yükseltme (sınırsız)', price:280, perNight:true, perPerson:true, icon:'utensils' },
    { id:3, hotelId:901, code:'SPA60', name:'60dk Aromaterapi Masajı', price:1850, perNight:false, perPerson:true, icon:'heart-pulse' },
    { id:4, hotelId:901, code:'LATECO', name:'Geç Çıkış (16:00)', price:850, perNight:false, perPerson:false, icon:'clock' },
    { id:5, hotelId:901, code:'CHAMP', name:'Karşılama Şampanyası + Meyve', price:650, perNight:false, perPerson:false, icon:'gift' },
    { id:6, hotelId:901, code:'BABY', name:'Bebek Karyolası', price:0, perNight:true, perPerson:false, icon:'baby' },
  ];

  const promoCodes = [
    { id:1, code:'BAHAR24', type:'Percentage', value:15, validFrom:'2026-03-01', validTo:'2026-05-31', minAmount:2000, redeemed:428, max:1000, scope:'Tüm', revenue:'248K ₺', active:true },
    { id:2, code:'HOTEL2026', type:'Fixed', value:200, validFrom:'2026-01-01', validTo:'2026-12-31', minAmount:1500, redeemed:64, max:500, scope:'Otel', revenue:'12.8K ₺', active:true },
    { id:3, code:'LASTMIN30', type:'Percentage', value:30, validFrom:'2026-04-01', validTo:'2026-04-30', minAmount:0, redeemed:42, max:100, scope:'Otel', revenue:'48K ₺', active:true },
    { id:4, code:'WELCOME10', type:'Percentage', value:10, validFrom:'—', validTo:'—', minAmount:0, redeemed:1248, max:'∞', scope:'Tüm', revenue:'62K ₺', active:true },
    { id:5, code:'WINTER23', type:'Percentage', value:25, validFrom:'2023-12-01', validTo:'2024-02-28', minAmount:0, redeemed:892, max:1000, scope:'Tüm', revenue:'184K ₺', active:false },
  ];

  const mealPlanLabel = (mp) => ({
    RoomOnly:'Sadece Oda', BB:'Kahvaltı Dahil', HB:'Yarım Pansiyon',
    FB:'Tam Pansiyon', AllInclusive:'Her Şey Dahil', UltraAI:'Ultra Her Şey Dahil'
  })[mp] || mp;

  return { hotels, ratePlans, calendar, cancellationPolicies, addOns, promoCodes, mealPlanLabel, today, addDays, fmt };
})();

window.HOTEL_DATA = HOTEL_DATA;

// ─── PUBLIC: Hotel listing detail ──────────────────────────────────
const HotelDetailPage = ({ slug, onNav }) => {
  const hotel = HOTEL_DATA.hotels.find(h => h.slug === slug) || HOTEL_DATA.hotels[0];
  const [checkIn, setCheckIn] = React.useState(HOTEL_DATA.fmt(HOTEL_DATA.addDays(HOTEL_DATA.today, 7)));
  const [checkOut, setCheckOut] = React.useState(HOTEL_DATA.fmt(HOTEL_DATA.addDays(HOTEL_DATA.today, 10)));
  const [adults, setAdults] = React.useState(2);
  const [children, setChildren] = React.useState(0);
  const [rooms, setRooms] = React.useState(1);
  const [tab, setTab] = React.useState('rooms');
  const sectionRefs = {
    rooms: React.useRef(null),
    amenities: React.useRef(null),
    policies: React.useRef(null),
    location: React.useRef(null),
    reviews: React.useRef(null),
  };
  const scrollToSection = (key) => {
    setTab(key);
    const el = sectionRefs[key]?.current;
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 140;
      window.scrollTo({top: y, behavior: 'smooth'});
    }
  };
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      const visible = entries.filter(e => e.isIntersecting).sort((a,b)=>b.intersectionRatio - a.intersectionRatio);
      if (visible[0]) {
        const k = visible[0].target.dataset.section;
        if (k) setTab(k);
      }
    }, {rootMargin:'-160px 0px -55% 0px', threshold:[0, 0.2, 0.5, 1]});
    Object.entries(sectionRefs).forEach(([k, ref]) => {
      if (ref.current) { ref.current.dataset.section = k; obs.observe(ref.current); }
    });
    return () => obs.disconnect();
  }, []);

  const nights = Math.max(1, (new Date(checkOut) - new Date(checkIn)) / 86400000);

  // applicable rate plans for this date range
  const applicable = HOTEL_DATA.ratePlans.filter(rp => rp.hotelId === hotel.id).map(rp => {
    const cal = HOTEL_DATA.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;
    if (range[0]?.closedToArrival) return null;
    const total = range.reduce((s,c) => s + c.price, 0) * rooms;
    const avgNight = total / Math.max(1, nights * rooms);
    const roomType = hotel.roomTypes.find(rt => rt.id === rp.roomTypeId);
    return { ...rp, total, avgNight, range, roomType };
  }).filter(Boolean);

  const groupedByRoom = {};
  applicable.forEach(rp => {
    if (!groupedByRoom[rp.roomTypeId]) groupedByRoom[rp.roomTypeId] = [];
    groupedByRoom[rp.roomTypeId].push(rp);
  });

  return (
    <div>
      {/* Image strip */}
      <div style={{maxWidth:1440, margin:'0 auto', padding:'24px 32px 0'}}>
        <Breadcrumbs items={[
          {label:'Ana Sayfa', onClick:()=>onNav('home')},
          {label:'Konaklama', onClick:()=>onNav('listings',{vertical:'Hotel'})},
          {label:hotel.destination, onClick:()=>onNav('listings',{vertical:'Hotel'})},
          {label:hotel.title}
        ]}/>
      </div>
      <div style={{maxWidth:1440, margin:'0 auto', padding:'18px 32px 0'}}>
        <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gridTemplateRows:'1fr 1fr', gap:6, height:480, borderRadius:'var(--r-lg)', overflow:'hidden'}}>
          <div style={{gridRow:'1 / 3', background:`url(${hotel.hero}) center/cover`, position:'relative'}}>
            <div style={{position:'absolute', top:18, left:18, display:'flex', gap:8}}>
              {hotel.stars > 0 && <div style={{background:'rgba(0,0,0,.55)', backdropFilter:'blur(8px)', color:'#fff', padding:'6px 12px', borderRadius:999, fontSize:13, fontWeight:700, display:'flex', gap:4, alignItems:'center'}}>{'★'.repeat(hotel.stars)} <span style={{opacity:.75, fontSize:11, marginLeft:4}}>{hotel.cat}</span></div>}
            </div>
          </div>
          {[0,1,2,3].map(i => <div key={i} style={{background:`url(${hotel.gallery[i] || hotel.hero}) center/cover`}}/>)}
          <button style={{position:'absolute', bottom:32, right:48, padding:'8px 14px', background:'rgba(255,255,255,.95)', border:0, borderRadius:'var(--r-md)', fontSize:13, fontWeight:700, cursor:'pointer', boxShadow:'var(--s-sm)'}}>📷 Tüm fotoğraflar (24)</button>
        </div>
      </div>

      {/* Title + score */}
      <div style={{maxWidth:1440, margin:'0 auto', padding:'24px 32px 16px'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:20}}>
          <div>
            <h1 style={{fontFamily:'var(--font-display)', fontSize:42, fontWeight:800, letterSpacing:'-.02em', lineHeight:1.1}}>{hotel.title}</h1>
            <div style={{display:'flex', gap:18, marginTop:10, fontSize:14, color:'var(--color-ink-mid)', flexWrap:'wrap'}}>
              <span style={{display:'flex', alignItems:'center', gap:6}}><Icon name="pin" size={15}/> {hotel.address || hotel.destination}</span>
              <span>·</span>
              <span><b>Giriş</b> {hotel.checkIn} · <b>Çıkış</b> {hotel.checkOut}</span>
            </div>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <div style={{textAlign:'right'}}>
              <div style={{fontSize:13, color:'var(--color-ink-dim)'}}>Mükemmel</div>
              <div style={{fontSize:12, color:'var(--color-ink-low)'}}>{hotel.reviews} değerlendirme</div>
            </div>
            <div style={{background:'var(--color-brand-600)', color:'#fff', borderRadius:'var(--r-md)', padding:'10px 14px', fontWeight:800, fontSize:22, fontFamily:'var(--font-display)'}} className="tnum">{hotel.score}</div>
          </div>
        </div>
      </div>

      {/* Body grid */}
      <div style={{maxWidth:1440, margin:'0 auto', padding:'12px 32px 80px', display:'grid', gridTemplateColumns:'1fr 380px', gap:32}}>
        <div>
          {/* Tabs (anchor scroll) */}
          <div style={{position:'sticky', top:64, zIndex:5, background:'var(--color-surface)', borderBottom:'1px solid var(--color-line)', display:'flex', gap:4, padding:'12px 0', marginBottom:24}}>
            {[['rooms','Oda Tipleri & Fiyatlar'],['amenities','Olanaklar'],['policies','Politikalar'],['location','Konum'],['reviews','Yorumlar']].map(([k,l]) =>
              <button key={k} onClick={()=>scrollToSection(k)} style={{padding:'10px 18px', border:0, background: tab===k?'var(--color-brand-50)':'transparent', color: tab===k?'var(--color-brand-700)':'var(--color-ink-mid)', borderRadius:'var(--r-md)', fontSize:14, fontWeight:600, cursor:'pointer'}}>{l}</button>
            )}
          </div>

          <section ref={sectionRefs.rooms} style={{scrollMarginTop:140}}>
            <p style={{fontSize:15, color:'var(--color-ink-mid)', lineHeight:1.7, marginBottom:24}}>{hotel.desc}</p>
            {hotel.roomTypes.map(rt => {
              const plans = groupedByRoom[rt.id] || [];
              return (
                <div key={rt.id} className="card" style={{padding:0, marginBottom:24, overflow:'hidden'}}>
                  <div style={{display:'grid', gridTemplateColumns:'320px 1fr', gap:0}}>
                    <div style={{background:`url(${rt.img || hotel.hero}) center/cover`, minHeight:240}}/>
                    <div style={{padding:24}}>
                      <div style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:700, letterSpacing:'-.01em'}}>{rt.name}</div>
                      <div style={{display:'flex', gap:18, marginTop:8, fontSize:13, color:'var(--color-ink-dim)', flexWrap:'wrap'}}>
                        <span>📐 {rt.size}m²</span>
                        <span>🛏️ {rt.beds}</span>
                        <span>👥 {rt.maxGuests} misafir</span>
                        <span>🪟 {rt.view} manzara</span>
                      </div>
                      {rt.features?.length > 0 && <div style={{display:'flex', flexWrap:'wrap', gap:6, marginTop:14}}>
                        {rt.features.map(f => <span key={f} style={{fontSize:12, padding:'4px 10px', background:'var(--color-surface-muted)', borderRadius:6, color:'var(--color-ink-mid)'}}>{f}</span>)}
                      </div>}

                      {/* Rate plans */}
                      <div style={{marginTop:18, display:'flex', flexDirection:'column', gap:8}}>
                        {plans.length === 0 && <div style={{fontSize:13, color:'var(--color-ink-low)', padding:'10px 0'}}>Seçilen tarihler için müsaitlik yok.</div>}
                        {plans.map(p =>
                          <div key={p.id} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:14, alignItems:'center', padding:'14px 16px', border:'1px solid var(--color-line)', borderRadius:'var(--r-md)', background:'var(--color-surface)'}}>
                            <div>
                              <div style={{display:'flex', gap:8, alignItems:'center', flexWrap:'wrap'}}>
                                <span style={{fontSize:14, fontWeight:700}}>{HOTEL_DATA.mealPlanLabel(p.mealPlan)}</span>
                                {p.refundable
                                  ? <Pill tone="success">✓ Ücretsiz iptal</Pill>
                                  : <Pill tone="neutral">İade yok</Pill>}
                              </div>
                              <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4}}>{p.code} · {nights} gece × {rooms} oda</div>
                            </div>
                            <div style={{textAlign:'right'}}>
                              <div className="tnum" style={{fontSize:12, color:'var(--color-ink-low)', textDecoration:'line-through'}}>{Math.round(p.total*1.12).toLocaleString('tr')} ₺</div>
                              <div className="tnum" style={{fontSize:22, fontWeight:800, color:'var(--color-brand-600)', fontFamily:'var(--font-display)'}}>{p.total.toLocaleString('tr')} ₺</div>
                              <div className="tnum" style={{fontSize:11, color:'var(--color-ink-low)'}}>{Math.round(p.avgNight).toLocaleString('tr')} ₺/gece</div>
                              <Btn variant="primary" size="sm" style={{marginTop:8}} onClick={()=>onNav('hotel-booking',{hotelId:hotel.id, ratePlanId:p.id, checkIn, checkOut, rooms, adults, children})}>Bu fiyatla rezerve et</Btn>
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </section>

          <section ref={sectionRefs.amenities} style={{scrollMarginTop:140, marginTop:32}}>
            <div className="card" style={{padding:32}}>
              <h2 style={{fontSize:22, fontWeight:700, marginBottom:18}}>Otelde sunulanlar</h2>
              <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18}}>
                {hotel.amenities.map(([ic,l]) =>
                  <div key={l} style={{display:'flex', gap:12, alignItems:'center', fontSize:14}}>
                    <Icon name={ic} size={18}/> <span>{l}</span>
                  </div>
                )}
              </div>
            </div>
          </section>

          <section ref={sectionRefs.policies} style={{scrollMarginTop:140, marginTop:32}}>
            <h2 style={{fontSize:22, fontWeight:700, marginBottom:14}}>Politikalar</h2>
            <div style={{display:'flex', flexDirection:'column', gap:16}}>
              <div className="card" style={{padding:24}}>
                <h3 style={{fontSize:17, fontWeight:700, marginBottom:14}}>Giriş & Çıkış</h3>
                <div style={{fontSize:14, color:'var(--color-ink-mid)', lineHeight:1.7}}>
                  <div><b>Giriş saati:</b> {hotel.checkIn}'den itibaren</div>
                  <div><b>Çıkış saati:</b> {hotel.checkOut}'a kadar</div>
                  <div style={{marginTop:8}}>Erken giriş ve geç çıkış müsaitliğe göre ücretli olarak sağlanabilir.</div>
                </div>
              </div>
              <div className="card" style={{padding:24}}>
                <h3 style={{fontSize:17, fontWeight:700, marginBottom:14}}>İptal Politikası (Esnek · 48 saat)</h3>
                <div style={{display:'flex', flexDirection:'column', gap:8}}>
                  {HOTEL_DATA.cancellationPolicies[0].rules.map(r =>
                    <div key={r.label} style={{display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:'1px dashed var(--color-line)', fontSize:14}}>
                      <span>{r.label}</span>
                      <span style={{fontWeight:700, color: r.refund>=100?'var(--color-success-deep)': r.refund>=50?'var(--color-warning-deep)':'var(--color-danger-deep)'}}>%{r.refund} iade</span>
                    </div>
                  )}
                </div>
              </div>
              <div className="card" style={{padding:24}}>
                <h3 style={{fontSize:17, fontWeight:700, marginBottom:10}}>Çocuk & Ek yatak</h3>
                <p style={{fontSize:14, color:'var(--color-ink-mid)', lineHeight:1.7}}>0-6 yaş ücretsiz konaklayabilir. 7-12 yaş için %50 indirimli ek yatak. KVKK gereği TC Kimlik / Pasaport bilgisi giriş anında alınır.</p>
              </div>
            </div>
          </section>

          <section ref={sectionRefs.location} style={{scrollMarginTop:140, marginTop:32}}>
            <h2 style={{fontSize:22, fontWeight:700, marginBottom:14}}>Konum</h2>
            <div className="card" style={{padding:0, overflow:'hidden'}}>
              <div style={{aspectRatio:'16/9', 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)'}}>📍 {hotel.address || hotel.destination}</div>
                </div>
              </div>
              <div style={{padding:24}}>
                <h3 style={{fontSize:17, fontWeight:700, marginBottom:12}}>Çevre</h3>
                <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:10, fontSize:14}}>
                  {[['Yalıkavak Marina','200m'],['Yalıkavak Plajı','350m'],['Bodrum Merkez','17km'],['Milas Havalimanı','45km']].map(([p,d]) =>
                    <div key={p} style={{display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:'1px dashed var(--color-line)'}}><span>{p}</span><span className="tnum" style={{color:'var(--color-ink-dim)'}}>{d}</span></div>
                  )}
                </div>
              </div>
            </div>
          </section>

          <section ref={sectionRefs.reviews} style={{scrollMarginTop:140, marginTop:32}}>
            <h2 style={{fontSize:22, fontWeight:700, marginBottom:14}}>Yorumlar</h2>
            <div className="card" style={{padding:28}}>
              <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:32, alignItems:'center', paddingBottom:24, borderBottom:'1px solid var(--color-line)'}}>
                <div style={{textAlign:'center'}}>
                  <div style={{fontFamily:'var(--font-display)', fontSize:64, fontWeight:800, color:'var(--color-brand-600)'}} className="tnum">{hotel.score}</div>
                  <div style={{fontSize:14, fontWeight:700}}>Mükemmel</div>
                  <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4}}>{hotel.reviews} yorum</div>
                </div>
                <div>
                  {[['Konum',9.6],['Temizlik',9.4],['Hizmet',9.3],['Konfor',9.1],['Fiyat / Performans',8.7]].map(([k,v]) =>
                    <div key={k} style={{display:'grid', gridTemplateColumns:'140px 1fr 40px', gap:12, alignItems:'center', padding:'6px 0'}}>
                      <span style={{fontSize:13}}>{k}</span>
                      <div style={{height:6, background:'var(--color-surface-muted)', borderRadius:99, overflow:'hidden'}}><div style={{width:`${v*10}%`, height:'100%', background:'var(--color-brand-500)'}}/></div>
                      <span className="tnum" style={{fontSize:13, fontWeight:700, textAlign:'right'}}>{v}</span>
                    </div>
                  )}
                </div>
              </div>
              <div style={{marginTop:20, display:'flex', flexDirection:'column', gap:18}}>
                {[
                  ['Mehmet A.','5 gün önce','Çift, Türkiye',9.8,'Manzara, kahvaltı ve personel ilgisi muhteşemdi. Marina yürüyüş mesafesinde, konum harika.'],
                  ['Sofia P.','2 hafta önce','Aile, İtalya',9.4,'Çocuk kulübü çok iyi organize edilmiş. Suite çok geniş ve konforluydu.'],
                  ['Can E.','3 hafta önce','İş, Türkiye',9.0,'Sessiz çalışma alanı ve hızlı Wi-Fi için ideal. Spa ekstra ücretli ama değer.'],
                ].map(([n,d,t,s,r]) =>
                  <div key={n} style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:14, padding:'14px 0', borderBottom:'1px solid var(--color-line-soft)'}}>
                    <Avatar name={n} size={44}/>
                    <div>
                      <div style={{display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:8}}>
                        <div><b>{n}</b> <span style={{fontSize:12, color:'var(--color-ink-dim)'}}>· {t} · {d}</span></div>
                        <span style={{padding:'2px 8px', background:'var(--color-brand-50)', color:'var(--color-brand-700)', borderRadius:6, fontSize:13, fontWeight:700}} className="tnum">{s}</span>
                      </div>
                      <p style={{fontSize:14, lineHeight:1.6, marginTop:8, color:'var(--color-ink-mid)'}}>{r}</p>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </section>
        </div>

        {/* Right rail: booking widget */}
        <aside>
          <div className="card" style={{padding:22, position:'sticky', top:96}}>
            <div style={{fontSize:13, color:'var(--color-ink-dim)'}}>Başlangıç fiyatı</div>
            <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:4}}>
              <span className="tnum" style={{fontSize:32, fontWeight:800, fontFamily:'var(--font-display)'}}>{hotel.priceFrom.toLocaleString('tr')} ₺</span>
              <span style={{fontSize:13, color:'var(--color-ink-dim)'}}>/ gece</span>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:18}}>
              <Field label="Giriş"><Input type="date" value={checkIn} onChange={e=>setCheckIn(e.target.value)}/></Field>
              <Field label="Çıkış"><Input type="date" value={checkOut} onChange={e=>setCheckOut(e.target.value)}/></Field>
            </div>
            <Field label="Misafir & Oda" style={{marginTop:12}}>
              <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:6}}>
                <Select value={String(adults)} onChange={v=>setAdults(+v)} options={[1,2,3,4].map(n=>({value:String(n), label:`${n} Yetişkin`}))}/>
                <Select value={String(children)} onChange={v=>setChildren(+v)} options={[0,1,2,3].map(n=>({value:String(n), label:`${n} Çocuk`}))}/>
                <Select value={String(rooms)} onChange={v=>setRooms(+v)} options={[1,2,3].map(n=>({value:String(n), label:`${n} Oda`}))}/>
              </div>
            </Field>

            <div style={{marginTop:14, padding:14, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)', fontSize:13, color:'var(--color-ink-mid)', lineHeight:1.6}}>
              <div style={{display:'flex', justifyContent:'space-between'}}><span>{nights} gece × {rooms} oda</span><span className="tnum">{applicable[0]?.total.toLocaleString('tr') || '—'} ₺</span></div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:4}}><span>Vergi & hizmet</span><span className="tnum">Dahil</span></div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:8, paddingTop:8, borderTop:'1px solid var(--color-line)', fontWeight:700, fontSize:14, color:'var(--color-ink)'}}>
                <span>Toplam (en uygun tarife)</span><span className="tnum" style={{color:'var(--color-brand-600)'}}>{applicable[0]?.total.toLocaleString('tr') || '—'} ₺</span>
              </div>
            </div>

            <Btn variant="primary" size="lg" full style={{marginTop:14}} onClick={()=>{ setTab('rooms'); window.scrollTo({top:560, behavior:'smooth'}); }}>Oda Tiplerine Git ↓</Btn>
            <div style={{marginTop:12, display:'flex', justifyContent:'center', gap:8, fontSize:11, color:'var(--color-ink-low)'}}>
              <span>🔒 Güvenli ödeme</span><span>·</span><span>iyzico</span>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
};

// ─── PUBLIC: Hotel Booking Flow (6 step) ───────────────────────────
const HotelBookingPage = ({ params, onNav }) => {
  const hotel = HOTEL_DATA.hotels.find(h => h.id === (params?.hotelId || 901)) || HOTEL_DATA.hotels[0];
  const initialPlan = HOTEL_DATA.ratePlans.find(rp => rp.id === params?.ratePlanId) || HOTEL_DATA.ratePlans.find(rp => rp.hotelId === hotel.id);
  const [step, setStep] = React.useState(0);
  const [state, setState] = React.useState({
    checkIn: params?.checkIn || HOTEL_DATA.fmt(HOTEL_DATA.addDays(HOTEL_DATA.today, 7)),
    checkOut: params?.checkOut || HOTEL_DATA.fmt(HOTEL_DATA.addDays(HOTEL_DATA.today, 10)),
    adults: params?.adults || 2,
    children: params?.children || 0,
    rooms: params?.rooms || 1,
    ratePlanId: initialPlan?.id,
    addOnIds: [],
    guests: [],
    promoCode: '',
    promoApplied: null,
    contactEmail: '',
    contactPhone: '',
    specialRequests: '',
    paymentMethod: 'card',
    kvkkConsent: false,
  });
  const update = (patch) => setState(s => ({...s, ...patch}));

  const ratePlan = HOTEL_DATA.ratePlans.find(rp => rp.id === state.ratePlanId);
  const roomType = hotel.roomTypes.find(rt => rt.id === ratePlan?.roomTypeId);
  const nights = Math.max(1, (new Date(state.checkOut) - new Date(state.checkIn)) / 86400000);

  const cal = HOTEL_DATA.calendar[state.ratePlanId] || [];
  const range = cal.filter(c => c.date >= state.checkIn && c.date < state.checkOut);
  const subtotal = range.reduce((s,c) => s + c.price, 0) * state.rooms;

  const addOnTotal = HOTEL_DATA.addOns.filter(a => state.addOnIds.includes(a.id)).reduce((s,a) => {
    let t = a.price; if (a.perNight) t *= nights; if (a.perPerson) t *= state.adults; return s + t;
  }, 0);

  const discount = state.promoApplied
    ? (state.promoApplied.type === 'Percentage' ? Math.round(subtotal * state.promoApplied.value/100) : state.promoApplied.value)
    : 0;

  const grandTotal = subtotal + addOnTotal - discount;
  const policy = HOTEL_DATA.cancellationPolicies.find(p => p.id === ratePlan?.policyId);

  const steps = ['Tarih & Misafir','Oda & Tarife','Ek Hizmetler','Misafir Bilgileri','Promosyon','Ödeme'];

  const validatePromo = () => {
    const code = state.promoCode.trim().toUpperCase();
    const found = HOTEL_DATA.promoCodes.find(p => p.code === code && p.active);
    if (!found) { update({promoApplied:{error:'Geçersiz kod'}}); return; }
    if (found.minAmount > subtotal) { update({promoApplied:{error:`Min. ${found.minAmount.toLocaleString('tr')} ₺ harcama gerekli`}}); return; }
    update({promoApplied: found});
  };

  const next = () => setStep(s => Math.min(steps.length-1, s+1));
  const prev = () => setStep(s => Math.max(0, s-1));

  return (
    <div style={{maxWidth:1280, margin:'0 auto', padding:'32px 32px 80px'}}>
      <Breadcrumbs items={[
        {label:'Ana Sayfa', onClick:()=>onNav('home')},
        {label:hotel.title, onClick:()=>onNav('hotel-detail',{slug:hotel.slug})},
        {label:'Rezervasyon'}
      ]}/>

      {/* Stepper */}
      <div style={{display:'flex', gap:0, margin:'24px 0 32px', overflowX:'auto'}}>
        {steps.map((s,i) =>
          <div key={s} style={{flex:1, minWidth:130, display:'flex', alignItems:'center', gap:10, opacity: i>step ? .5 : 1}}>
            <div style={{width:32, height:32, borderRadius:'50%', display:'grid', placeItems:'center', fontSize:13, fontWeight:700, background: i<step ? 'var(--color-brand-600)' : i===step ? 'var(--color-brand-500)' : 'var(--color-surface-muted)', color: i<=step ? '#fff' : 'var(--color-ink-low)', flexShrink:0}}>
              {i<step ? '✓' : i+1}
            </div>
            <div style={{fontSize:12, fontWeight: i===step?700:500, color: i===step?'var(--color-ink)':'var(--color-ink-dim)'}}>{s}</div>
            {i<steps.length-1 && <div style={{flex:1, height:2, background: i<step ? 'var(--color-brand-500)' : 'var(--color-line)', minWidth:8}}/>}
          </div>
        )}
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 360px', gap:28}}>
        <div className="card" style={{padding:32, minHeight:480}}>
          {step === 0 && (
            <div>
              <h2 style={{fontSize:24, fontWeight:700, marginBottom:6}}>Tarih & Misafir</h2>
              <p style={{fontSize:14, color:'var(--color-ink-dim)', marginBottom:24}}>Konaklama tarihinizi ve misafir sayısını seçin.</p>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                <Field label="Giriş tarihi"><Input type="date" value={state.checkIn} onChange={e=>update({checkIn:e.target.value})}/></Field>
                <Field label="Çıkış tarihi"><Input type="date" value={state.checkOut} onChange={e=>update({checkOut:e.target.value})}/></Field>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14, marginTop:14}}>
                <Field label="Yetişkin"><Select value={String(state.adults)} onChange={v=>update({adults:+v})} options={[1,2,3,4,5,6].map(n=>({value:String(n), label:`${n} kişi`}))}/></Field>
                <Field label="Çocuk (0-12)"><Select value={String(state.children)} onChange={v=>update({children:+v})} options={[0,1,2,3,4].map(n=>({value:String(n), label:`${n} kişi`}))}/></Field>
                <Field label="Oda sayısı"><Select value={String(state.rooms)} onChange={v=>update({rooms:+v})} options={[1,2,3].map(n=>({value:String(n), label:`${n} oda`}))}/></Field>
              </div>
              <div style={{marginTop:18, padding:14, background:'var(--color-info-50)', border:'1px solid var(--color-info)', borderRadius:'var(--r-md)', fontSize:13, color:'var(--color-info-deep)', display:'flex', gap:10}}>
                <span>ℹ️</span><span>Yüksek sezonda ({nights >= 3 ? '3+ gece':'minimum konaklama 3 gece'}) min. konaklama uygulanır.</span>
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <h2 style={{fontSize:24, fontWeight:700, marginBottom:6}}>Oda Tipi & Tarife</h2>
              <p style={{fontSize:14, color:'var(--color-ink-dim)', marginBottom:24}}>Müsait tarifelerden birini seçin.</p>
              <div style={{display:'flex', flexDirection:'column', gap:12}}>
                {HOTEL_DATA.ratePlans.filter(rp => rp.hotelId === hotel.id).map(rp => {
                  const rt = hotel.roomTypes.find(r => r.id === rp.roomTypeId);
                  const rcal = HOTEL_DATA.calendar[rp.id]?.filter(c => c.date >= state.checkIn && c.date < state.checkOut) || [];
                  const rtotal = rcal.reduce((s,c) => s + c.price, 0) * state.rooms;
                  const sel = state.ratePlanId === rp.id;
                  return (
                    <div key={rp.id} onClick={()=>update({ratePlanId:rp.id})} style={{display:'grid', gridTemplateColumns:'auto 1fr auto', gap:16, padding:16, border:`2px solid ${sel?'var(--color-brand-500)':'var(--color-line)'}`, borderRadius:'var(--r-md)', cursor:'pointer', background: sel?'var(--color-brand-50)':'var(--color-surface)'}}>
                      <div style={{width:20, height:20, borderRadius:'50%', border:`2px solid ${sel?'var(--color-brand-600)':'var(--color-line-strong)'}`, display:'grid', placeItems:'center', marginTop:4}}>
                        {sel && <div style={{width:10, height:10, borderRadius:'50%', background:'var(--color-brand-600)'}}/>}
                      </div>
                      <div>
                        <div style={{fontSize:15, fontWeight:700}}>{rt?.name}</div>
                        <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:3}}>{HOTEL_DATA.mealPlanLabel(rp.mealPlan)} · {rp.refundable ? 'Ücretsiz iptal' : 'İade yok'} · {rp.code}</div>
                        <div style={{fontSize:11, color:'var(--color-ink-low)', marginTop:6}}>{rt?.size}m² · {rt?.beds} · {rt?.maxGuests} misafir</div>
                      </div>
                      <div style={{textAlign:'right'}}>
                        <div className="tnum" style={{fontSize:20, fontWeight:800, fontFamily:'var(--font-display)', color: sel?'var(--color-brand-700)':'var(--color-ink)'}}>{rtotal.toLocaleString('tr')} ₺</div>
                        <div className="tnum" style={{fontSize:11, color:'var(--color-ink-dim)'}}>{nights} gece × {state.rooms} oda</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <h2 style={{fontSize:24, fontWeight:700, marginBottom:6}}>Ek Hizmetler</h2>
              <p style={{fontSize:14, color:'var(--color-ink-dim)', marginBottom:24}}>Konaklamanızı zenginleştirin (opsiyonel).</p>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                {HOTEL_DATA.addOns.filter(a => a.hotelId === hotel.id).map(a => {
                  const sel = state.addOnIds.includes(a.id);
                  let unitText = `${a.price.toLocaleString('tr')} ₺`;
                  if (a.price === 0) unitText = 'Ücretsiz';
                  else if (a.perNight && a.perPerson) unitText += ' / gece / kişi';
                  else if (a.perNight) unitText += ' / gece';
                  else if (a.perPerson) unitText += ' / kişi';
                  return (
                    <label key={a.id} style={{display:'grid', gridTemplateColumns:'40px 1fr auto', gap:12, padding:14, border:`2px solid ${sel?'var(--color-brand-500)':'var(--color-line)'}`, borderRadius:'var(--r-md)', cursor:'pointer', background: sel?'var(--color-brand-50)':'var(--color-surface)', alignItems:'center'}}>
                      <input type="checkbox" checked={sel} onChange={()=>update({addOnIds: sel ? state.addOnIds.filter(x=>x!==a.id) : [...state.addOnIds, a.id]})} style={{width:18, height:18}}/>
                      <div>
                        <div style={{fontSize:14, fontWeight:600}}>{a.name}</div>
                        <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:2}}>{unitText}</div>
                      </div>
                      <Icon name={a.icon} size={20}/>
                    </label>
                  );
                })}
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <h2 style={{fontSize:24, fontWeight:700, marginBottom:6}}>Misafir Bilgileri</h2>
              <p style={{fontSize:14, color:'var(--color-ink-dim)', marginBottom:20}}>Konaklama yasası gereği TC Kimlik / Pasaport bilgisi zorunludur.</p>
              <div style={{display:'flex', flexDirection:'column', gap:18}}>
                {Array.from({length: state.adults}).map((_,i) =>
                  <div key={i} className="card" style={{padding:18, background:'var(--color-surface-muted)'}}>
                    <div style={{fontSize:13, fontWeight:700, marginBottom:10}}>Misafir {i+1} {i===0 && <span style={{color:'var(--color-brand-600)'}}>· Ana misafir</span>}</div>
                    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
                      <Field label="Ad" required><Input placeholder="Ad"/></Field>
                      <Field label="Soyad" required><Input placeholder="Soyad"/></Field>
                      <Field label="Doğum tarihi" required><Input type="date"/></Field>
                      <Field label="Uyruk" required><Select value="TR" onChange={()=>{}} options={[{value:'TR',label:'🇹🇷 Türkiye'},{value:'US',label:'🇺🇸 ABD'},{value:'DE',label:'🇩🇪 Almanya'},{value:'GB',label:'🇬🇧 İngiltere'}]}/></Field>
                      <Field label="TC Kimlik / Pasaport No" required style={{gridColumn:'1 / -1'}}><Input placeholder="11 haneli TC veya pasaport no"/></Field>
                    </div>
                  </div>
                )}
                <Field label="Özel istekler (opsiyonel)"><TextArea rows={3} placeholder="Erken giriş, üst kat, vejetaryen kahvaltı..." value={state.specialRequests} onChange={e=>update({specialRequests:e.target.value})}/></Field>
              </div>
            </div>
          )}

          {step === 4 && (
            <div>
              <h2 style={{fontSize:24, fontWeight:700, marginBottom:6}}>Promosyon Kodu</h2>
              <p style={{fontSize:14, color:'var(--color-ink-dim)', marginBottom:24}}>Bir kupon kodunuz varsa girin (opsiyonel).</p>
              <div style={{display:'flex', gap:10, marginBottom:14}}>
                <Input placeholder="Örn: HOTEL2026" value={state.promoCode} onChange={e=>update({promoCode:e.target.value, promoApplied:null})} style={{textTransform:'uppercase', flex:1}}/>
                <Btn variant="secondary" onClick={validatePromo}>Uygula</Btn>
              </div>
              {state.promoApplied?.error && <div style={{padding:12, background:'var(--color-danger-50, #fef2f2)', color:'var(--color-danger-deep)', borderRadius:'var(--r-md)', fontSize:13}}>{state.promoApplied.error}</div>}
              {state.promoApplied && !state.promoApplied.error && (
                <div style={{padding:14, background:'var(--color-success-50, #ecfdf5)', border:'1px solid var(--color-success-deep)', borderRadius:'var(--r-md)', fontSize:13, display:'flex', justifyContent:'space-between'}}>
                  <span>✓ <b>{state.promoApplied.code}</b> · {state.promoApplied.type === 'Percentage' ? `%${state.promoApplied.value} indirim` : `${state.promoApplied.value} ₺ indirim`}</span>
                  <span className="tnum" style={{fontWeight:700, color:'var(--color-success-deep)'}}>−{discount.toLocaleString('tr')} ₺</span>
                </div>
              )}
              <div style={{marginTop:24, padding:16, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)'}}>
                <div style={{fontSize:13, fontWeight:700, marginBottom:8}}>Aktif kampanyalar</div>
                {HOTEL_DATA.promoCodes.filter(p => p.active).slice(0,3).map(p =>
                  <div key={p.code} style={{display:'flex', justifyContent:'space-between', padding:'6px 0', fontSize:13}}>
                    <span><span className="mono" style={{padding:'2px 8px', background:'var(--color-brand-50)', color:'var(--color-brand-700)', borderRadius:4, fontWeight:700, marginRight:8}}>{p.code}</span>{p.type === 'Percentage' ? `%${p.value}` : `${p.value} ₺`} · {p.scope}</span>
                    <button onClick={()=>{update({promoCode:p.code}); setTimeout(validatePromo, 50);}} style={{border:0, background:'transparent', color:'var(--color-info-deep)', cursor:'pointer', fontSize:12}}>Uygula →</button>
                  </div>
                )}
              </div>
            </div>
          )}

          {step === 5 && (
            <div>
              <h2 style={{fontSize:24, fontWeight:700, marginBottom:6}}>Ödeme & Onay</h2>
              <p style={{fontSize:14, color:'var(--color-ink-dim)', marginBottom:24}}>Ödeme bilgilerinizi güvenli olarak girin.</p>
              <div style={{display:'flex', flexDirection:'column', gap:18}}>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
                  <Field label="E-posta" required><Input type="email" placeholder="ornek@mail.com" value={state.contactEmail} onChange={e=>update({contactEmail:e.target.value})}/></Field>
                  <Field label="Telefon" required><Input placeholder="+90 555 ..." value={state.contactPhone} onChange={e=>update({contactPhone:e.target.value})}/></Field>
                </div>
                <Segmented options={['Kredi Kartı','Havale','Vagoonya Cüzdan']} value="Kredi Kartı" onChange={()=>{}}/>
                <div style={{display:'grid', gap:10}}>
                  <Field label="Kart üzerindeki isim"><Input placeholder="ADI SOYADI"/></Field>
                  <Field label="Kart numarası"><Input placeholder="1234 5678 9012 3456"/></Field>
                  <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10}}>
                    <Field label="AY"><Input placeholder="04"/></Field>
                    <Field label="YIL"><Input placeholder="29"/></Field>
                    <Field label="CVC"><Input placeholder="123"/></Field>
                  </div>
                </div>
                <label style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:13, color:'var(--color-ink-mid)', padding:14, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)'}}>
                  <input type="checkbox" checked={state.kvkkConsent} onChange={e=>update({kvkkConsent:e.target.checked})} style={{marginTop:2}}/>
                  <span>KVKK aydınlatma metnini okudum, kişisel verilerimin (kimlik bilgileri dahil) konaklama yasası gereği işlenmesine ve polis kayıt zorunluluğu kapsamında paylaşılmasına onay veriyorum.</span>
                </label>
              </div>
            </div>
          )}

          <div style={{display:'flex', justifyContent:'space-between', marginTop:32, paddingTop:24, borderTop:'1px solid var(--color-line)'}}>
            <Btn variant="ghost" onClick={prev} disabled={step===0}>← Geri</Btn>
            {step < steps.length-1
              ? <Btn variant="primary" onClick={next}>İleri →</Btn>
              : <Btn variant="primary" size="lg" disabled={!state.kvkkConsent} onClick={()=>onNav('account-bookings')}>{grandTotal.toLocaleString('tr')} ₺ — Rezervasyonu Onayla</Btn>}
          </div>
        </div>

        {/* Right rail summary */}
        <aside>
          <div className="card" style={{padding:18, position:'sticky', top:96}}>
            <div style={{display:'flex', gap:12, marginBottom:14}}>
              <div style={{width:72, height:72, background:`url(${hotel.hero}) center/cover`, borderRadius:'var(--r-md)', flexShrink:0}}/>
              <div>
                <div style={{fontSize:14, fontWeight:700, lineHeight:1.3}}>{hotel.title}</div>
                <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:3}}>{roomType?.name}</div>
                <div style={{fontSize:11, color:'var(--color-ink-low)', marginTop:3}}>{HOTEL_DATA.mealPlanLabel(ratePlan?.mealPlan)}</div>
              </div>
            </div>
            <div style={{padding:'12px 0', borderTop:'1px solid var(--color-line)', borderBottom:'1px solid var(--color-line)', fontSize:13}}>
              <div style={{display:'flex', justifyContent:'space-between'}}><span>Giriş</span><span className="tnum"><b>{state.checkIn}</b></span></div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:4}}><span>Çıkış</span><span className="tnum"><b>{state.checkOut}</b></span></div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:4}}><span>Konaklama</span><span><b>{nights} gece × {state.rooms} oda</b></span></div>
              <div style={{display:'flex', justifyContent:'space-between', marginTop:4}}><span>Misafir</span><span><b>{state.adults} yetişkin{state.children > 0 ? `, ${state.children} çocuk`:''}</b></span></div>
            </div>

            <div style={{padding:'12px 0', fontSize:13, display:'flex', flexDirection:'column', gap:6}}>
              <div style={{display:'flex', justifyContent:'space-between'}}><span>Oda ücreti</span><span className="tnum">{subtotal.toLocaleString('tr')} ₺</span></div>
              {addOnTotal > 0 && <div style={{display:'flex', justifyContent:'space-between'}}><span>Ek hizmetler</span><span className="tnum">{addOnTotal.toLocaleString('tr')} ₺</span></div>}
              {discount > 0 && <div style={{display:'flex', justifyContent:'space-between', color:'var(--color-success-deep)'}}><span>İndirim ({state.promoApplied?.code})</span><span className="tnum">−{discount.toLocaleString('tr')} ₺</span></div>}
              <div style={{display:'flex', justifyContent:'space-between', color:'var(--color-ink-low)', fontSize:11}}><span>Vergi & hizmet</span><span className="tnum">Dahil</span></div>
            </div>

            <div style={{padding:'14px 0 8px', borderTop:'1px solid var(--color-line)', display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <span style={{fontSize:13, fontWeight:600}}>Toplam</span>
              <span className="tnum" style={{fontSize:24, fontWeight:800, fontFamily:'var(--font-display)', color:'var(--color-brand-600)'}}>{grandTotal.toLocaleString('tr')} ₺</span>
            </div>

            {policy && (
              <div style={{marginTop:12, padding:10, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)', fontSize:11, color:'var(--color-ink-mid)'}}>
                <b>İptal politikası:</b> {policy.name}<br/>
                {policy.rules[0]?.label} · %{policy.rules[0]?.refund} iade
              </div>
            )}
          </div>
        </aside>
      </div>
    </div>
  );
};

// ─── SUPPLIER: Rate Plans list ─────────────────────────────────────
const SupplierRatePlans = ({ onNav }) => {
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:24}}>
        <div>
          <h3 style={{fontSize:24, fontWeight:700, marginBottom:4}}>Rate Planlar</h3>
          <p style={{fontSize:13, color:'var(--color-ink-dim)'}}>Otelinizin oda tipleri ve tarife planlarını yönetin.</p>
        </div>
        <Btn variant="primary" icon="plus" onClick={()=>onNav('supplier-rateplan-new')}>Yeni Rate Plan</Btn>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:24}}>
        {[['Aktif Planlar','6','3 oda tipinde'],['Bu hafta rezerv.','38','+12%'],['Ort. ADR','5.840 ₺','/gece'],['Doluluk','%72','sonraki 30 gün']].map(([l,v,d]) =>
          <div key={l} className="card" style={{padding:18}}>
            <div style={{fontSize:11, letterSpacing:'.1em', color:'var(--color-ink-low)', textTransform:'uppercase', fontWeight:700}}>{l}</div>
            <div style={{fontSize:24, fontWeight:800, marginTop:6}} className="tnum">{v}</div>
            <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4}}>{d}</div>
          </div>)}
      </div>

      <div className="card" style={{padding:0, overflow:'hidden'}}>
        <div style={{padding:'14px 20px', borderBottom:'1px solid var(--color-line)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12}}>
          <div style={{display:'flex', gap:8, alignItems:'center'}}>
            <Select value="all" onChange={()=>{}} options={[{value:'all',label:'Tüm oda tipleri'},{value:'1',label:'Standart'},{value:'2',label:'Deluxe Deniz'},{value:'3',label:'Suite Marina'}]}/>
            <Select value="all" onChange={()=>{}} options={[{value:'all',label:'Tüm meal plan'},{value:'BB',label:'Kahvaltı'},{value:'HB',label:'Yarım'},{value:'AI',label:'Her şey'}]}/>
          </div>
          <div style={{display:'flex', gap:8}}>
            <Btn variant="secondary" size="sm" icon="calendar-days" onClick={()=>onNav('supplier-rateplan-calendar')}>Takvim & Fiyat</Btn>
          </div>
        </div>
        <Table
          rows={HOTEL_DATA.ratePlans.filter(r=>r.hotelId===901)}
          columns={[
            {key:'code', label:'Kod', render:r=><span className="mono" style={{fontSize:12, fontWeight:700}}>{r.code}</span>},
            {key:'name', label:'Plan adı', render:r=><div><div style={{fontSize:13, fontWeight:600}}>{r.name}</div><div style={{fontSize:11, color:'var(--color-ink-dim)'}}>{HOTEL_DATA.hotels[0].roomTypes.find(rt=>rt.id===r.roomTypeId)?.name}</div></div>},
            {key:'meal', label:'Yemek', render:r=><Pill tone={r.mealPlan==='AllInclusive'?'success':'neutral'}>{HOTEL_DATA.mealPlanLabel(r.mealPlan)}</Pill>},
            {key:'refundable', label:'İade', render:r=>r.refundable ? <Pill tone="success">Esnek</Pill> : <Pill tone="warning">Yok</Pill>},
            {key:'price', label:'Baz fiyat', align:'right', render:r=><span className="tnum" style={{fontSize:14, fontWeight:700}}>{r.basePrice.toLocaleString('tr')} ₺</span>},
            {key:'active', label:'Durum', render:r=><Pill tone={r.active?'success':'neutral'}>{r.active?'Aktif':'Pasif'}</Pill>},
            {key:'actions', label:'', align:'right', render:r=>(
              <div style={{display:'flex', gap:6, justifyContent:'flex-end'}}>
                <button title="Takvim" onClick={()=>onNav('supplier-rateplan-calendar',{ratePlanId:r.id})} style={{padding:6, border:'1px solid var(--color-line)', background:'var(--color-surface)', borderRadius:6, cursor:'pointer'}}><Icon name="calendar-days" size={14}/></button>
                <button title="Düzenle" style={{padding:6, border:'1px solid var(--color-line)', background:'var(--color-surface)', borderRadius:6, cursor:'pointer'}}><Icon name="edit" size={14}/></button>
                <button title="Sil" style={{padding:6, border:'1px solid var(--color-line)', background:'var(--color-surface)', borderRadius:6, cursor:'pointer'}}><Icon name="trash" size={14}/></button>
              </div>
            )},
          ]}
        />
      </div>
    </div>
  );
};

// ─── SUPPLIER: Rate Plan Calendar (drag-select bulk edit) ──────────
const SupplierRatePlanCalendar = ({ params, onNav }) => {
  const [activeRatePlan, setActiveRatePlan] = React.useState(params?.ratePlanId || HOTEL_DATA.ratePlans[0].id);
  const [selStart, setSelStart] = React.useState(null);
  const [selEnd, setSelEnd] = React.useState(null);
  const [dragging, setDragging] = React.useState(false);
  const [bulkOpen, setBulkOpen] = React.useState(false);
  const [bulkValues, setBulkValues] = React.useState({price:'', minStay:'', stopSell:false, closedToArrival:false});

  const ratePlan = HOTEL_DATA.ratePlans.find(r => r.id === activeRatePlan);
  const cal = HOTEL_DATA.calendar[activeRatePlan] || [];

  // select range helpers
  const inRange = (i) => {
    if (selStart === null) return false;
    const a = Math.min(selStart, selEnd ?? selStart);
    const b = Math.max(selStart, selEnd ?? selStart);
    return i >= a && i <= b;
  };

  const onCellMouseDown = (i) => { setDragging(true); setSelStart(i); setSelEnd(i); };
  const onCellMouseEnter = (i) => { if (dragging) setSelEnd(i); };
  const onMouseUp = () => setDragging(false);

  React.useEffect(() => {
    window.addEventListener('mouseup', onMouseUp);
    return () => window.removeEventListener('mouseup', onMouseUp);
  }, []);

  const selectedCount = selStart !== null ? Math.abs((selEnd ?? selStart) - selStart) + 1 : 0;

  const applyBulk = () => {
    // mock — show toast
    alert(`Toplu güncelleme: ${selectedCount} gün · Fiyat: ${bulkValues.price || '—'} · MinStay: ${bulkValues.minStay || '—'} · StopSell: ${bulkValues.stopSell}`);
    setBulkOpen(false);
    setSelStart(null); setSelEnd(null);
  };

  return (
    <div onMouseUp={onMouseUp}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:20, flexWrap:'wrap', gap:12}}>
        <div>
          <h3 style={{fontSize:24, fontWeight:700, marginBottom:4}}>Takvim & Fiyat Yönetimi</h3>
          <p style={{fontSize:13, color:'var(--color-ink-dim)'}}>Bir aralık seçmek için tarih hücrelerine tıklayıp sürükleyin · Toplu güncelleme açılır</p>
        </div>
        <Btn variant="secondary" onClick={()=>onNav('supplier-rateplans')}>← Rate Planlara dön</Btn>
      </div>

      <div className="card" style={{padding:18, marginBottom:16, display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:12, alignItems:'center'}}>
        <div style={{display:'flex', gap:10, alignItems:'center', flexWrap:'wrap'}}>
          <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', letterSpacing:'.1em', textTransform:'uppercase'}}>Rate Plan</div>
          <Select value={String(activeRatePlan)} onChange={v=>setActiveRatePlan(+v)}
            options={HOTEL_DATA.ratePlans.filter(r=>r.hotelId===901).map(r => ({value:String(r.id), label: r.code+' · '+HOTEL_DATA.mealPlanLabel(r.mealPlan)}))}/>
          <Pill tone="neutral">{HOTEL_DATA.hotels[0].roomTypes.find(rt=>rt.id===ratePlan?.roomTypeId)?.name}</Pill>
        </div>
        <div style={{display:'flex', gap:8}}>
          {selectedCount > 0
            ? <><span style={{fontSize:12, color:'var(--color-ink-mid)', alignSelf:'center'}}>{selectedCount} gün seçili</span><Btn variant="primary" size="sm" icon="edit" onClick={()=>setBulkOpen(true)}>Toplu Düzenle</Btn><Btn variant="ghost" size="sm" onClick={()=>{setSelStart(null);setSelEnd(null);}}>Temizle</Btn></>
            : <span style={{fontSize:12, color:'var(--color-ink-low)', alignSelf:'center'}}>Hücreleri sürükleyerek aralık seçin</span>}
        </div>
      </div>

      {/* Legend */}
      <div style={{display:'flex', gap:18, marginBottom:14, fontSize:11, color:'var(--color-ink-dim)', flexWrap:'wrap'}}>
        <span style={{display:'flex', gap:6, alignItems:'center'}}><div style={{width:14, height:14, background:'var(--color-surface-raised)', border:'1px solid var(--color-line)', borderRadius:3}}/>Müsait</span>
        <span style={{display:'flex', gap:6, alignItems:'center'}}><div style={{width:14, height:14, background:'var(--color-warning-50, #fef3c7)', border:'1px solid var(--color-warning-deep)', borderRadius:3}}/>Min. konaklama</span>
        <span style={{display:'flex', gap:6, alignItems:'center'}}><div style={{width:14, height:14, background:'var(--color-danger-50, #fef2f2)', border:'1px solid var(--color-danger-deep)', borderRadius:3}}/>Stop-sell</span>
        <span style={{display:'flex', gap:6, alignItems:'center'}}><div style={{width:14, height:14, background:'var(--color-info-50, #eff6ff)', border:'1px solid var(--color-info-deep)', borderRadius:3}}/>Girişe kapalı</span>
        <span style={{display:'flex', gap:6, alignItems:'center'}}><div style={{width:14, height:14, background:'var(--color-brand-200)', border:'2px solid var(--color-brand-600)', borderRadius:3}}/>Seçili</span>
      </div>

      {/* Grid: 7 columns weekly */}
      <div className="card" style={{padding:18, userSelect:'none'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:6, marginBottom:8}}>
          {['Pzt','Sal','Çar','Per','Cum','Cmt','Pzr'].map(d => <div key={d} style={{fontSize:11, fontWeight:700, color:'var(--color-ink-dim)', textAlign:'center', padding:'4px 0'}}>{d}</div>)}
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:6}}>
          {/* leading blanks for first day-of-week */}
          {Array.from({length: (cal[0]?.dateObj.getDay() || 7) - 1}).map((_,i) => <div key={'b'+i}/>)}
          {cal.map((c,i) => {
            const sel = inRange(i);
            const isWeekend = c.dateObj.getDay()===0 || c.dateObj.getDay()===6;
            let bg = 'var(--color-surface-raised)';
            let bd = 'var(--color-line)';
            if (c.stopSell) { bg = 'var(--color-danger-50, #fef2f2)'; bd = 'var(--color-danger-deep)'; }
            else if (c.closedToArrival) { bg = 'var(--color-info-50, #eff6ff)'; bd = 'var(--color-info-deep)'; }
            else if (c.minStay > 1) { bg = 'var(--color-warning-50, #fef3c7)'; bd = 'var(--color-warning-deep)'; }
            if (sel) { bg = 'var(--color-brand-200)'; bd = 'var(--color-brand-600)'; }

            return (
              <div key={i}
                onMouseDown={()=>onCellMouseDown(i)}
                onMouseEnter={()=>onCellMouseEnter(i)}
                style={{padding:8, background:bg, border:`${sel?2:1}px solid ${bd}`, borderRadius:6, cursor:'pointer', minHeight:74, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
                  <span style={{fontSize:14, fontWeight:700, color: isWeekend ? 'var(--color-brand-700)':'var(--color-ink)'}}>{c.dateObj.getDate()}</span>
                  <span style={{fontSize:9, color:'var(--color-ink-low)', textAlign:'right'}}>{c.dateObj.toLocaleDateString('tr-TR',{month:'short'})}</span>
                </div>
                <div>
                  <div className="tnum" style={{fontSize:13, fontWeight:700, color: c.stopSell?'var(--color-danger-deep)':'var(--color-ink)'}}>{c.stopSell ? '✕' : c.price.toLocaleString('tr')+' ₺'}</div>
                  <div style={{fontSize:9, color:'var(--color-ink-low)', display:'flex', justifyContent:'space-between', marginTop:2}}>
                    <span>{c.availableRooms}/{c.totalRooms}</span>
                    {c.minStay > 1 && <span style={{color:'var(--color-warning-deep)'}}>min{c.minStay}</span>}
                    {c.closedToArrival && <span style={{color:'var(--color-info-deep)'}}>CTA</span>}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <Modal open={bulkOpen} onClose={()=>setBulkOpen(false)} title={`${selectedCount} gün için toplu güncelleme`}
        footer={<><Btn variant="ghost" onClick={()=>setBulkOpen(false)}>Vazgeç</Btn><Btn variant="primary" onClick={applyBulk}>Uygula</Btn></>}>
        <div style={{display:'grid', gap:14}}>
          <Field label="Yeni fiyat (₺)"><Input type="number" placeholder="Boş bırakılırsa değişmez" value={bulkValues.price} onChange={e=>setBulkValues({...bulkValues, price:e.target.value})}/></Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <Field label="Min. konaklama (gece)"><Input type="number" placeholder="—" value={bulkValues.minStay} onChange={e=>setBulkValues({...bulkValues, minStay:e.target.value})}/></Field>
            <Field label="Max. konaklama (gece)"><Input type="number" placeholder="—"/></Field>
          </div>
          <label style={{display:'flex', gap:8, alignItems:'center', fontSize:13}}>
            <input type="checkbox" checked={bulkValues.stopSell} onChange={e=>setBulkValues({...bulkValues, stopSell:e.target.checked})}/>
            <span>Satışı durdur (Stop-sell) — bu günlerde rezervasyon alınamaz</span>
          </label>
          <label style={{display:'flex', gap:8, alignItems:'center', fontSize:13}}>
            <input type="checkbox" checked={bulkValues.closedToArrival} onChange={e=>setBulkValues({...bulkValues, closedToArrival:e.target.checked})}/>
            <span>Girişe kapalı (CTA) — bu günde check-in alınamaz</span>
          </label>
          <label style={{display:'flex', gap:8, alignItems:'center', fontSize:13}}>
            <input type="checkbox"/>
            <span>Çıkışa kapalı (CTD)</span>
          </label>
        </div>
      </Modal>
    </div>
  );
};

// ─── SUPPLIER: Rate plan form ──────────────────────────────────────
const SupplierRatePlanForm = ({ params, onNav }) => {
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:24}}>
        <div>
          <h3 style={{fontSize:24, fontWeight:700, marginBottom:4}}>{params?.id ? 'Rate Plan Düzenle' : 'Yeni Rate Plan'}</h3>
          <p style={{fontSize:13, color:'var(--color-ink-dim)'}}>Oda tipi başına bir tarife planı oluşturun.</p>
        </div>
        <Btn variant="ghost" onClick={()=>onNav('supplier-rateplans')}>← Geri</Btn>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:24}}>
        <div className="card" style={{padding:28}}>
          <div style={{display:'grid', gap:16}}>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
              <Field label="Oda tipi" required><Select value="2" onChange={()=>{}} options={[{value:'1',label:'Standart Çift Kişilik'},{value:'2',label:'Deluxe Deniz Manzaralı'},{value:'3',label:'Suite Marina'}]}/></Field>
              <Field label="Plan kodu" required><Input placeholder="Örn: DLX-BB-FLEX"/></Field>
            </div>
            <Field label="Plan adı (TR)" required><Input defaultValue="Deluxe Deniz · Kahvaltı Dahil · Esnek"/></Field>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
              <Field label="Plan adı (EN)"><Input placeholder="Deluxe Sea · BB · Flexible"/></Field>
              <Field label="Plan adı (AR)"><Input placeholder="—"/></Field>
            </div>
            <Field label="Açıklama"><TextArea rows={3} placeholder="Bu plan ne içeriyor, hangi misafire uygun..."/></Field>

            <div style={{padding:18, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)'}}>
              <div style={{fontSize:12, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--color-brand-600)', marginBottom:14}}>Yemek & İptal</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
                <Field label="Yemek planı" required><Select value="BB" onChange={()=>{}} options={[
                  {value:'RoomOnly',label:'Sadece Oda'},{value:'BB',label:'Kahvaltı Dahil'},{value:'HB',label:'Yarım Pansiyon'},
                  {value:'FB',label:'Tam Pansiyon'},{value:'AllInclusive',label:'Her Şey Dahil'},{value:'UltraAI',label:'Ultra Her Şey Dahil'},
                ]}/></Field>
                <Field label="İptal politikası" required>
                  <Select value="1" onChange={()=>{}} options={HOTEL_DATA.cancellationPolicies.map(p => ({value:String(p.id), label:p.name}))}/>
                </Field>
              </div>
              <label style={{display:'flex', gap:10, alignItems:'center', marginTop:14, fontSize:13}}>
                <input type="checkbox" defaultChecked/> İade edilebilir tarife
              </label>
            </div>

            <div style={{padding:18, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)'}}>
              <div style={{fontSize:12, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--color-brand-600)', marginBottom:14}}>Baz Fiyat</div>
              <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:14}}>
                <Field label="Gece başı baz fiyat" required><Input type="number" defaultValue="5950"/></Field>
                <Field label="Para birimi"><Select value="TRY" onChange={()=>{}} options={[{value:'TRY',label:'TRY ₺'},{value:'USD',label:'USD $'},{value:'EUR',label:'EUR €'}]}/></Field>
              </div>
              <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:8}}>Plan kaydedildiğinde önümüzdeki 90 gün için takvim otomatik prefill edilir. Hafta sonu / yüksek sezon çarpanlarını sonra düzenleyebilirsiniz.</div>
            </div>

            <div style={{padding:18, background:'var(--color-surface-muted)', borderRadius:'var(--r-md)'}}>
              <div style={{fontSize:12, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--color-brand-600)', marginBottom:14}}>Kısıtlar</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
                <Field label="Min. konaklama (gece)"><Input type="number" defaultValue="1"/></Field>
                <Field label="Max. konaklama (gece)"><Input type="number" defaultValue="30"/></Field>
              </div>
              <div style={{display:'flex', gap:18, marginTop:14, fontSize:13}}>
                <label style={{display:'flex', gap:8, alignItems:'center'}}><input type="checkbox" defaultChecked/> Aktif</label>
                <label style={{display:'flex', gap:8, alignItems:'center'}}><input type="checkbox"/> Sadece üyelere göster</label>
              </div>
            </div>
          </div>

          <div style={{display:'flex', justifyContent:'flex-end', gap:10, marginTop:24, paddingTop:20, borderTop:'1px solid var(--color-line)'}}>
            <Btn variant="ghost" onClick={()=>onNav('supplier-rateplans')}>Vazgeç</Btn>
            <Btn variant="primary" icon="check" onClick={()=>onNav('supplier-rateplans')}>Kaydet</Btn>
          </div>
        </div>

        <aside>
          <div className="card" style={{padding:18}}>
            <div style={{fontSize:13, fontWeight:700, marginBottom:10}}>Önizleme</div>
            <div style={{padding:12, border:'1px solid var(--color-line)', borderRadius:'var(--r-md)', background:'var(--color-surface)'}}>
              <Pill tone="neutral">Kahvaltı Dahil</Pill>
              <div style={{fontSize:14, fontWeight:700, marginTop:8}}>Deluxe Deniz · Kahvaltı · Esnek</div>
              <div style={{fontSize:12, color:'var(--color-ink-dim)'}}>Esnek 48 saat · İade edilebilir</div>
              <div className="tnum" style={{fontSize:20, fontWeight:800, color:'var(--color-brand-600)', marginTop:10}}>5.950 ₺ <span style={{fontSize:11, color:'var(--color-ink-dim)', fontWeight:500}}>/ gece</span></div>
            </div>
            <div style={{fontSize:11, color:'var(--color-ink-low)', marginTop:14, lineHeight:1.6}}>Bu plan kaydedildiğinde public listing detayında Deluxe Deniz odası altında görünür. Calendar otomatik 90 gün prefill edilir.</div>
          </div>
        </aside>
      </div>
    </div>
  );
};

// ─── ADMIN: Hotels (master list across all suppliers) ─────────────
const AdminHotels = () => {
  const rows = HOTEL_DATA.hotels.map(h => {
    const rooms = (h.roomTypes || []).length || (HOTEL_DATA.roomTypes||[]).filter(r => r.hotelId === h.id).length;
    const plans = (HOTEL_DATA.ratePlans||[]).filter(r => r.hotelId === h.id).length;
    return {
      _id: h.id,
      hotel: <div style={{display:'flex', alignItems:'center', gap:10}}>
        <div style={{width:44, height:44, borderRadius:'var(--r-sm)', overflow:'hidden', flexShrink:0}}>
          <img src={h.hero} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
        </div>
        <div>
          <div style={{fontWeight:700, fontSize:13}}>{h.title}</div>
          <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{h.location || h.destination}</div>
        </div>
      </div>,
      stars: <span style={{fontSize:12, fontWeight:700, color:'var(--color-warn-deep)'}}>{'★'.repeat(h.stars||4)}</span>,
      type: <Pill tone="default">{h.type || 'Otel'}</Pill>,
      rooms: <span className="tnum">{rooms}</span>,
      plans: <span className="tnum">{plans}</span>,
      score: <Stars value={h.score ? h.score/2 : (h.rating||4.7)} size={11} showValue count={h.reviews || h.reviewCount || 120}/>,
      priceFrom: <span className="tnum" style={{fontWeight:600}}>{(h.priceFrom||4500).toLocaleString('tr-TR')} ₺</span>,
      commission: <span className="tnum">{h.commission || 18}%</span>,
      status: <Pill tone="success">Yayında</Pill>,
      actions: <Btn variant="ghost" size="sm" icon="more"/>,
    };
  });
  return <AdminCrudPage
    title="Otel"
    toolbar={<>
      <Btn variant="secondary" size="sm" icon="download">Rapor</Btn>
      <Btn variant="primary" size="sm" icon="plus">Yeni Otel</Btn>
    </>}
    filters={<>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm tipler'},{value:'hotel',label:'Otel'},{value:'boutique',label:'Butik'},{value:'villa',label:'Villa'},{value:'apart',label:'Apart'}]} style={{width:'auto'}}/>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm destinasyonlar'},{value:'bodrum',label:'Bodrum'},{value:'kapadokya',label:'Kapadokya'},{value:'antalya',label:'Antalya'}]} style={{width:'auto'}}/>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm yıldızlar'},{value:'5',label:'★ 5'},{value:'4',label:'★ 4'},{value:'3',label:'★ 3'}]} style={{width:'auto'}}/>
    </>}
    columns={[
      {key:'hotel', head:'Otel'},
      {key:'stars', head:'Sınıf', width:90},
      {key:'type', head:'Tip', width:90},
      {key:'rooms', head:'Oda Tipi', width:90, align:'right'},
      {key:'plans', head:'Rate Plan', width:90, align:'right'},
      {key:'score', head:'Puan', width:130},
      {key:'priceFrom', head:'Min. /gece', width:120, align:'right'},
      {key:'commission', head:'Kom.', width:80, align:'right'},
      {key:'status', head:'Durum', width:110},
      {key:'actions', head:'', width:60},
    ]}
    rows={rows}
  />;
};

// ─── ADMIN: Room Types (master list) ──────────────────────────────
const AdminRoomTypes = () => {
  const allRooms = (HOTEL_DATA.roomTypes && HOTEL_DATA.roomTypes.length)
    ? HOTEL_DATA.roomTypes
    : HOTEL_DATA.hotels.flatMap(h => (h.roomTypes||[]).map(rt => ({...rt, hotelId: h.id})));
  const rows = allRooms.map(rt => {
    const hotel = HOTEL_DATA.hotels.find(h => h.id === rt.hotelId);
    const plans = (HOTEL_DATA.ratePlans||[]).filter(r => r.roomTypeId === rt.id).length;
    return {
      _id: rt.id,
      room: <div style={{display:'flex', alignItems:'center', gap:10}}>
        <div style={{width:44, height:44, borderRadius:'var(--r-sm)', overflow:'hidden', flexShrink:0, background:`url(${rt.img || hotel?.hero}) center/cover`}}/>
        <div>
          <div style={{fontWeight:700, fontSize:13}}>{rt.name}</div>
          <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{hotel?.title}</div>
        </div>
      </div>,
      size: <span className="tnum">{rt.size}m²</span>,
      beds: <span style={{fontSize:12}}>{rt.beds}</span>,
      cap: <span className="tnum">{rt.maxGuests}</span>,
      view: <Pill tone="default">{rt.view}</Pill>,
      stock: <span className="tnum" style={{fontWeight:600}}>{rt.stock || 8}</span>,
      plans: <span className="tnum">{plans}</span>,
      status: <Pill tone="success">Aktif</Pill>,
      actions: <Btn variant="ghost" size="sm" icon="more"/>,
    };
  });
  return <AdminCrudPage
    title="Oda Tipi"
    toolbar={<Btn variant="primary" size="sm" icon="plus">Yeni Oda Tipi</Btn>}
    filters={<>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm oteller'},...HOTEL_DATA.hotels.map(h=>({value:String(h.id),label:h.title}))]} style={{width:'auto'}}/>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm manzaralar'},{value:'sea',label:'Deniz'},{value:'garden',label:'Bahçe'},{value:'city',label:'Şehir'}]} style={{width:'auto'}}/>
    </>}
    columns={[
      {key:'room', head:'Oda Tipi'},
      {key:'size', head:'Alan', width:80, align:'right'},
      {key:'beds', head:'Yatak', width:140},
      {key:'cap', head:'Kapasite', width:90, align:'right'},
      {key:'view', head:'Manzara', width:110},
      {key:'stock', head:'Stok', width:80, align:'right'},
      {key:'plans', head:'Rate Plan', width:100, align:'right'},
      {key:'status', head:'Durum', width:110},
      {key:'actions', head:'', width:60},
    ]}
    rows={rows}
  />;
};

// ─── ADMIN: Rate Plans (cross-supplier) ────────────────────────────
const AdminRatePlans = () => {
  const enrichedRows = HOTEL_DATA.ratePlans.map(rp => ({
    ...rp,
    hotelName: HOTEL_DATA.hotels.find(h => h.id === rp.hotelId)?.title,
    roomTypeName: HOTEL_DATA.hotels.find(h => h.id === rp.hotelId)?.roomTypes.find(rt => rt.id === rp.roomTypeId)?.name,
    policyName: HOTEL_DATA.cancellationPolicies.find(p => p.id === rp.policyId)?.name,
  }));
  return <AdminCrudPage
    title="Rate Plan"
    toolbar={<Btn variant="primary" size="sm" icon="plus">Yeni Rate Plan</Btn>}
    filters={<>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm oteller'},{value:'901',label:'Marin Hotel Yalıkavak'},{value:'902',label:'Kapadokya Cave'},{value:'903',label:'Villa Blu'}]} style={{width:'auto'}}/>
      <Select value="" onChange={()=>{}} options={[{value:'',label:'Tüm meal plan'},{value:'BB',label:'Kahvaltı'},{value:'HB',label:'Yarım'},{value:'FB',label:'Tam'},{value:'AI',label:'Her şey'}]} style={{width:'auto'}}/>
    </>}
    columns={[
      {key:'code', label:'Kod', render:r=><span className="mono" style={{fontSize:12, fontWeight:700}}>{r.code}</span>},
      {key:'hotel', label:'Otel', render:r=><div><div style={{fontSize:13, fontWeight:600}}>{r.hotelName}</div><div style={{fontSize:11, color:'var(--color-ink-dim)'}}>{r.roomTypeName}</div></div>},
      {key:'meal', label:'Yemek', render:r=><Pill tone="neutral">{HOTEL_DATA.mealPlanLabel(r.mealPlan)}</Pill>},
      {key:'refund', label:'İade', render:r=>r.refundable ? <Pill tone="success">Esnek</Pill> : <Pill tone="warning">Yok</Pill>},
      {key:'policy', label:'Politika', render:r=><span style={{fontSize:12, color:'var(--color-ink-mid)'}}>{r.policyName}</span>},
      {key:'price', label:'Baz fiyat', align:'right', render:r=><span className="tnum" style={{fontSize:13, fontWeight:700}}>{r.basePrice.toLocaleString('tr')} ₺</span>},
      {key:'active', label:'Durum', render:r=><Pill tone={r.active?'success':'neutral'}>{r.active?'Aktif':'Pasif'}</Pill>},
    ]}
    rows={enrichedRows}
  />;
};

// ─── ADMIN: Rate Plan Calendar (system-wide overview) ──────────────
const AdminRatePlanCalendar = () => <SupplierRatePlanCalendar params={{}} onNav={()=>{}}/>;

// ─── ADMIN: Cancellation Policies ──────────────────────────────────
const AdminCancellationPolicies = () => {
  const [edit, setEdit] = React.useState(null);
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:24, flexWrap:'wrap', gap:14}}>
        <div>
          <h3 style={{fontSize:24, fontWeight:700, marginBottom:4}}>İptal Politikaları</h3>
          <p style={{fontSize:13, color:'var(--color-ink-dim)'}}>Otel ve rate plan'ların kullanabileceği iptal kuralları.</p>
        </div>
        <Btn variant="primary" icon="plus" onClick={()=>setEdit({code:'', name:'', refundable:true, rules:[{hours:24, refund:100, label:'24+ saat'}]})}>Yeni Politika</Btn>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:18}}>
        {HOTEL_DATA.cancellationPolicies.map(p =>
          <div key={p.id} className="card" style={{padding:22}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14}}>
              <div>
                <div style={{display:'flex', gap:8, alignItems:'center'}}>
                  <span className="mono" style={{fontSize:11, fontWeight:700, padding:'3px 8px', background:'var(--color-surface-muted)', borderRadius:4}}>{p.code}</span>
                  {p.refundable ? <Pill tone="success">İade edilebilir</Pill> : <Pill tone="warning">İade yok</Pill>}
                </div>
                <div style={{fontSize:18, fontWeight:700, marginTop:8}}>{p.name}</div>
                <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4}}>{p.usedBy} rate plan kullanıyor</div>
              </div>
              <div style={{display:'flex', gap:6}}>
                <button onClick={()=>setEdit(p)} style={{padding:8, border:'1px solid var(--color-line)', background:'var(--color-surface)', borderRadius:6, cursor:'pointer'}}><Icon name="edit" size={14}/></button>
                <button style={{padding:8, border:'1px solid var(--color-line)', background:'var(--color-surface)', borderRadius:6, cursor:'pointer'}}><Icon name="trash" size={14}/></button>
              </div>
            </div>
            <div style={{borderTop:'1px solid var(--color-line)', paddingTop:14}}>
              <div style={{fontSize:11, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--color-ink-dim)', marginBottom:10}}>Kademeler</div>
              <div style={{display:'flex', flexDirection:'column', gap:6}}>
                {p.rules.map((r,i) =>
                  <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'8px 12px', background:'var(--color-surface-muted)', borderRadius:6}}>
                    <span style={{fontSize:13}}>{r.label}</span>
                    <span className="tnum" style={{fontSize:13, fontWeight:700, color: r.refund>=100?'var(--color-success-deep)': r.refund>=50?'var(--color-warning-deep)':'var(--color-danger-deep)'}}>%{r.refund} iade</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>

      <Modal open={!!edit} onClose={()=>setEdit(null)} title={edit?.id ? 'Politika düzenle' : 'Yeni iptal politikası'} width={620}
        footer={<><Btn variant="ghost" onClick={()=>setEdit(null)}>Vazgeç</Btn><Btn variant="primary" onClick={()=>setEdit(null)}>Kaydet</Btn></>}>
        {edit && (
          <div style={{display:'grid', gap:14}}>
            <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:12}}>
              <Field label="Kod" required><Input defaultValue={edit.code} placeholder="FLEX_24"/></Field>
              <Field label="Ad (TR)" required><Input defaultValue={edit.name} placeholder="Esnek 24 saat"/></Field>
            </div>
            <label style={{display:'flex', gap:8, alignItems:'center', fontSize:13}}>
              <input type="checkbox" defaultChecked={edit.refundable}/> Genel olarak iade edilebilir
            </label>
            <div>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:10}}>
                <div style={{fontSize:12, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--color-brand-600)'}}>Kademeler</div>
                <button style={{border:0, background:'transparent', color:'var(--color-brand-600)', cursor:'pointer', fontSize:13, fontWeight:600}}>+ Kademe ekle</button>
              </div>
              <div style={{display:'flex', flexDirection:'column', gap:8}}>
                {edit.rules.map((r,i) =>
                  <div key={i} style={{display:'grid', gridTemplateColumns:'1fr 1fr 2fr auto', gap:8, alignItems:'center'}}>
                    <Input type="number" defaultValue={r.hours} placeholder="saat" />
                    <Input type="number" defaultValue={r.refund} placeholder="% iade"/>
                    <Input defaultValue={r.label} placeholder="Açıklama"/>
                    <button style={{padding:8, border:'1px solid var(--color-line)', background:'var(--color-surface)', borderRadius:6, cursor:'pointer'}}><Icon name="trash" size={14}/></button>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

// ─── HOTEL category hero card (used in CategoriesPage) ─────────────
const HotelCategoryHero = ({ onNav }) => {
  const hotelTypes = [
    { label:'Resort & 5★', count:182, slug:'resort' },
    { label:'Butik Otel', count:96, slug:'butik' },
    { label:'Villa', count:124, slug:'villa' },
    { label:'Pansiyon', count:58, slug:'pansiyon' },
    { label:'Apart', count:74, slug:'apart' },
    { label:'Cave Suites', count:32, slug:'cave' },
  ];
  return <div style={{borderRadius:'var(--r-lg)', overflow:'hidden', background:'var(--color-surface-raised)', border:'1px solid var(--color-line)'}}>
    <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', minHeight:380}}>
      {/* Left: hero image with overlay */}
      <div onClick={()=>onNav('hotels')} style={{cursor:'pointer', position:'relative', background:`linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.78) 100%), url(${HOTEL_DATA.hotels[0].hero}) center/cover`, color:'#fff', padding:32, display:'flex', flexDirection:'column', justifyContent:'flex-end', minHeight:380}}>
        <div style={{position:'absolute', top:18, left:18, display:'flex', gap:6}}>
          <span style={{padding:'4px 10px', background:'rgba(255,255,255,.95)', color:'var(--color-brand-700)', borderRadius:999, fontSize:11, fontWeight:800, letterSpacing:'.06em', textTransform:'uppercase'}}>YENİ</span>
          <span style={{padding:'4px 10px', background:'rgba(0,0,0,.4)', backdropFilter:'blur(8px)', borderRadius:999, fontSize:12, fontWeight:700}}>{HOTEL_DATA.hotels.length} otel · {HOTEL_DATA.ratePlans.length} rate plan</span>
        </div>
        <div style={{fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', fontWeight:700, opacity:.9}}>Yeni Vertical</div>
        <div style={{fontFamily:'var(--font-display)', fontSize:38, fontWeight:800, letterSpacing:'-.02em', marginTop:10, lineHeight:1.1}}>Konaklama</div>
        <div style={{fontSize:15, opacity:.88, marginTop:10, lineHeight:1.55, maxWidth:420}}>Butik otel, villa, pansiyon — tarih ve oda tipine göre canlı fiyat, esnek iptal, çoklu rate plan.</div>
        <div style={{marginTop:18, display:'flex', gap:10}}>
          <span style={{padding:'9px 18px', background:'#fff', color:'var(--color-ink-strong)', borderRadius:'var(--r-pill)', fontSize:13, fontWeight:700}}>Otelleri keşfet →</span>
          <span style={{padding:'9px 18px', background:'rgba(255,255,255,.18)', backdropFilter:'blur(8px)', borderRadius:'var(--r-pill)', fontSize:13, fontWeight:700, border:'1px solid rgba(255,255,255,.3)'}}>Otelini listele</span>
        </div>
      </div>
      {/* Right: type grid */}
      <div style={{padding:24, display:'flex', flexDirection:'column'}}>
        <div style={{fontSize:11, letterSpacing:'.14em', color:'var(--color-brand-600)', fontWeight:800, textTransform:'uppercase', marginBottom:14}}>Konaklama Tipleri</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, flex:1}}>
          {hotelTypes.map(t => <a key={t.slug} onClick={()=>onNav('hotels')} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'12px 14px', borderRadius:'var(--r-md)', cursor:'pointer', background:'var(--color-surface-muted)', transition:'background .15s'}} onMouseEnter={e=>e.currentTarget.style.background='var(--color-brand-50)'} onMouseLeave={e=>e.currentTarget.style.background='var(--color-surface-muted)'}>
            <span style={{fontSize:13, fontWeight:600}}>{t.label}</span>
            <span className="tnum" style={{fontSize:11, color:'var(--color-ink-low)'}}>{t.count}</span>
          </a>)}
        </div>
        <div style={{marginTop:14, paddingTop:14, borderTop:'1px solid var(--color-line)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <span style={{fontSize:12, color:'var(--color-ink-dim)'}}>Tedarikçilere %12 komisyon · 30 gün ödeme</span>
          <a onClick={()=>onNav('supplier-apply')} style={{fontSize:12, fontWeight:700, color:'var(--color-brand-600)', textDecoration:'underline', cursor:'pointer'}}>Tedarikçi başvurusu →</a>
        </div>
      </div>
    </div>
  </div>;
};

Object.assign(window, {
  HOTEL_DATA, HotelDetailPage, HotelBookingPage,
  SupplierRatePlans, SupplierRatePlanCalendar, SupplierRatePlanForm,
  AdminRatePlans, AdminRatePlanCalendar, AdminCancellationPolicies,
  AdminHotels, AdminRoomTypes,
  HotelCategoryHero,
});