// ============ Ula Belediyesi — Kurumsal Sayfalar ============
// Tüm içerik ula.bel.tr üzerinden doğrulanmıştır.

const { useState: useStateK } = React;

const pickL = (obj, lang) => obj[lang] || obj.tr;

// ---- Shared: page header ----
function PageHead({ crumb, title, em, sub }) {
  return (
    <header className="page-head">
      <div className="wrap">
        <div className="crumbs">{crumb}</div>
        <h1>{title}{em ? <em> {em}</em> : null}</h1>
        {sub ? <p>{sub}</p> : null}
      </div>
    </header>
  );
}

// ---- Shared: official source link (kaynak) ----
function SourceLink({ url, lang }) {
  const lbl = { tr:'Resmî sayfa: ', en:'Official page: ', de:'Offizielle Seite: ' }[lang] || 'Official page: ';
  return (
    <a href={url} target="_blank" rel="noopener" style={{display:'inline-flex', alignItems:'center', gap:8, fontFamily:'var(--mono)', fontSize:12, color:'var(--ink-mute)', textDecoration:'none', marginTop:'var(--pad-3)'}}>
      <span style={{textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600}}>{lbl}</span>
      {url.replace('https://','')} ↗
    </a>
  );
}

// ---- Shared: official archive notice (belge arşivi resmî sitede) ----
function ArchiveNotice({ lang, paras, url, btn }) {
  const note = { tr:'Bu bölümdeki güncel belgeler belediyemizin resmî sitesinde yayımlanmaktadır.', en:'The current documents in this section are published on the municipality\u2019s official website.', de:'Die aktuellen Dokumente dieses Bereichs werden auf der offiziellen Website veröffentlicht.' }[lang];
  return (
    <div style={{maxWidth:760}}>
      {paras.map((p,i) => (
        <p key={i} style={{fontSize:17, lineHeight:1.7, color:'var(--ink-soft)', marginBottom:'var(--pad-3)'}}>{p}</p>
      ))}
      <div style={{background:'var(--paper-soft)', border:'1px solid var(--line)', borderLeft:'3px solid var(--accent)', borderRadius:2, padding:'var(--pad-4)', marginTop:'var(--pad-3)'}}>
        <div style={{fontSize:14, color:'var(--ink-soft)', lineHeight:1.6, marginBottom:14}}>{note}</div>
        <a href={url} target="_blank" rel="noopener" className="btn btn-primary" style={{textDecoration:'none'}}>{btn} ↗</a>
        <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-mute)', marginTop:12, letterSpacing:'0.02em'}}>{url.replace('https://','')}</div>
      </div>
    </div>
  );
}

// ===== 1. BAŞKAN (doğrulanmış özgeçmiş) =====
function BaskanPage({ setRoute }) {
  const [t, lang] = useT();
  const C = {
    tr: { crumb:'Ana Sayfa / Kurumsal / Başkan', title:'Belediye', em:'Başkanı', name:'Mehmet CANER', role:'Ula Belediye Başkanı',
      body:['Başkan Sayın Mehmet Caner, 1961 yılında Ula ilçesi Akçapınar Mahallesi\u2019nde doğdu. İlk ve orta öğrenimini Ula\u2019da tamamladı; Muğla Endüstri Meslek Lisesi\u2019nden 1977 yılında mezun oldu. Deniz Kuvvetleri Makine Sınıf Okulu Teknik Astsubay Bölümü\u2019nü 1979 yılında bitirdikten sonra aktif çalışma hayatına başladı. Deniz Kuvvetleri Komutanlığı tersane ve fabrikalarında çeşitli mevkilerde görev alıp yöneticilik yaptı. Evli ve bir kız çocuğu babasıdır.',
        '2000 yılında emekli olduktan sonra CHP\u2019de aktif siyasi hayata başladı. 23 yıllık aktif siyasi hayatı boyunca mahalle temsilciliği, İlçe Yönetim Kurulu Üyeliği, 16 yıl İl Delegeliği, Ula Belediyesi\u2019nde CHP Belediye Meclis Üyeliği, İmar Komisyonu ve Plan-Bütçe Komisyonu Üyeliği ile Encümenlik görevlerinde bulundu.',
        'Akçapınar Su Ürünleri Üretim ve Değerlendirme Kooperatifi ile Gökova Kültür Sanat Derneği gibi sivil toplum kuruluşlarında Yönetim Kurulu Üyeliği yaptı. 31 Mart 2024 Yerel Seçimleri\u2019nde CHP Belediye Başkan Adayı olarak seçimi kazanıp Ula Belediye Başkanı olarak görevine başladı.'],
      stats:[{l:'DOĞUM',v:'1961'},{l:'LİSE',v:'1977'},{l:'GÖREVE BAŞLAMA',v:'2024'},{l:'MEMLEKET',v:'AKÇAPINAR'}],
      msgCta:'Başkanın mesajı' },
    en: { crumb:'Home / Corporate / The Mayor', title:'The', em:'Mayor', name:'Mehmet CANER', role:'Mayor of Ula',
      body:['Mehmet Caner was born in 1961 in Ula\u2019s Akçapınar neighbourhood. He completed his schooling in Ula and graduated from Muğla Industrial Vocational High School in 1977. After completing the Naval Machinery School\u2019s Technical Petty Officer programme in 1979, he began his working career, serving and managing at various levels in the shipyards and factories of the Naval Forces Command. He is married with one daughter.',
        'After retiring in 2000 he entered active politics with the CHP. Over 23 years he served as a neighbourhood representative, district board member, provincial delegate (16 years), CHP municipal council member in Ula, member of the Zoning and the Plan-Budget committees, and member of the executive committee.',
        'He held board positions in civil society organisations such as the Akçapınar Aquaculture Cooperative and the Gökova Culture & Arts Association. In the local elections of 31 March 2024 he stood as the CHP mayoral candidate, won, and took office as Mayor of Ula.'],
      stats:[{l:'BORN',v:'1961'},{l:'HIGH SCHOOL',v:'1977'},{l:'TOOK OFFICE',v:'2024'},{l:'HOMETOWN',v:'AKÇAPINAR'}],
      msgCta:'Mayor\u2019s message' },
    de: { crumb:'Startseite / Verwaltung / Bürgermeister', title:'Der', em:'Bürgermeister', name:'Mehmet CANER', role:'Bürgermeister von Ula',
      body:['Mehmet Caner wurde 1961 in Akçapınar (Ula) geboren. Er besuchte die Schule in Ula und schloss 1977 die Industrie-Berufsschule Muğla ab. Nach dem Abschluss der Marine-Maschinenschule (Technischer Unteroffizier) 1979 begann er seine Laufbahn und übernahm Führungsaufgaben in Werften und Fabriken der Marine. Er ist verheiratet und hat eine Tochter.',
        'Nach seiner Pensionierung im Jahr 2000 trat er der CHP bei. In 23 Jahren war er Ortsvertreter, Kreisvorstandsmitglied, 16 Jahre Provinzdelegierter, CHP-Ratsmitglied in Ula sowie Mitglied des Bau- und des Haushaltsausschusses.',
        'Er war Vorstandsmitglied in Vereinen wie der Akçapınar-Fischereigenossenschaft und dem Kultur- und Kunstverein Gökova. Bei den Kommunalwahlen am 31. März 2024 wurde er als CHP-Kandidat zum Bürgermeister von Ula gewählt.'],
      stats:[{l:'GEBOREN',v:'1961'},{l:'BERUFSSCHULE',v:'1977'},{l:'AMTSANTRITT',v:'2024'},{l:'HEIMATORT',v:'AKÇAPINAR'}],
      msgCta:'Botschaft des Bürgermeisters' }
  };
  const c = C[lang] || C.tr;
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} />
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'1fr 1.5fr', gap:'var(--pad-6)', alignItems:'start'}}>
          <div>
            <div style={{aspectRatio:'1024/576', background:'var(--gov-100)', borderRadius:2, overflow:'hidden', marginBottom:'var(--pad-3)', border:'1px solid var(--line)'}}>
              <img src="https://ula.bel.tr/wp-content/uploads/2024/04/mehmetcaner-1024x576.jpg" alt="Mehmet Caner" style={{width:'100%', height:'100%', objectFit:'cover'}} loading="lazy" />
            </div>
            <div style={{fontSize:22, fontWeight:600, marginBottom:4, letterSpacing:'-0.01em'}}>{c.name}</div>
            <div style={{fontSize:14, fontWeight:500, color:'var(--ink-mute)'}}>{c.role}</div>
            <div style={{display:'flex', gap:10, marginTop:14}}>
              <a href="https://www.facebook.com/mehmet.caner.967806" target="_blank" rel="noopener" className="btn btn-ghost" style={{padding:'7px 14px', fontSize:12, textDecoration:'none'}}>Facebook ↗</a>
              <a href="https://www.instagram.com/mehmetcaner.ula/" target="_blank" rel="noopener" className="btn btn-ghost" style={{padding:'7px 14px', fontSize:12, textDecoration:'none'}}>Instagram ↗</a>
            </div>
          </div>
          <div>
            {c.body.map((p,i) => (
              <p key={i} style={{fontSize:17, lineHeight:1.7, marginBottom:'var(--pad-3)', color:'var(--ink-soft)'}}>{p}</p>
            ))}
            <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, marginTop:'var(--pad-4)', 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:22, fontWeight:600, letterSpacing:'-0.02em'}}>{s.v}</div>
                </div>
              ))}
            </div>
            <div style={{display:'flex', gap:12, alignItems:'center', marginTop:'var(--pad-4)', flexWrap:'wrap'}}>
              <button className="btn btn-ghost" onClick={()=>setRoute('baskan-mesaj')}>{c.msgCta} →</button>
            </div>
            <SourceLink url={window.ULA_SRC.baskan} lang={lang} />
          </div>
        </div>
      </section>
    </main>
  );
}

// ===== 2. BAŞKANIN MESAJI =====
function BaskanMesajPage({ setRoute }) {
  const [t, lang] = useT();
  const C = {
    tr: { crumb:'Ana Sayfa / Kurumsal / Başkanın Mesajı', title:'Başkanın', em:'mesajı',
      paras:['Ula Belediye Başkanı Mehmet Caner\u2019in vatandaşlarımıza hitaben hazırladığı mesajın tam metni ve güncel hâli, belediyemizin resmî web sitesinde yayımlanmaktadır.',
        'Başkanımızın özgeçmişine ve iletişim kanallarına "Başkan" sayfasından ulaşabilirsiniz.'],
      btn:'Başkanın mesajını oku', back:'Başkanın özgeçmişi' },
    en: { crumb:'Home / Corporate / Mayor\u2019s Message', title:'Mayor\u2019s', em:'message',
      paras:['The full and current text of Mayor Mehmet Caner\u2019s message to citizens is published on the municipality\u2019s official website.',
        'You can find the mayor\u2019s biography and contact channels on the "Mayor" page.'],
      btn:'Read the mayor\u2019s message', back:'Mayor\u2019s biography' },
    de: { crumb:'Startseite / Verwaltung / Botschaft', title:'Botschaft des', em:'Bürgermeisters',
      paras:['Der vollständige und aktuelle Text der Botschaft von Bürgermeister Mehmet Caner wird auf der offiziellen Website der Stadtverwaltung veröffentlicht.',
        'Die Biografie und die Kontaktkanäle des Bürgermeisters finden Sie auf der Seite „Bürgermeister".'],
      btn:'Botschaft lesen', back:'Biografie des Bürgermeisters' }
  };
  const c = C[lang] || C.tr;
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} />
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap">
          <ArchiveNotice lang={lang} paras={c.paras} url={window.ULA_SRC.baskanMesaj} btn={c.btn} />
          <div style={{marginTop:'var(--pad-4)'}}>
            <button className="btn btn-ghost" onClick={()=>setRoute('baskan')}>← {c.back}</button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ===== 3. MECLİS ÜYELERİMİZ (doğrulanmış) =====
function MeclisUyeleriPage() {
  const [t, lang] = useT();
  const C = {
    tr: { crumb:'Ana Sayfa / Kurumsal / Meclis Üyelerimiz', title:'Meclis', em:'üyelerimiz', sub:'31 Mart 2024 yerel seçimleri sonucu oluşan Ula Belediye Meclisi üyeleri. Belediye Başkanı meclise başkanlık eder.',
      baskanRole:'Belediye Başkanı / Meclis Başkanı', uye:'Meclis Üyesi', total:'ÜYE' },
    en: { crumb:'Home / Corporate / Council Members', title:'Council', em:'members', sub:'Members of the Ula Municipal Council formed after the local elections of 31 March 2024. The mayor chairs the council.',
      baskanRole:'Mayor / Council Chair', uye:'Council Member', total:'MEMBERS' },
    de: { crumb:'Startseite / Verwaltung / Ratsmitglieder', title:'Unsere', em:'Ratsmitglieder', sub:'Mitglieder des Stadtrats von Ula nach den Kommunalwahlen am 31. März 2024. Der Bürgermeister führt den Vorsitz.',
      baskanRole:'Bürgermeister / Vorsitzender', uye:'Ratsmitglied', total:'MITGLIEDER' }
  };
  const c = C[lang] || C.tr;
  const members = window.ULA_MECLIS || [];
  const initials = (n) => n.split(' ').map(w=>w[0]).slice(0,2).join('');
  const partyColor = { 'CHP':'#d6122b', 'AK Parti':'#ec6e00', 'MHP':'#b30000' };
  // parti dağılımı
  const counts = members.reduce((a,m)=>{a[m.p]=(a[m.p]||0)+1;return a;},{});
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} sub={c.sub} />
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap">
          {/* Başkan */}
          <div style={{display:'flex', alignItems:'center', gap:18, background:'var(--gov-700)', color:'white', padding:'var(--pad-4)', borderRadius:2, marginBottom:'var(--pad-4)'}}>
            <div style={{width:60, height:60, borderRadius:2, overflow:'hidden', flexShrink:0, border:'1px solid rgba(255,255,255,0.25)'}}>
              <img src="https://ula.bel.tr/wp-content/uploads/2024/04/mehmetcaner-1024x576.jpg" alt="Mehmet Caner" style={{width:'100%', height:'100%', objectFit:'cover'}} loading="lazy" />
            </div>
            <div>
              <div style={{fontSize:20, fontWeight:600, letterSpacing:'-0.01em'}}>Mehmet Caner</div>
              <div style={{fontSize:13, opacity:0.85, fontWeight:500, marginTop:2}}>{c.baskanRole} · CHP</div>
            </div>
          </div>
          {/* Üyeler */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)', marginBottom:'var(--pad-5)'}}>
            {members.map((m,i) => (
              <div key={i} style={{background:'var(--paper)', padding:'var(--pad-3) var(--pad-4)', display:'flex', alignItems:'center', gap:14}}>
                <div style={{width:46, height:46, borderRadius:2, background:'var(--gov-50)', color:'var(--gov-600)', display:'grid', placeItems:'center', fontFamily:'var(--serif)', fontSize:16, fontWeight:600, border:'1px solid var(--gov-100)', flexShrink:0}}>{initials(m.n)}</div>
                <div style={{minWidth:0}}>
                  <div style={{fontSize:15, fontWeight:600, letterSpacing:'-0.005em', lineHeight:1.25}}>{m.n}</div>
                  <div style={{display:'flex', alignItems:'center', gap:6, marginTop:4}}>
                    <span style={{width:8, height:8, borderRadius:'50%', background:partyColor[m.p]||'var(--ink-mute)'}}></span>
                    <span style={{fontSize:12, color:'var(--ink-mute)', fontWeight:500}}>{m.p}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          {/* Dağılım */}
          <div style={{padding:'var(--pad-4)', background:'var(--paper-soft)', border:'1px solid var(--line)', borderTop:'3px solid var(--accent)', borderRadius:2, display:'flex', gap:'var(--pad-5)', flexWrap:'wrap', alignItems:'center'}}>
            <div>
              <div style={{fontSize:10, fontWeight:600, letterSpacing:'0.1em', color:'var(--ink-mute)', marginBottom:6, textTransform:'uppercase'}}>{c.total}</div>
              <div style={{fontSize:30, fontWeight:600, letterSpacing:'-0.025em'}}>{members.length}</div>
            </div>
            <div style={{display:'flex', gap:'var(--pad-4)', flexWrap:'wrap'}}>
              {Object.entries(counts).map(([p,n]) => (
                <div key={p} style={{display:'flex', alignItems:'center', gap:8}}>
                  <span style={{width:10, height:10, borderRadius:'50%', background:partyColor[p]||'var(--ink-mute)'}}></span>
                  <span style={{fontSize:14, fontWeight:600}}>{p}</span>
                  <span style={{fontFamily:'var(--mono)', fontSize:14, color:'var(--ink-mute)'}}>{n}</span>
                </div>
              ))}
            </div>
          </div>
          <SourceLink url={window.ULA_SRC.meclis} lang={lang} />
        </div>
      </section>
    </main>
  );
}

// ===== 4. ORGANİZASYON ŞEMASI (doğrulanmış birimler) =====
function OrganizasyonPage() {
  const [t, lang] = useT();
  const C = {
    tr: { crumb:'Ana Sayfa / Kurumsal / Organizasyon Şeması', title:'Organizasyon', em:'şeması', sub:'Ula Belediye Başkanlığı teşkilat yapısı: yasal organlar ve müdürlükler.',
      baskan:'Belediye Başkanı', baskanName:'Mehmet Caner', meclis:'Belediye Meclisi', encumen:'Encümen', dirLbl:'MÜDÜRLÜKLER' },
    en: { crumb:'Home / Corporate / Organisation Chart', title:'Organisation', em:'chart', sub:'The structure of the Municipality of Ula: statutory organs and directorates.',
      baskan:'Mayor', baskanName:'Mehmet Caner', meclis:'Municipal Council', encumen:'Executive Committee', dirLbl:'DIRECTORATES' },
    de: { crumb:'Startseite / Verwaltung / Organigramm', title:'Das', em:'Organigramm', sub:'Die Struktur der Stadtverwaltung Ula: gesetzliche Organe und Ämter.',
      baskan:'Bürgermeister', baskanName:'Mehmet Caner', meclis:'Stadtrat', encumen:'Ausschuss', dirLbl:'ÄMTER' }
  };
  const c = C[lang] || C.tr;
  const dirs = window.ULA_BIRIMLER || [];
  const node = (title, sub, primary) => (
    <div style={{background: primary?'var(--gov-700)':'var(--paper)', color: primary?'white':'var(--ink)', border: primary?'none':'1px solid var(--line-strong)', borderRadius:2, padding:'14px 20px', textAlign:'center', minWidth:200}}>
      <div style={{fontSize: primary?18:15, fontWeight:600, letterSpacing:'-0.01em'}}>{title}</div>
      {sub ? <div style={{fontSize:12, opacity: primary?0.8:0.6, marginTop:3, fontWeight:500}}>{sub}</div> : null}
    </div>
  );
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} sub={c.sub} />
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap">
          <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
            <div style={{display:'flex', gap:'var(--pad-3)', alignItems:'center', justifyContent:'center', flexWrap:'wrap', marginBottom:'var(--pad-2)'}}>
              {node(c.meclis, null)}
              {node(c.baskan, c.baskanName, true)}
              {node(c.encumen, null)}
            </div>
            <div style={{width:2, height:'var(--pad-4)', background:'var(--line-strong)'}}></div>
            <div style={{width:'100%', borderTop:'2px solid var(--line-strong)', paddingTop:'var(--pad-4)'}}>
              <div className="eyebrow" style={{marginBottom:16, textAlign:'center'}}>{c.dirLbl}</div>
              <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'var(--pad-3)'}}>
                {dirs.map((d,i) => (
                  <div key={i} style={{background:'var(--paper)', border:'1px solid var(--line)', borderLeft:'3px solid var(--accent)', borderRadius:2, padding:'var(--pad-3) var(--pad-4)', display:'flex', alignItems:'center', gap:12}}>
                    <span style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--accent)', fontWeight:600}}>{String(i+1).padStart(2,'0')}</span>
                    <span style={{fontSize:15, fontWeight:600, letterSpacing:'-0.005em', lineHeight:1.3}}>{d}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div style={{marginTop:'var(--pad-4)'}}><SourceLink url={window.ULA_SRC.birimler} lang={lang} /></div>
        </div>
      </section>
    </main>
  );
}

// ===== 5–8. Belge arşivi sayfaları =====
function YonergelerPage() {
  const [t, lang] = useT();
  const c = pickL({
    tr:{crumb:'Ana Sayfa / Kurumsal / Başkanlık Yönergeleri', title:'Başkanlık', em:'yönergeleri',
      paras:['Belediyemizin iç işleyişini düzenleyen başkanlık yönergeleri, yönetmelikler ve genelgeler bu bölümde yer alır. İmza yetkileri, disiplin amirleri ve kamu hizmet standartları gibi düzenlemeler buradan yayımlanır.'], btn:'Yönergelere git'},
    en:{crumb:'Home / Corporate / Mayoral Directives', title:'Mayoral', em:'directives',
      paras:['Mayoral directives, regulations and circulars governing the internal operation of the municipality are published here.'], btn:'Go to directives'},
    de:{crumb:'Startseite / Verwaltung / Dienstanweisungen', title:'Dienst', em:'anweisungen',
      paras:['Hier werden Dienstanweisungen, Verordnungen und Rundschreiben der Verwaltung veröffentlicht.'], btn:'Zu den Anweisungen'}
  }, lang);
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} />
      <section style={{padding:'var(--pad-6) 0'}}><div className="wrap"><ArchiveNotice lang={lang} paras={c.paras} url={window.ULA_SRC.yonergeler} btn={c.btn} /></div></section>
    </main>
  );
}

function FaaliyetPage() {
  const [t, lang] = useT();
  const c = pickL({
    tr:{crumb:'Ana Sayfa / Kurumsal / Faaliyet Raporları', title:'Faaliyet', em:'raporları',
      paras:['5393 sayılı Belediye Kanunu gereğince her yıl hazırlanan ve belediye meclisine sunulan idare faaliyet raporları bu bölümde yayımlanır. Raporlar; yıl içinde gerçekleştirilen çalışmaları, hizmetleri ve performans sonuçlarını kapsar.'], btn:'Faaliyet raporlarına git'},
    en:{crumb:'Home / Corporate / Annual Reports', title:'Annual', em:'reports',
      paras:['Annual administrative activity reports, prepared and presented to the council each year under Municipal Law No. 5393, are published in this section.'], btn:'Go to reports'},
    de:{crumb:'Startseite / Verwaltung / Jahresberichte', title:'Jahres', em:'berichte',
      paras:['Die jährlichen Tätigkeitsberichte gemäß Gemeindegesetz Nr. 5393 werden hier veröffentlicht.'], btn:'Zu den Berichten'}
  }, lang);
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} />
      <section style={{padding:'var(--pad-6) 0'}}><div className="wrap"><ArchiveNotice lang={lang} paras={c.paras} url={window.ULA_SRC.faaliyet} btn={c.btn} /></div></section>
    </main>
  );
}

function IcKontrolPage() {
  const [t, lang] = useT();
  const c = pickL({
    tr:{crumb:'Ana Sayfa / Kurumsal / İç Kontrol Eylem Planı', title:'İç kontrol', em:'eylem planı',
      paras:['5018 sayılı Kamu Mali Yönetimi ve Kontrol Kanunu kapsamında hazırlanan iç kontrol standartları ve eylem planı bu bölümde yer alır. Kontrol ortamı, risk değerlendirme, kontrol faaliyetleri, bilgi-iletişim ve izleme bileşenlerini kapsar.'], btn:'Eylem planına git'},
    en:{crumb:'Home / Corporate / Internal Control Plan', title:'Internal control', em:'action plan',
      paras:['The internal control standards and action plan prepared under Public Financial Management Law No. 5018 are published in this section.'], btn:'Go to the plan'},
    de:{crumb:'Startseite / Verwaltung / Internes Kontrollsystem', title:'Internes', em:'Kontrollsystem',
      paras:['Die Standards und der Aktionsplan des internen Kontrollsystems gemäß Gesetz Nr. 5018 werden hier veröffentlicht.'], btn:'Zum Aktionsplan'}
  }, lang);
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} />
      <section style={{padding:'var(--pad-6) 0'}}><div className="wrap"><ArchiveNotice lang={lang} paras={c.paras} url={window.ULA_SRC.icKontrol} btn={c.btn} /></div></section>
    </main>
  );
}

function MaliTablolarPage() {
  const [t, lang] = useT();
  const c = pickL({
    tr:{crumb:'Ana Sayfa / Kurumsal / Mali Tablolar', title:'Mali', em:'tablolar',
      paras:['Bütçe kararnamesi, kesin hesap cetvelleri ile mali durum ve beklentiler raporları bu bölümde kamuya açık olarak yayımlanır. Şeffaf mali yönetim ilkemiz gereği güncel tablolara resmî sitemizden ulaşılabilir.'], btn:'Mali tablolara git'},
    en:{crumb:'Home / Corporate / Financial Tables', title:'Financial', em:'tables',
      paras:['Budget decrees, final account tables and financial position & outlook reports are published openly in this section.'], btn:'Go to financial tables'},
    de:{crumb:'Startseite / Verwaltung / Finanztabellen', title:'Finanz', em:'tabellen',
      paras:['Haushaltsdekrete, Schlussrechnungen sowie Finanzlage- und Ausblicksberichte werden hier öffentlich veröffentlicht.'], btn:'Zu den Finanztabellen'}
  }, lang);
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} />
      <section style={{padding:'var(--pad-6) 0'}}><div className="wrap"><ArchiveNotice lang={lang} paras={c.paras} url={window.ULA_SRC.mali} btn={c.btn} /></div></section>
    </main>
  );
}

// ===== 9. ETİK KOMİSYONU =====
function EtikPage() {
  const [t, lang] = useT();
  const c = pickL({
    tr:{crumb:'Ana Sayfa / Kurumsal / Etik Komisyonu', title:'Etik', em:'komisyonu',
      paras:['5176 sayılı Kanun ve Kamu Görevlileri Etik Davranış İlkeleri Yönetmeliği gereğince oluşturulan Etik Komisyonu, kurum içinde etik kültürünü yerleştirmek ve etik davranış ilkeleri konusunda başvuruları değerlendirmekle görevlidir.'], btn:'Etik Komisyonu sayfası'},
    en:{crumb:'Home / Corporate / Ethics Commission', title:'Ethics', em:'commission',
      paras:['Established under Law No. 5176 and the Code of Ethical Conduct for Public Officials, the Ethics Commission promotes an internal ethics culture and reviews applications regarding ethical conduct.'], btn:'Ethics Commission page'},
    de:{crumb:'Startseite / Verwaltung / Ethikkommission', title:'Ethik', em:'kommission',
      paras:['Die gemäß Gesetz Nr. 5176 eingerichtete Ethikkommission fördert die Ethikkultur und prüft Eingaben zu ethischem Verhalten.'], btn:'Seite der Ethikkommission'}
  }, lang);
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} />
      <section style={{padding:'var(--pad-6) 0'}}><div className="wrap"><ArchiveNotice lang={lang} paras={c.paras} url={window.ULA_SRC.etik} btn={c.btn} /></div></section>
    </main>
  );
}

// ===== 10. MUHTARLIKLAR (doğrulanmış 2024 listesi) =====
function MuhtarliklarPage() {
  const [t, lang] = useT();
  const c = pickL({
    tr:{crumb:'Ana Sayfa / Kurumsal / Muhtarlıklar', title:'Mahalle', em:'muhtarlıkları', sub:'Ula ilçesine bağlı mahalle muhtarlıkları ve iletişim bilgileri (2024 listesi).', muhtar:'Muhtar', total:'MAHALLE'},
    en:{crumb:'Home / Corporate / Village Heads', title:'Neighbourhood', em:'heads', sub:'Neighbourhood headmen (muhtar) of Ula district and their contact details (2024 list).', muhtar:'Muhtar', total:'NEIGHBOURHOODS'},
    de:{crumb:'Startseite / Verwaltung / Ortsvorsteher', title:'Die', em:'Ortsvorsteher', sub:'Ortsvorsteher (Muhtar) der Bezirke von Ula und ihre Kontaktdaten (Liste 2024).', muhtar:'Muhtar', total:'BEZIRKE'}
  }, lang);
  const list = window.ULA_MUHTARLAR || [];
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} sub={c.sub} />
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)'}}>
            {list.map((m,i) => (
              <div key={i} style={{background:'var(--paper)', padding:'var(--pad-3) var(--pad-4)', display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, transition:'background 0.15s'}}
                onMouseEnter={e=>e.currentTarget.style.background='var(--gov-50)'}
                onMouseLeave={e=>e.currentTarget.style.background='var(--paper)'}>
                <div style={{display:'flex', alignItems:'center', gap:14, minWidth:0}}>
                  <span style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-faint)', fontWeight:600, minWidth:22}}>{String(i+1).padStart(2,'0')}</span>
                  <div style={{minWidth:0}}>
                    <div style={{fontSize:16, fontWeight:600, letterSpacing:'-0.005em'}}>{m.m} <span style={{fontSize:12, fontWeight:500, color:'var(--ink-mute)'}}>Mh.</span></div>
                    <div style={{fontSize:12, color:'var(--ink-mute)', marginTop:2}}>{c.muhtar}: {m.n}</div>
                  </div>
                </div>
                <a href={'tel:+9'+m.tel.replace(/\s/g,'')} style={{fontFamily:'var(--mono)', fontSize:12.5, color:'var(--gov-600)', whiteSpace:'nowrap', textDecoration:'none', fontWeight:500}}>{m.tel}</a>
              </div>
            ))}
          </div>
          <div style={{marginTop:'var(--pad-3)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12}}>
            <div style={{fontSize:13, color:'var(--ink-mute)', fontWeight:500}}>{c.total}: <strong style={{color:'var(--ink)', fontFamily:'var(--mono)'}}>{list.length}</strong></div>
            <SourceLink url={window.ULA_SRC.muhtarliklar} lang={lang} />
          </div>
        </div>
      </section>
    </main>
  );
}

// ===== 11. TARİHÇEMİZ =====
function TarihcePage() {
  const [t, lang] = useT();
  const c = pickL({
    tr:{crumb:'Ana Sayfa / Kurumsal / Tarihçemiz', title:'Ula', em:'tarihçesi',
      lead:'Antik Idyma\u2019dan bugüne, Gökova Körfezi\u2019nin kıyısında köklü bir yerleşim.',
      body:['Ula yöresinin tarihi, ilçe yakınındaki antik Idyma kentine kadar uzanır; Karya bölgesine ait bu yerleşim kaya mezarları ve kalıntılarıyla bilinir. Bölge tarih boyunca farklı uygarlıklara ev sahipliği yapmıştır.',
        'Ula, Anadolu Beylikleri döneminde Menteşe Beyliği topraklarına dâhil olmuş; Osmanlı döneminde Muğla\u2019ya bağlı bir yerleşim olarak gelişmiştir. İlçe, geleneksel Ula evleri ve ahşap mimarisiyle kendine özgü dokusunu korumaktadır.',
        'Günümüzde Ula; Gökova Körfezi, Akyaka ve doğal güzellikleriyle öne çıkar. Akyaka, "Cittaslow" (sakin şehir) kimliğiyle tanınır ve 2025 yılında "Best Tourism Villages" ödülüne layık görülmüştür.'],
      note:'Tarihçeye dair detaylı bilgi için resmî sayfamızı ziyaret edebilirsiniz.'},
    en:{crumb:'Home / Corporate / Our History', title:'History of', em:'Ula',
      lead:'From ancient Idyma to today — a long-rooted settlement on the shore of the Gulf of Gökova.',
      body:['The history of the Ula area reaches back to ancient Idyma near the town, a Carian settlement known for its rock tombs and ruins. The region hosted various civilisations through the ages.',
        'During the Anatolian beyliks, Ula became part of the Menteşe Beylik and developed under the Ottomans as a settlement of Muğla. The district preserves its distinctive character with traditional Ula houses and timber architecture.',
        'Today Ula stands out for the Gulf of Gökova, Akyaka and its natural beauty. Akyaka is known for its "Cittaslow" identity and was named one of the "Best Tourism Villages" in 2025.'],
      note:'Visit our official page for more detailed history.'},
    de:{crumb:'Startseite / Verwaltung / Geschichte', title:'Geschichte', em:'Ulas',
      lead:'Vom antiken Idyma bis heute — eine tief verwurzelte Siedlung am Golf von Gökova.',
      body:['Die Geschichte der Region reicht bis zum antiken Idyma zurück, einer karischen Siedlung mit Felsengräbern. Die Region beherbergte im Lauf der Zeit verschiedene Zivilisationen.',
        'Ula gehörte zum Menteşe-Beylik und entwickelte sich unter den Osmanen als Siedlung von Muğla. Der Bezirk bewahrt seinen Charakter mit traditionellen Ula-Häusern.',
        'Heute ist Ula für den Golf von Gökova und Akyaka bekannt. Akyaka trägt die „Cittaslow"-Identität und wurde 2025 als „Best Tourism Village" ausgezeichnet.'],
      note:'Besuchen Sie unsere offizielle Seite für mehr Geschichte.'}
  }, lang);
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} />
      <section style={{padding:'var(--pad-6) 0'}}>
        <div className="wrap" style={{maxWidth:820, margin:'0 auto'}}>
          <p style={{fontFamily:'var(--serif)', fontSize:'clamp(20px, 2.2vw, 26px)', fontWeight:400, lineHeight:1.4, marginBottom:'var(--pad-4)', borderLeft:'3px solid var(--accent)', paddingLeft:'var(--pad-3)', color:'var(--ink)'}}>{c.lead}</p>
          {c.body.map((p,i) => (
            <p key={i} style={{fontSize:18, lineHeight:1.75, marginBottom:'var(--pad-3)', color:'var(--ink-soft)'}}>{p}</p>
          ))}
          <p style={{fontSize:14, color:'var(--ink-mute)', marginTop:'var(--pad-4)'}}>{c.note}</p>
          <SourceLink url={window.ULA_SRC.tarihce} lang={lang} />
        </div>
      </section>
    </main>
  );
}

Object.assign(window, {
  PageHead, SourceLink, ArchiveNotice, pickL,
  BaskanPage, BaskanMesajPage, MeclisUyeleriPage, OrganizasyonPage,
  YonergelerPage, FaaliyetPage, IcKontrolPage, MaliTablolarPage,
  EtikPage, MuhtarliklarPage, TarihcePage
});