/* Octomatica — Blog page */

function useRevealBlog() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.06, rootMargin: "0px 0px -4% 0px" });
    const wire = () => document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.96 && r.bottom > -40) el.classList.add("in"); else io.observe(el);
    });
    wire();
    const onScroll = () => wire();
    window.addEventListener("scroll", onScroll, { passive: true });
    const safety = setTimeout(() => {
      document.querySelectorAll(".reveal").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0 && getComputedStyle(el).opacity === "0") { el.style.transition = "none"; el.classList.add("in"); }
      });
    }, 1400);
    return () => { clearTimeout(safety); io.disconnect(); window.removeEventListener("scroll", onScroll); };
  }, []);
}

function PostMeta({ tag, read, date, hue }) {
  return (
    <div className="post-meta">
      <span className="post-tag" style={{ "--hue": `var(${hue})` }}>{tag}</span>
      <span className="muted">{date} · {read}</span>
    </div>
  );
}

function BlogPage() {
  const d = window.OCTO.blog;
  const f = d.featured;
  useRevealBlog();
  React.useEffect(() => { const r = document.documentElement; r.setAttribute("data-theme","light"); r.setAttribute("data-accent","emerald"); r.setAttribute("data-fonts","geologica"); }, []);
  return (
    <>
      <Navbar />
      <header className="subhero subhero-tight" id="top">
        <div className="hero-orbs" aria-hidden="true">
          <div className="glow-orb" style={{ width:440, height:440, background:"var(--glow)", top:-160, left:"60%", animation:"drift2 24s ease-in-out infinite" }}/>
        </div>
        <div className="wrap subhero-inner">
          <span className="eyebrow reveal">{d.label}</span>
          <h1 className="display subhero-title reveal" data-d="1">{d.title}</h1>
          <p className="lead subhero-sub reveal" data-d="2">{d.desc}</p>
        </div>
      </header>

      <main className="section" style={{ paddingTop: 12 }}>
        <div className="wrap wrap-wide">
          <a href="#" className="post-featured card card-hover reveal" style={{ "--hue": `var(${f.hue})` }}>
            <div className="post-featured-art">
              <div className="bnr" style={{ position:"static", height:"100%" }}>
                <span className="bnr-eyebrow">OCTOMATICA · БЛОГ</span>
                <span className="bnr-title" style={{ fontSize:"2.2rem" }}>112<br/>промптов</span>
              </div>
              <Octo kind="laptop" size={92} className="post-featured-octo float" />
            </div>
            <div className="post-featured-body">
              <PostMeta tag={f.tag} read={f.read} date={f.date} hue={f.hue} />
              <h2 className="post-featured-title">{f.title}</h2>
              <p className="post-featured-excerpt muted">{f.excerpt}</p>
              <span className="post-readmore">Читать кейс <Icon name="arrow" size={16} /></span>
            </div>
          </a>

          <div className="blog-grid">
            {d.posts.map((p, i) => (
              <a href="#" className="post card card-hover reveal" data-d={(i % 3) + 1} key={i} style={{ "--hue": `var(${p.hue})` }}>
                <div className="post-art" style={{ background:`linear-gradient(135deg, color-mix(in srgb, var(${p.hue}) 85%, #000), var(${p.hue}))` }}>
                  <span className="post-art-tag">{p.tag}</span>
                </div>
                <div className="post-body">
                  <PostMeta tag={p.tag} read={p.read} date={p.date} hue={p.hue} />
                  <h3 className="post-title">{p.title}</h3>
                  <p className="post-excerpt muted">{p.excerpt}</p>
                  <span className="post-readmore">Читать <Icon name="arrow" size={15} /></span>
                </div>
              </a>
            ))}
          </div>

          <div className="int-cta card reveal" style={{ marginTop: 48 }}>
            <h2 className="h-sec" style={{ fontSize:"1.7rem" }}>{d.cta.title}</h2>
            <a href={window.OCTO.tg} className="btn btn-primary btn-lg"><Icon name="tg" size={18} />{d.cta.button}</a>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

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