// ============ Ula Belediyesi — Shared Components ============

const { useState, useEffect, useRef, useMemo } = React;

// Lang context (simple global store)
const LangStore = {
  state: { lang: 'tr', listeners: new Set() },
  get() { return this.state.lang; },
  set(l) { this.state.lang = l; this.state.listeners.forEach(fn => fn(l)); },
  use() {
    const [l, setL] = useState(this.state.lang);
    useEffect(() => {
      const fn = (newL) => setL(newL);
      this.state.listeners.add(fn);
      return () => this.state.listeners.delete(fn);
    }, []);
    return l;
  }
};
window.LangStore = LangStore;

function useT() {
  const lang = LangStore.use();
  return [I18N[lang], lang];
}

// === Brand mark (Ula crest) ===
function BrandMark({ size = 52 }) {
  return (
    <div className="brand-mark" style={{ width: size, height: size, fontSize: size * 0.46 }}>
      U
    </div>
  );
}

// === Government strip (en üst — resmi kurum bandı) ===
function GovStrip() {
  const lang = LangStore.use();
  const txt = {
    tr: { official: 'Türkiye Cumhuriyeti resmi kurum web sitesi', muhakkak: 'T.C. Muğla Büyükşehir Belediyesi', gov: 'turkiye.gov.tr', help: 'Yardım' },
    en: { official: 'Official website of a Republic of Türkiye institution', muhakkak: 'Muğla Metropolitan Municipality', gov: 'turkiye.gov.tr', help: 'Help' },
    de: { official: 'Offizielle Website einer Behörde der Republik Türkei', muhakkak: 'Großstadtgemeinde Muğla', gov: 'turkiye.gov.tr', help: 'Hilfe' }
  }[lang];
  return (
    <div className="gov-strip">
      <div className="wrap gov-strip-inner">
        <div className="gov-left">
          <span className="gov-flag" aria-hidden="true"></span>
          <span>{txt.official}</span>
        </div>
        <div className="gov-right">
          <a href="#">{txt.muhakkak}</a>
          <a href="#">{txt.gov} ↗</a>
          <a href="#">{txt.help}</a>
        </div>
      </div>
    </div>
  );
}

// === Top utility bar ===
function TopBar() {
  const [t] = useT();
  const lang = LangStore.use();
  return (
    <div className="topbar">
      <div className="wrap topbar-inner">
        <div className="tb-left">
          <span>☎ {t.topbar.phone}</span>
          <span style={{ color: 'var(--ink-faint)' }}>·</span>
          <span>{t.topbar.address}</span>
        </div>
        <div className="tb-right">
          {t.topbar.links.map((l, i) => <a key={i} href="#" onClick={e=>e.preventDefault()}>{l}</a>)}
          <div className="lang-switch" role="group" aria-label="Language">
            {['tr', 'en', 'de'].map(code => (
              <button
                key={code}
                className={lang === code ? 'active' : ''}
                onClick={() => LangStore.set(code)}
                aria-pressed={lang === code}
              >{code.toUpperCase()}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// === Main nav ===
function Nav({ route, setRoute }) {
  const [t] = useT();
  const lang = LangStore.use();
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const tree = (window.NAV_TREE && (window.NAV_TREE[lang] || window.NAV_TREE.tr)) || [];
  const searchPh = { tr: 'Hizmet, belge, başvuru ara...', en: 'Search services, documents...', de: 'Suchen...' }[lang];
  const [expanded, setExpanded] = useState(null);

  // Lock body scroll when menu open
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const go = (r) => { setRoute(r); setMenuOpen(false); setExpanded(null); };
  const itemActive = (item) => route === item.route || (item.children && item.children.some(c => c.route === route));

  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')} aria-label="Main">
      <div className="wrap nav-inner">
        <a href="#home" className="brand" onClick={(e)=>{e.preventDefault();go('home');}}>
          <BrandMark />
          <div className="brand-text">
            <div className="b-1">Ula Belediyesi</div>
            <div className="b-2">T.C. Muğla / Est. 1895</div>
          </div>
        </a>
        <div className="nav-links">
          {tree.map((item) => (
            item.children ? (
              <div className="nav-item" key={item.label}>
                <a
                  href={item.route ? `#${item.route}` : '#'}
                  className={`nav-link ${itemActive(item) ? 'active' : ''}`}
                  aria-haspopup="true"
                  onClick={(e)=>{e.preventDefault(); item.route && go(item.route);}}
                >{item.label}<span className="nav-caret" aria-hidden="true">▾</span></a>
                <div className="nav-dropdown" role="menu">
                  {item.children.map((ch) => (
                    <a
                      key={ch.route}
                      href={`#${ch.route}`}
                      role="menuitem"
                      className={`nav-dd-link ${route === ch.route ? 'active' : ''}`}
                      onClick={(e)=>{e.preventDefault();go(ch.route);}}
                    >{ch.label}</a>
                  ))}
                </div>
              </div>
            ) : (
              <a
                key={item.route}
                href={`#${item.route}`}
                className={`nav-link ${route === item.route ? 'active' : ''}`}
                onClick={(e)=>{e.preventDefault();go(item.route);}}
              >{item.label}</a>
            )
          ))}
          <form className="nav-search" onSubmit={e=>e.preventDefault()} role="search">
            <span className="icon" aria-hidden="true">⌕</span>
            <input type="search" placeholder={searchPh} aria-label="Search" />
          </form>
        </div>
        <button
          className={`nav-burger ${menuOpen ? 'open' : ''}`}
          aria-label="Menu"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(o => !o)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className={`nav-mobile ${menuOpen ? 'open' : ''}`} role="dialog" aria-hidden={!menuOpen}>
        <form className="nav-mobile-search" onSubmit={e=>e.preventDefault()} role="search">
          <span className="icon" aria-hidden="true">⌕</span>
          <input type="search" placeholder={searchPh} aria-label="Search" />
        </form>
        {tree.map((item) => (
          item.children ? (
            <div className="nav-mobile-group" key={item.label}>
              <button
                className={`nav-mobile-link nav-mobile-toggle ${expanded === item.label ? 'open' : ''}`}
                onClick={()=>setExpanded(x => x === item.label ? null : item.label)}
                aria-expanded={expanded === item.label}>
                <span>{item.label}</span>
                <span aria-hidden="true">{expanded === item.label ? '–' : '+'}</span>
              </button>
              {expanded === item.label && (
                <div className="nav-mobile-sub">
                  {item.children.map((ch) => (
                    <a key={ch.route} href={`#${ch.route}`}
                      className={`nav-mobile-sublink ${route === ch.route ? 'active' : ''}`}
                      onClick={(e)=>{e.preventDefault();go(ch.route);}}>
                      <span>{ch.label}</span>
                      <span aria-hidden="true">→</span>
                    </a>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <a key={item.route} href={`#${item.route}`}
              className={`nav-mobile-link ${route === item.route ? 'active' : ''}`}
              onClick={(e)=>{e.preventDefault();go(item.route);}}>
              <span>{item.label}</span>
              <span aria-hidden="true">→</span>
            </a>
          )
        ))}
        <a href="#services" className="btn btn-primary" style={{justifyContent:'center', marginTop:16}}
          onClick={(e)=>{e.preventDefault();go('services');}}>
          {t.cta} →
        </a>
      </div>
    </nav>
  );
}

// === Hero ===
function Hero() {
  const [t, lang] = useT();
  const bgImgRef = useRef(null);

  // Parallax: arka plan görseli scroll ile hafif kayar
  useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        if (bgImgRef.current) {
          const y = Math.min(window.scrollY * 0.22, 180);
          bgImgRef.current.style.transform = `translateY(${y}px)`;
        }
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  const ctas = {
    tr: { primary: 'e-Belediye girişi', secondary: 'Borç sorgula', alert: 'GÜNCEL', alertTxt: 'Akyaka Mahallemiz "Best Tourism Villages 2025" ödülüne layık görüldü.', alertCta: 'Detay' },
    en: { primary: 'e-Government login', secondary: 'Pay bills', alert: 'NEWS', alertTxt: 'Akyaka named one of the "Best Tourism Villages 2025".', alertCta: 'Details' },
    de: { primary: 'e-Verwaltung Login', secondary: 'Rechnung zahlen', alert: 'AKTUELL', alertTxt: 'Akyaka als "Best Tourism Village 2025" ausgezeichnet.', alertCta: 'Mehr' }
  }[lang];
  return (
    <section className="hero" aria-labelledby="hero-title">
      <div className="hero-bg">
        <img
          ref={bgImgRef}
          src="https://images.unsplash.com/photo-1519046904884-53103b34b206?w=2000&q=85"
          alt=""
          loading="eager"
        />
      </div>
      <div className="hero-content">
        <div className="wrap">
          <div className="hero-grid">
            <div className="fade-up">
              <div className="hero-eyebrow">
                <span>◆</span>
                <span>{t.hero.eyebrow}</span>
              </div>
              <h1 id="hero-title" className="hero-title">
                {t.hero.titleA} {t.hero.titleB} {t.hero.titleC}
              </h1>
              <p className="hero-lead">
                {lang === 'tr' && 'Hizmet, başvuru ve şehir bilgilerine tek noktadan erişim. Vatandaşlarımıza şeffaf, hızlı ve erişilebilir bir kurumsal kapı.'}
                {lang === 'en' && 'A single point of access for services, applications and city information — transparent, fast and accessible.'}
                {lang === 'de' && 'Ein zentraler Zugang zu Diensten, Anträgen und Stadtinformationen — transparent, schnell und barrierefrei.'}
              </p>
              <div className="hero-actions">
                <a href="#services" className="btn btn-light" onClick={e=>{e.preventDefault();window.location.hash='services';}}>{ctas.primary} →</a>
                <a href="#services" className="btn btn-outline-light" onClick={e=>{e.preventDefault();window.location.hash='services';}}>{ctas.secondary}</a>
              </div>
              <div className="hero-meta">
                {t.hero.meta.slice(0,3).map((m, i) => (
                  <div key={i} className="hero-meta-item">
                    <div className="label">{m.label}</div>
                    <div className="value"><CountUp value={m.value} /></div>
                  </div>
                ))}
              </div>
            </div>
            <div className="hero-aside fade-up" style={{animationDelay:'0.15s'}}>
              <h4>{t.weather.title}</h4>
              <div className="weather-row">
                <div className="weather-temp">21<sup>°</sup></div>
                <div className="weather-meta">
                  <div style={{fontSize:14, marginBottom:4}}>{t.weather.cond}</div>
                  <div style={{fontSize:11, opacity:0.65, letterSpacing:'0.06em', fontWeight:500}}>12 HAZİRAN · 14:32</div>
                </div>
              </div>
              <div className="weather-divider"></div>
              <div className="weather-mini">
                <div><div className="v">{t.weather.windV}</div><div className="l">{t.weather.wind}</div></div>
                <div><div className="v">{t.weather.seaV}</div><div className="l">{t.weather.sea}</div></div>
                <div><div className="v">{t.weather.uvV}</div><div className="l">{t.weather.uv}</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="hero-strip" role="region" aria-label="Important notice">
        <div className="wrap hero-strip-inner">
          <span className="strip-tag">{ctas.alert}</span>
          <span className="strip-text">{ctas.alertTxt}</span>
          <a href="#news" onClick={e=>{e.preventDefault();window.location.hash='news';}}>{ctas.alertCta} →</a>
        </div>
      </div>
    </section>
  );
}

// === Quick services grid ===
function QuickServices({ setRoute }) {
  const [t] = useT();
  return (
    <section className="qs-section" aria-labelledby="qs-title">
      <div className="wrap">
        <div className="qs-head">
          <div>
            <div className="eyebrow" style={{marginBottom:12}}>{t.qs.eyebrow}</div>
            <h2 id="qs-title">{t.qs.title}</h2>
          </div>
          <p className="qs-intro">{t.qs.intro}</p>
        </div>
        <div className="qs-grid">
          {t.qs.items.map((q, i) => (
            <a key={i} href="#services" className="qs-card" data-rv="" style={{ ['--rv-d']: `${(i % 4) * 80}ms` }} onClick={(e) => {
              e.preventDefault();
              if (i === 2) setRoute('contact');
              else if (i === 3) setRoute('council');
              else setRoute('services');
            }}>
              <div className="qs-num">{q.n}</div>
              <div className="qs-icon" aria-hidden="true">{q.i}</div>
              <h3>{q.t}</h3>
              <p>{q.d}</p>
              <div className="qs-arrow" aria-hidden="true">→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Announcements (official notices) ===
function AnnouncementsSection({ setRoute }) {
  const [t, lang] = useT();
  const a = t.announce;
  const items = (window.ULA_DUYURU || []).slice(0, 5);
  const cats = { 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] || {};
  return (
    <section className="announce-section" aria-labelledby="announce-title">
      <div className="wrap">
        <div className="qs-head">
          <div>
            <div className="eyebrow" style={{marginBottom:12}}>{a.eyebrow}</div>
            <h2 id="announce-title">{a.title}</h2>
            <p className="qs-intro" style={{marginTop:10}}>{a.sub}</p>
          </div>
          <button className="btn btn-ghost" onClick={() => setRoute('duyurular')}>{a.cta} →</button>
        </div>
        <ul className="announce-list">
          {items.map((it, i) => (
            <li key={i}>
              <a className="announce-row announce-row--nometa" href="#duyurular"
                onClick={(e)=>{e.preventDefault();setRoute('duyurular');}}>
                <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>
    </section>
  );
}

// === News slider ===
function NewsSection({ setRoute }) {
  const [t, lang] = useT();
  const items = t.news.items;
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  const total = items.length;

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIdx(i => (i + 1) % total), 5500);
    return () => clearInterval(id);
  }, [paused, total]);

  const go = (n) => setIdx(((n % total) + total) % total);
  const cur = items[idx];
  const upcoming = [items[(idx+1) % total], items[(idx+2) % total]];
  const labels = { tr:{p:'Önceki', n:'Sonraki', auto:'Otomatik'}, en:{p:'Prev', n:'Next', auto:'Auto'}, de:{p:'Zurück', n:'Weiter', auto:'Auto'} }[lang];

  return (
    <section className="news-section" aria-labelledby="news-title">
      <div className="wrap">
        <div className="qs-head">
          <div>
            <div className="eyebrow" style={{marginBottom:12}}>{t.news.eyebrow}</div>
            <h2 id="news-title">{t.news.title}</h2>
          </div>
          <button className="btn btn-ghost" onClick={() => setRoute('news')}>{t.news.cta} →</button>
        </div>
        <div className="news-slider" data-rv=""
          onMouseEnter={()=>setPaused(true)}
          onMouseLeave={()=>setPaused(false)}>
          <a href="#news" className="ns-feature"
            onClick={(e)=>{e.preventDefault();setRoute('news');}}
            key={idx}>
            <div className="ns-feature-img">
              <span className="news-tag">{cur.tag}</span>
              <img src={cur.img} alt="" />
            </div>
            <div className="ns-feature-body">
              <div className="news-date">{cur.date}</div>
              <h3>{cur.title}</h3>
              <p>{cur.excerpt}</p>
              <span className="ns-readmore">{lang==='tr'?'Devamını oku':lang==='en'?'Read more':'Mehr lesen'} →</span>
            </div>
          </a>
          <aside className="ns-aside">
            <div className="ns-aside-label">{lang==='tr'?'Sıradaki':lang==='en'?'Up next':'Demnächst'}</div>
            {upcoming.map((u, i) => (
              <a key={i} href="#news" className="ns-up" onClick={(e)=>{e.preventDefault();go(idx + 1 + i);}}>
                <div className="ns-up-img"><img src={u.img} alt="" /></div>
                <div>
                  <div className="news-tag" style={{position:'static', display:'inline-block', marginBottom:6}}>{u.tag}</div>
                  <div className="ns-up-title">{u.title}</div>
                </div>
              </a>
            ))}
            <div className="ns-controls">
              <button onClick={()=>go(idx-1)} aria-label={labels.p}>←</button>
              <div className="ns-dots">
                {items.map((_, i) => (
                  <button key={i} onClick={()=>go(i)}
                    className={i===idx?'active':''}
                    aria-label={`${i+1}/${total}`} />
                ))}
              </div>
              <button onClick={()=>go(idx+1)} aria-label={labels.n}>→</button>
            </div>
            <div className="ns-meta">
              <span style={{fontSize:11, fontWeight:600, color: paused ? 'var(--ink-mute)' : 'var(--success-500)', letterSpacing:'0.06em'}}>
                ● {paused ? (lang==='tr'?'DURDU':'PAUSED') : labels.auto.toUpperCase()}
              </span>
              <span style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-mute)'}}>
                {String(idx+1).padStart(2,'0')} / {String(total).padStart(2,'0')}
              </span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

// === Gallery slider ===
function GallerySlider() {
  const lang = LangStore.use();
  const photos = [
    { src:'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=1800&q=85', cap:{tr:'Akyaka — Azmak ağzı, sabah', en:'Akyaka — Azmak estuary, morning', de:'Akyaka — Azmak-Mündung, Morgen'} },
    { src:'https://images.unsplash.com/photo-1441906363162-903afd0d3d52?w=1800&q=85', cap:{tr:'Geyik Kanyonu — alt parkur', en:'Deer Canyon — lower trail', de:'Hirschschlucht — unterer Pfad'} },
    { src:'https://images.unsplash.com/photo-1564507592333-c60657eea523?w=1800&q=85', cap:{tr:'Idyma Antik Kenti — kaya mezarları', en:'Idyma — rock tombs', de:'Idyma — Felsengräber'} },
    { src:'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1800&q=85', cap:{tr:'Sedir Adası — Kleopatra Plajı', en:'Sedir Island — Cleopatra Beach', de:'Sedir-Insel — Kleopatra-Strand'} },
    { src:'https://images.unsplash.com/photo-1527004013197-933c4bb611b3?w=1800&q=85', cap:{tr:'Azmak boyu yeni ahşap güzergâh', en:'New boardwalk along the Azmak', de:'Neuer Steg am Azmak'} },
    { src:'https://images.unsplash.com/photo-1518998053901-5348d3961a04?w=1800&q=85', cap:{tr:'Kerimoğlu Türküsü Evi — sergi', en:'Kerimoğlu House — exhibition', de:'Kerimoğlu-Haus — Ausstellung'} },
    { src:'https://images.unsplash.com/photo-1473773508845-188df298d2d1?w=1800&q=85', cap:{tr:'Köprübaşı su hattı yenileme', en:'Köprübaşı water-line works', de:'Köprübaşı Wasserleitung'} }
  ];
  const [idx, setIdx] = useState(0);
  const total = photos.length;
  const go = (n) => setIdx(((n % total) + total) % total);
  const stageRef = useRef(null);
  const [stageW, setStageW] = useState(800);
  useEffect(() => {
    if (!stageRef.current) return;
    const ro = new ResizeObserver(entries => {
      for (const e of entries) setStageW(e.contentRect.width);
    });
    ro.observe(stageRef.current);
    return () => ro.disconnect();
  }, []);
  const slideRatio = stageW < 640 ? 0.88 : stageW < 1024 ? 0.75 : 0.6;
  const slideW = stageW * slideRatio;
  const gap = 16;
  const offset = stageW / 2 - slideW / 2 - idx * (slideW + gap);

  const head = {
    tr: { eyebrow:'06 — Galeri', title:'Ula\'dan kareler.', sub:'Belediyemizin arşivinden ve şehir gönüllülerinin objektifinden Ula manzaraları.' },
    en: { eyebrow:'06 — Gallery', title:'Frames from Ula.', sub:'Photographs from our archive and from city volunteers.' },
    de: { eyebrow:'06 — Galerie', title:'Bilder aus Ula.', sub:'Aufnahmen aus unserem Archiv und von Freiwilligen.' }
  }[lang];

  // Keyboard nav
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowLeft') go(idx - 1);
      if (e.key === 'ArrowRight') go(idx + 1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [idx]);

  return (
    <section className="gallery-section" aria-labelledby="gal-title">
      <div className="wrap">
        <div className="qs-head">
          <div>
            <div className="eyebrow" style={{marginBottom:12}}>{head.eyebrow}</div>
            <h2 id="gal-title">{head.title}</h2>
          </div>
          <p className="qs-intro">{head.sub}</p>
        </div>
        <div className="gal-stage" aria-roledescription="carousel" ref={stageRef} data-rv="">
          <div className="gal-track" style={{ transform:`translateX(${offset}px)`, gap:`${gap}px` }}>
            {photos.map((p, i) => (
              <button
                key={i}
                style={{ width: `${slideW}px` }}
                onClick={()=>go(i)}
                className={`gal-slide ${i === idx ? 'active' : ''}`}
                aria-label={p.cap[lang]}
                aria-current={i === idx}>
                <img src={p.src} alt="" loading={Math.abs(i-idx) < 2 ? 'eager':'lazy'} />
                {i === idx && (
                  <div className="gal-cap">
                    <div className="gal-cap-num">{String(i+1).padStart(2,'0')} / {String(total).padStart(2,'0')}</div>
                    <div className="gal-cap-text">{p.cap[lang]}</div>
                  </div>
                )}
              </button>
            ))}
          </div>
          <button className="gal-nav gal-prev" onClick={()=>go(idx-1)} aria-label="prev">←</button>
          <button className="gal-nav gal-next" onClick={()=>go(idx+1)} aria-label="next">→</button>
        </div>
        <div className="gal-bar">
          {photos.map((_, i) => (
            <button key={i} onClick={()=>go(i)} className={`gal-tick ${i===idx?'active':''}`} aria-label={`${i+1}`} />
          ))}
        </div>
      </div>
    </section>
  );
}

// === Discover band ===
function DiscoverBand({ setRoute }) {
  const [t] = useT();
  return (
    <section className="discover" aria-labelledby="disc-title">
      <div className="wrap discover-inner">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', flexWrap:'wrap', gap:32}}>
          <div>
            <div className="eyebrow" style={{color:'var(--gov-200)', marginBottom:12}}>{t.discover.eyebrow}</div>
            <h2 id="disc-title">{t.discover.title}</h2>
            <p className="discover-lead">{t.discover.lead}</p>
          </div>
          <button className="btn btn-light" onClick={() => setRoute('discover')}>
            {t.discover.cta} →
          </button>
        </div>
        <div className="discover-grid">
          {t.discover.items.map((d, i) => (
            <a key={i} href="#discover" className="disc-card" data-rv="" style={{ ['--rv-d']: `${i * 90}ms` }} onClick={(e) => {e.preventDefault();setRoute('discover');}}>
              <div className="disc-img"><img src={d.img} alt="" /></div>
              <div className="disc-info">
                <div className="num">{d.n}</div>
                <h4>{d.t}</h4>
                <p>{d.d}</p>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Footer ===
function Footer() {
  const [t, lang] = useT();
  const legal = {
    tr: ['KVKK', 'Çerez Politikası', 'Erişilebilirlik', 'Site Haritası', 'Bilgi Edinme'],
    en: ['Privacy', 'Cookies', 'Accessibility', 'Sitemap', 'Information Request'],
    de: ['Datenschutz', 'Cookies', 'Barrierefreiheit', 'Sitemap', 'Auskunft']
  }[lang];
  return (
    <footer className="footer" role="contentinfo">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <BrandMark size={56} />
            <h3>Ula Belediyesi</h3>
            <p>{t.footer.mission}</p>
          </div>
          <div>
            <h5>{lang==='tr'?'Kurumsal':lang==='en'?'Corporate':'Institutionell'}</h5>
            <ul>{t.footer.kurumsal.map((l,i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div>
            <h5>{lang==='tr'?'Hizmetler':lang==='en'?'Services':'Dienste'}</h5>
            <ul>{t.footer.hizmetler.map((l,i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
          </div>
          <div>
            <h5>{lang==='tr'?'Keşfet':lang==='en'?'Discover':'Entdecken'}</h5>
            <ul>{t.footer.kesfet.map((l,i) => <li key={i}><a href="#">{l}</a></li>)}</ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copyright}</span>
          <div className="footer-legal">
            {legal.map((l,i)=> <a key={i} href="#">{l}</a>)}
          </div>
        </div>
      </div>
    </footer>
  );
}

// === Animasyon yardımcıları ===
// Sayı sayacı — görünür olunca hedef değere doru sayar
function CountUp({ value }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const str = String(value);
    const m = str.match(/^([\d.,]+)/);
    if (!m || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const sep = m[1].includes('.') ? '.' : m[1].includes(',') ? ',' : '';
    const target = parseInt(m[1].replace(/[.,]/g, ''), 10);
    const suffix = str.slice(m[1].length);
    if (!isFinite(target)) return;
    const fmt = n => {
      let s = String(n);
      if (sep) s = s.replace(/\B(?=(\d{3})+(?!\d))/g, sep);
      return s + suffix;
    };
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return;
      io.disconnect();
      const t0 = performance.now(), dur = 1400;
      const tick = now => {
        const p = Math.min(1, (now - t0) / dur);
        el.textContent = fmt(Math.round(target * (1 - Math.pow(1 - p, 3))));
        if (p < 1) requestAnimationFrame(tick);
        else el.textContent = str;
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [value]);
  return <span ref={ref}>{value}</span>;
}

// Scroll-reveal: [data-rv] elemanları görünür olunca .rv-in alır
function initReveals() {
  if (!('IntersectionObserver' in window)) {
    document.querySelectorAll('[data-rv]').forEach(el => el.classList.add('rv-in'));
    return;
  }
  const els = document.querySelectorAll('[data-rv]:not(.rv-in)');
  if (!els.length) return;
  const io = new IntersectionObserver(entries => {
    entries.forEach(e => {
      if (e.isIntersecting) { e.target.classList.add('rv-in'); io.unobserve(e.target); }
    });
  }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });
  els.forEach(el => io.observe(el));
}

Object.assign(window, {
  TopBar, Nav, Hero, QuickServices, NewsSection, DiscoverBand, Footer,
  BrandMark, useT, GovStrip, GallerySlider, CountUp, initReveals
});