// Supplier panel screens

const SupplierLayout = ({ current, onNav, children, density='comfy', dark=true, supplierType='activity' }) => {
  const isHotel = supplierType === 'hotel';
  const navGroups = isHotel ? [
    ['Genel', [
      ['supplier-dashboard','Kontrol Paneli','home'],
    ]],
    ['Tesis', [
      ['supplier-listings','Tesislerim','home', 3],
      ['supplier-new','Yeni Tesis','plus'],
    ]],
    ['Satış & Fiyat', [
      ['supplier-rateplans','Rate Planlar','tag', 6],
      ['supplier-rateplan-calendar','Fiyat & Müsaitlik','calendar-days'],
      ['supplier-bookings','Rezervasyonlar','calendar', 14],
    ]],
    ['Operasyon', [
      ['supplier-finance','Finans','dollar'],
      ['supplier-stats','İstatistikler','bar'],
      ['supplier-reviews','Yorumlar','star', 3],
      ['supplier-messages','Mesajlar','message', 5],
      ['supplier-settings','Ayarlar','settings'],
    ]],
  ] : [
    ['Genel', [
      ['supplier-dashboard','Kontrol Paneli','home'],
    ]],
    ['Aktiviteler', [
      ['supplier-listings','Aktivitelerim','grid', LISTINGS.length],
      ['supplier-new','Yeni Aktivite','plus'],
      ['supplier-bookings','Rezervasyonlar','calendar', 8],
      ['supplier-calendar','Kontenjan Takvimi','calendar-days'],
    ]],
    ['Operasyon', [
      ['supplier-finance','Finans','dollar'],
      ['supplier-stats','İstatistikler','bar'],
      ['supplier-reviews','Yorumlar','star', 3],
      ['supplier-messages','Mesajlar','message', 5],
      ['supplier-settings','Ayarlar','settings'],
    ]],
  ];
  const nav = navGroups.flatMap(g => g[1]);
  const user = isHotel
    ? {name:'Marin Hotel Yalıkavak', email:'reservation@marinhotel.com', avatar:IMG('sup-hotel-logo',80,80), role:'Otel Tedarikçisi'}
    : {name:'Boğaz Denizcilik', email:'info@bogazdeniz.com', avatar:IMG('sup-logo',80,80), role:'Tur Tedarikçisi'};
  const newCtaLabel = isHotel ? 'Yeni Rate Plan' : 'Yeni Aktivite';
  const newCtaTarget = isHotel ? 'supplier-rateplan-new' : 'supplier-new';
  const accentBadge = isHotel ? 'OTEL TEDARİKÇİSİ' : 'TUR TEDARİKÇİSİ';
  const accentColor = isHotel ? 'var(--color-info)' : 'var(--color-brand-500)';

  return <div className={`dm-${density} ${dark?'dm-dark':''}`} style={{minHeight:'100vh', background:'var(--color-surface)', color:'var(--color-ink)'}}>
    <div style={{display:'grid', gridTemplateColumns:'240px 1fr', minHeight:'100vh'}}>
      {/* Sidebar */}
      <aside style={{background:'var(--color-surface-raised)', borderRight:'1px solid var(--color-line)', padding:'20px 14px', display:'flex', flexDirection:'column', position:'sticky', top:0, height:'100vh', overflowY:'auto'}}>
        <button onClick={()=>onNav('home')} style={{display:'flex', alignItems:'center', gap:10, padding:'6px 10px', border:0, background:'transparent', marginBottom:24, cursor:'default'}}>
          <Logo size={56}/><div style={{fontSize:10, fontWeight:700, color:accentColor, letterSpacing:'.08em'}}>{accentBadge}</div>
        </button>

        <nav style={{display:'flex', flexDirection:'column', gap:2, flex:1}}>
          {navGroups.map(([groupName, items]) => <div key={groupName} style={{marginBottom:14}}>
            <div style={{fontSize:10, fontWeight:800, color:'var(--color-ink-low)', letterSpacing:'.12em', textTransform:'uppercase', padding:'6px 10px 4px'}}>{groupName}</div>
            {items.map(([key, label, icon, count]) => <button key={key} onClick={()=>onNav(key)}
              style={{display:'flex', alignItems:'center', gap:10, padding:'9px 10px', border:0, textAlign:'left', width:'100%',
                background: current===key ? 'var(--color-brand-500)' : 'transparent',
                color: current===key ? 'var(--color-on-brand)' : 'var(--color-ink-dim)',
                borderRadius:'var(--r-md)', fontSize:13, fontWeight: current===key ? 700 : 500, cursor:'default'}}>
              <Icon name={icon} size={15}/>
              <span style={{flex:1}}>{label}</span>
              {count && <span style={{fontSize:10, fontWeight:700, padding:'2px 7px', borderRadius:'var(--r-pill)',
                background: current===key ? 'rgba(255,255,255,.2)' : 'var(--color-surface-sunken)'}}>{count}</span>}
            </button>)}
          </div>)}
        </nav>

        <div style={{padding:12, marginTop:16, borderTop:'1px solid var(--color-line)', display:'flex', alignItems:'center', gap:10}}>
          <Avatar src={user.avatar} name={user.name} size={32}/>
          <div style={{minWidth:0, flex:1}}>
            <div style={{fontSize:12, fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{user.name}</div>
            <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{user.role}</div>
          </div>
        </div>
      </aside>

      {/* Main */}
      <main style={{minWidth:0}}>
        <div style={{padding:'16px 32px', borderBottom:'1px solid var(--color-line)', display:'flex', alignItems:'center', gap:16, background:'var(--color-surface-raised)', position:'sticky', top:0, zIndex:10}}>
          <div style={{flex:1, fontSize:15, fontWeight:600, color:'var(--color-ink)'}}>
            {nav.find(n=>n[0]===current)?.[1]}
          </div>
          <div style={{position:'relative', width:260}}>
            <Icon name="search" size={14} style={{position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', color:'var(--color-ink-low)'}}/>
            <Input placeholder="Ara..." style={{paddingLeft:34}}/>
          </div>
          <Btn variant="ghost" icon="bell"/>
          <Btn variant="primary" size="sm" icon="plus" onClick={()=>onNav(newCtaTarget)}>{newCtaLabel}</Btn>
        </div>

        <div style={{padding:'28px 32px'}}>{children}</div>
      </main>
    </div>
  </div>;
};

const SupplierDashboard = ({ onNav, supplierType='activity' }) => {
  const isHotel = supplierType === 'hotel';
  const greeting = isHotel ? 'Hoş geldin, Marin Hotel ekibi.' : 'Hoş geldin, Kaptan Ahmet.';
  const kpis = isHotel ? [
    {label:'Bu Ay Gelir', value:'487.250 ₺', delta:'+24.6%', trend:'up', sparkColor:'var(--color-brand-500)'},
    {label:'Doluluk (30g)', value:'%72', delta:'+8 pp', trend:'up', sparkColor:'var(--color-info)'},
    {label:'ADR', value:'4.860 ₺', delta:'+312 ₺', trend:'up', sparkColor:'var(--color-success-deep)'},
    {label:'RevPAR', value:'3.500 ₺', delta:'+440 ₺', trend:'up', sparkColor:'var(--color-warn-deep)'},
  ] : [
    {label:'Toplam Gelir', value:'184.320 ₺', delta:'+18.4%', trend:'up', sparkColor:'var(--color-brand-500)'},
    {label:'Rezervasyon', value:'128', delta:'+12', trend:'up', sparkColor:'var(--color-info)'},
    {label:'Dönüşüm Oranı', value:'4.2%', delta:'-0.3%', trend:'down', sparkColor:'var(--color-warn-deep)'},
    {label:'Ort. Puan', value:'4.8', delta:'0.0', trend:'flat', sparkColor:'var(--color-success-deep)'},
  ];
  const hotelData = window.HOTEL_DATA;
  return <div>
    <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:24}}>
      <div>
        <div className="eyebrow">NİSAN 2026</div>
        <h2 style={{fontSize:36, marginTop:6}}>{greeting}</h2>
      </div>
      <div style={{display:'flex', gap:8}}>
        <Btn variant="secondary" icon="download">Rapor İndir</Btn>
        <Select value="30" onChange={()=>{}} options={[{value:'7',label:'Son 7 gün'},{value:'30',label:'Son 30 gün'},{value:'90',label:'Son 90 gün'}]}/>
      </div>
    </div>

    {/* KPIs */}
    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:24}}>
      {kpis.map(kpi => <div key={kpi.label} className="card" style={{padding:20}}>
        <div style={{fontSize:12, color:'var(--color-ink-dim)', fontWeight:600}}>{kpi.label}</div>
        <div className="tnum" style={{fontSize:32, fontWeight:800, marginTop:8, letterSpacing:'-0.03em'}}>{kpi.value}</div>
        <div style={{display:'flex', alignItems:'center', gap:10, marginTop:10}}>
          <Pill tone={kpi.trend==='up'?'success':kpi.trend==='down'?'danger':'default'}>
            {kpi.trend==='up'?'↑':kpi.trend==='down'?'↓':'→'} {kpi.delta}
          </Pill>
          <Sparkline values={genSpark(i=>20+Math.sin(i*0.7)*6+i*0.7+Math.random()*3)} color={kpi.sparkColor}/>
        </div>
      </div>)}
    </div>

    {/* Chart + Upcoming */}
    <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:20, marginBottom:24}}>
      <div className="card" style={{padding:24}}>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:20}}>
          <div>
            <div style={{fontSize:14, fontWeight:700}}>{isHotel ? 'Doluluk & Gelir' : 'Gelir Trendi'}</div>
            <div style={{fontSize:12, color:'var(--color-ink-dim)'}}>Son 30 gün · TRY</div>
          </div>
          <Segmented options={isHotel ? ['Gelir','Doluluk','ADR'] : ['Gelir','Rezervasyon','Dönüşüm']} value="Gelir" onChange={()=>{}}/>
        </div>
        <BarChart data={genSpark(i=>40+Math.sin(i*0.5)*20+i*1.2+Math.random()*10, 30)} height={180}/>
      </div>

      <div className="card" style={{padding:20}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <div style={{fontSize:14, fontWeight:700}}>{isHotel ? 'Yaklaşan Check-in' : 'Yaklaşan Rezervasyonlar'}</div>
          <Btn variant="link" onClick={()=>onNav('supplier-bookings')}>Tümü</Btn>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:2}}>
          {BOOKINGS.slice(0,5).map(b => {
            const l = LISTINGS.find(x=>x.id===b.listingId);
            return <div key={b.id} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 6px', borderBottom:'1px solid var(--color-line-soft)'}}>
              <div style={{width:42, height:42, borderRadius:'var(--r-sm)', overflow:'hidden', flexShrink:0}}>
                <img src={l?.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:12, fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{b.customer}</div>
                <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{b.travelDate} · {isHotel ? `${b.participants} gece` : `${b.participants} kişi`}</div>
              </div>
              <StatusPill status={b.status}/>
            </div>;
          })}
        </div>
      </div>
    </div>

    {/* Top performers */}
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
      <div className="card" style={{padding:20}}>
        <div style={{fontSize:14, fontWeight:700, marginBottom:14}}>{isHotel ? 'En Çok Satan Rate Planlar' : 'En İyi Aktiviteler'}</div>
        {isHotel && hotelData
          ? hotelData.ratePlans.slice(0,4).map(rp => {
              const h = hotelData.hotels.find(x=>x.id===rp.hotelId);
              return <div key={rp.id} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 0', borderTop:'1px solid var(--color-line-soft)'}}>
                <div style={{width:50, height:50, borderRadius:'var(--r-sm)', overflow:'hidden', flexShrink:0}}>
                  <img src={h?.hero} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                </div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:13, fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{rp.name}</div>
                  <div style={{fontSize:11, color:'var(--color-ink-low)', marginTop:2}}>{hotelData.mealPlanLabel(rp.mealPlan)} · {rp.refundable ? 'Esnek' : 'NRF'} · {h?.title}</div>
                </div>
                <div className="tnum" style={{fontSize:13, fontWeight:700}}>{rp.basePrice.toLocaleString('tr-TR')} ₺</div>
              </div>;
            })
          : LISTINGS.slice(0,4).map(l => <div key={l.id} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 0', borderTop:'1px solid var(--color-line-soft)'}}>
              <div style={{width:50, height:50, borderRadius:'var(--r-sm)', overflow:'hidden', flexShrink:0}}>
                <img src={l.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:13, fontWeight:700, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{l.title}</div>
                <div style={{fontSize:11, color:'var(--color-ink-low)', marginTop:2}}><Stars value={l.rating} size={10} showValue/> · {l.reviewCount} yorum</div>
              </div>
              <div className="tnum" style={{fontSize:13, fontWeight:700}}>{l.price.toLocaleString('tr-TR')} ₺</div>
            </div>)}
      </div>

      <div className="card" style={{padding:20}}>
        <div style={{fontSize:14, fontWeight:700, marginBottom:14}}>Son Yorumlar</div>
        {REVIEWS.slice(0,3).map(r => <div key={r.id} style={{padding:'12px 0', borderTop:'1px solid var(--color-line-soft)'}}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <Avatar src={r.avatar} name={r.user} size={28}/>
            <div style={{fontSize:12, fontWeight:700}}>{r.user}</div>
            <Stars value={r.rating} size={10}/>
          </div>
          <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:6, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'}}>{r.comment}</div>
        </div>)}
      </div>
    </div>
  </div>;
};

// Listings CRUD
const SupplierListings = ({ onNav, supplierType='activity' }) => {
  const isHotel = supplierType === 'hotel';
  const hotelData = window.HOTEL_DATA;
  const items = isHotel && hotelData ? hotelData.hotels : LISTINGS;
  const [selected, setSelected] = React.useState([]);
  const toggle = (id) => setSelected(s => s.includes(id) ? s.filter(x=>x!==id) : [...s, id]);
  const allSelected = selected.length === items.length && items.length > 0;
  const totalLabel = isHotel ? 'Tesisler' : 'Aktiviteler';

  const hotelColumns = [
    {key:'sel', head:<input type="checkbox" checked={allSelected} onChange={()=>setSelected(allSelected?[]:items.map(l=>l.id))} style={{accentColor:'var(--color-brand-500)'}}/>, width:36},
    {key:'title', head:'Tesis'},
    {key:'stars', head:'Sınıf', width:90},
    {key:'rooms', head:'Oda Tipi', width:90, align:'right'},
    {key:'rateplans', head:'Rate Plan', width:100, align:'right'},
    {key:'avgPrice', head:'Ort. /gece', width:120, align:'right'},
    {key:'rating', head:'Puan', width:120},
    {key:'status', head:'Durum', width:120},
    {key:'actions', head:'', width:80},
  ];
  const activityColumns = [
    {key:'sel', head:<input type="checkbox" checked={allSelected} onChange={()=>setSelected(allSelected?[]:items.map(l=>l.id))} style={{accentColor:'var(--color-brand-500)'}}/>, width:36},
    {key:'title', head:'Aktivite'},
    {key:'cat', head:'Kategori', width:140},
    {key:'price', head:'Fiyat', width:100, align:'right'},
    {key:'rating', head:'Puan', width:120},
    {key:'bookings', head:'Rez.', width:70, align:'right'},
    {key:'status', head:'Durum', width:120},
    {key:'actions', head:'', width:80},
  ];

  const hotelRows = (items) => items.map(h => {
    const roomCount = (hotelData?.roomTypes || []).filter(r => r.hotelId === h.id).length;
    const rpCount = (hotelData?.ratePlans || []).filter(r => r.hotelId === h.id).length;
    const avg = (hotelData?.ratePlans || []).filter(r => r.hotelId === h.id).reduce((s,r,_,a)=>s + r.basePrice/a.length, 0);
    return {
      sel: <input type="checkbox" checked={selected.includes(h.id)} onChange={()=>toggle(h.id)} style={{accentColor:'var(--color-brand-500)'}}/>,
      title: <div style={{display:'flex', alignItems:'center', gap:10}}>
        <div style={{width:40, height:40, 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}}>{h.title}</div>
          <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{h.location}</div>
        </div>
      </div>,
      stars: <span style={{fontSize:12, fontWeight:700, color:'var(--color-warn-deep)'}}>{'★'.repeat(h.stars||4)}</span>,
      rooms: <span className="tnum">{roomCount}</span>,
      rateplans: <span className="tnum">{rpCount}</span>,
      avgPrice: <span className="tnum" style={{fontWeight:600}}>{avg ? Math.round(avg).toLocaleString('tr-TR') + ' ₺' : '—'}</span>,
      rating: <Stars value={h.rating || 4.7} size={11} showValue count={h.reviewCount || 120}/>,
      status: <StatusPill status="Published"/>,
      actions: <div style={{display:'flex', gap:4, justifyContent:'flex-end'}}>
        <button className="btn btn-ghost btn-sm" onClick={()=>onNav('supplier-rateplans')}><Icon name="tag" size={13}/></button>
        <button className="btn btn-ghost btn-sm"><Icon name="more" size={13}/></button>
      </div>,
    };
  });

  const activityRows = (items) => items.map(l => ({
    sel: <input type="checkbox" checked={selected.includes(l.id)} onChange={()=>toggle(l.id)} style={{accentColor:'var(--color-brand-500)'}}/>,
    title: <div style={{display:'flex', alignItems:'center', gap:10}}>
      <div style={{width:36, height:36, borderRadius:'var(--r-sm)', overflow:'hidden', flexShrink:0}}>
        <img src={l.img} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>
      <div>
        <div style={{fontWeight:700}}>{l.title}</div>
        <div style={{fontSize:11, color:'var(--color-ink-low)'}}>{l.dest}</div>
      </div>
    </div>,
    cat: l.cat,
    price: <span className="tnum" style={{fontWeight:600}}>{l.price.toLocaleString('tr-TR')} ₺</span>,
    rating: <Stars value={l.rating} size={11} showValue count={l.reviewCount}/>,
    bookings: <span className="tnum" style={{fontWeight:600}}>{l.bookings || 24}</span>,
    status: <StatusPill status={l.status || 'Published'}/>,
    actions: <div style={{display:'flex', gap:4, justifyContent:'flex-end'}}>
      <button className="btn btn-ghost btn-sm" onClick={()=>onNav('supplier-edit',{id:l.id})}><Icon name="edit" size={13}/></button>
      <button className="btn btn-ghost btn-sm"><Icon name="more" size={13}/></button>
    </div>,
  }));

  return <div>
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20}}>
      <div style={{display:'flex', gap:8}}>
        <Chip active>Tümü <span style={{color:'var(--color-ink-low)', marginLeft:4}}>{items.length}</span></Chip>
        <Chip>Yayında <span style={{color:'var(--color-ink-low)', marginLeft:4}}>{Math.max(items.length-2,1)}</span></Chip>
        <Chip>Taslak <span style={{color:'var(--color-ink-low)', marginLeft:4}}>1</span></Chip>
        <Chip>Beklemede <span style={{color:'var(--color-ink-low)', marginLeft:4}}>1</span></Chip>
      </div>
      <div style={{display:'flex', gap:8}}>
        <Btn variant="secondary" size="sm" icon="filter">Filtrele</Btn>
        <Btn variant="secondary" size="sm" icon="download">Dışa Aktar</Btn>
      </div>
    </div>

    {selected.length > 0 && <div style={{padding:'10px 16px', background:'var(--color-brand-50)', borderRadius:'var(--r-md)', marginBottom:12, display:'flex', alignItems:'center', gap:12}}>
      <span style={{fontSize:13, fontWeight:600, color:'var(--color-brand-700)'}}>{selected.length} seçildi</span>
      <Btn variant="ghost" size="sm">Yayınla</Btn>
      <Btn variant="ghost" size="sm">Duraklat</Btn>
      <Btn variant="ghost" size="sm">Arşivle</Btn>
      <Btn variant="ghost" size="sm" icon="trash">Sil</Btn>
    </div>}

    <Table columns={isHotel ? hotelColumns : activityColumns} rows={isHotel ? hotelRows(items) : activityRows(items)} />
  </div>;
};

const SupplierListingForm = ({ onNav, id }) => {
  const [step, setStep] = React.useState(0);
  const tabs = ['Temel Bilgi','Medya','Paketler','Program','Dahil/Hariç','Politika','SEO'];

  return <div>
    <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:20}}>
      <Btn variant="ghost" icon="arrow-left" onClick={()=>onNav('supplier-listings')}>Geri</Btn>
      <h3>{id ? 'Aktiviteyi Düzenle' : 'Yeni Aktivite'}</h3>
      <div style={{marginLeft:'auto', display:'flex', gap:8}}>
        <Btn variant="ghost">Önizle</Btn>
        <Btn variant="secondary">Taslak Olarak Kaydet</Btn>
        <Btn variant="primary">Yayına Al</Btn>
      </div>
    </div>

    <div style={{display:'flex', gap:4, borderBottom:'1px solid var(--color-line)', marginBottom:24, overflowX:'auto'}}>
      {tabs.map((t, i) => <button key={t} onClick={()=>setStep(i)}
        style={{padding:'12px 18px', fontSize:13, fontWeight:600, border:0, background:'transparent',
          color: step===i ? 'var(--color-ink-strong)' : 'var(--color-ink-dim)',
          borderBottom: step===i ? '2px solid var(--color-brand-500)' : '2px solid transparent', marginBottom:-1, cursor:'default'}}>{t}</button>)}
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:24, alignItems:'flex-start'}}>
      <div className="card" style={{padding:28}}>
        {step === 0 && <div style={{display:'grid', gap:18}}>
          <Field label="Başlık (TR)" hint="Maks 70 karakter. SEO dostu, net bir başlık.">
            <Input defaultValue="Gün batımı Boğaz turu — akşam yemekli"/>
          </Field>
          <Field label="Kısa Açıklama"><Input defaultValue="2.5 saatlik tekne turu, Boğaz'ın en güzel hâli."/></Field>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
            <Field label="Kategori">
              <Select value="Tekne" onChange={()=>{}} options={CATEGORIES.map(c=>({value:c.name, label:c.name}))}/>
            </Field>
            <Field label="Alt Kategori">
              <Select value="Gün batımı" onChange={()=>{}} options={[{value:'Gün batımı',label:'Gün batımı'}]}/>
            </Field>
            <Field label="Destinasyon">
              <Select value="İstanbul" onChange={()=>{}} options={DESTINATIONS.map(d=>({value:d.name,label:d.name}))}/>
            </Field>
            <Field label="Semt"><Input defaultValue="Karaköy"/></Field>
            <Field label="Süre"><Input defaultValue="2.5 saat"/></Field>
            <Field label="Maks. Grup"><Input type="number" defaultValue="12"/></Field>
          </div>
          <Field label="Uzun Açıklama (TR)" hint="Markdown destekli. Öne çıkanları liste olarak ver.">
            <TextArea rows={6} defaultValue="Akşam ışığında Boğaz'ın en güzel hâlini yaşa..."/>
          </Field>
          <Field label="Etiketler">
            <div style={{display:'flex', gap:6, flexWrap:'wrap', padding:10, border:'1px solid var(--color-line-strong)', borderRadius:'var(--r-md)', minHeight:42}}>
              {['gün batımı','tekne','boğaz','romantik','grup-dostu'].map(t => <Pill key={t}>{t} <Icon name="x" size={10}/></Pill>)}
              <input placeholder="Etiket ekle..." style={{border:0, outline:'none', background:'transparent', fontSize:13, flex:1, minWidth:100}}/>
            </div>
          </Field>
        </div>}

        {step === 1 && <div>
          <div className="field-label">Kapak Görseli</div>
          <div style={{border:'2px dashed var(--color-line-strong)', borderRadius:'var(--r-lg)', padding:40, textAlign:'center', background:'var(--color-surface)'}}>
            <Icon name="upload" size={32} style={{color:'var(--color-ink-low)'}}/>
            <div style={{fontSize:14, fontWeight:600, marginTop:10}}>Dosyaları buraya sürükle</div>
            <div style={{fontSize:12, color:'var(--color-ink-low)', marginTop:4}}>JPG, PNG · maks 5MB · 1600×1200 önerilir</div>
            <Btn variant="secondary" style={{marginTop:14}}>Dosya Seç</Btn>
          </div>
          <div className="field-label" style={{marginTop:24}}>Galeri (7/12)</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:10}}>
            {Array.from({length:7}).map((_,i) => <div key={i} style={{position:'relative', aspectRatio:'1'}}>
              <img src={IMG('gal'+i,300,300)} style={{width:'100%', height:'100%', objectFit:'cover', borderRadius:'var(--r-sm)'}}/>
              <button style={{position:'absolute', top:4, right:4, width:22, height:22, borderRadius:'50%', background:'rgba(0,0,0,.7)', color:'#fff', border:0, fontSize:10, cursor:'default'}}>×</button>
            </div>)}
            <div style={{aspectRatio:'1', border:'2px dashed var(--color-line-strong)', borderRadius:'var(--r-sm)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--color-ink-low)'}}>
              <Icon name="plus" size={20}/>
            </div>
          </div>
        </div>}

        {step === 2 && <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {OPTIONS.filter(o=>o.listingId===1).map(o => <div key={o.id} className="card" style={{padding:20, border:'1px solid var(--color-line)'}}>
            <div style={{display:'flex', justifyContent:'space-between', marginBottom:12}}>
              <div style={{fontSize:15, fontWeight:700}}>{o.name}</div>
              <div style={{display:'flex', gap:4}}>
                <Btn variant="ghost" size="sm" icon="edit"/>
                <Btn variant="ghost" size="sm" icon="trash"/>
              </div>
            </div>
            <div style={{fontSize:13, color:'var(--color-ink-dim)', marginBottom:10}}>{o.desc}</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10}}>
              {o.pricing.map(p => <div key={p.label} className="card" style={{padding:10, background:'var(--color-surface-muted)'}}>
                <div style={{fontSize:11, color:'var(--color-ink-dim)', fontWeight:600}}>{p.label}</div>
                <div className="tnum" style={{fontSize:16, fontWeight:700, marginTop:4}}>{p.price.toLocaleString('tr-TR')} ₺</div>
              </div>)}
            </div>
          </div>)}
          <Btn variant="secondary" icon="plus" style={{alignSelf:'flex-start'}}>Paket Ekle</Btn>
        </div>}

        {step === 3 && <div>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {[
              {time:'17:30', title:'Karaköy İskelesi\'nde buluşma', desc:'Kaptan karşılar, güvenlik brifingi'},
              {time:'18:00', title:'Boğaz\'a çıkış', desc:'Karaköy → Beylerbeyi rotası'},
              {time:'18:45', title:'Gün batımı molası', desc:'Anadolu Kavağı açıklarında fotoğraf durağı'},
              {time:'19:45', title:'Akşam yemeği servisi', desc:'Teknede meze tabağı + ana yemek'},
              {time:'20:30', title:'Dönüş', desc:'Kız Kulesi önünden Karaköy\'e'},
            ].map((s,i) => <div key={i} style={{display:'flex', gap:14, alignItems:'flex-start'}}>
              <div className="tnum" style={{width:56, fontWeight:700, color:'var(--color-brand-600)', fontSize:13}}>{s.time}</div>
              <div style={{display:'flex', flexDirection:'column', alignItems:'center', paddingTop:4}}>
                <div style={{width:10, height:10, borderRadius:'50%', background:'var(--color-brand-500)', border:'2px solid var(--color-surface-raised)', boxShadow:'0 0 0 2px var(--color-brand-500)'}}/>
                {i < 4 && <div style={{width:2, height:40, background:'var(--color-line-strong)'}}/>}
              </div>
              <div style={{flex:1, paddingBottom:20}}>
                <div style={{fontSize:14, fontWeight:700}}>{s.title}</div>
                <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:2}}>{s.desc}</div>
              </div>
              <Btn variant="ghost" size="sm" icon="edit"/>
            </div>)}
          </div>
          <Btn variant="secondary" icon="plus" style={{marginTop:14}}>Adım Ekle</Btn>
        </div>}

        {step >= 4 && <div style={{textAlign:'center', padding:40, color:'var(--color-ink-dim)'}}>
          <Icon name="edit" size={40} style={{opacity:.4}}/>
          <div style={{marginTop:14, fontSize:14}}>Bu sekme form alanı içerir — düzenlemek için tıkla.</div>
        </div>}
      </div>

      <aside style={{position:'sticky', top:100}}>
        <div className="card" style={{padding:18}}>
          <div style={{fontSize:13, fontWeight:700, marginBottom:12}}>Tamamlanma</div>
          <div style={{background:'var(--color-surface-sunken)', borderRadius:'var(--r-pill)', height:8, overflow:'hidden', marginBottom:10}}>
            <div style={{width:'72%', height:'100%', background:'var(--color-brand-500)'}}/>
          </div>
          <div style={{fontSize:12, color:'var(--color-ink-dim)'}}>72% tamamlandı — yayınlamadan önce 2 alan gerekli.</div>
          <div style={{marginTop:16, paddingTop:14, borderTop:'1px solid var(--color-line)', display:'flex', flexDirection:'column', gap:6}}>
            {[['Temel bilgi',true],['Kapak görseli',true],['En az 4 fotoğraf',true],['En az 1 paket',true],['Program adımları',false],['Politika & İptal',false]].map(([l,done]) =>
              <div key={l} style={{display:'flex', alignItems:'center', gap:8, fontSize:12}}>
                <Icon name={done?'check':'circle'} size={13} style={{color:done?'var(--color-success-deep)':'var(--color-ink-low)'}}/>
                <span style={{color: done?'var(--color-ink):':'var(--color-ink-dim)'}}>{l}</span>
              </div>)}
          </div>
        </div>
      </aside>
    </div>
  </div>;
};

// Simplified rest
const SupplierSimplePage = ({ title, children }) => <div>
  <h3 style={{marginBottom:20}}>{title}</h3>
  {children}
</div>;

const SupplierBookings = () => <div>
  <div style={{display:'flex', gap:8, marginBottom:16}}>
    {['Tümü','Onay Bekliyor','Onaylı','Tamamlandı','İptal'].map((t,i) => <Chip key={t} active={i===0}>{t}</Chip>)}
  </div>
  <Table
    columns={[
      {key:'ref', head:'Ref', width:120},
      {key:'customer', head:'Misafir'},
      {key:'activity', head:'Aktivite'},
      {key:'date', head:'Tarih', width:110},
      {key:'pax', head:'Kişi', width:60, align:'right'},
      {key:'total', head:'Toplam', width:110, align:'right'},
      {key:'status', head:'Durum', width:130},
      {key:'actions', head:'', width:100},
    ]}
    rows={BOOKINGS.map(b => {
      const l = LISTINGS.find(x=>x.id===b.listingId);
      return {
        ref: <span className="mono" style={{fontSize:12, fontWeight:600}}>{b.ref}</span>,
        customer: <div style={{display:'flex', alignItems:'center', gap:8}}>
          <Avatar name={b.customer} size={28}/><span style={{fontWeight:600}}>{b.customer}</span>
        </div>,
        activity: <span style={{fontSize:13}}>{l?.title}</span>,
        date: b.travelDate,
        pax: <span className="tnum">{b.participants}</span>,
        total: <span className="tnum" style={{fontWeight:600}}>{b.total.toLocaleString('tr-TR')} ₺</span>,
        status: <StatusPill status={b.status}/>,
        actions: <div style={{display:'flex', gap:4, justifyContent:'flex-end'}}>
          <Btn variant="ghost" size="sm" icon="eye"/>
          <Btn variant="ghost" size="sm" icon="message"/>
        </div>,
      };
    })}
  />
</div>;

const SupplierCalendar = () => {
  const days = Array.from({length:35}, (_,i) => i - 2);
  const events = {3:[{t:'09:00',c:'var(--color-brand-500)'}], 7:[{t:'14:00',c:'var(--color-info)'}], 12:[{t:'17:30',c:'var(--color-brand-500)'},{t:'19:00',c:'var(--color-success-deep)'}], 15:[{t:'17:30',c:'var(--color-brand-500)'}], 18:[{t:'10:00',c:'var(--color-warn-deep)'}], 22:[{t:'17:30',c:'var(--color-brand-500)'},{t:'19:30',c:'var(--color-brand-500)'}], 25:[{t:'17:30',c:'var(--color-brand-500)'}]};
  return <div>
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20}}>
      <div style={{display:'flex', alignItems:'center', gap:10}}>
        <Btn variant="ghost" size="sm" icon="arrow-left"/>
        <h3 style={{fontSize:24}}>Nisan 2026</h3>
        <Btn variant="ghost" size="sm" icon="arrow"/>
      </div>
      <div style={{display:'flex', gap:8}}>
        <Segmented options={['Ay','Hafta','Gün']} value="Ay" onChange={()=>{}}/>
        <Btn variant="primary" size="sm" icon="plus">Müsaitlik Ekle</Btn>
      </div>
    </div>
    <div className="card" style={{padding:16, overflow:'hidden'}}>
      <div style={{display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:2, fontSize:11, fontWeight:700, color:'var(--color-ink-dim)', textAlign:'center', marginBottom:8}}>
        {['Pzt','Sal','Çar','Per','Cum','Cmt','Paz'].map(d => <div key={d} style={{padding:6}}>{d}</div>)}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:2}}>
        {days.map(d => <div key={d} style={{minHeight:110, padding:8, background: d>0 && d<=30 ? 'var(--color-surface-raised)' : 'var(--color-surface)', borderRadius:'var(--r-sm)', border:'1px solid var(--color-line-soft)', display:'flex', flexDirection:'column', gap:3}}>
          <div className="tnum" style={{fontSize:12, fontWeight:700, color: d>0 && d<=30 ? 'var(--color-ink)' : 'var(--color-ink-soft)'}}>{d>0 && d<=30 ? d : ''}</div>
          {(events[d]||[]).map((e,i) => <div key={i} style={{padding:'2px 6px', fontSize:10, background:e.c, color:'#fff', borderRadius:3, fontWeight:600}}>{e.t}</div>)}
        </div>)}
      </div>
    </div>
  </div>;
};

const SupplierFinance = () => <div>
  <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:24}}>
    {[['Bu Ayki Kazanç','42.180 ₺','+12%','up'],['Bekleyen Ödeme','8.420 ₺','3 kalem'],['Komisyon Kesintisi','4.218 ₺','%10'],['Sonraki Havale','15 Mayıs','37.962 ₺']].map(([l,v,d,t]) =>
      <div key={l} className="card" style={{padding:18}}>
        <div style={{fontSize:12, color:'var(--color-ink-dim)', fontWeight:600}}>{l}</div>
        <div className="tnum" style={{fontSize:26, fontWeight:800, marginTop:6, letterSpacing:'-0.03em'}}>{v}</div>
        {d && <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4}}>{d}</div>}
      </div>)}
  </div>
  <Table
    columns={[
      {key:'date', head:'Tarih', width:110},
      {key:'ref', head:'Referans', width:140},
      {key:'activity', head:'Aktivite'},
      {key:'gross', head:'Brüt', width:100, align:'right'},
      {key:'fee', head:'Komisyon', width:100, align:'right'},
      {key:'net', head:'Net', width:100, align:'right'},
      {key:'status', head:'Durum', width:120},
    ]}
    rows={BOOKINGS.slice(0,8).map(b => ({
      date: b.travelDate,
      ref: <span className="mono">{b.ref}</span>,
      activity: LISTINGS.find(l=>l.id===b.listingId)?.title,
      gross: <span className="tnum">{b.total.toLocaleString('tr-TR')} ₺</span>,
      fee: <span className="tnum" style={{color:'var(--color-danger-deep)'}}>-{Math.round(b.total*0.1).toLocaleString('tr-TR')} ₺</span>,
      net: <span className="tnum" style={{fontWeight:700}}>{Math.round(b.total*0.9).toLocaleString('tr-TR')} ₺</span>,
      status: <StatusPill status={b.status==='Confirmed'?'Paid':b.status==='Completed'?'Paid':'Pending'}/>,
    }))}
  />
</div>;

const SupplierStats = () => <div>
  <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginBottom:24}}>
    {[['Görüntülenme','18.420','+23%'],['Dönüşüm','4.2%','-0.3%'],['Ort. Sepet','1.823 ₺','+5%']].map(([l,v,d]) =>
      <div key={l} className="card" style={{padding:20}}>
        <div style={{fontSize:12, color:'var(--color-ink-dim)', fontWeight:600}}>{l}</div>
        <div className="tnum" style={{fontSize:30, fontWeight:800, marginTop:8, letterSpacing:'-0.03em'}}>{v}</div>
        <div style={{fontSize:12, color:d[0]==='-'?'var(--color-danger-deep)':'var(--color-success-deep)', marginTop:4, fontWeight:600}}>{d}</div>
      </div>)}
  </div>
  <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:20, marginBottom:20}}>
    <div className="card" style={{padding:24}}>
      <div style={{fontSize:14, fontWeight:700, marginBottom:16}}>Görüntülenme vs Rezervasyon (30g)</div>
      <BarChart data={genSpark(i=>60+Math.sin(i*0.4)*15+i*1.5, 30)} height={200}/>
    </div>
    <div className="card" style={{padding:20}}>
      <div style={{fontSize:14, fontWeight:700, marginBottom:14}}>Trafik Kaynakları</div>
      {[['Organik arama',38],['Doğrudan',24],['Sosyal medya',18],['Blog içeriği',14],['Diğer',6]].map(([s,p]) =>
        <div key={s} style={{padding:'8px 0'}}>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:12, marginBottom:6}}>
            <span style={{fontWeight:600}}>{s}</span><span className="tnum" style={{color:'var(--color-ink-dim)'}}>{p}%</span>
          </div>
          <div style={{height:6, background:'var(--color-surface-sunken)', borderRadius:3, overflow:'hidden'}}>
            <div style={{width:`${p}%`, height:'100%', background:'var(--color-brand-500)'}}/>
          </div>
        </div>)}
    </div>
  </div>
</div>;

const SupplierReviews = () => <div>
  <div className="card" style={{padding:24, marginBottom:20, display:'grid', gridTemplateColumns:'auto 1fr auto', gap:32, alignItems:'center'}}>
    <div style={{textAlign:'center'}}>
      <div className="tnum" style={{fontSize:56, fontWeight:800, letterSpacing:'-0.03em'}}>4.8</div>
      <Stars value={4.8} size={14}/>
      <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:6}}>284 yorum</div>
    </div>
    <div>
      {[[5,82],[4,12],[3,4],[2,1],[1,1]].map(([s,p]) =>
        <div key={s} style={{display:'flex', alignItems:'center', gap:10, padding:'3px 0'}}>
          <span style={{fontSize:11, width:14, color:'var(--color-ink-dim)'}}>{s}★</span>
          <div style={{flex:1, height:6, background:'var(--color-surface-sunken)', borderRadius:3, overflow:'hidden'}}>
            <div style={{width:`${p}%`, height:'100%', background:'var(--color-brand-500)'}}/>
          </div>
          <span className="tnum" style={{fontSize:11, color:'var(--color-ink-dim)', width:32, textAlign:'right'}}>{p}%</span>
        </div>)}
    </div>
    <div>
      <div style={{fontSize:12, color:'var(--color-ink-dim)', fontWeight:600}}>Yanıt Oranı</div>
      <div className="tnum" style={{fontSize:28, fontWeight:800}}>94%</div>
    </div>
  </div>

  <div style={{display:'flex', gap:8, marginBottom:16}}>
    {['Tümü','Yanıt bekliyor','Yanıtladıklarım','Bayraklı'].map((t,i) => <Chip key={t} active={i===0}>{t}</Chip>)}
  </div>

  <div style={{display:'grid', gap:14}}>
    {REVIEWS.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">Doğrulandı</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} · {r.listing||'Gün batımı Boğaz turu'}</span>
          </div>
        </div>
        {!r.reply && <Btn variant="primary" size="sm">Yanıtla</Btn>}
      </div>
      <div style={{fontSize:14, fontWeight:700, marginBottom:4}}>{r.title}</div>
      <p style={{fontSize:14, color:'var(--color-ink)'}}>{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}}>Yanıtınız · {r.reply.name}</div>
        <div style={{fontSize:13, color:'var(--color-ink-dim)'}}>{r.reply.text}</div>
      </div>}
    </div>)}
  </div>
</div>;

const SupplierMessages = () => <div style={{height:'calc(100vh - 140px)'}}>
  <div style={{display:'grid', gridTemplateColumns:'300px 1fr 280px', height:'100%', 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', borderBottom:'1px solid var(--color-line-soft)'}}>
        <Input placeholder="Sohbet ara..."/>
      </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', display:'flex', gap:10}}>
        <Avatar src={m.avatar} name={m.customer||m.supplier} size={40}/>
        <div style={{flex:1, minWidth:0}}>
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <strong style={{fontSize:13}}>{m.customer||m.supplier}</strong>
            <span style={{fontSize:11, color:'var(--color-ink-low)'}}>{m.time}</span>
          </div>
          <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{m.lastMsg}</div>
        </div>
      </div>)}
    </div>
    <div style={{display:'flex', flexDirection:'column'}}>
      <div style={{padding:'14px 20px', borderBottom:'1px solid var(--color-line)'}}>
        <strong>{MESSAGES[0].customer||MESSAGES[0].supplier}</strong>
        <div style={{fontSize:12, color:'var(--color-ink-low)'}}>Ref: VG-2026-04821</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:'60%'}}>
          <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="Yanıtla..."/>
        <Btn variant="ghost" icon="paperclip"/>
        <Btn variant="primary" icon="arrow"/>
      </div>
    </div>
    <div style={{borderLeft:'1px solid var(--color-line)', padding:20}}>
      <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', textTransform:'uppercase', letterSpacing:'.08em', marginBottom:10}}>Müşteri</div>
      <Avatar src={MESSAGES[0].avatar} name={MESSAGES[0].customer} size={56}/>
      <div style={{fontSize:15, fontWeight:700, marginTop:10}}>{MESSAGES[0].customer||'Elif K.'}</div>
      <div style={{fontSize:12, color:'var(--color-ink-dim)', marginTop:2}}>İstanbul, Türkiye</div>
      <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', textTransform:'uppercase', letterSpacing:'.08em', marginTop:24, marginBottom:10}}>Rezervasyon</div>
      <div className="card" style={{padding:12}}>
        <div style={{fontSize:13, fontWeight:700}}>Gün batımı Boğaz turu</div>
        <div style={{fontSize:11, color:'var(--color-ink-dim)', marginTop:2}}>05 Mayıs 2026 · 2 kişi</div>
        <div className="mono" style={{fontSize:11, marginTop:4}}>VG-2026-04821</div>
      </div>
    </div>
  </div>
</div>;

const SupplierSettings = () => <div style={{maxWidth:720}}>
  <Segmented options={['Profil','Hesap','Ödeme','API','Bildirimler']} value="Profil" onChange={()=>{}}/>
  <div className="card" style={{padding:28, marginTop:20}}>
    <h4>Şirket Profili</h4>
    <div style={{marginTop:20, display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
      <Field label="Şirket Adı"><Input defaultValue="Boğaz Denizcilik Tur. Ltd. Şti."/></Field>
      <Field label="Marka Adı"><Input defaultValue="Boğaz Denizcilik"/></Field>
      <Field label="Vergi No"><Input defaultValue="1234567890"/></Field>
      <Field label="TURSAB No"><Input defaultValue="A-3421"/></Field>
      <Field label="E-posta"><Input defaultValue="info@bogazdeniz.com"/></Field>
      <Field label="Telefon"><Input defaultValue="+90 212 000 00 00"/></Field>
    </div>
    <Field label="Hakkımızda" style={{marginTop:14}}>
      <TextArea rows={4} defaultValue="2014'ten bu yana Boğaz'ın en güzel rotalarında küçük grup turları..."/>
    </Field>
    <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">Kaydet</Btn>
    </div>
  </div>
</div>;

const SupplierApplyPage = ({ onNav }) => {
  const [step, setStep] = React.useState(0);
  const [bizType, setBizType] = React.useState('activity');
  const steps = ['Hizmet Türü','Giriş','Şirket','Belgeler','Onay'];

  return <div style={{minHeight:'100vh', background:'var(--color-surface)', padding:'40px 20px'}}>
    <div style={{maxWidth:720, margin:'0 auto'}}>
      <button onClick={()=>onNav('home')} style={{display:'flex', alignItems:'center', gap:10, padding:0, border:0, background:'transparent', marginBottom:24, cursor:'default'}}>
        <Logo size={64}/>
      </button>
      <div className="eyebrow">TEDARİKÇİ BAŞVURUSU</div>
      <h1 style={{fontSize:42, marginTop:8}}>Deneyimini paylaş, kazanmaya başla.</h1>
      <p style={{fontSize:16, color:'var(--color-ink-dim)', marginTop:12, maxWidth:560}}>
        Doğrulanmış tedarikçi olarak listelerini yayımla. Onay süreci yaklaşık 48 saat.
      </p>

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

      <div className="card" style={{padding:32}}>
        {step===0 && <>
          <h4>Ne tür hizmet veriyorsun?</h4>
          <p style={{fontSize:13, color:'var(--color-ink-dim)', marginTop:6}}>Seçimine göre uygun panel ve formlar açılır. Sonradan değiştirilemez; her ikisi için de ayrı başvuru yapılabilir.</p>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:20}}>
            {[
              {key:'activity', icon:'compass', title:'Tur & Aktivite', desc:'Tekne turu, dalış, rehberli gezi, atölye, transfer, bilet vb.', features:['Aktivite katalog yönetimi','Saatlik kontenjan','Paket & ekstralar','Pickup & buluşma noktaları']},
              {key:'hotel', icon:'home', title:'Konaklama', desc:'Otel, butik tesis, villa, apart, pansiyon, glamping vb.', features:['Oda tipleri & stok','Rate planlar (BB/HB/AI)','Fiyat takvimi & promo','İptal politikaları']},
            ].map(opt => <button key={opt.key} onClick={()=>setBizType(opt.key)}
              style={{textAlign:'left', padding:20, border: bizType===opt.key ? '2px solid var(--color-brand-500)' : '1px solid var(--color-line-strong)', borderRadius:'var(--r-lg)', background: bizType===opt.key ? 'var(--color-brand-50)' : 'var(--color-surface-raised)', cursor:'default', display:'flex', flexDirection:'column', gap:10}}>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div style={{width:36, height:36, borderRadius:'var(--r-md)', background: bizType===opt.key ? 'var(--color-brand-500)' : 'var(--color-surface-sunken)', color: bizType===opt.key ? '#fff' : 'var(--color-ink-dim)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <Icon name={opt.icon} size={18}/>
                </div>
                <div style={{fontSize:16, fontWeight:700}}>{opt.title}</div>
              </div>
              <div style={{fontSize:12, color:'var(--color-ink-dim)', lineHeight:1.5}}>{opt.desc}</div>
              <div style={{display:'flex', flexDirection:'column', gap:4, marginTop:6}}>
                {opt.features.map(f => <div key={f} style={{display:'flex', alignItems:'center', gap:6, fontSize:11, color:'var(--color-ink-dim)'}}>
                  <Icon name="check" size={11} style={{color:'var(--color-success-deep)'}}/>{f}
                </div>)}
              </div>
            </button>)}
          </div>
        </>}
        {step===1 && <>
          <h4>İletişim Bilgileri</h4>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:20}}>
            <Field label="Ad"><Input/></Field>
            <Field label="Soyad"><Input/></Field>
            <Field label="E-posta"><Input type="email"/></Field>
            <Field label="Telefon"><Input/></Field>
          </div>
        </>}
        {step===2 && <>
          <h4>{bizType==='hotel' ? 'Tesis Bilgileri' : 'Şirket Bilgileri'}</h4>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:20}}>
            <Field label={bizType==='hotel' ? 'Tesis Adı' : 'Şirket Adı'}><Input/></Field>
            <Field label="Vergi No"><Input/></Field>
            <Field label={bizType==='hotel' ? 'Turizm İşletme Belgesi' : 'TURSAB / Ruhsat'}><Input/></Field>
            <Field label={bizType==='hotel' ? 'Oda Sayısı' : 'Yıllık Kapasite'}>
              <Select value="" onChange={()=>{}} options={bizType==='hotel'
                ? [{value:'',label:'Seç...'},{value:'a',label:'< 20 oda'},{value:'b',label:'20–80 oda'},{value:'c',label:'80+ oda'}]
                : [{value:'',label:'Seç...'},{value:'a',label:'< 500 misafir'},{value:'b',label:'500–5.000'},{value:'c',label:'5.000+'}]}/>
            </Field>
            {bizType==='activity' && <Field label="Ana Kategori" style={{gridColumn:'1/-1'}}><Select value="" onChange={()=>{}} options={[{value:'',label:'Seç...'},...CATEGORIES.map(c=>({value:c.slug,label:c.name}))]}/></Field>}
            {bizType==='hotel' && <Field label="Tesis Tipi" style={{gridColumn:'1/-1'}}><Select value="" onChange={()=>{}} options={[{value:'',label:'Seç...'},{value:'hotel',label:'Otel'},{value:'boutique',label:'Butik Otel'},{value:'villa',label:'Villa'},{value:'apart',label:'Apart'},{value:'pension',label:'Pansiyon'},{value:'glamping',label:'Glamping / Bungalov'}]}/></Field>}
          </div>
        </>}
        {step===3 && <>
          <h4>Gerekli Belgeler</h4>
          <div style={{display:'flex', flexDirection:'column', gap:12, marginTop:20}}>
            {(bizType==='hotel'
              ? ['Vergi Levhası','Turizm İşletme Belgesi','İmza Sirküleri','Yangın & Güvenlik Raporu']
              : ['Vergi Levhası','TURSAB Belgesi / İşletme Ruhsatı','Sorumluluk Sigortası','İmza Sirküleri']
            ).map(d =>
              <div key={d} style={{display:'flex', alignItems:'center', gap:14, padding:14, border:'1px dashed var(--color-line-strong)', borderRadius:'var(--r-md)'}}>
                <Icon name="file" size={18} style={{color:'var(--color-ink-dim)'}}/>
                <div style={{flex:1}}>
                  <div style={{fontSize:14, fontWeight:600}}>{d}</div>
                  <div style={{fontSize:12, color:'var(--color-ink-low)'}}>PDF · maks 10 MB</div>
                </div>
                <Btn variant="secondary" size="sm">Yükle</Btn>
              </div>)}
          </div>
        </>}
        {step===4 && <div style={{textAlign:'center', padding:'20px 0'}}>
          <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:16}}><Icon name="check" size={40}/></div>
          <h3>Başvurun alındı!</h3>
          <p style={{color:'var(--color-ink-dim)', marginTop:8, fontSize:14}}>
            {bizType==='hotel' ? 'Konaklama' : 'Tur & Aktivite'} tedarikçisi olarak başvurun değerlendirmeye alındı. 48 saat içinde e-posta ile dönüş yapacağız.
          </p>
        </div>}

        <div style={{display:'flex', justifyContent:'space-between', marginTop:28, paddingTop:20, borderTop:'1px solid var(--color-line)'}}>
          <Btn variant="ghost" onClick={()=>step>0 && setStep(step-1)} disabled={step===0}>Geri</Btn>
          {step<4 && <Btn variant="primary" iconRight="arrow" onClick={()=>setStep(step+1)}>{step===3?'Başvuruyu Gönder':'Devam Et'}</Btn>}
        </div>
      </div>
    </div>
  </div>;
};

Object.assign(window, { SupplierLayout, SupplierDashboard, SupplierListings, SupplierListingForm, SupplierBookings, SupplierCalendar, SupplierFinance, SupplierStats, SupplierReviews, SupplierMessages, SupplierSettings, SupplierApplyPage });