/* ============================================================
   MINTYS — Reflections / Instagram archive page
   ============================================================ */
const { useState: useStateB, useEffect: useEffectB } = React;

function BlogHead({ lang, setLang }) {
  const scrolled = useScrolled();
  return (
    <header className={"head" + (scrolled ? " scrolled" : "")}>
      <a href="index.html" className="head-mark">ema.v2x.lt</a>
      <div className="head-center">
        <span className="folio">{lang === "lt" ? "Mintys" : "Reflections"}</span>
        <span className="folio">Nº 02</span>
      </div>
      <div className="head-right">
        <span className="lang">
          <button className={lang === "lt" ? "active" : ""} onClick={() => setLang("lt")}>LT</button>
          <span>/</span>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </span>
        <SiteIndex lang={lang} />
      </div>
    </header>
  );
}

function BlogIndex() {
  const [lang, setLang] = useStateB(() => localStorage.getItem("ema_lang") || "lt");
  useEffectB(() => { localStorage.setItem("ema_lang", lang); document.documentElement.lang = lang; }, [lang]);
  const c = window.EMA_COPY[lang];
  const b = c.blog;
  const read = lang === "lt" ? "Skaityti" : "Read";

  return (
    <React.Fragment>
      <BlogHead lang={lang} setLang={setLang} />

      <header className="bm-head shell">
        <div className="cover-edge">
          <Reveal as="p" className="folio">{lang === "lt" ? "Žurnalas — užrašai" : "Journal — notes"}</Reveal>
          <Reveal as="p" className="folio" delay={60} style={{ textAlign: "right" }}>Nº 02 — 2026</Reveal>
        </div>
        <div className="masthead">
          <Reveal><h1 className="mh l1">{b.label}</h1></Reveal>
        </div>
        <Reveal delay={120}>
          <p className="lead muted bm-intro">
            {lang === "lt"
              ? "Trumpos mintys ir užrašai iš Instagramo — apie sąmoningumą, santykius ir tai, ką reiškia augti. Be receptų, tik atviros pastabos."
              : "Short reflections and notes from Instagram — on consciousness, relationships, and what it means to grow. No prescriptions, just open observations."}
          </p>
        </Reveal>
      </header>

      <main className="ed-sec shell" style={{ paddingTop: "clamp(36px,4vw,56px)" }}>
        <Reveal as="div" className="bm-bar">
          <span className="folio">{lang === "lt" ? "Visi įrašai" : "All posts"}</span>
          <a href="#" className="ulink" onClick={(e) => e.preventDefault()}><span className="bar"></span> {lang === "lt" ? "Sekti Instagram" : "Follow on Instagram"} <Arw /></a>
        </Reveal>

        <div className="mintys-grid bm-grid">
          {b.posts.map((p, i) => (
            <Reveal key={i} as="a" href={"/mintys/" + p.id} className="mintys-card" delay={i * 70}>
              <div className="mintys-media">
                {p.img
                  ? <img src={p.img} alt={p.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                  : <Placeholder label={lang === "lt" ? "Instagram įrašas" : "Instagram post"} style={{ position: "absolute", inset: 0 }} />
                }
                <span className="mintys-cat">{p.cat}</span>
              </div>
              <div className="mintys-body">
                <span className="mintys-date">{p.date}</span>
                <h3 className="mintys-title">{p.title}</h3>
                <p className="mintys-intro">{p.intro}</p>
                <span className="ulink"><span className="bar"></span> {read} <Arw /></span>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="bm-foot" delay={100}>
          <p className="folio">{lang === "lt" ? "Daugiau įrašų netrukus" : "More posts coming soon"}</p>
        </Reveal>
      </main>

      <Colophon c={c} lang={lang} setLang={setLang} base="index.html" />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BlogIndex />);