// ============ Ula Belediyesi — Extra Pages ============

const { useState: useStateE } = React;

// === DETAY (Akyaka / Sedir / Geyik) ===
const PLACE_DETAILS = {
  akyaka: {
    title:'Akyaka & Azmak',
    eyebrow:'01 / SAHİL',
    hero:'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=2000&q=85',
    lead:{
      tr:'Gökova Körfezi\'nin en kuytu köşesinde, sazlıklarla çevrili turkuaz bir nehrin denize döküldüğü yer. Mavi bayraklı kumsalı, ahşap iskeleleri ve "Cittaslow" sakin şehir kimliğiyle Ula\'nın kalbi.',
      en:'In the most sheltered corner of the Gulf of Gökova, where a reed-lined turquoise river meets the sea. Blue Flag beach, wooden piers, "Cittaslow" identity — the heart of Ula.',
      de:'In der geschütztesten Ecke des Golfs von Gökova, wo ein schilfbewachsener türkisfarbener Fluss ins Meer mündet.'
    },
    facts:{
      tr:[{l:'MESAFE',v:'17 km'},{l:'SEZON',v:'Tüm yıl'},{l:'STATÜ',v:'Mavi Bayrak'},{l:'KOORDİNAT',v:'37.05°N 28.32°E'}],
      en:[{l:'DISTANCE',v:'17 km'},{l:'SEASON',v:'Year-round'},{l:'STATUS',v:'Blue Flag'},{l:'COORDINATES',v:'37.05°N 28.32°E'}],
      de:[{l:'ENTFERNUNG',v:'17 km'},{l:'SAISON',v:'Ganzjährig'},{l:'STATUS',v:'Blaue Flagge'},{l:'KOORDINATEN',v:'37,05°N 28,32°E'}]
    },
    sections:{
      tr:[
        {h:'Azmak Nehri',p:'Yer altı kaynaklarından beslenen Azmak, yıl boyunca 14°C\'de kalan kristal suyuyla bilinir. Ahşap köprülerin altından sandalla geçer, sazlıklar arasında balıkçıllar, su kaplumbağaları ve nadir endemik bitkiler görürsünüz.'},
        {h:'Halk Plajı',p:'1.4 km uzunluğunda ince kumlu, sığ deniz. Aileler için ideal. Plajın hemen arkasında Ula Belediyesi tarafından işletilen kafe, duş, bebek bakım odası ve engelli erişim rampaları bulunur.'},
        {h:'Kitesurf & Rüzgâr Sörfü',p:'Belirli mevsimlerde "meltem" rüzgârı, Akyaka\'yı dünyanın sayılı kitesurf noktalarından biri yapar. Beş okul, ekipman kiralama, başlangıç ve ileri seviye kurslar.'}
      ],
      en:[
        {h:'Azmak River',p:'Spring-fed and a constant 14°C, the Azmak is famous for its crystal water. Glide under wooden bridges by rowboat, watch herons, turtles and rare endemic plants between the reeds.'},
        {h:'Public Beach',p:'1.4 km of fine sand and shallow water — ideal for families. Behind the beach, the municipality-run café, showers, baby room and full step-free access.'},
        {h:'Kitesurf & Windsurf',p:'In season, the meltem wind makes Akyaka one of the world\'s top kitesurf spots. Five schools, gear rental, beginner to advanced.'}
      ],
      de:[
        {h:'Azmak-Fluss',p:'Quellgespeist, ganzjährig 14°C, kristallklar.'},
        {h:'Strand',p:'1,4 km feiner Sand, flaches Wasser.'},
        {h:'Kitesurfen',p:'Der Meltemi-Wind macht Akyaka zu einem Weltklasse-Spot.'}
      ]
    }
  },
  sedir: {
    title:'Sedir Adası',
    eyebrow:'04 / ADA',
    hero:'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=2000&q=85',
    lead:{
      tr:'Antik Kedrai kenti ve Kleopatra\'nın efsanevi beyaz kumlu plajı. Karya bölgesinin en önemli liman kenti olan ada, M.Ö. 5. yüzyıldan kalma surlar, tiyatro ve agora ile ziyaretçileri karşılar.',
      en:'Ancient Kedrai and Cleopatra\'s legendary white-sand beach. Once Caria\'s key port — 5th-century BC walls, theatre and agora.',
      de:'Antikes Kedrai und Kleopatras legendärer weißer Sandstrand.'
    },
    facts:{
      tr:[{l:'ULAŞIM',v:'Tekne · 15 dk'},{l:'SEZON',v:'May–Eki'},{l:'GİRİŞ',v:'150 ₺'},{l:'STATÜ',v:'1. Derece SİT'}],
      en:[{l:'ACCESS',v:'Boat · 15 min'},{l:'SEASON',v:'May–Oct'},{l:'ENTRY',v:'150 ₺'},{l:'STATUS',v:'Heritage Site'}],
      de:[{l:'ZUGANG',v:'Boot · 15 Min'},{l:'SAISON',v:'Mai–Okt'},{l:'EINTRITT',v:'150 ₺'},{l:'STATUS',v:'Denkmal'}]
    },
    sections:{
      tr:[
        {h:'Kleopatra Plajı',p:'Efsaneye göre Mısır Kraliçesi Kleopatra, sevgilisi Antonius için bu kumları Mısır\'dan getirtti. Bilim, kumun ada dışında bulunmayan oolitik yapısının gerçekten Kuzey Afrika menşeli olduğunu doğruladı. Plaj koruma altındadır — yalın ayak girilir, kum çıkarılması yasaktır.'},
        {h:'Kedrai Antik Kenti',p:'Adanın doğusunda, çam ormanları arasında saklı tiyatro 2.500 kişilik kapasiteyle bugün de izlenebilir durumda. Apollon tapınağı, agora, surlar ve nekropol gezilebilir.'},
        {h:'Tekne Turları',p:'Akyaka iskelesinden günlük turlar 09:00, 11:00 ve 14:00\'te kalkar. Belediye onaylı tekneler, bilet rezervasyonu e-Belediye üzerinden yapılabilir.'}
      ],
      en:[
        {h:'Cleopatra Beach',p:'Legend says Cleopatra had this sand brought from Egypt for Antony. Science confirms the oolitic structure is North African. Protected: barefoot only, no sand removal.'},
        {h:'Ancient Kedrai',p:'2,500-seat theatre in the eastern pine forest. Apollo\'s temple, agora, walls and necropolis open to visit.'},
        {h:'Boat Tours',p:'Daily tours from Akyaka pier at 09:00, 11:00 and 14:00. Municipality-approved boats; book on e-Government.'}
      ],
      de:[
        {h:'Kleopatra-Strand',p:'Sand mit nordafrikanischem Ursprung, geschützt.'},
        {h:'Antikes Kedrai',p:'Theater mit 2.500 Plätzen, Apollontempel, Agora.'},
        {h:'Bootstouren',p:'Täglich vom Akyaka-Pier um 09:00, 11:00 und 14:00.'}
      ]
    }
  },
  geyik: {
    title:'Geyik Kanyonu',
    eyebrow:'03 / DOĞA',
    hero:'https://images.unsplash.com/photo-1441906363162-903afd0d3d52?w=2000&q=85',
    lead:{
      tr:'Arıcılar Mahallesi sınırlarındaki bu 20 km\'lik kanyon, sarkıt-dikit mağaraları, gizli şelaleleri ve endemik bitki örtüsüyle Türkiye\'nin en az tanınan doğa harikalarından biri. Üç farklı zorluk seviyesinde işaretli yürüyüş parkuru.',
      en:'A 20 km canyon in Arıcılar with stalactite caves, hidden waterfalls and endemic flora — one of Turkey\'s least-known natural wonders. Three marked trails for different difficulty levels.',
      de:'Eine 20 km lange Schlucht mit Tropfsteinhöhlen.'
    },
    facts:{
      tr:[{l:'UZUNLUK',v:'20 km'},{l:'SEVİYE',v:'Orta–Zor'},{l:'SEZON',v:'Nis–Eki'},{l:'GİRİŞ',v:'Ücretsiz'}],
      en:[{l:'LENGTH',v:'20 km'},{l:'LEVEL',v:'Mid–Hard'},{l:'SEASON',v:'Apr–Oct'},{l:'ENTRY',v:'Free'}],
      de:[{l:'LÄNGE',v:'20 km'},{l:'NIVEAU',v:'Mittel'},{l:'SAISON',v:'Apr–Okt'},{l:'EINTRITT',v:'Frei'}]
    },
    sections:{
      tr:[
        {h:'Yürüyüş Parkurları',p:'Yeşil rota (3.5 km, kolay) — kanyon ağzı ve ilk şelale. Mavi rota (8 km, orta) — mağaralar ve doğal havuzlar. Kırmızı rota (20 km, zor) — kanyonun tamamı, sadece rehberli, tam günlük.'},
        {h:'Mağaralar',p:'Kanyon boyunca 11 mağara tespit edilmiş, üçü ziyarete açık. Damlataş Mağarası 60 m derinlikte, içinde sarkıt ve dikit oluşumları, kanyon suyunun dinlendiği sessiz bir gölet.'},
        {h:'Güvenlik & Rehber',p:'Belediye onaylı dokuz dağcılık rehberi haftanın her günü hizmet verir. Tek başına ileri rotaya çıkmak yasaktır. Yağmurlu günlerde kanyon ani sel riski nedeniyle kapatılır.'}
      ],
      en:[
        {h:'Trails',p:'Green (3.5 km, easy), Blue (8 km, mid), Red (20 km, hard, guided only).'},
        {h:'Caves',p:'Eleven catalogued; three open. Damlataş Cave reaches 60 m.'},
        {h:'Safety & Guides',p:'Nine municipality-approved mountain guides daily. Solo on advanced trails forbidden.'}
      ],
      de:[
        {h:'Wege',p:'Grün (3,5 km), Blau (8 km), Rot (20 km, geführt).'},
        {h:'Höhlen',p:'Elf Höhlen, drei zugänglich.'},
        {h:'Sicherheit',p:'Neun zertifizierte Bergführer.'}
      ]
    }
  }
};

function DetailPage({ slug, setRoute }) {
  const [t, lang] = useT();
  const place = PLACE_DETAILS[slug];
  if (!place) return <DiscoverPage setRoute={setRoute} />;

  const back = { tr:'Tüm rotalara dön', en:'Back to all routes', de:'Zurück zu allen Routen' }[lang];

  return (
    <main>
      <section style={{position:'relative', minHeight:'60vh', display:'flex', flexDirection:'column', justifyContent:'flex-end', overflow:'hidden', background:'var(--ink)', color:'white'}}>
        <div style={{position:'absolute', inset:0, zIndex:0}}>
          <img src={place.hero} alt="" style={{width:'100%', height:'100%', objectFit:'cover'}} />
          <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(15,42,82,0.3) 0%, rgba(15,42,82,0.1) 40%, rgba(10,29,59,0.92) 100%)'}}></div>
        </div>
        <div style={{position:'relative', zIndex:2, padding:'var(--pad-7) 0 var(--pad-5)'}}>
          <div className="wrap">
            <button onClick={()=>setRoute('discover')} style={{color:'rgba(255,255,255,0.75)', fontSize:13, fontWeight:500, letterSpacing:'0.02em', marginBottom:'var(--pad-4)'}}>
              ← {back}
            </button>
            <div className="eyebrow" style={{color:'rgba(255,255,255,0.7)', marginBottom:14}}>{place.eyebrow}</div>
            <h1 style={{fontSize:'clamp(40px, 6vw, 80px)', color:'white', fontWeight:600, lineHeight:1.05, maxWidth:'18ch', letterSpacing:'-0.025em'}}>
              {place.title}
            </h1>
          </div>
        </div>
      </section>

      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:'var(--pad-6)', alignItems:'start'}}>
          <div>
            <p style={{fontSize:'clamp(18px, 1.7vw, 22px)', lineHeight:1.55, color:'var(--ink)', marginBottom:'var(--pad-5)', maxWidth:'52ch', fontWeight:400, borderLeft:'3px solid var(--accent)', paddingLeft:'var(--pad-3)'}}>
              {place.lead[lang]}
            </p>
            {place.sections[lang].map((s,i) => (
              <div key={i} style={{marginBottom:'var(--pad-4)', paddingBottom:'var(--pad-4)', borderBottom:'1px solid var(--line)'}}>
                <div style={{display:'flex', gap:14, alignItems:'baseline', marginBottom:12}}>
                  <span style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.12em', color:'var(--accent)', fontWeight:600}}>{String(i+1).padStart(2,'0')}</span>
                  <h3 style={{fontSize:24, fontWeight:600, letterSpacing:'-0.012em'}}>{s.h}</h3>
                </div>
                <p style={{fontSize:16, color:'var(--ink-soft)', lineHeight:1.7, maxWidth:'56ch'}}>{s.p}</p>
              </div>
            ))}
          </div>
          <aside style={{position:'sticky', top:130}}>
            <div style={{background:'var(--paper-soft)', border:'1px solid var(--line)', borderRadius:2, padding:'var(--pad-4)'}}>
              <div className="eyebrow" style={{marginBottom:14}}>{lang==='tr'?'Künye':lang==='en'?'Facts':'Fakten'}</div>
              {place.facts[lang].map((f,i) => (
                <div key={i} style={{paddingBottom:12, marginBottom:12, borderBottom: i<3?'1px solid var(--line)':'none'}}>
                  <div style={{fontSize:11, fontWeight:600, letterSpacing:'0.08em', color:'var(--ink-mute)', textTransform:'uppercase', marginBottom:5}}>{f.l}</div>
                  <div style={{fontSize:18, fontWeight:600, letterSpacing:'-0.01em'}}>{f.v}</div>
                </div>
              ))}
              <button className="btn btn-primary" style={{width:'100%', justifyContent:'center', marginTop:8}}>
                {lang==='tr'?'Yol tarifi':lang==='en'?'Directions':'Wegbeschreibung'} →
              </button>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

// === EVENTS ===
function EventsPage({ setRoute }) {
  const [t, lang] = useT();
  const [month, setMonth] = useStateE(3); // April
  const monthsTR = ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'];
  const monthsEN = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const monthsDE = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'];
  const months = lang==='tr'?monthsTR:lang==='en'?monthsEN:monthsDE;
  const days = lang==='tr'?['Pzt','Sal','Çar','Per','Cum','Cmt','Paz']:lang==='en'?['Mon','Tue','Wed','Thu','Fri','Sat','Sun']:['Mo','Di','Mi','Do','Fr','Sa','So'];

  const events = {
    5: [{cat:'KÜLTÜR', t:{tr:'Bahar Konseri', en:'Spring Concert', de:'Frühlingskonzert'}, time:'20:00', venue:'Cumhuriyet Meydanı'}],
    12: [{cat:'MECLİS', t:{tr:'Belediye Meclisi', en:'Council Meeting', de:'Ratssitzung'}, time:'14:00', venue:'Belediye Sarayı'}],
    18: [{cat:'ETKİNLİK', t:{tr:'Çocuk Şenliği', en:'Children\'s Festival', de:'Kinderfest'}, time:'09:30', venue:'Cumhuriyet Meydanı'}],
    23: [{cat:'TÖREN', t:{tr:'23 Nisan Bayramı', en:'April 23 Holiday', de:'23. April'}, time:'10:00', venue:'Atatürk Caddesi'}],
    27: [{cat:'SPOR', t:{tr:'Akyaka Yarı Maraton', en:'Akyaka Half Marathon', de:'Akyaka Halbmarathon'}, time:'07:00', venue:'Akyaka'}],
    30: [{cat:'HALK GÜNÜ', t:{tr:'Başkanla Halk Günü', en:'Public Day with Mayor', de:'Bürgerdialog'}, time:'14:00–17:00', venue:'Belediye'}]
  };

  const firstDay = (new Date(2026, month, 1).getDay() + 6) % 7;
  const daysInMonth = new Date(2026, month+1, 0).getDate();
  const cells = [];
  for (let i=0;i<firstDay;i++) cells.push(null);
  for (let d=1;d<=daysInMonth;d++) cells.push(d);

  const titleCopy = {
    tr:{c:'Ana Sayfa / Etkinlikler', t:'Etkinlik takvimi', s:'Belediyemizin tüm etkinlikleri, meclis toplantıları, halk günleri ve festivaller. Tıklayarak detaylara erişin.'},
    en:{c:'Home / Events', t:'Events calendar', s:'All municipal events, council meetings, public days and festivals.'},
    de:{c:'Startseite / Events', t:'Veranstaltungskalender', s:'Alle Veranstaltungen.'}
  }[lang];

  return (
    <main>
      <header className="page-head">
        <div className="wrap">
          <div className="crumbs">{titleCopy.c}</div>
          <h1>{titleCopy.t}</h1>
          <p>{titleCopy.s}</p>
        </div>
      </header>
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'var(--pad-4)', paddingBottom:'var(--pad-3)', borderBottom:'1px solid var(--line)'}}>
            <h2 style={{fontSize:32, fontWeight:600, letterSpacing:'-0.02em'}}>
              {months[month]} <span style={{color:'var(--ink-mute)', fontWeight:400}}>2026</span>
            </h2>
            <div style={{display:'flex', gap:8}}>
              <button onClick={()=>setMonth(m=>(m+11)%12)} className="btn btn-ghost" style={{padding:'10px 14px'}}>←</button>
              <button onClick={()=>setMonth(m=>(m+1)%12)} className="btn btn-ghost" style={{padding:'10px 14px'}}>→</button>
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)'}}>
            {days.map(d => (
              <div key={d} style={{background:'var(--paper-warm)', padding:'10px 12px', fontSize:11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--ink-mute)'}}>{d}</div>
            ))}
            {cells.map((d, i) => {
              const isApril = month === 3;
              const evt = isApril ? events[d] : null;
              return (
                <div key={i} style={{
                  background:'var(--paper)',
                  minHeight: 110,
                  padding:'10px 12px',
                  position:'relative',
                  cursor: evt ? 'pointer' : 'default',
                  transition:'background 0.15s'
                }}
                onMouseEnter={e=>{if(evt) e.currentTarget.style.background='var(--gov-50)';}}
                onMouseLeave={e=>{if(evt) e.currentTarget.style.background='var(--paper)';}}>
                  {d && (
                    <div style={{fontSize:14, color: evt?'var(--ink)':'var(--ink-mute)', fontWeight: evt?600:500}}>{d}</div>
                  )}
                  {evt && evt.map((e, j) => (
                    <div key={j} style={{marginTop:6, padding:'5px 8px', background:'var(--accent-soft)', borderLeft:'2px solid var(--accent)', color:'var(--accent-deep)', fontSize:11, lineHeight:1.3}}>
                      <div style={{fontSize:9, letterSpacing:'0.08em', fontWeight:600, opacity:0.75}}>{e.cat}</div>
                      <div style={{fontWeight:600, marginTop:2}}>{e.t[lang]}</div>
                      <div style={{fontSize:10, opacity:0.75, marginTop:2}}>{e.time}</div>
                    </div>
                  ))}
                </div>
              );
            })}
          </div>

          <div style={{marginTop:'var(--pad-5)'}}>
            <h3 style={{fontSize:22, fontWeight:600, marginBottom:'var(--pad-3)', letterSpacing:'-0.012em'}}>{lang==='tr'?'Bu ay öne çıkanlar':lang==='en'?'Highlights this month':'Diesen Monat'}</h3>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'var(--pad-3)'}}>
              {Object.entries(events).slice(0,3).map(([day, evts]) => evts.map((e, i) => (
                <div key={day+i} style={{background:'var(--paper)', border:'1px solid var(--line)', borderTop:'3px solid var(--accent)', padding:'var(--pad-3)', borderRadius:2}}>
                  <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:10}}>
                    <div style={{fontSize:42, fontWeight:600, lineHeight:1, letterSpacing:'-0.025em'}}>{day}</div>
                    <div style={{fontSize:10, letterSpacing:'0.1em', fontWeight:600, color:'var(--accent)'}}>{e.cat}</div>
                  </div>
                  <h4 style={{fontSize:17, fontWeight:600, marginBottom:6, letterSpacing:'-0.01em'}}>{e.t[lang]}</h4>
                  <div style={{fontSize:12, color:'var(--ink-mute)', fontWeight:500}}>{e.time} · {e.venue}</div>
                </div>
              )))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// === COUNCIL ARCHIVE ===
function CouncilPage({ setRoute }) {
  const [t, lang] = useT();
  const [year, setYear] = useStateE(2026);
  const [type, setType] = useStateE('all');

  const c = {
    tr:{cr:'Ana Sayfa / Meclis Kararları', tt:'Meclis kararları', sub:'Belediye meclisi ve encümen kararları, faaliyet raporları, stratejik planlar — şeffaf yönetim ilkemizin gereği olarak kamuya açık arşiv.'},
    en:{cr:'Home / Council Decisions', tt:'Council decisions', sub:'Council and committee decisions, annual reports, strategic plans — public archive as part of our transparency policy.'},
    de:{cr:'Startseite / Beschlüsse', tt:'Ratsbeschlüsse', sub:'Beschlüsse, Berichte, Pläne — öffentliches Archiv.'}
  }[lang];

  const decisions = [
    {no:'2026/24', date:'15 NİSAN 2026', type:'meclis', title:{tr:'Geyik Kanyonu yürüyüş parkurları yatırım kararı', en:'Deer Canyon trail investment decision', de:'Investitionsbeschluss Hirschschlucht'}, status:'kabul', size:'PDF · 384 KB'},
    {no:'2026/23', date:'15 NİSAN 2026', type:'meclis', title:{tr:'2025 yılı kesin hesap raporu görüşülmesi', en:'2025 final account report', de:'Schlussbericht 2025'}, status:'kabul', size:'PDF · 2.1 MB'},
    {no:'2026/22', date:'08 NİSAN 2026', type:'encumen', title:{tr:'Köprübaşı Mh. içme suyu hattı ihale onayı', en:'Köprübaşı water line tender approval', de:'Wasserleitung Genehmigung'}, status:'kabul', size:'PDF · 512 KB'},
    {no:'2026/21', date:'02 NİSAN 2026', type:'meclis', title:{tr:'Akyaka sahil düzenleme imar planı değişikliği', en:'Akyaka beach zoning amendment', de:'Bebauungsplanänderung Akyaka'}, status:'görüşme', size:'PDF · 1.4 MB'},
    {no:'2026/20', date:'18 MART 2026', type:'meclis', title:{tr:'Sıfır Atık programı 2026 yılı uygulama planı', en:'Zero Waste 2026 implementation plan', de:'Zero-Waste-Plan 2026'}, status:'kabul', size:'PDF · 856 KB'},
    {no:'2026/19', date:'18 MART 2026', type:'encumen', title:{tr:'Cumhuriyet Meydanı yenileme proje onayı', en:'Republic Square renewal approval', de:'Erneuerung Republikplatz'}, status:'kabul', size:'PDF · 3.2 MB'},
    {no:'2026/18', date:'12 MART 2026', type:'meclis', title:{tr:'Engelli erişim eylem planı', en:'Disabled access action plan', de:'Aktionsplan Barrierefreiheit'}, status:'kabul', size:'PDF · 728 KB'},
    {no:'2026/17', date:'05 MART 2026', type:'encumen', title:{tr:'Çarşı esnafı kira düzenlemesi', en:'Bazaar rent regulation', de:'Mietregelung Basar'}, status:'kabul', size:'PDF · 412 KB'}
  ];

  const filtered = type==='all' ? decisions : decisions.filter(d => d.type===type);
  const filterLabels = { all:{tr:'Tümü',en:'All',de:'Alle'}, meclis:{tr:'Meclis',en:'Council',de:'Rat'}, encumen:{tr:'Encümen',en:'Committee',de:'Ausschuss'} };
  const statusLabels = { kabul:{tr:'kabul',en:'approved',de:'genehmigt'}, görüşme:{tr:'görüşülüyor',en:'under review',de:'in Prüfung'} };

  return (
    <main>
      <header className="page-head">
        <div className="wrap">
          <div className="crumbs">{c.cr}</div>
          <h1>{c.tt}</h1>
          <p>{c.sub}</p>
        </div>
      </header>
      <section style={{padding:'var(--pad-5) 0'}}>
        <div className="wrap">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'var(--pad-4)', flexWrap:'wrap', gap:16}}>
            <div style={{display:'flex', gap:6}}>
              {['all','meclis','encumen'].map(f => (
                <button key={f} onClick={()=>setType(f)} style={{
                  padding:'8px 16px', borderRadius:2,
                  border: type===f?'1px solid var(--accent)':'1px solid var(--line-strong)',
                  background: type===f?'var(--accent)':'var(--paper)',
                  color: type===f?'white':'var(--ink-soft)',
                  fontSize:13, fontWeight:600
                }}>{filterLabels[f][lang]}</button>
              ))}
            </div>
            <div style={{display:'flex', gap:6}}>
              {[2026,2025,2024].map(y => (
                <button key={y} onClick={()=>setYear(y)} style={{
                  padding:'8px 14px', borderRadius:2,
                  border: year===y?'1px solid var(--ink)':'1px solid var(--line-strong)',
                  background: year===y?'var(--ink)':'var(--paper)',
                  color: year===y?'white':'var(--ink-soft)',
                  fontFamily:'var(--mono)', fontSize:12, fontWeight:600
                }}>{y}</button>
              ))}
            </div>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:1, background:'var(--line)', border:'1px solid var(--line)'}}>
            <div style={{background:'var(--paper-warm)', padding:'12px var(--pad-3)', display:'grid', gridTemplateColumns:'auto 1fr auto auto auto', gap:24, alignItems:'center', fontSize:11, fontWeight:600, letterSpacing:'0.08em', color:'var(--ink-mute)', textTransform:'uppercase'}}>
              <div style={{minWidth:80}}>{lang==='tr'?'Karar No':lang==='en'?'No.':'Nr.'}</div>
              <div>{lang==='tr'?'Konu':lang==='en'?'Subject':'Thema'}</div>
              <div style={{minWidth:100}}>{lang==='tr'?'Tip':lang==='en'?'Type':'Typ'}</div>
              <div style={{minWidth:120}}>{lang==='tr'?'Durum':lang==='en'?'Status':'Status'}</div>
              <div style={{minWidth:80}}></div>
            </div>
            {filtered.map((d,i) => (
              <div key={i} style={{background:'var(--paper)', padding:'var(--pad-3)', display:'grid', gridTemplateColumns:'auto 1fr auto auto auto', gap:24, alignItems:'center', cursor:'pointer', transition:'background 0.15s'}}
                onMouseEnter={e=>e.currentTarget.style.background='var(--gov-50)'}
                onMouseLeave={e=>e.currentTarget.style.background='var(--paper)'}>
                <div style={{fontFamily:'var(--mono)', fontSize:13, fontWeight:600, minWidth:80, color:'var(--accent)'}}>{d.no}</div>
                <div>
                  <div style={{fontSize:16, fontWeight:600, lineHeight:1.35, marginBottom:3, letterSpacing:'-0.005em'}}>{d.title[lang]}</div>
                  <div style={{fontSize:11, color:'var(--ink-mute)', fontWeight:500, letterSpacing:'0.02em'}}>{d.date} · {d.size}</div>
                </div>
                <div style={{fontSize:11, fontWeight:600, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--ink-soft)', minWidth:100}}>{filterLabels[d.type][lang]}</div>
                <div style={{display:'flex', alignItems:'center', gap:8, minWidth:120}}>
                  <span style={{width:8, height:8, borderRadius:'50%', background: d.status==='kabul'?'var(--success-500)':'var(--warning-500)'}}></span>
                  <span style={{fontSize:12, color:'var(--ink-soft)', fontWeight:500}}>{statusLabels[d.status][lang]}</span>
                </div>
                <button className="btn btn-ghost" style={{padding:'6px 14px', fontSize:12, minWidth:80}}>↓ PDF</button>
              </div>
            ))}
          </div>

          <div style={{marginTop:'var(--pad-5)', padding:'var(--pad-4)', background:'var(--paper-soft)', border:'1px solid var(--line)', borderTop:'3px solid var(--accent)', borderRadius:2, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'var(--pad-3)'}}>
            {[
              {l:lang==='tr'?'2026 KARAR':lang==='en'?'2026 DECISIONS':'2026 BESCHLÜSSE', v:'24'},
              {l:lang==='tr'?'KABUL ORANI':lang==='en'?'APPROVAL':'GENEHMIGT', v:'%92'},
              {l:lang==='tr'?'AÇIK İHALE':lang==='en'?'OPEN TENDERS':'AUSSCHREIBUNGEN', v:'7'},
              {l:lang==='tr'?'YILLIK BÜTÇE':lang==='en'?'ANNUAL BUDGET':'JAHRESBUDGET', v:'487 M ₺'}
            ].map((s,i) => (
              <div key={i} style={{borderRight: i<3?'1px solid var(--line)':'none', paddingRight:16}}>
                <div style={{fontSize:10, fontWeight:600, letterSpacing:'0.1em', color:'var(--ink-mute)', marginBottom:6, textTransform:'uppercase'}}>{s.l}</div>
                <div style={{fontSize:28, fontWeight:600, letterSpacing:'-0.025em'}}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { DetailPage, EventsPage, CouncilPage });