/* Octomatica — Integrations page */

function useRevealOnce() {
  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 StatusChip({ status }) {
  return status === "now"
    ? <span className="int-status now"><span className="channel-dot"/>Доступно</span>
    : <span className="int-status soon">Скоро</span>;
}

function IntegrationsPage() {
  const d = window.OCTO.integrations;
  useRevealOnce();
  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" id="top">
        <div className="hero-orbs" aria-hidden="true">
          <div className="glow-orb" style={{ width:480, height:480, background:"var(--glow)", top:-180, right:-100, animation:"drift1 22s 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">Работает с тем,<br/>чем вы <span className="hero-accent">уже пользуетесь</span></h1>
          <p className="lead subhero-sub reveal" data-d="2">{d.desc}</p>
          <ChannelChips className="reveal" />
        </div>
      </header>

      <main className="section" style={{ paddingTop: 24 }}>
        <div className="wrap wrap-wide">
          {d.groups.map((g, gi) => (
            <section className="int-group" key={gi}>
              <div className="int-group-head reveal">
                <h2 className="int-group-name">{g.name}</h2>
                <p className="int-group-desc muted">{g.desc}</p>
              </div>
              <div className="int-grid">
                {g.items.map((it, i) => (
                  <div className={"int-card card card-hover reveal " + (it.status === "now" ? "" : "is-soon")} data-d={(i % 4) + 1} key={i}>
                    <div className="int-card-top">
                      <span className="int-logo"><BrandLogo name={it.logo} size={30} /></span>
                      <StatusChip status={it.status} />
                    </div>
                    <h3 className="int-name">{it.name}</h3>
                    <p className="int-desc muted">{it.desc}</p>
                  </div>
                ))}
              </div>
            </section>
          ))}

          <div className="int-cta card reveal">
            <div>
              <h2 className="h-sec" style={{ fontSize:"1.7rem" }}>{d.cta.title}</h2>
              <p className="lead" style={{ marginTop: 10 }}>{d.cta.desc}</p>
            </div>
            <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(<IntegrationsPage />);