/* embeddedTR — blog ortak bileşenleri (liste + yazı sayfası paylaşır) */
const { useState: useStateB, useEffect: useEffectB } = React;

/* tarih → Türkçe okunur biçim */
const TR_AY = ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"];
function fmtDate(iso) {
  const d = new Date(iso + "T00:00:00");
  if (isNaN(d)) return iso;
  return d.getDate() + " " + TR_AY[d.getMonth()] + " " + d.getFullYear();
}
const CAT_ICON = { "Protokoller": "share", "Tarih": "book", "Linux": "terminal", "Donanım": "chip" };

/* ─── kapak: görsel varsa onu, yoksa şık yer tutucu çiz ─── */
function Cover({ post, showCat = true }) {
  const [err, setErr] = useStateB(false);
  // Görsel henüz yoksa/yüklenmezse yer tutucuya düş: onError + boş yükleme +
  // zaman aşımı (önizleme proxy'si 404 yerine isteği asabiliyor).
  const imgRef = React.useRef(null);
  useEffectB(() => {
    if (!post.cover || err) return;
    const el = imgRef.current;
    if (el && el.complete && el.naturalWidth === 0) { setErr(true); return; }
    const to = setTimeout(() => {
      const n = imgRef.current;
      if (!n || !n.complete || n.naturalWidth === 0) setErr(true);
    }, 2500);
    return () => clearTimeout(to);
  }, [post.cover, err]);
  const Cat = showCat && <span className={(err || !post.cover ? "cover-ph__cat" : "cover-img__cat") + " tag tag-accent"}>{post.category}</span>;
  if (err || !post.cover) {
    const I = Icons[CAT_ICON[post.category] || "article"];
    return (
      <div className="cover-ph gridlines">
        <div className="cover-ph__wave"><Waveform h={56} /></div>
        <span className="cover-ph__ic"><I size={38} /></span>
        {Cat}
      </div>
    );
  }
  return (
    <div className="cover-img">
      <img ref={imgRef} src={post.cover} alt={post.title} loading="lazy"
        onError={() => setErr(true)}
        onLoad={(e) => { if (e.target.naturalWidth === 0) setErr(true); }} />
      {Cat}
    </div>
  );
}

/* ─── nav (blog sayfaları için; linkler ana sayfaya döner) ─── */
function BlogNav({ theme, toggleTheme }) {
  const [scrolled, setScrolled] = useStateB(false);
  const [open, setOpen] = useStateB(false);
  useEffectB(() => {
    const f = () => setScrolled(window.scrollY > 12);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const here = location.pathname.split("/").pop();
  const links = [
    ["Projeler", "index.html#projeler"], ["Blog", "blog.html"], ["Soru-Cevap", "index.html#soru-cevap"],
    ["Kütüphaneler", "index.html#kutuphaneler"], ["Topluluk", "index.html#topluluk"],
  ];
  return (
    <header className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="wrap nav__in">
        <a href="index.html" className="brand" aria-label="embeddedTR ana sayfa">
          <BrandMark size={38} />
          <span className="brand__word">embedded<b>TR</b></span>
          <span className="brand__dot" title="online" />
        </a>
        <nav className="nav__links">
          {links.map(([t, h]) => <a key={t} href={h} className={(h === "blog.html" && (here === "blog.html" || here === "post.html")) ? "is-active" : ""}>{t}</a>)}
        </nav>
        <div className="nav__actions">
          <button className="icon-btn" onClick={toggleTheme} aria-label="Tema değiştir" title="Tema">
            {theme === "dark" ? <Icons.sun size={19} /> : <Icons.moon size={19} />}
          </button>
          <a className="btn btn-ghost btn-sm nav__login" href="index.html#topluluk">Giriş Yap</a>
          <a className="btn btn-primary btn-sm" href="index.html#topluluk">Topluluğa Katıl</a>
          <button className="icon-btn nav__burger" onClick={() => setOpen(true)} aria-label="Menü"><Icons.menu /></button>
        </div>
      </div>
      {open && (
        <div className="sheet" onClick={() => setOpen(false)}>
          <div className="sheet__panel" onClick={(e) => e.stopPropagation()}>
            <div className="sheet__top">
              <span className="brand__word">embedded<b>TR</b></span>
              <button className="icon-btn" onClick={() => setOpen(false)} aria-label="Kapat"><Icons.close /></button>
            </div>
            {links.map(([t, h]) => <a key={t} href={h} onClick={() => setOpen(false)} className="sheet__link">{t}</a>)}
          </div>
        </div>
      )}
    </header>
  );
}

/* ─── footer (linkler ana sayfaya) ─── */
function BlogFooter() {
  const cols = [
    ["Topluluk", [["Projeler","index.html#projeler"],["Blog","blog.html"],["Soru-Cevap","index.html#soru-cevap"],["Kütüphaneler","index.html#kutuphaneler"]]],
    ["Platformlar", [["STM32","blog.html"],["ESP32","blog.html"],["TMS320F","blog.html"],["Nuvoton","blog.html"]]],
    ["Kaynaklar", [["Başlangıç rehberi","blog.html"],["Katkı kuralları","blog.html"],["Etiketler","blog.html"],["SSS","blog.html"]]],
  ];
  return (
    <footer className="footer">
      <div className="wrap footer__in">
        <div className="footer__brand">
          <a href="index.html" className="brand">
            <BrandMark size={34} />
            <span className="brand__word">embedded<b>TR</b></span>
          </a>
          <p>Türkiye'nin gömülü sistem topluluğu. Projeni paylaş, teknik yaz, sor & cevapla, birlikte öğren.</p>
          <div className="footer__social">
            <a className="icon-btn" href="#" aria-label="GitHub"><Icons.github size={18} /></a>
            <a className="icon-btn" href="#" aria-label="Forum"><Icons.qa size={18} /></a>
            <a className="icon-btn" href="#" aria-label="Topluluk"><Icons.users size={18} /></a>
          </div>
        </div>
        {cols.map(([h, items]) => (
          <div className="footer__col" key={h}>
            <h4>{h}</h4>
            {items.map(([t, href]) => <a key={t} href={href}>{t}</a>)}
          </div>
        ))}
      </div>
      <div className="wrap footer__bottom">
        <span>© 2026 embeddedTR — topluluk tarafından, topluluk için.</span>
        <span className="footer__mono">build · v0.1.0 · made in Türkiye 🇹🇷</span>
      </div>
    </footer>
  );
}

Object.assign(window, { fmtDate, Cover, BlogNav, BlogFooter });