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

const { useState: useStateP, useEffect: useEffectP } = React;

// === HOME ===
function HomePage({ setRoute }) {
  return (
    <main>
      <Hero />
      <QuickServices setRoute={setRoute} />
      <AnnouncementsSection setRoute={setRoute} />
      <NewsSection setRoute={setRoute} />
      <GallerySlider />
      <DiscoverBand setRoute={setRoute} />
      <CTABand setRoute={setRoute} />
    </main>
  );
}

function CTABand({ setRoute }) {
  const [t, lang] = useT();
  const copy = {
    tr: { eyebrow:'05 — Beyaz Masa', title:'Bir aksaklık mı var? Bize anında bildirin.', desc:'Mahallenizdeki çöp, su, yol veya aydınlatma sorunu için 60 saniyede bildirim oluşturun. Takip numaranızla başvurunuzu sürekli izleyebilirsiniz.', cta:'Hemen bildir' },
    en: { eyebrow:'05 — White Desk', title:'Something not working? Tell us right away.', desc:'Submit a waste, water, road or lighting issue in 60 seconds. Track your case anytime with your reference number.', cta:'Report now' },
    de: { eyebrow:'05 — Bürgerbüro', title:'Etwas funktioniert nicht? Sagen Sie es uns sofort.', desc:'Müll-, Wasser-, Straßen- oder Lichtproblem in 60 Sekunden melden — mit Vorgangsnummer verfolgen.', cta:'Jetzt melden' }
  };
  const c = copy[lang];
  return (
    <section style={{padding:'var(--pad-7) 0', background:'var(--paper)', borderTop:'1px solid var(--line)'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:'var(--pad-6)', alignItems:'center'}}>
        <div>
          <div className="eyebrow" style={{marginBottom:12}}>{c.eyebrow}</div>
          <h2 style={{fontSize:'clamp(28px, 3.4vw, 44px)', maxWidth:'22ch', marginBottom:'var(--pad-3)', fontWeight:600, letterSpacing:'-0.02em'}}>
            {c.title}
          </h2>
          <p style={{fontSize:16, color:'var(--ink-soft)', maxWidth:'52ch', marginBottom:'var(--pad-4)', lineHeight:1.6}}>{c.desc}</p>
          <button className="btn btn-primary" onClick={() => setRoute('contact')}>{c.cta} →</button>
        </div>
        <div style={{
          background:'var(--paper-soft)',
          border:'1px solid var(--line)',
          borderRadius:2,
          padding:'var(--pad-4)',
          fontFamily:'var(--mono)',
          fontSize:13,
          lineHeight:1.7
        }}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14, paddingBottom:10, borderBottom:'1px solid var(--line)'}}>
            <span style={{fontFamily:'var(--sans)', fontSize:11, fontWeight:600, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-mute)'}}>
              {lang === 'tr' ? 'Son bildirimler' : lang === 'en' ? 'Recent reports' : 'Letzte Meldungen'}
            </span>
            <span style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-mute)'}}>LIVE</span>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            <div>#2026-04-1247 · {lang==='tr'?'çukur, atatürk cd.':'pothole, atatürk st.'} <span style={{color:'var(--success-500)', fontWeight:600}}>● {lang==='tr'?'çözüldü':lang==='en'?'resolved':'erledigt'}</span></div>
            <div>#2026-04-1246 · {lang==='tr'?'aydınlatma, akyaka':'lighting, akyaka'} <span style={{color:'var(--warning-500)', fontWeight:600}}>● {lang==='tr'?'işlemde':lang==='en'?'in progress':'in Bearbeitung'}</span></div>
            <div>#2026-04-1245 · {lang==='tr'?'çöp toplama, gökova':'waste, gökova'} <span style={{color:'var(--success-500)', fontWeight:600}}>● {lang==='tr'?'çözüldü':lang==='en'?'resolved':'erledigt'}</span></div>
            <div>#2026-04-1244 · {lang==='tr'?'su sızıntısı, k.başı':'water leak, k.başı'} <span style={{color:'var(--success-500)', fontWeight:600}}>● {lang==='tr'?'çözüldü':lang==='en'?'resolved':'erledigt'}</span></div>
          </div>
          <div style={{marginTop:14, paddingTop:12, borderTop:'1px solid var(--line)', fontSize:11, color:'var(--ink-mute)', letterSpacing:'0.06em', fontWeight:500, fontFamily:'var(--sans)'}}>
            {lang==='tr'?'BU AY 87 BAŞVURU · ORT. 2.4 GÜN':lang==='en'?'87 CASES THIS MONTH · AVG 2.4 DAYS':'87 FÄLLE DIESEN MONAT · DURCHSCHN. 2,4 TAGE'}
          </div>
        </div>
      </div>
    </section>
  );
}

// === SERVICES (e-Belediye) ===
function ServicesPage({ setRoute }) {
  const [t, lang] = useT();
  const [step, setStep] = useStateP(0);
  const [tcNo, setTcNo] = useStateP('');
  const [loaded, setLoaded] = useStateP(false);

  const copy = {
    tr: {
      crumb: 'Ana Sayfa / Hizmetler',
      title: 'e-Belediye',
      titleEm: 'tek pencere',
      sub: 'Borç sorgulama, ödeme, başvuru ve takip — hepsi tek bir ekranda. Misafir olarak da, T.C. kimlik numaranızla giriş yaparak da kullanabilirsiniz.',
      tcLabel: 'T.C. KİMLİK NUMARASI', tcPh: '12345678901',
      pwLabel: 'ŞİFRE', pwPh: '••••••••',
      login: 'Giriş yap', guest: 'Misafir olarak devam et',
      hi: 'Merhaba,', name: 'Mehmet Yılmaz',
      tabs: ['Borç & Ödeme', 'Başvurularım', 'Belgeler'],
      pay: 'Tümünü öde', back: 'Geri dön',
      bills: [
        { type:'EMLAK VERGİSİ', period:'2026 / 1. TAKSİT', amount:'1.847,50 ₺', due:'31 MAYIS' },
        { type:'ÇEVRE TEMİZLİK V.', period:'2026 / 1. TAKSİT', amount:'412,00 ₺', due:'31 MAYIS' },
        { type:'SU FATURASI', period:'NİSAN 2026', amount:'247,80 ₺', due:'15 MAYIS' }
      ],
      total: 'TOPLAM', success: 'Ödeme başarılı', successDesc: 'Makbuzunuz e-posta adresinize gönderildi. Referans no:'
    },
    en: {
      crumb: 'Home / Services', title: 'e-Government', titleEm: 'one screen',
      sub: 'Bill enquiry, payment, applications and tracking — all in one place. Use as guest or sign in with your TR ID.',
      tcLabel: 'TR ID NUMBER', tcPh: '12345678901', pwLabel: 'PASSWORD', pwPh: '••••••••',
      login: 'Sign in', guest: 'Continue as guest', hi: 'Hello,', name: 'Mehmet Yılmaz',
      tabs: ['Bills & Payment', 'My Applications', 'Documents'],
      pay: 'Pay all', back: 'Go back',
      bills: [
        { type:'PROPERTY TAX', period:'2026 / Q1', amount:'1,847.50 ₺', due:'31 MAY' },
        { type:'ENV. CLEANING', period:'2026 / Q1', amount:'412.00 ₺', due:'31 MAY' },
        { type:'WATER BILL', period:'APR 2026', amount:'247.80 ₺', due:'15 MAY' }
      ],
      total:'TOTAL', success:'Payment successful', successDesc:'Receipt sent to your email. Reference:'
    },
    de: {
      crumb:'Startseite / Dienste', title:'e-Verwaltung', titleEm:'ein Fenster',
      sub:'Rechnungseinsicht, Zahlung, Anträge und Verfolgung — alles in einem.',
      tcLabel:'TR-AUSWEIS-NR.', tcPh:'12345678901', pwLabel:'PASSWORT', pwPh:'••••••••',
      login:'Anmelden', guest:'Als Gast fortfahren', hi:'Hallo,', name:'Mehmet Yılmaz',
      tabs:['Rechnungen', 'Meine Anträge', 'Dokumente'],
      pay:'Alles bezahlen', back:'Zurück',
      bills: [
        { type:'GRUNDSTEUER', period:'2026 / Q1', amount:'1.847,50 ₺', due:'31. MAI' },
        { type:'UMWELTGEBÜHR', period:'2026 / Q1', amount:'412,00 ₺', due:'31. MAI' },
        { type:'WASSERRECHNUNG', period:'APR 2026', amount:'247,80 ₺', due:'15. MAI' }
      ],
      total:'GESAMT', success:'Zahlung erfolgreich', successDesc:'Beleg an Ihre E-Mail gesendet. Referenz:'
    }
  };
  const c = copy[lang];

  return (
    <main>
      <header className="page-head">
        <div className="wrap">
          <div className="crumbs">{c.crumb}</div>
          <h1>{c.title} <em>— {c.titleEm}</em></h1>
          <p>{c.sub}</p>
        </div>
      </header>
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap" style={{maxWidth:980, margin:'0 auto'}}>
          {step === 0 && (
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'var(--pad-5)', alignItems:'start'}}>
              <div style={{background:'var(--paper)', padding:'var(--pad-5)', borderRadius:2, border:'1px solid var(--line)'}}>
                <div className="eyebrow" style={{marginBottom:12}}>e-Devlet ile giriş</div>
                <h3 style={{fontSize:24, fontWeight:600, marginBottom:20, letterSpacing:'-0.01em'}}>
                  {lang==='tr'?'Hesabınızla giriş':lang==='en'?'Sign in':'Anmelden'}
                </h3>
                <div className="field">
                  <label>{c.tcLabel}</label>
                  <input value={tcNo} onChange={e=>setTcNo(e.target.value.replace(/\D/g,'').slice(0,11))} placeholder={c.tcPh} maxLength={11} />
                </div>
                <div className="field">
                  <label>{c.pwLabel}</label>
                  <input type="password" placeholder={c.pwPh} />
                </div>
                <button className="btn btn-primary" style={{width:'100%', justifyContent:'center'}} onClick={()=>{setLoaded(true); setStep(1);}}>
                  {c.login} →
                </button>
                <button className="btn btn-ghost" style={{width:'100%', justifyContent:'center', marginTop:10}} onClick={()=>setStep(1)}>
                  {c.guest}
                </button>
              </div>
              <div>
                <h4 style={{fontSize:18, fontWeight:600, marginBottom:16, letterSpacing:'-0.01em'}}>
                  {lang==='tr'?'Sık kullanılan':lang==='en'?'Most used':'Beliebt'}
                </h4>
                <div style={{display:'flex', flexDirection:'column', gap:1, background:'var(--line)', border:'1px solid var(--line)'}}>
                  {t.qs.items.slice(0,5).map((q,i) => (
                    <div key={i} style={{background:'var(--paper)', padding:'var(--pad-3)', display:'flex', alignItems:'center', gap:14, cursor:'pointer'}}>
                      <div className="qs-icon" style={{width:36, height:36, fontSize:16}}>{q.i}</div>
                      <div style={{flex:1}}>
                        <div style={{fontWeight:600, fontSize:14}}>{q.t}</div>
                        <div style={{fontSize:12, color:'var(--ink-mute)'}}>{q.d}</div>
                      </div>
                      <span style={{color:'var(--ink-mute)'}}>→</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:'var(--pad-4)'}}>
                <div>
                  <div style={{fontSize:11, fontWeight:600, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-mute)'}}>{c.hi.toUpperCase()}</div>
                  <h2 style={{fontSize:32, fontWeight:600, letterSpacing:'-0.02em', marginTop:4}}>{loaded ? c.name : (lang==='tr'?'Misafir':lang==='en'?'Guest':'Gast')}</h2>
                </div>
                <button className="btn btn-ghost" onClick={()=>setStep(0)}>{c.back}</button>
              </div>
              <div style={{display:'flex', gap:0, borderBottom:'1px solid var(--line)', marginBottom:'var(--pad-4)'}}>
                {c.tabs.map((tab,i) => (
                  <div key={i} style={{padding:'12px 20px', borderBottom: i===0?'2px solid var(--accent)':'2px solid transparent', fontWeight: i===0?600:400, color: i===0?'var(--ink)':'var(--ink-mute)', cursor:'pointer'}}>{tab}</div>
                ))}
              </div>
              <div style={{display:'flex', flexDirection:'column', gap:1, background:'var(--line)', border:'1px solid var(--line)', marginBottom:'var(--pad-4)'}}>
                {c.bills.map((b,i) => (
                  <div key={i} style={{background:'var(--paper)', padding:'var(--pad-4)', display:'grid', gridTemplateColumns:'2fr 1fr 1fr auto', gap:16, alignItems:'center'}}>
                    <div>
                      <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.1em', color:'var(--ink-mute)'}}>{b.period}</div>
                      <div style={{fontSize:18, fontWeight:600, marginTop:4, letterSpacing:'-0.005em'}}>{b.type}</div>
                    </div>
                    <div style={{fontSize:12, color:'var(--ink-mute)'}}>
                      <span style={{display:'inline-block', width:6, height:6, borderRadius:'50%', background:'var(--warning-500)', marginRight:8}}></span>
                      {lang==='tr'?'son ödeme':lang==='en'?'due':'fällig'} {b.due}
                    </div>
                    <div style={{fontSize:22, fontWeight:600, textAlign:'right', letterSpacing:'-0.015em'}}>{b.amount}</div>
                    <input type="checkbox" defaultChecked style={{width:20, height:20, accentColor:'var(--accent)'}} />
                  </div>
                ))}
                <div style={{background:'var(--ink)', color:'white', padding:'var(--pad-4)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                  <div style={{fontSize:11, fontWeight:600, letterSpacing:'0.1em', opacity:0.7}}>{c.total}</div>
                  <div style={{fontSize:28, fontWeight:600, letterSpacing:'-0.02em'}}>2.507,30 ₺</div>
                </div>
              </div>
              <button className="btn btn-primary" style={{padding:'14px 28px', fontSize:15}} onClick={()=>setStep(2)}>
                {c.pay} · 2.507,30 ₺ →
              </button>
            </div>
          )}

          {step === 2 && (
            <div style={{textAlign:'center', padding:'var(--pad-7) 0'}}>
              <div style={{width:80, height:80, borderRadius:'50%', background:'#dcefe2', color:'var(--success-500)', display:'inline-grid', placeItems:'center', fontSize:36, marginBottom:'var(--pad-4)'}}>✓</div>
              <h2 style={{fontSize:40, fontWeight:600, letterSpacing:'-0.025em', marginBottom:'var(--pad-3)'}}>{c.success}</h2>
              <p style={{color:'var(--ink-soft)', maxWidth:'48ch', margin:'0 auto var(--pad-4)', fontSize:16}}>{c.successDesc} <strong style={{fontFamily:'var(--mono)'}}>UB-2026-04-{Math.floor(Math.random()*9000+1000)}</strong></p>
              <button className="btn btn-primary" onClick={()=>{setStep(0); setRoute('home');}}>
                {lang==='tr'?'Ana sayfa':lang==='en'?'Home':'Startseite'} →
              </button>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

// === DISCOVER ===
function DiscoverPage({ setRoute }) {
  const [t, lang] = useT();
  const copy = {
    tr: { crumb:'Ana Sayfa / Ula\'yı Keşfet', title:'Ula\'yı', titleEm:'keşfedin', sub:'Akyaka\'nın turkuazı, Geyik Kanyonu\'nun şelaleleri, Idyma\'nın taşları. Aşağıda belediyemizin önerdiği dört rota.' },
    en: { crumb:'Home / Discover Ula', title:'Discover', titleEm:'Ula', sub:'The turquoise of Akyaka, waterfalls of Deer Canyon, stones of Idyma. Four routes we recommend.' },
    de: { crumb:'Startseite / Ula entdecken', title:'Ula', titleEm:'entdecken', sub:'Türkis von Akyaka, Wasserfälle der Hirschschlucht, Steine von Idyma.' }
  };
  const c = copy[lang];

  const places = [
    { slug:'akyaka', tag:'01 / SAHİL', t:'Akyaka & Azmak', d:'Mavi bayraklı kumsal, sazlık nehir, ahşap iskeleler. Aile dostu, sığ deniz.', meta:['17 km', 'Mavi Bayrak', 'Tüm yıl'], img:'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=1400&q=85' },
    { slug:'idyma', tag:'02 / ANTİK', t:'Idyma & Thera Antik Kentleri', d:'M.Ö. 7. yüzyıldan kaya mezarlar, agora, tiyatro. Açık hava müzesi.', meta:['7 km', 'Ücretsiz', 'M.Ö. 7. yy'], img:'https://images.unsplash.com/photo-1564507592333-c60657eea523?w=1400&q=85' },
    { slug:'geyik', tag:'03 / DOĞA', t:'Geyik Kanyonu', d:'20 km uzunluğunda kanyon, şelaleler, sarkıt-dikit mağaralar, yürüyüş parkuru.', meta:['Arıcılar Mh.', 'Trekking', 'Apr–Eki'], img:'https://images.unsplash.com/photo-1441906363162-903afd0d3d52?w=1400&q=85' },
    { slug:'sedir', tag:'04 / ADA', t:'Sedir Adası — Kleopatra Plajı', d:'Antik Kedrai kenti, beyaz kumlu plaj, sandal turları. Efsaneye göre Kleopatra için getirildi.', meta:['Tekne', 'Karya', 'May–Eki'], img:'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1400&q=85' }
  ];

  return (
    <main>
      <header className="page-head">
        <div className="wrap">
          <div className="crumbs">{c.crumb}</div>
          <h1>{c.title} <em>{c.titleEm}</em></h1>
          <p>{c.sub}</p>
        </div>
      </header>
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap">
          <div style={{display:'flex', flexDirection:'column', gap:'var(--pad-6)'}}>
            {places.map((p, i) => (
              <article key={i} style={{
                display:'grid',
                gridTemplateColumns: i % 2 === 0 ? '1.4fr 1fr' : '1fr 1.4fr',
                gap:'var(--pad-5)',
                alignItems:'center',
                paddingBottom:'var(--pad-5)',
                borderBottom: i < places.length-1 ? '1px solid var(--line)' : 'none'
              }}>
                <div style={{order: i % 2 === 0 ? 1 : 2, aspectRatio:'4/3', overflow:'hidden', borderRadius:2, background:'var(--paper-warm)'}}>
                  <img src={p.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover'}} />
                </div>
                <div style={{order: i % 2 === 0 ? 2 : 1}}>
                  <div className="eyebrow" style={{marginBottom:12}}>{p.tag}</div>
                  <h2 style={{fontSize:'clamp(28px, 3.4vw, 44px)', marginBottom:'var(--pad-3)', fontWeight:600, letterSpacing:'-0.025em'}}>{p.t}</h2>
                  <p style={{fontSize:17, color:'var(--ink-soft)', marginBottom:'var(--pad-3)', maxWidth:'46ch', lineHeight:1.6}}>{p.d}</p>
                  <div style={{display:'flex', gap:24, marginBottom:'var(--pad-3)'}}>
                    {p.meta.map((m,j) => (
                      <div key={j} style={{borderLeft:'2px solid var(--accent)', paddingLeft:12}}>
                        <div style={{fontSize:11, fontWeight:600, letterSpacing:'0.08em', color:'var(--ink-mute)', textTransform:'uppercase'}}>{['Mesafe','Tip','Sezon'][j] || ''}</div>
                        <div style={{fontSize:16, fontWeight:600, marginTop:3}}>{m}</div>
                      </div>
                    ))}
                  </div>
                  <button onClick={()=>p.slug && p.slug !== 'idyma' && setRoute(`place/${p.slug}`)} className="btn btn-ghost">{lang==='tr'?'Detay':lang==='en'?'Details':'Mehr'} →</button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// === MAYOR ===
function MayorPage({ setRoute }) {
  const [t, lang] = useT();
  const copy = {
    tr: { crumb:'Ana Sayfa / Başkan & Kurum', title:'Başkanın', titleEm:'mesajı', name:'Mehmet CANER', role:'Ula Belediye Başkanı', quote:'"Ula\'nın geleceği için çalışmalarımıza hız kesmeden devam ediyoruz. Halkımızın taleplerine ve ihtiyaçlarına çözüm bulmak asıl görevimiz."', body1:'Mehmet Caner, 1961 yılında Ula\'nın Akçapınar Mahallesi\'nde doğdu. Muğla Endüstri Meslek Lisesi\'nin ardından Deniz Kuvvetleri Komutanlığı\'nda teknik astsubay olarak görev yaptı; tersane ve fabrikalarda çeşitli kademelerde yöneticilik üstlendi. 2000 yılında emekli olduktan sonra aktif siyasete adım attı.', body2:'23 yıllık siyasi hayatında mahalle temsilciliği, ilçe yönetim kurulu üyeliği, il delegeliği, belediye meclis üyeliği ile imar ve plan-bütçe komisyonu üyeliği görevlerinde bulundu. 31 Mart 2024 yerel seçimlerinde Ula Belediye Başkanı seçildi. Evli ve bir kız çocuğu babasıdır.', stats: [{l:'DOĞUM', v:'1961'},{l:'GÖREVE SEÇİLME', v:'2024'},{l:'SİYASİ DENEYİM', v:'23 YIL'},{l:'MEMLEKET', v:'AKÇAPINAR'}] },
    en: { crumb:'Home / Mayor & Council', title:'Mayor\'s', titleEm:'message', name:'Mehmet CANER', role:'Mayor of Ula', quote:'"We continue our work for Ula\'s future without slowing down. Finding solutions to our citizens\' needs is our primary duty."', body1:'Mehmet Caner was born in 1961 in Ula\'s Akçapınar neighbourhood. After Muğla Industrial Vocational High School, he served as a technical petty officer in the Turkish Naval Forces, holding managerial roles in shipyards and factories. He entered active politics after retiring in 2000.', body2:'Over 23 years in politics he served as neighbourhood representative, district board member, provincial delegate, municipal council member, and member of the zoning and budget committees. He was elected Mayor of Ula in the local elections of 31 March 2024. He is married with one daughter.', stats: [{l:'BORN', v:'1961'},{l:'ELECTED', v:'2024'},{l:'IN POLITICS', v:'23 YRS'},{l:'HOMETOWN', v:'AKÇAPINAR'}] },
    de: { crumb:'Startseite / Bürgermeister', title:'Botschaft des', titleEm:'Bürgermeisters', name:'Mehmet CANER', role:'Bürgermeister von Ula', quote:'"Für die Zukunft Ulas setzen wir unsere Arbeit ohne Pause fort."', body1:'Mehmet Caner wurde 1961 in Akçapınar (Ula) geboren. Nach der Berufsschule diente er als technischer Unteroffizier der türkischen Marine und übernahm Führungsaufgaben in Werften und Fabriken. Nach seiner Pensionierung im Jahr 2000 trat er in die aktive Politik ein.', body2:'Nach 23 Jahren politischer Arbeit wurde er bei den Kommunalwahlen am 31. März 2024 zum Bürgermeister von Ula gewählt. Er ist verheiratet und hat eine Tochter.', stats: [{l:'GEBOREN', v:'1961'},{l:'GEWÄHLT', v:'2024'},{l:'POLITIK', v:'23 J.'},{l:'HEIMATORT', v:'AKÇAPINAR'}] }
  };
  const c = copy[lang];
  return (
    <main>
      <header className="page-head">
        <div className="wrap">
          <div className="crumbs">{c.crumb}</div>
          <h1>{c.title} <em>{c.titleEm}</em></h1>
        </div>
      </header>
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:'var(--pad-6)', alignItems:'start'}}>
          <div>
            <div style={{aspectRatio:'3/4', background:'var(--gov-100)', borderRadius:2, position:'relative', overflow:'hidden', marginBottom:'var(--pad-3)', border:'1px solid var(--line)'}}>
              <div style={{position:'absolute', inset:0, backgroundImage:'repeating-linear-gradient(135deg, transparent 0 12px, rgba(15,42,82,0.06) 12px 13px)'}}></div>
              <div style={{position:'absolute', bottom:24, left:24, right:24, fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.12em', color:'var(--gov-700)', textTransform:'uppercase', opacity:0.6}}>Başkan portresi · placeholder</div>
            </div>
            <div style={{fontSize:20, fontWeight:600, marginBottom:4, letterSpacing:'-0.01em'}}>{c.name}</div>
            <div style={{fontSize:13, fontWeight:500, color:'var(--ink-mute)'}}>{c.role}</div>
          </div>
          <div>
            <blockquote style={{fontFamily:'var(--serif)', fontSize:'clamp(22px, 2.4vw, 32px)', fontWeight:400, lineHeight:1.35, color:'var(--ink)', borderLeft:'3px solid var(--accent)', paddingLeft:'var(--pad-4)', margin:0, marginBottom:'var(--pad-4)'}}>
              {c.quote}
            </blockquote>
            <p style={{fontSize:17, lineHeight:1.7, marginBottom:'var(--pad-3)', color:'var(--ink-soft)'}}>{c.body1}</p>
            <p style={{fontSize:17, lineHeight:1.7, color:'var(--ink-soft)'}}>{c.body2}</p>
            <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, marginTop:'var(--pad-5)', borderTop:'2px solid var(--ink)', borderBottom:'1px solid var(--line)'}}>
              {c.stats.map((s,i) => (
                <div key={i} style={{padding:'var(--pad-3) var(--pad-3) var(--pad-3) 0', borderRight: i<3?'1px solid var(--line)':'none'}}>
                  <div style={{fontSize:10, fontWeight:600, letterSpacing:'0.08em', color:'var(--ink-mute)', marginBottom:8, textTransform:'uppercase'}}>{s.l}</div>
                  <div style={{fontSize:24, fontWeight:600, letterSpacing:'-0.02em'}}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// === NEWS ===
function NewsPage({ setRoute }) {
  const [t, lang] = useT();
  const [filter, setFilter] = useStateP('Tümü');
  const filters = lang==='tr' ? ['Tümü','Kapak','Kültür','Altyapı','Etkinlik','Çevre'] : lang==='en' ? ['All','Cover','Culture','Infra','Event','Env'] : ['Alle','Titel','Kultur','Infra','Event','Umwelt'];
  const titles = { tr: { crumb:'Ana Sayfa / Haberler', title:'Haberler &', titleEm:'duyurular', sub:'Belediyemizden son gelişmeler, etkinlikler, ihaleler ve meclis kararları.' }, en: { crumb:'Home / News', title:'News &', titleEm:'announcements', sub:'Latest from the municipality — events, tenders and council decisions.' }, de: { crumb:'Startseite / Nachrichten', title:'Nachrichten &', titleEm:'Bekanntmachungen', sub:'Aktuelles aus der Stadtverwaltung.' } };
  const c = titles[lang];
  return (
    <main>
      <header className="page-head">
        <div className="wrap">
          <div className="crumbs">{c.crumb}</div>
          <h1>{c.title} <em>{c.titleEm}</em></h1>
          <p>{c.sub}</p>
        </div>
      </header>
      <section style={{padding:'var(--pad-5) 0'}}>
        <div className="wrap">
          <div style={{display:'flex', gap:6, marginBottom:'var(--pad-5)', flexWrap:'wrap'}}>
            {filters.map((f,i) => (
              <button key={i} onClick={()=>setFilter(f)} style={{
                padding:'8px 16px',
                borderRadius:2,
                border: filter===f ? '1px solid var(--accent)' : '1px solid var(--line-strong)',
                background: filter===f ? 'var(--accent)' : 'var(--paper)',
                color: filter===f ? 'white' : 'var(--ink-soft)',
                fontSize:13, fontWeight:600
              }}>{f}</button>
            ))}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'var(--pad-4)'}}>
            {[...t.news.items, ...t.news.items, ...t.news.items.slice(0,2)].map((n, i) => (
              <article key={i} className="news-card">
                <div className="news-img">
                  <span className="news-tag">{n.tag}</span>
                  <img src={n.img} alt="" />
                </div>
                <div className="news-body">
                  <div className="news-date">{n.date}</div>
                  <h3>{n.title}</h3>
                  <p>{n.excerpt}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// === CONTACT ===
function ContactPage({ setRoute }) {
  const [t, lang] = useT();
  const [submitted, setSubmitted] = useStateP(false);
  const [form, setForm] = useStateP({ name:'', email:'', cat:'', msg:'' });
  const [ref] = useStateP(() => 'UB-2026-04-' + Math.floor(Math.random()*9000+1000));
  const copy = {
    tr: { crumb:'Ana Sayfa / İletişim', title:'Bize', titleEm:'ulaşın', sub:'Talep, şikayet, öneri, bilgi edinme — Beyaz Masa\'mızdan ulaşabilirsiniz. Her başvuru takip numarasıyla işleme alınır.', cats:['Çöp / Temizlik','Su / Kanalizasyon','Yol / Aydınlatma','Ruhsat / İzin','Öneri / Tebrik','Diğer'], n:'Ad Soyad', e:'E-posta', cat:'Kategori', m:'Mesajınız', send:'Gönder', success:'Başvurunuz alındı.', sd:'Takip numaranızı kaydedin:', addr:'Adres', tel:'Telefon', mail:'E-posta', hours:'Çalışma saatleri', hoursV:'Pzt–Cum 08:30–17:30' },
    en: { crumb:'Home / Contact', title:'Get in', titleEm:'touch', sub:'Request, complaint, suggestion, info — through our White Desk. Every case gets a tracking number.', cats:['Waste / Cleaning','Water / Sewage','Roads / Lighting','Permit / License','Suggestion','Other'], n:'Full name', e:'Email', cat:'Category', m:'Your message', send:'Send', success:'Case received.', sd:'Save your tracking number:', addr:'Address', tel:'Phone', mail:'Email', hours:'Hours', hoursV:'Mon–Fri 08:30–17:30' },
    de: { crumb:'Startseite / Kontakt', title:'Kontakt', titleEm:'aufnehmen', sub:'Anfrage, Beschwerde, Vorschlag — über unser Bürgerbüro.', cats:['Abfall','Wasser','Straße / Licht','Genehmigung','Vorschlag','Sonstiges'], n:'Name', e:'E-Mail', cat:'Kategorie', m:'Nachricht', send:'Senden', success:'Vorgang erhalten.', sd:'Vorgangsnummer speichern:', addr:'Adresse', tel:'Telefon', mail:'E-Mail', hours:'Öffnungszeiten', hoursV:'Mo–Fr 08:30–17:30' }
  };
  const c = copy[lang];

  return (
    <main>
      <header className="page-head">
        <div className="wrap">
          <div className="crumbs">{c.crumb}</div>
          <h1>{c.title} <em>{c.titleEm}</em></h1>
          <p>{c.sub}</p>
        </div>
      </header>
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:'var(--pad-6)', alignItems:'start'}}>
          <div>
            {!submitted ? (
              <form onSubmit={e=>{e.preventDefault();setSubmitted(true);}}>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                  <div className="field">
                    <label>{c.n}</label>
                    <input required value={form.name} onChange={e=>setForm({...form, name:e.target.value})} />
                  </div>
                  <div className="field">
                    <label>{c.e}</label>
                    <input type="email" required value={form.email} onChange={e=>setForm({...form, email:e.target.value})} />
                  </div>
                </div>
                <div className="field">
                  <label>{c.cat}</label>
                  <select required value={form.cat} onChange={e=>setForm({...form, cat:e.target.value})}>
                    <option value="">—</option>
                    {c.cats.map((cat,i) => <option key={i}>{cat}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>{c.m}</label>
                  <textarea required rows={6} value={form.msg} onChange={e=>setForm({...form, msg:e.target.value})}></textarea>
                </div>
                <button type="submit" className="btn btn-primary">{c.send} →</button>
              </form>
            ) : (
              <div style={{padding:'var(--pad-5)', background:'var(--paper-soft)', border:'1px solid var(--line)', borderRadius:2}}>
                <div style={{width:64, height:64, borderRadius:'50%', background:'#dcefe2', color:'var(--success-500)', display:'grid', placeItems:'center', fontSize:28, marginBottom:'var(--pad-3)'}}>✓</div>
                <h3 style={{fontSize:28, fontWeight:600, marginBottom:12, letterSpacing:'-0.02em'}}>{c.success}</h3>
                <p style={{color:'var(--ink-soft)', marginBottom:16}}>{c.sd}</p>
                <div style={{fontFamily:'var(--mono)', fontSize:22, padding:'14px 20px', background:'var(--ink)', color:'white', display:'inline-block', borderRadius:2, fontWeight:500}}>{ref}</div>
              </div>
            )}
          </div>
          <aside style={{background:'var(--paper-soft)', padding:'var(--pad-4)', border:'1px solid var(--line)', borderRadius:2}}>
            {[
              {l:c.addr, v:'Ayazkıyı Mh. Cumhuriyet Cd.\nÇarşıiçi Sk. No:4, 48640 Ula / Muğla'},
              {l:c.tel, v:'+90 (252) 242 30 08'},
              {l:c.mail, v:'info@ula.bel.tr'},
              {l:c.hours, v:c.hoursV}
            ].map((r,i) => (
              <div key={i} style={{paddingBottom:14, marginBottom:14, borderBottom: i<3?'1px solid var(--line)':'none'}}>
                <div style={{fontSize:10, fontWeight:600, letterSpacing:'0.1em', color:'var(--ink-mute)', textTransform:'uppercase', marginBottom:6}}>{r.l}</div>
                <div style={{fontSize:15, fontWeight:500, whiteSpace:'pre-line', lineHeight:1.5}}>{r.v}</div>
              </div>
            ))}
            <div style={{aspectRatio:'4/3', marginTop:16, background:'var(--gov-100)', borderRadius:2, position:'relative', overflow:'hidden', border:'1px solid var(--line)'}}>
              <div style={{position:'absolute', inset:0, backgroundImage:'repeating-linear-gradient(45deg, transparent 0 8px, rgba(15,42,82,0.04) 8px 9px)'}}></div>
              <div style={{position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', textAlign:'center'}}>
                <div style={{fontSize:32, color:'var(--gov-700)'}}>⌖</div>
                <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--gov-700)', marginTop:4, fontWeight:500}}>37.10°N · 28.41°E</div>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, ServicesPage, DiscoverPage, MayorPage, NewsPage, ContactPage });