/* Octomatica — generic SEO landing page (driven by window.SEO_KEY) */

function useRevealOnceSeo() {
  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 SeoPage() {
  const key = window.SEO_KEY;
  const all = window.OCTO.seoPages || {};
  const d = all[key];
  useRevealOnceSeo();
  React.useEffect(() => { const r = document.documentElement; r.setAttribute("data-theme","light"); r.setAttribute("data-accent","emerald"); r.setAttribute("data-fonts","geologica"); }, []);
  if (!d) {
    return (
      <>
        <Navbar />
        <main className="section">
          <div className="wrap"><h1 className="display">Страница не найдена</h1><p className="lead muted">Откройте <a href="Octomatica.html">главную Octomatica</a>.</p></div>
        </main>
        <Footer />
      </>
    );
  }
  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">SEO · Octomatica</span>
          <h1 className="display subhero-title reveal" data-d="1">{d.h1}</h1>
          <p className="lead subhero-sub reveal" data-d="2">{d.lead}</p>
          <div className="reveal" data-d="3" style={{ marginTop: 22 }}>
            <a href={window.OCTO.tg} className="btn btn-primary btn-lg"><Icon name="tg" size={18} />{d.cta || "Попробовать в Telegram"}</a>
          </div>
        </div>
      </header>

      <main className="section" style={{ paddingTop: 12 }}>
        <div className="wrap" style={{ maxWidth: 880 }}>
          {d.sections.map((s, i) => (
            <article className="reveal" data-d={(i % 3) + 1} key={i} style={{ marginBottom: 36 }}>
              <h2 className="h-sec" style={{ fontSize: "1.6rem", marginBottom: 12 }}>{s.h}</h2>
              <p className="lead" style={{ marginTop: 0 }}>{s.p}</p>
            </article>
          ))}

          <div className="int-cta card reveal" style={{ marginTop: 40 }}>
            <div>
              <h2 className="h-sec" style={{ fontSize: "1.5rem" }}>Готовы попробовать?</h2>
              <p className="lead muted" style={{ marginTop: 10 }}>Octomatica — ИИ-агент для бизнеса в Telegram. Добавьте бота в рабочий чат и опишите задачу обычным языком.</p>
            </div>
            <a href={window.OCTO.tg} className="btn btn-primary btn-lg"><Icon name="tg" size={18} />{d.cta || "Попробовать в Telegram"}</a>
          </div>

          {d.related && d.related.length > 0 && (
            <section className="reveal" style={{ marginTop: 48 }}>
              <h2 className="h-sec" style={{ fontSize: "1.4rem", marginBottom: 16 }}>Связанные темы</h2>
              <div className="cases-grid">
                {d.related.map((rk, i) => {
                  const r = all[rk]; if (!r) return null;
                  return (
                    <a href={rk + ".html"} className="case card card-hover reveal" data-d={(i % 3) + 1} key={i} style={{ "--hue": `var(--c-${["blue","teal","pink","amber"][i % 4]})` }}>
                      <div className="case-top"><span className="case-tag">SEO</span></div>
                      <h3 className="case-title">{r.h1}</h3>
                      <p className="case-desc muted">{r.lead}</p>
                    </a>
                  );
                })}
              </div>
            </section>
          )}
        </div>
      </main>
      <Footer />
    </>
  );
}

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