/* embeddedTR — Projects (filterable) + Articles */
const { useState: useStateS } = React;

function ProjImg({ p }) {
  const [err, setErr] = useStateS(false);
  if (err) {
    return (
      <div className="proj__img proj__img--fallback gridlines" data-mcu={p.mcu}>
        <Icons.chip size={40} />
        <span className="proj__imglabel">{p.sub}</span>
      </div>);

  }
  return (
    <div className="proj__img">
      <img src={p.img} alt={p.title} loading="lazy" onError={() => setErr(true)} />
      <span className="proj__badge tag">{p.mcu}</span>
    </div>);

}

function ProjectCard({ p }) {
  return (
    <article className="proj card reveal">
      <ProjImg p={p} />
      <div className="proj__body">
        <div className="proj__sub kicker" style={{ color: "var(--ink-3)" }}>{p.sub}</div>
        <h3 className="proj__title">{p.title}</h3>
        <p className="proj__desc">{p.desc}</p>
        <div className="proj__meta">
          <span className="proj__author"><span className="av av--xs" />{p.author}</span>
        </div>
        <div className="proj__foot">
          <span className="metric"><Icons.star size={15} />{p.stars}</span>
          <span className="metric"><Icons.fork size={15} />{p.forks}</span>
          <a className="proj__link" href="#projeler">İncele <Icons.arrow size={15} /></a>
        </div>
      </div>
    </article>);

}

function Projects() {
  const ref = useReveal();
  const [f, setF] = useStateS("Tümü");
  const list = f === "Tümü" ? PROJECTS : PROJECTS.filter((p) => p.cat === f);
  return (
    <section className="section section--alt" id="projeler" ref={ref}>
      <div className="wrap">
        <div className="projects__head reveal">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <span className="kicker">Öne çıkan projeler</span>
            <h2>Toplulukta neler yapılıyor?</h2>
            <p>Gerçek mühendislik projeleri — PLL’den motor kontrolüne, RMS hesaplamadan firmware güvenliğine.</p>
          </div>
          <a className="btn btn-ghost btn-sm projects__all" href="#projeler">
            <Icons.github size={17} /> Tüm projeler
          </a>
        </div>

        <div className="filters reveal" role="tablist">
          {FILTERS.map((x) =>
          <button key={x} role="tab" aria-selected={f === x}
          className={"filter" + (f === x ? " filter--on" : "")} onClick={() => setF(x)}>
              {x}
              <span className="filter__count">
                {x === "Tümü" ? PROJECTS.length : PROJECTS.filter((p) => p.cat === x).length}
              </span>
            </button>
          )}
        </div>

        <div className="proj-grid">
          {list.map((p) => <ProjectCard key={p.title} p={p} />)}
        </div>
      </div>
    </section>);

}

/* ---------------- ARTICLES ---------------- */
const ART_AY = ["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"];
function artDate(iso) { const d = new Date(iso + "T00:00:00"); return isNaN(d) ? iso : d.getDate() + " " + ART_AY[d.getMonth()] + " " + d.getFullYear(); }
const ART_ICON = { "Protokoller": "share", "Tarih": "book", "Linux": "terminal", "Donanım": "chip" };

function Articles() {
  const ref = useReveal();
  const [feat, ...rest] = POSTS.slice(0, 4);
  return (
    <section className="section" id="blog" ref={ref}>
      <div className="wrap">
        <div className="projects__head reveal">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <span className="kicker">Teknik blog</span>
            <h2>Bilgiyi yazıya dök.</h2>
            <p>Kod blokları, osiloskop görüntüleri ve devre şemalarıyla zenginleştirilmiş topluluk yazıları.</p>
          </div>
          <a className="btn btn-ghost btn-sm projects__all" href="blog.html"><Icons.book size={17} /> Tüm yazılar</a>
        </div>

        <div className="blog-grid">
          <a className="post post--feat card reveal" href={"post.html?p=" + feat.slug}>
            <div className="post__feat-img gridlines">
              <Waveform h={90} />
              <span className="post__cat tag tag-accent">{feat.category}</span>
            </div>
            <div className="post__body">
              <h3 className="post__title post__title--lg">{feat.title}</h3>
              <p className="post__excerpt">{feat.excerpt}</p>
              <div className="post__meta">
                <span><Icons.users size={14} /> {feat.author}</span>
                <span>· {feat.read}</span>
                <span>· {artDate(feat.date)}</span>
              </div>
            </div>
          </a>

          <div className="post-list">
            {rest.map((a) => {
              const I = Icons[ART_ICON[a.category] || "article"];
              return (
                <a className="post post--row card reveal" href={"post.html?p=" + a.slug} key={a.slug}>
                  <div className="post__thumb gridlines">
                    <span className="post__thumb-ic"><I size={22} /></span>
                    <span className="post__cat tag">{a.category}</span>
                  </div>
                  <div className="post__body">
                    <h3 className="post__title">{a.title}</h3>
                    <p className="post__excerpt-sm">{a.excerpt}</p>
                    <div className="post__meta post__meta--row">
                      <span>{a.read}</span><span>· {artDate(a.date)}</span>
                    </div>
                  </div>
                  <Icons.arrow size={18} className="post__arrow" />
                </a>);

            })}
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Projects, Articles });