/* ===== Mentium — production app shell (palette locked to Eclipse via CSS) ===== */
const { useState, useEffect } = React;

function Logo() {
  return (
    <a href="#top" className="logo">
      <img className="brand-mark" src="/logo.png" alt="" aria-hidden="true" />
      <span className="logo-word">Mentium<span className="logo-dot">.</span></span>
    </a>
  );
}

function LoginIc() {
  return (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" /><path d="m10 17 5-5-5-5M15 12H3" /></svg>);
}

function ChromeIc() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" style={{flexShrink:0,display:'block'}}>
      <circle cx="9" cy="9" r="4" fill="white"/>
      <path d="M9 5h7.5A9 9 0 0 0 2.5 3.5L6.25 10A4 4 0 0 1 9 5Z" fill="#EA4335"/>
      <path d="M16.5 9H9a4 4 0 0 1-2.75 3.8L3.5 18A9 9 0 0 0 16.5 9Z" fill="#34A853"/>
      <path d="M1.5 9a7.5 7.5 0 0 1 1-3.5L6.25 10A4 4 0 0 1 9 13H1.65A7.5 7.5 0 0 1 1.5 9Z" fill="#FBBC05"/>
    </svg>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? "nav-scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <Logo />
        <nav className="nav-links">
          <a href="#how">Как работает</a>
          <a href="#features">Возможности</a>
          <a href="#cases">Сценарии</a>
          <a href="#pricing">Тарифы</a>
          <a href="#faq">Вопросы</a>
        </nav>
        <a href="/login" className="btn btn-primary nav-cta"><LoginIc /> Войти</a>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <span className="hero-badge"><span className="pulse" /> AI-помощник <b>прямо в браузере</b></span>
          <h1 className="hero-title">
            Выделите текст —<br />
            <span className="grad-text">получите</span><br />
            <RotatingText
              texts={["ответ", "перевод", "разбор", "суть"]}
              className="grad-text rotating-word hero-rotating-word"
            />
          </h1>
          <p className="hero-sub">
            Mentium видит страницу целиком и помогает с тем, что вы выделили:
            объяснит, переведёт, найдёт факты и даст источники — не уводя вас в другую вкладку.
          </p>
          <div className="hero-cta">
            <a href="https://chromewebstore.google.com/detail/bhdfmianknddedjhjokgepkhdodfmeni" target="_blank" rel="noopener" className="btn btn-primary btn-lg btn-chrome">
              <ChromeIc /> Установить для Chrome
            </a>
            <a href="#demo" className="btn btn-ghost btn-lg">Смотреть демо →</a>
          </div>
          <div className="hero-meta">
            <span><b>Бесплатно</b> для старта</span><span className="sep" />
            <span>ставится за <b>минуту</b></span><span className="sep" />
            <span>личный кабинет</span>
          </div>
        </div>
        <div className="hero-demo reveal in">
          <HeroDemo />
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section id="cta" className="section-pad">
      <div className="wrap">
        <div className="cta-band reveal">
          <div className="cta-content">
            <div className="cta-glyph"><img src="/logo.png" alt="" aria-hidden="true" /></div>
            <h2 className="cta-title">
              Читайте{" "}
              <RotatingText
                texts={["умнее", "быстрее", "глубже", "проще"]}
                className="grad-text cta-rotating-word"
                interval={2100}
              />{" "}
              уже сегодня
            </h2>
            <p className="cta-sub">Поставьте Mentium и превратите любое выделение в понятный ответ.</p>
            <div className="cta-actions">
              <Magnet>
                <a href="https://chromewebstore.google.com/detail/bhdfmianknddedjhjokgepkhdodfmeni" target="_blank" rel="noopener" className="btn btn-primary btn-lg btn-chrome">
                  <ChromeIc /> Установить для Chrome — бесплатно
                </a>
              </Magnet>
              <a href="/login" className="btn btn-ghost btn-lg"><LoginIc /> Войти в кабинет</a>
            </div>
            <p className="cta-fine">Совместимо с Chrome · Edge · Arc</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <Logo />
          <p className="footer-tag">AI-компаньон для чтения, который живёт в вашем браузере.</p>
        </div>
        <div className="footer-cols">
          <div className="footer-col"><span className="footer-h">Продукт</span><a href="#features">Возможности</a><a href="#how">Как работает</a><a href="#pricing">Тарифы</a></div>
          <div className="footer-col"><span className="footer-h">Аккаунт</span><a href="/login">Войти</a><a href="/dashboard">Кабинет</a><a href="mailto:info@mentium.ru">Контакты</a></div>
          <div className="footer-col"><span className="footer-h">Правовое</span><a href="/privacy">Конфиденциальность</a><a href="/terms">Правила</a><a href="/offer">Оферта</a></div>
        </div>
      </div>
      <div className="wrap footer-bottom"><span>© 2026 Mentium</span><span>Сделано для тех, кто много читает</span></div>
    </footer>
  );
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function App() {
  useReveal();
  useAnimePageMotion();
  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <HowItWorks />
        <Features />
        <UseCases />
        <Pricing />
        <DemoInAction />
        <FAQ />
        <CTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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