// Design System page — tokens, typography, components

const DS_Section = ({ title, desc, children }) => (
  <section style={{marginBottom:56}}>
    <div style={{marginBottom:20}}>
      <h3 style={{fontSize:22, marginBottom:4}}>{title}</h3>
      {desc && <p style={{color:'var(--color-ink-dim)', fontSize:14, maxWidth:640}}>{desc}</p>}
    </div>
    {children}
  </section>
);

const Swatch = ({ name, value, note, contrast='dark' }) => (
  <div style={{display:'flex', flexDirection:'column', gap:6}}>
    <div style={{height:72, borderRadius:'var(--r-md)', background:value, border:'1px solid var(--color-line)',
      display:'flex', alignItems:'flex-end', padding:10,
      color: contrast==='light' ? '#fff' : 'var(--color-ink-strong)'}}>
      {note && <span style={{fontSize:10, fontWeight:700, letterSpacing:'.06em', textTransform:'uppercase', opacity:.8}}>{note}</span>}
    </div>
    <div style={{display:'flex', justifyContent:'space-between', fontSize:11}}>
      <span style={{fontWeight:700}}>{name}</span>
      <span className="mono" style={{color:'var(--color-ink-dim)'}}>{value}</span>
    </div>
  </div>
);

const DesignSystemPage = () => {
  const [favs, toggleFav] = useFavorites();
  const [modal, setModal] = React.useState(false);

  return <div style={{maxWidth:1280, margin:'0 auto', padding:'48px 32px 80px'}}>
    <div style={{marginBottom:48}}>
      <div className="eyebrow" style={{color:'var(--color-brand-600)'}}>DESIGN SYSTEM · V1.0</div>
      <h1 style={{fontSize:64, marginTop:10, marginBottom:16}}>Vagoonya Tasarım Sistemi</h1>
      <p style={{fontSize:18, color:'var(--color-ink-dim)', maxWidth:720, lineHeight:1.6}}>
        Editoryal bir seyahat dergisiyle sıcak bir yerel pazarın buluştuğu yer — tonlar, tipografi ve bileşenler.
      </p>
    </div>

    {/* COLORS */}
    <DS_Section title="Renkler" desc="Sıcak bir krem belge + gün batımı portakal. Markanın kalbinde 'on-brand' sıcak krem vardır — saf beyaz asla turuncu üzerine gelmez.">
      <div style={{marginBottom:28}}>
        <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', letterSpacing:'.1em', textTransform:'uppercase', marginBottom:12}}>Yüzeyler</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:12}}>
          <Swatch name="page"           value="#ffffff" note="PAGE"/>
          <Swatch name="surface"        value="#fbf7f2" note="DEFAULT"/>
          <Swatch name="surface-raised" value="#ffffff" note="CARD"/>
          <Swatch name="surface-muted"  value="#f5efe7" note="SECTION"/>
          <Swatch name="surface-sunken" value="#f0e8dd" note="INSET"/>
        </div>
      </div>
      <div style={{marginBottom:28}}>
        <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', letterSpacing:'.1em', textTransform:'uppercase', marginBottom:12}}>Mürekkep (metin)</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:12}}>
          <Swatch name="ink-strong" value="#1f1209" note="HEADLINE" contrast="light"/>
          <Swatch name="ink"        value="#2d1b0e" note="BODY" contrast="light"/>
          <Swatch name="ink-dim"    value="#6b5a4d" note="SECONDARY" contrast="light"/>
          <Swatch name="ink-low"    value="#9c8a7b" note="CAPTION" contrast="light"/>
          <Swatch name="ink-soft"   value="#bfb3a4" note="PLACEHOLDER"/>
        </div>
      </div>
      <div style={{marginBottom:28}}>
        <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', letterSpacing:'.1em', textTransform:'uppercase', marginBottom:12}}>Marka · Sunset teracotta · #D97757</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:12}}>
          <Swatch name="brand-50"  value="var(--color-brand-50)"/>
          <Swatch name="brand-100" value="var(--color-brand-100)"/>
          <Swatch name="brand-300" value="var(--color-brand-300)" note="HOVER" contrast="light"/>
          <Swatch name="brand-500" value="var(--color-brand-500)" note="CANONICAL" contrast="light"/>
          <Swatch name="brand-600" value="var(--color-brand-600)" note="PRESSED" contrast="light"/>
          <Swatch name="brand-700" value="var(--color-brand-700)" contrast="light"/>
        </div>
        <div style={{marginTop:12, padding:14, background:'var(--color-brand-500)', borderRadius:'var(--r-md)', display:'flex', alignItems:'center', gap:14}}>
          <span style={{color:'var(--color-on-brand)', fontSize:15, fontWeight:700}}>Beyaz üzerine canonical teracotta — rgb(217,119,87)</span>
          <span style={{marginLeft:'auto', color:'var(--color-on-brand)', fontSize:12, fontWeight:600, opacity:.8}}>AA · 14px+ bold</span>
        </div>
      </div>
      <div>
        <div style={{fontSize:12, fontWeight:700, color:'var(--color-ink-dim)', letterSpacing:'.1em', textTransform:'uppercase', marginBottom:12}}>Durum</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12}}>
          <Swatch name="success" value="var(--color-success)"/>
          <Swatch name="warn"    value="var(--color-warn)"/>
          <Swatch name="danger"  value="var(--color-danger)"/>
          <Swatch name="info"    value="var(--color-info)"/>
        </div>
      </div>
    </DS_Section>

    {/* TYPOGRAPHY */}
    <DS_Section title="Tipografi" desc="Manrope 400–800. Başlıklarda sıkı tracking (-0.035em), gövde 15–16px / 1.6.">
      <div className="card" style={{padding:28}}>
        {[
          ['Display 72 · 800', 72, 800, '-0.045em', 'Şehrin ritmine göre yaşa.'],
          ['H1 · 44 · 700', 44, 700, '-0.035em', 'Editör Seçkisi'],
          ['H2 · 28 · 700', 28, 700, '-0.025em', 'Öne Çıkan Aktiviteler'],
          ['H3 · 20 · 700', 20, 700, '-0.015em', 'Boğaz\'da Gün Batımı Teknesi'],
          ['Body L · 18 · 400', 18, 400, '0', 'Akşam ışığında Boğaz\'ın en güzel hâlini yaşa.'],
          ['Body · 15 · 400', 15, 400, '0', 'Profesyonel kaptan, sınırsız Türk kahvesi ve küçük grup.'],
          ['Caption · 12 · 500', 12, 500, '0', 'Anında onay · İptal politikası geçerli'],
          ['Eyebrow · 11 · 700 · 0.14em', 11, 700, '0.14em', 'VAGOONYA · AKTİVİTE'],
        ].map(([label, size, weight, tracking, text], i) => (
          <div key={i} style={{display:'grid', gridTemplateColumns:'200px 1fr', gap:24, padding:'14px 0', borderBottom: i<7 ? '1px solid var(--color-line-soft)' : 'none'}}>
            <div style={{fontSize:11, fontWeight:600, color:'var(--color-ink-low)', letterSpacing:'.06em', fontFamily:'JetBrains Mono, monospace'}}>{label}</div>
            <div style={{fontSize:size, fontWeight:weight, letterSpacing:tracking, textTransform: tracking==='0.14em'?'uppercase':'none', lineHeight:1.15}}>{text}</div>
          </div>
        ))}
      </div>
    </DS_Section>

    {/* BUTTONS */}
    <DS_Section title="Düğmeler" desc="7 varyant. Radius 14px, focus ring brand-500 @ 2px + 2px offset.">
      <div className="card" style={{padding:24, display:'flex', gap:10, flexWrap:'wrap'}}>
        <Btn variant="primary" icon="plus">Rezervasyon Yap</Btn>
        <Btn variant="secondary">Favorilere Ekle</Btn>
        <Btn variant="outline" iconRight="arrow">Keşfet</Btn>
        <Btn variant="ghost" icon="settings">Ayarlar</Btn>
        <Btn variant="dark">Tedarikçi Ol</Btn>
        <Btn variant="danger" icon="trash">Sil</Btn>
        <Btn variant="link">Şifremi unuttum</Btn>
      </div>
      <div style={{marginTop:12}} className="card">
        <div style={{padding:24, display:'flex', gap:10, flexWrap:'wrap', alignItems:'center'}}>
          <Btn variant="primary" size="sm">Small</Btn>
          <Btn variant="primary">Medium</Btn>
          <Btn variant="primary" size="lg">Large</Btn>
        </div>
      </div>
    </DS_Section>

    {/* BADGES */}
    <DS_Section title="Rozetler ve çipler" desc="Durum tonları: neutral / brand / success / warn / danger / info.">
      <div className="card" style={{padding:24, display:'flex', gap:8, flexWrap:'wrap', alignItems:'center'}}>
        <Pill>Standart</Pill>
        <Pill tone="brand">Öne Çıkan</Pill>
        <Pill tone="success">Aktif</Pill>
        <Pill tone="warn">Onay Bekliyor</Pill>
        <Pill tone="danger">Reddedildi</Pill>
        <Pill tone="info">Bilgi</Pill>
        <Pill tone="dark">Yeni</Pill>
        <span style={{marginLeft:16, color:'var(--color-line)'}}>·</span>
        <Chip>Solo</Chip>
        <Chip active>Çift</Chip>
        <Chip>Aile</Chip>
        <Chip>Grup</Chip>
      </div>
    </DS_Section>

    {/* FORMS */}
    <DS_Section title="Form alanları" desc="Radius 14px, focus ring %20 brand, yardım/hata metni 12px.">
      <div className="card" style={{padding:28, display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
        <Field label="E-posta" hint="Rezervasyon bilgileri bu adrese gelir."><Input type="email" placeholder="sen@example.com"/></Field>
        <Field label="Parola"><Input type="password" placeholder="••••••••"/></Field>
        <Field label="Destinasyon"><Select placeholder="Destinasyon seç" options={DESTINATIONS.map(d=>({value:d.slug,label:d.name}))}/></Field>
        <Field label="Tarih"><Input type="date"/></Field>
        <Field label="Mesajınız" style={{gridColumn:'1/-1'}}><TextArea placeholder="Rehberinize bir not bırakın..."/></Field>
        <Field label="Hatalı alan" error="E-posta adresi geçersiz."><Input value="elif@" onChange={()=>{}} style={{borderColor:'var(--color-danger-deep)'}}/></Field>
        <Field label="Segmented"><Segmented options={['Solo','Çift','Aile','Grup']} value="Çift" onChange={()=>{}}/></Field>
      </div>
    </DS_Section>

    {/* CARDS */}
    <DS_Section title="İlan kartı · 3 varyant" desc="Standart (3:2), geniş (yan yan), minimal (editör seçkisi).">
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20}}>
        <ListingCard l={LISTINGS[0]} variant="standard" favs={favs} toggleFav={toggleFav}/>
        <ListingCard l={LISTINGS[1]} variant="standard" favs={favs} toggleFav={toggleFav}/>
        <ListingCard l={LISTINGS[3]} variant="minimal" favs={favs} toggleFav={toggleFav}/>
      </div>
      <div style={{marginTop:16}}>
        <ListingCard l={LISTINGS[2]} variant="wide" favs={favs} toggleFav={toggleFav}/>
      </div>
    </DS_Section>

    {/* STATUS PILLS */}
    <DS_Section title="Durum rozetleri" desc="Listing ve booking durum-enum'ları için standart palet.">
      <div className="card" style={{padding:24, display:'flex', gap:8, flexWrap:'wrap'}}>
        {Object.keys(window.STATUS_TR).map(s => <StatusPill key={s} status={s}/>)}
      </div>
    </DS_Section>

    {/* MODAL TRIGGER */}
    <DS_Section title="Modal & toast">
      <div className="card" style={{padding:24, display:'flex', gap:10}}>
        <Btn variant="secondary" onClick={()=>setModal(true)}>Modal Aç</Btn>
        <Btn variant="secondary">Toast Göster</Btn>
      </div>
      <Modal open={modal} onClose={()=>setModal(false)} title="Örnek Modal"
        footer={<><Btn variant="ghost" onClick={()=>setModal(false)}>Vazgeç</Btn><Btn variant="primary" onClick={()=>setModal(false)}>Onayla</Btn></>}>
        <p style={{color:'var(--color-ink-dim)', lineHeight:1.6}}>
          Focus trap, aria-modal, backdrop blur, ESC/backdrop click ile kapanır. Kart yüzeyi
          rounded-2xl, shadow-elevated.
        </p>
      </Modal>
    </DS_Section>

    {/* ICONS */}
    <DS_Section title="İkon seti" desc="Outline stili, 1.75 stroke, yuvarlak uçlar. Lucide ile uyumlu.">
      <div className="card" style={{padding:24, display:'grid', gridTemplateColumns:'repeat(12,1fr)', gap:16}}>
        {['search','heart','star','calendar','clock','pin','users','user','message','share','globe','sun',
          'map','filter','grid','list','settings','bell','edit','trash','eye','upload','download',
          'sailboat','mountain','wind','camera','utensils','landmark','anchor','palette','truck'].map(n =>
          <div key={n} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:4, padding:8}}>
            <Icon name={n} size={20}/>
            <span style={{fontSize:10, color:'var(--color-ink-low)'}}>{n}</span>
          </div>)}
      </div>
    </DS_Section>
  </div>;
};

Object.assign(window, { DesignSystemPage });