/* embeddedTR — blog liste sayfası: 3 düzen + bootstrap (sadece blog.html) */
const { useEffect: useEffectL } = React;

/* ═══ DÜZEN A — Editöryel kartlar ═══ */
function CardsLayout({ posts }) {
  return (
    <div className="bl-cards">
      {posts.map((p) => (
        <a className="pcard card reveal" href={"post.html?p=" + p.slug} key={p.slug}>
          <div className="pcard__cover"><Cover post={p} /></div>
          <div className="pcard__body">
            <h3 className="pcard__title">{p.title}</h3>
            <p className="pcard__excerpt">{p.excerpt}</p>
            <div className="pcard__meta">
              <span className="av av--xs" />{p.author}
              <span className="pcard__dot">·</span>{fmtDate(p.date)}
              <span className="pcard__dot">·</span>{p.read}
            </div>
          </div>
        </a>
      ))}
    </div>
  );
}

/* ═══ DÜZEN B — Magazin (1 büyük + 3 yan, kalanlar alt ızgarada) ═══ */
function MagazineLayout({ posts }) {
  const lead = posts[0];
  const side = posts.slice(1, 4);
  const grid = posts.slice(4);
  return (
    <div className="bl-mag-wrap">
      <div className="bl-mag">
        <a className="bl-mag__lead card reveal" href={"post.html?p=" + lead.slug}>
          <Cover post={lead} />
          <div className="bl-mag__lead-body">
            <h3 className="bl-mag__lead-title">{lead.title}</h3>
            <p className="bl-mag__lead-ex">{lead.excerpt}</p>
            <div className="pcard__meta"><span className="av av--xs" />{lead.author}<span className="pcard__dot">·</span>{fmtDate(lead.date)}<span className="pcard__dot">·</span>{lead.read}</div>
          </div>
        </a>
        <div className="bl-mag__side">
          {side.map((p) => (
            <a className="bl-mag__row card reveal" href={"post.html?p=" + p.slug} key={p.slug}>
              <Cover post={p} showCat={false} />
              <div className="bl-mag__row-body">
                <span className="tag tag-accent" style={{ alignSelf: "flex-start" }}>{p.category}</span>
                <h4 className="bl-mag__row-title">{p.title}</h4>
                <span className="bl-mag__row-meta">{fmtDate(p.date)} · {p.read}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
      {grid.length > 0 && (
        <>
          <div className="bl-mag__divider"><span>Daha fazla yazı</span></div>
          <div className="bl-cards">
            {grid.map((p) => (
              <a className="pcard card reveal" href={"post.html?p=" + p.slug} key={p.slug}>
                <div className="pcard__cover"><Cover post={p} /></div>
                <div className="pcard__body">
                  <h3 className="pcard__title">{p.title}</h3>
                  <p className="pcard__excerpt">{p.excerpt}</p>
                  <div className="pcard__meta"><span className="av av--xs" />{p.author}<span className="pcard__dot">·</span>{fmtDate(p.date)}<span className="pcard__dot">·</span>{p.read}</div>
                </div>
              </a>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

/* ═══ DÜZEN C — Sade liste ═══ */
function ListLayout({ posts }) {
  return (
    <div className="bl-list">
      {posts.map((p) => (
        <a className="bl-list__item reveal" href={"post.html?p=" + p.slug} key={p.slug}>
          <div className="bl-list__date"><span>{p.category}</span>{fmtDate(p.date)}</div>
          <div className="bl-list__main">
            <h3 className="bl-list__title">{p.title}</h3>
            <p className="bl-list__ex">{p.excerpt}</p>
          </div>
          <Icons.arrow size={22} className="bl-list__arrow" />
        </a>
      ))}
    </div>
  );
}

const LAYOUTS = { cards: CardsLayout, magazine: MagazineLayout, list: ListLayout };

function BlogApp() {
  const [t, setTweak] = useTweaks(BLOG_DEFAULTS);
  const theme = t.dark ? "dark" : "light";
  const ref = useReveal();
  useEffectL(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", theme);
    r.setAttribute("data-density", t.density);
    r.style.setProperty("--accent", t.accent);
  }, [theme, t.density, t.accent]);

  const Layout = LAYOUTS[t.blogLayout] || CardsLayout;
  return (
    <div id="top">
      <BlogNav theme={theme} toggleTheme={() => setTweak("dark", !t.dark)} />
      <main>
        <section className="wrap blog-hero" ref={ref}>
          <span className="kicker">~/ teknik blog</span>
          <h1>Gömülü sistemler üzerine <span className="hl">yazılar</span>.</h1>
          <p>Haberleşme protokollerinden çip üreticilerinin tarihine — uygulamalı, açık ve Türkçe teknik içerik.</p>
        </section>
        <section className="wrap" style={{ paddingBottom: "calc(96px * var(--sp))" }} ref={ref}>
          <Layout posts={POSTS} />
        </section>
      </main>
      <BlogFooter />

      <TweaksPanel>
        <TweakSection label="Blog düzeni" />
        <TweakRadio label="Liste görünümü" value={t.blogLayout}
          options={[{value:"cards",label:"Kart"},{value:"magazine",label:"Magazin"},{value:"list",label:"Liste"}]}
          onChange={(v) => setTweak("blogLayout", v)} />
        <TweakSection label="Tema" />
        <TweakToggle label="Koyu mod" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakColor label="Vurgu rengi" value={t.accent} options={["#E11D48","#F97316","#10B981","#3B82F6","#8B5CF6"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Yoğunluk" value={t.density} options={["compact","regular","comfy"]}
          onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<BlogApp />);