// ============ Ula Belediyesi — Hizmet & Duyuru Sayfaları ============
// Süreç/belge bilgileri ulusal mevzuata dayanır; kuruma özel güncel bilgi için resmî sayfalar bağlanmıştır.

const { useState: useStateH } = React;
const pL = (obj, lang) => obj[lang] || obj.tr;

// ---- Shared: numbered process steps ----
function StepList({ steps }) {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:1, background:'var(--line)', border:'1px solid var(--line)'}}>
      {steps.map((s,i) => (
        <div key={i} style={{background:'var(--paper)', padding:'var(--pad-4)', display:'grid', gridTemplateColumns:'auto 1fr', gap:'var(--pad-3)', alignItems:'start'}}>
          <div style={{width:36, height:36, borderRadius:'50%', background:'var(--gov-500)', color:'white', display:'grid', placeItems:'center', fontWeight:600, fontSize:15, fontFamily:'var(--mono)'}}>{i+1}</div>
          <div>
            <div style={{fontSize:17, fontWeight:600, letterSpacing:'-0.005em', marginBottom:4}}>{s.t}</div>
            <div style={{fontSize:14, color:'var(--ink-soft)', lineHeight:1.6}}>{s.d}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ---- Shared: document checklist ----
function DocChecklist({ title, docs }) {
  return (
    <div style={{background:'var(--paper-soft)', border:'1px solid var(--line)', borderTop:'3px solid var(--accent)', borderRadius:2, padding:'var(--pad-4)'}}>
      <div className="eyebrow" style={{marginBottom:14}}>{title}</div>
      <div style={{display:'flex', flexDirection:'column', gap:10}}>
        {docs.map((d,i) => (
          <div key={i} style={{display:'flex', gap:12, alignItems:'baseline', fontSize:14, color:'var(--ink-soft)', lineHeight:1.5}}>
            <span style={{color:'var(--accent)', fontWeight:700}}>✓</span>
            <span>{d}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ===== NİKAH İŞLEMLERİ =====
function NikahPage({ setRoute }) {
  const [t, lang] = useT();
  const c = pL({
    tr:{crumb:'Ana Sayfa / Hizmetlerimiz / Nikah İşlemleri', title:'Nikah', em:'işlemleri',
      sub:'Evlilik başvurusu ve gerekli belgeler. Aşağıdaki bilgiler Evlendirme Yönetmeliği esas alınarak hazırlanmıştır; güncel başvuru için Evlendirme Memurluğu ile görüşünüz.',
      stepsTitle:'Başvuru adımları',
      steps:[
        {t:'Başvuru',d:'Evlenecek çiftin birlikte Evlendirme Memurluğu\u2019na başvurması.'},
        {t:'Belgelerin teslimi',d:'Gerekli belgelerin eksiksiz teslim edilmesi ve sağlık raporunun alınması.'},
        {t:'Tarih belirleme',d:'Uygun nikah gün ve saatinin belirlenmesi.'},
        {t:'Nikah töreni',d:'Belirlenen günde iki tanık huzurunda nikah akdinin gerçekleştirilmesi.'}
      ],
      docTitle:'Gerekli belgeler',
      docs:['T.C. kimlik kartı (asıl)','Evlenme beyannamesi (memurlukta doldurulur)','Vesikalık fotoğraf (son 6 ay)','Evlenmeye engel hastalık bulunmadığına dair sağlık raporu','Yabancı uyruklular için bekârlık belgesi ve pasaport'],
      noteTitle:'Bilgilendirme', note:'Başvuru koşulları, salon ve ücretlere ilişkin güncel bilgiler için belediyemizin resmî sayfasını inceleyebilir veya Evlendirme Memurluğu ile iletişime geçebilirsiniz.', btn:'Resmî nikah sayfası'},
    en:{crumb:'Home / Services / Marriage Registry', title:'Marriage', em:'registry',
      sub:'Marriage application and required documents. The following is based on the national Marriage Regulation; for the current procedure please contact the Marriage Registry.',
      stepsTitle:'Application steps',
      steps:[
        {t:'Application',d:'The couple apply together at the Marriage Registry.'},
        {t:'Submit documents',d:'Submit the required documents in full and obtain the health report.'},
        {t:'Set a date',d:'Determine a suitable date and time for the ceremony.'},
        {t:'Ceremony',d:'The marriage is solemnised on the set day before two witnesses.'}
      ],
      docTitle:'Required documents',
      docs:['ID card (original)','Marriage declaration (filled at the registry)','Passport photos (within 6 months)','Health report (no impediment to marriage)','For foreign nationals: certificate of celibacy and passport'],
      noteTitle:'Information', note:'For current conditions, hall and fees, please see the municipality\u2019s official page or contact the Marriage Registry.', btn:'Official marriage page'},
    de:{crumb:'Startseite / Dienste / Standesamt', title:'Stand', em:'esamt',
      sub:'Eheschließung und erforderliche Unterlagen, basierend auf der nationalen Eheschließungsverordnung. Für das aktuelle Verfahren wenden Sie sich bitte an das Standesamt.',
      stepsTitle:'Antragsschritte',
      steps:[
        {t:'Antrag',d:'Das Paar meldet sich gemeinsam beim Standesamt.'},
        {t:'Unterlagen',d:'Einreichung aller Unterlagen und des Gesundheitsattests.'},
        {t:'Termin',d:'Festlegung von Tag und Uhrzeit.'},
        {t:'Trauung',d:'Die Trauung erfolgt vor zwei Zeugen.'}
      ],
      docTitle:'Erforderliche Unterlagen',
      docs:['Personalausweis (Original)','Eheerklärung','Passfotos','Gesundheitsattest','Für Ausländer: Ledigkeitsbescheinigung und Pass'],
      noteTitle:'Hinweis', note:'Aktuelle Bedingungen, Saal und Gebühren finden Sie auf der offiziellen Seite oder beim Standesamt.', btn:'Offizielle Seite'}
  }, lang);
  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" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:'var(--pad-6)', alignItems:'start'}}>
          <div>
            <h3 style={{fontSize:22, fontWeight:600, marginBottom:'var(--pad-3)', letterSpacing:'-0.012em'}}>{c.stepsTitle}</h3>
            <StepList steps={c.steps} />
          </div>
          <aside style={{display:'flex', flexDirection:'column', gap:'var(--pad-4)'}}>
            <DocChecklist title={c.docTitle} docs={c.docs} />
            <div style={{background:'var(--paper)', border:'1px solid var(--line)', borderLeft:'3px solid var(--accent)', borderRadius:2, padding:'var(--pad-4)'}}>
              <div className="eyebrow" style={{marginBottom:12}}>{c.noteTitle}</div>
              <div style={{fontSize:14, color:'var(--ink-soft)', lineHeight:1.6, marginBottom:14}}>{c.note}</div>
              <a href={window.ULA_SRC.nikah} target="_blank" rel="noopener" className="btn btn-primary" style={{textDecoration:'none', width:'100%', justifyContent:'center'}}>{c.btn} ↗</a>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

// ===== RUHSAT İŞLEMLERİ =====
function RuhsatPage({ setRoute }) {
  const [t, lang] = useT();
  const c = pL({
    tr:{crumb:'Ana Sayfa / Hizmetlerimiz / Ruhsat İşlemleri', title:'Ruhsat', em:'işlemleri',
      sub:'İşyeri açma ve çalışma ruhsatı süreçleri. Aşağıdaki bilgiler İşyeri Açma ve Çalışma Ruhsatlarına İlişkin Yönetmelik esas alınarak hazırlanmıştır.',
      typesTitle:'Ruhsat türleri',
      types:[{t:'Sıhhi Müessese',d:'Market, kuaför, lokanta gibi işyerleri.'},{t:'Gayrisıhhi Müessese',d:'Çevresel etkisi olan üretim/sanayi tesisleri.'},{t:'Umuma Açık Yer',d:'Kafe, internet salonu, eğlence yerleri.'}],
      stepsTitle:'Başvuru süreci',
      steps:[
        {t:'Başvuru formu',d:'İşyeri açma ve çalışma ruhsatı başvuru/beyan formunun doldurulması.'},
        {t:'Belge kontrolü',d:'Yapı kullanma izni, vergi levhası, tapu/kira sözleşmesi ve ilgili belgelerin kontrolü.'},
        {t:'Yerinde inceleme',d:'Zabıta ve ilgili müdürlük ekiplerince işyerinin mevzuata uygunluğunun denetlenmesi.'},
        {t:'Ruhsatın düzenlenmesi',d:'Uygun bulunan işyerine ruhsatın düzenlenmesi ve teslimi.'}
      ],
      docTitle:'Sıkça istenen belgeler',
      docs:['Başvuru/beyan formu','Tapu ya da kira sözleşmesi','Yapı kullanma izin belgesi','Vergi levhası fotokopisi','Ustalık/yeterlilik belgesi (gerekiyorsa)','İtfaiye uygunluk raporu (gerekiyorsa)'],
      noteTitle:'Yapı ruhsat süreçleri', note:'İşyeri ruhsatları ve yapı ruhsat süreçlerine ilişkin güncel belge ve başvuru bilgileri resmî sayfamızda yer alır.', btn:'Resmî ruhsat sayfası'},
    en:{crumb:'Home / Services / Business Licensing', title:'Business', em:'licensing',
      sub:'Business opening and operating permit processes. The following is based on the national regulation on business permits.',
      typesTitle:'Licence types',
      types:[{t:'Sanitary Establishment',d:'Shops, hairdressers, restaurants and similar.'},{t:'Non-Sanitary',d:'Production/industrial facilities with environmental impact.'},{t:'Public Venue',d:'Cafés, internet halls, entertainment venues.'}],
      stepsTitle:'Application process',
      steps:[
        {t:'Application form',d:'Complete the business opening and operating permit form/declaration.'},
        {t:'Document check',d:'Verification of occupancy permit, tax plate, title/lease and related documents.'},
        {t:'On-site review',d:'Municipal police and the relevant directorate inspect compliance on site.'},
        {t:'Permit issued',d:'The permit is issued and delivered to compliant businesses.'}
      ],
      docTitle:'Commonly required documents',
      docs:['Application/declaration form','Title deed or lease','Occupancy permit','Copy of tax plate','Proficiency certificate (if required)','Fire safety report (if required)'],
      noteTitle:'Building permit processes', note:'Current documents and application details for business and building permits are on our official page.', btn:'Official permits page'},
    de:{crumb:'Startseite / Dienste / Gewerbegenehmigung', title:'Gewerbe', em:'genehmigung',
      sub:'Prozesse für Eröffnungs- und Betriebsgenehmigungen, basierend auf der nationalen Verordnung.',
      typesTitle:'Genehmigungsarten',
      types:[{t:'Sanitärer Betrieb',d:'Läden, Friseure, Restaurants.'},{t:'Nicht-sanitär',d:'Produktions-/Industrieanlagen.'},{t:'Öffentliche Stätte',d:'Cafés, Vergnügungsorte.'}],
      stepsTitle:'Antragsprozess',
      steps:[
        {t:'Antragsformular',d:'Ausfüllen des Antragsformulars.'},
        {t:'Dokumentenprüfung',d:'Prüfung von Nutzungsgenehmigung, Steuerbescheid und Vertrag.'},
        {t:'Vor-Ort-Prüfung',d:'Kontrolle der Konformität durch das Ordnungsamt.'},
        {t:'Erteilung',d:'Ausstellung und Übergabe der Genehmigung.'}
      ],
      docTitle:'Häufig erforderliche Unterlagen',
      docs:['Antragsformular','Grundbuch oder Mietvertrag','Nutzungsgenehmigung','Kopie des Steuerbescheids','Befähigungsnachweis (falls erforderlich)','Brandschutzbericht (falls erforderlich)'],
      noteTitle:'Bauantragsprozesse', note:'Aktuelle Unterlagen und Antragsdetails finden Sie auf unserer offiziellen Seite.', btn:'Offizielle Seite'}
  }, lang);
  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(3, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)', marginBottom:'var(--pad-6)'}}>
            {c.types.map((ty,i) => (
              <div key={i} style={{background:'var(--paper)', padding:'var(--pad-4)', borderTop:'3px solid var(--accent)'}}>
                <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--accent)', fontWeight:600, marginBottom:10}}>{String(i+1).padStart(2,'0')}</div>
                <div style={{fontSize:18, fontWeight:600, letterSpacing:'-0.01em', marginBottom:6}}>{ty.t}</div>
                <div style={{fontSize:13.5, color:'var(--ink-soft)', lineHeight:1.5}}>{ty.d}</div>
              </div>
            ))}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:'var(--pad-6)', alignItems:'start'}}>
            <div>
              <h3 style={{fontSize:22, fontWeight:600, marginBottom:'var(--pad-3)', letterSpacing:'-0.012em'}}>{c.stepsTitle}</h3>
              <StepList steps={c.steps} />
            </div>
            <aside style={{display:'flex', flexDirection:'column', gap:'var(--pad-4)'}}>
              <DocChecklist title={c.docTitle} docs={c.docs} />
              <div style={{background:'var(--paper)', border:'1px solid var(--line)', borderLeft:'3px solid var(--accent)', borderRadius:2, padding:'var(--pad-4)'}}>
                <div className="eyebrow" style={{marginBottom:12}}>{c.noteTitle}</div>
                <div style={{fontSize:14, color:'var(--ink-soft)', lineHeight:1.6, marginBottom:14}}>{c.note}</div>
                <a href={window.ULA_SRC.ruhsat} target="_blank" rel="noopener" className="btn btn-primary" style={{textDecoration:'none', width:'100%', justifyContent:'center'}}>{c.btn} ↗</a>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

// ===== TARİFE CETVELLERİ =====
function TarifePage() {
  const [t, lang] = useT();
  const c = pL({
    tr:{crumb:'Ana Sayfa / Tarife Cetvelleri', title:'Tarife', em:'cetvelleri',
      paras:['Belediyemizin ücret ve harç tarifeleri her yıl belediye meclisi kararıyla belirlenir. İşyeri ruhsatı, nikah, mezarlık, imar durum belgesi, ilan-reklam ve çevre temizlik vergisi gibi kalemlere ilişkin güncel tarife cetveli resmî sayfamızda yayımlanır.'], btn:'Tarife cetveline git'},
    en:{crumb:'Home / Fee Schedules', title:'Fee', em:'schedules',
      paras:['The municipality\u2019s fees and charges are set each year by council decision. The current fee schedule — covering items such as business permits, marriage, cemetery, zoning certificates, advertising and environmental cleaning tax — is published on our official page.'], btn:'Go to the fee schedule'},
    de:{crumb:'Startseite / Gebührentabellen', title:'Gebühren', em:'tabellen',
      paras:['Die Gebühren der Stadtverwaltung werden jährlich per Ratsbeschluss festgelegt. Die aktuelle Gebührentabelle wird auf unserer offiziellen Seite veröffentlicht.'], btn:'Zur Gebührentabelle'}
  }, 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.tarife} btn={c.btn} /></div></section>
    </main>
  );
}

// ===== DUYURULAR (doğrulanmış başlıklar) =====
function DuyurularPage() {
  const [t, lang] = useT();
  const [filter, setFilter] = useStateH('all');
  const c = pL({
    tr:{crumb:'Ana Sayfa / Duyurular', title:'Duyurular', em:'& haberler', sub:'Belediyemizden güncel duyuru ve haberler. Tüm duyuru arşivi için resmî sayfamızı ziyaret edebilirsiniz.', all:'Tümü', src:'Tüm duyurular'},
    en:{crumb:'Home / Announcements', title:'Announcements', em:'& news', sub:'Latest announcements and news from the municipality. Visit our official page for the full archive.', all:'All', src:'All announcements'},
    de:{crumb:'Startseite / Bekanntmachungen', title:'Bekannt', em:'machungen', sub:'Aktuelle Mitteilungen und Nachrichten. Das vollständige Archiv finden Sie auf der offiziellen Seite.', all:'Alle', src:'Alle Bekanntmachungen'}
  }, lang);
  const cats = pL({
    tr:{DUYURU:'Duyuru', HABER:'Haber', 'ÇALIŞMA':'Çalışma'},
    en:{DUYURU:'Notice', HABER:'News', 'ÇALIŞMA':'Works'},
    de:{DUYURU:'Mitteilung', HABER:'Nachricht', 'ÇALIŞMA':'Arbeiten'}
  }, lang);
  const items = window.ULA_DUYURU || [];
  const chips = ['all','DUYURU','HABER','ÇALIŞMA'];
  const filtered = filter==='all' ? items : items.filter(i => i.cat===filter);
  return (
    <main>
      <PageHead crumb={c.crumb} title={c.title} em={c.em} sub={c.sub} />
      <section style={{padding:'var(--pad-5) 0'}}>
        <div className="wrap">
          <div style={{display:'flex', gap:6, marginBottom:'var(--pad-4)', flexWrap:'wrap'}}>
            {chips.map(ch => (
              <button key={ch} onClick={()=>setFilter(ch)} style={{
                padding:'8px 16px', borderRadius:2,
                border: filter===ch ? '1px solid var(--accent)' : '1px solid var(--line-strong)',
                background: filter===ch ? 'var(--accent)' : 'var(--paper)',
                color: filter===ch ? 'white' : 'var(--ink-soft)',
                fontSize:13, fontWeight:600
              }}>{ch==='all' ? c.all : cats[ch]}</button>
            ))}
          </div>
          <ul className="announce-list" style={{marginTop:0}}>
            {filtered.map((it,i) => (
              <li key={i}>
                <a className="announce-row announce-row--nometa" href={window.ULA_SRC.duyurular} target="_blank" rel="noopener">
                  <span className="announce-date">{it.d[lang] || it.d.tr}</span>
                  <span className="announce-tag">{cats[it.cat]}</span>
                  <span className="announce-title">{it.t[lang] || it.t.tr}</span>
                  <span className="announce-arrow" aria-hidden="true">↗</span>
                </a>
              </li>
            ))}
          </ul>
          <div style={{marginTop:'var(--pad-4)'}}>
            <a href={window.ULA_SRC.duyurular} target="_blank" rel="noopener" className="btn btn-ghost" style={{textDecoration:'none'}}>{c.src} ↗</a>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { StepList, DocChecklist, NikahPage, RuhsatPage, TarifePage, DuyurularPage });