/* Octomatica — Comparison page (versus.html). Octomatica vs competitors. */

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 VersusPage() {
  const d = window.OCTO.versus;
  const [active, setActive] = React.useState(0);
  const c = d.competitors[active];
  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 subhero-tight" 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">{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} />Попробовать в Telegram</a>
          </div>
        </div>
      </header>

      <main className="section" style={{ paddingTop: 12 }}>
        <div className="wrap wrap-wide">
          {/* competitor tabs */}
          <div className="vs-tabs reveal" data-d="1">
            <span className="vs-tabs-label muted">Сравнить с:</span>
            {d.competitors.map((x, i) => (
              <button key={x.key} className={"vs-tab " + (i === active ? "on" : "")} onClick={() => setActive(i)}>
                {x.name}
              </button>
            ))}
          </div>

          {/* comparison table */}
          <div className="vs-table reveal" data-d="2" key={c.key}>
            <div className="vs-row vs-head">
              <div className="vs-feature" />
              <div className="vs-cell octo"><Octo kind="center" size={24} /> Octomatica</div>
              <div className="vs-cell them">{c.name} <em className="muted">· {c.tagline}</em></div>
            </div>
            {d.features.map((f, i) => (
              <div className="vs-row" key={i}>
                <div className="vs-feature">{f}</div>
                <div className="vs-cell octo"><span className="vs-c"><Icon name="check" size={12} stroke={2.6} /></span>{d.octo[i]}</div>
                <div className="vs-cell them">{c.them[i]}</div>
              </div>
            ))}
          </div>

          {/* decision framework */}
          <div className="vs-choose reveal" data-d="1">
            <div className="vs-choose-card us">
              <h3 className="vs-choose-title">Выберите Octomatica, если</h3>
              <ul className="vs-choose-list">
                {d.chooseUs.map((b, i) => (
                  <li key={i}><span className="vs-c"><Icon name="check" size={12} stroke={2.6} /></span>{b}</li>
                ))}
              </ul>
            </div>
            <div className="vs-choose-card them" key={c.key}>
              <h3 className="vs-choose-title">Выберите {c.name}, если</h3>
              <ul className="vs-choose-list">
                {c.chooseThem.map((b, i) => (
                  <li key={i}><span className="vs-dot" />{b}</li>
                ))}
              </ul>
            </div>
          </div>

          {/* narrative differentiators */}
          <div className="vs-narrative">
            {d.narrative.map((n, i) => (
              <article className="vs-narr-item reveal card" data-d={(i % 3) + 1} key={i}>
                <span className="vs-narr-ic"><Icon name="spark" size={18} /></span>
                <h3 className="vs-narr-h">{n.h}</h3>
                <p className="vs-narr-p muted">{n.p}</p>
              </article>
            ))}
          </div>

          <div className="int-cta card reveal" style={{ marginTop: 8 }}>
            <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(<VersusPage />);