/* SEL.IA Landing v2 — App shell with alternating backgrounds, integration map,
   stats strip, processes timeline, activity ticker, and reveal-on-scroll. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "intelligence",
  "accent": "gradient",
  "density": "default"
}/*EDITMODE-END*/;

const HEADLINES = {
  intelligence: { pre: "Inteligência regulatória,", accent: "na velocidade", suf: "do setor elétrico." },
  decifre:      { pre: "Decifre a regulação.",      accent: "Antecipe",       suf: "o impacto." },
  unica:        { pre: "Toda a regulação,",         accent: "em uma única",   suf: "plataforma de IA." },
  sem_ruido:    { pre: "Da norma à decisão,",       accent: "sem ruído.",     suf: "" },
};

/* Hero responsivo: notebook no desktop, celular (PhoneMockup) em <=768px.
   Branch em runtime (matchMedia) para montar SO um dos dois — evita as duas
   animacoes rodando timers simultaneamente no aparelho do visitante. */
const PHONE_VIEWPORT_MQ = "(max-width: 768px)";
const useIsPhoneViewport = () => {
  const [isPhone, setIsPhone] = React.useState(() => window.matchMedia(PHONE_VIEWPORT_MQ).matches);
  React.useEffect(() => {
    const mq = window.matchMedia(PHONE_VIEWPORT_MQ);
    const onChange = (e) => setIsPhone(e.matches);
    if (mq.addEventListener) mq.addEventListener("change", onChange);
    else mq.addListener(onChange);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener("change", onChange);
      else mq.removeListener(onChange);
    };
  }, []);
  return isPhone;
};

/* Host do celular no hero: centraliza e reduz com `zoom`. O celular tem 390px
   nativos, mas a "cena" inclui a folga lateral onde os tooltips ficam pendurados
   na borda do aparelho (como vieram do Claude Design / as feat-bubbles do notebook).
   Escala a cena inteira p/ caber no viewport — por isso o celular NAO ocupa 100%.
   zoom (nao transform:scale — scale rasteriza e borra o texto). */
const PHONE_SCENE_WIDTH = 778; // 390 (celular) + folga p/ tooltip (165+8) + ~10px de respiro ate a borda
const HeroPhoneDemo = () => {
  const hostRef = React.useRef(null);
  React.useEffect(() => {
    const fit = () => {
      const el = hostRef.current;
      // clientWidth (nao innerWidth) p/ excluir a barra de rolagem e manter a cena centrada
      const avail = document.documentElement.clientWidth;
      if (el) el.style.zoom = String(Math.min(1, avail / PHONE_SCENE_WIDTH));
    };
    fit();
    window.addEventListener("resize", fit);
    return () => window.removeEventListener("resize", fit);
  }, []);
  return (
    <div className="hero-phone-host" ref={hostRef}>
      <PhoneMockup light/>
    </div>
  );
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const isPhoneViewport = useIsPhoneViewport();

  React.useEffect(() => {
    document.body.dataset.accent = tweaks.accent;
    document.body.dataset.density = tweaks.density;
  }, [tweaks.accent, tweaks.density]);

  useReveal();

  // Modal CIDE — aparece "na cara" ao entrar; se fechar, a faixa permanece.
  const [cideOpen, setCideOpen] = React.useState(false);
  React.useEffect(() => {
    let dismissed = false;
    try { dismissed = !!localStorage.getItem("cide_modal_dismissed"); } catch (e) {}
    if (!dismissed) setCideOpen(true);
  }, []);
  const closeCide = () => {
    setCideOpen(false);
    try { localStorage.setItem("cide_modal_dismissed", "1"); } catch (e) {}
  };
  React.useEffect(() => {
    if (!cideOpen) return;
    const onKey = (e) => { if (e.key === "Escape") closeCide(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [cideOpen]);

  // Menu mobile (hamburguer) — links de secao em telas <=880px
  const [navOpen, setNavOpen] = React.useState(false);
  const closeNav = () => setNavOpen(false);
  React.useEffect(() => {
    if (!navOpen) return;
    const onKey = (e) => { if (e.key === "Escape") closeNav(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [navOpen]);

  // Ancoras internas (#secao): com <base href="/landing/"> no index.html, um link
  // so-fragmento navegaria p/ /landing/#secao e cairia no middleware de auth (login).
  // Interceptamos o clique p/ rolar na propria pagina, sem navegar.
  React.useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest && e.target.closest('a[href^="#"]');
      if (!a) return;
      e.preventDefault(); // evita a navegacao induzida pelo <base href>
      const id = a.getAttribute("href").slice(1);
      const el = id && document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
        history.replaceState(null, "", location.pathname + location.search + "#" + id);
      }
      setNavOpen(false);
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  const hl = HEADLINES[tweaks.headline] || HEADLINES.intelligence;

  return (
    <>
      {/* Modal CIDE — primeira impressao ao entrar (faixa permanece se fechar) */}
      {cideOpen && (
        <div className="cide-modal-overlay" onClick={closeCide}>
          <div className="cide-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Acesso CIDE 2026">
            <button className="cide-modal-close" onClick={closeCide} aria-label="Fechar">×</button>
            <span className="cide-modal-badge">CIDE 2026</span>
            <h2 className="cide-modal-title">Você veio do CIDE 2026?</h2>
            <p className="cide-modal-text">Ative seu acesso gratuito à SEL.IA — a inteligência regulatória do setor elétrico. Exclusivo para quem está no congresso.</p>
            <a className="cide-modal-cta" href="/cadastro?campanha=cide2026">Ativar meu acesso gratuito <LandIcon name="arrow" size={18}/></a>
            <button className="cide-modal-dismiss" onClick={closeCide}>Agora não, quero ver a plataforma</button>
          </div>
        </div>
      )}

      {/* Faixa CIDE — acesso do evento (bem visivel no topo) */}
      <a className="cide-banner" href="/cadastro?campanha=cide2026">
        <span className="cide-banner-badge">CIDE 2026</span>
        <span className="cide-banner-txt">Veio do CIDE? <b>Ative seu acesso gratuito</b></span>
        <LandIcon name="arrow" size={16}/>
      </a>

      {/* Top nav */}
      <header className="topnav">
        <div className="container inner">
          <button className="nav-burger" aria-label={navOpen ? "Fechar menu" : "Abrir menu"}
            aria-expanded={navOpen} onClick={() => setNavOpen((o) => !o)}>
            {navOpen ? <LandIcon name="x" size={22}/>
                     : <span className="nav-burger-bars"><span/><span/><span/></span>}
          </button>
          <a className="brand" href="#top">
            <img src="assets/icone.png" alt="" style={{width:30,height:30}}/>
            <SeliaWord/>
          </a>
          <nav className="links">
            <a href="#processos">Processos</a>
            <a href="#areas">Aplicações</a>
            <a href="#modulos">Capacidades</a>
            <a href="#cobertura">Cobertura</a>
            <a href="#seguranca">Segurança</a>
          </nav>
          <div className="right">
            <a className="btn btn-ghost nav-cta" href="/login">Entrar</a>
            <a className="btn btn-primary btn-hero-primary nav-cta" href="/cadastro?campanha=cide2026">
              <span className="cta-label-full">Agende uma demo</span>
              <span className="cta-label-short">Demo</span>
            </a>
          </div>
        </div>
        {/* Painel de links — so mobile (hamburguer) */}
        <nav className={`nav-mobile ${navOpen ? "open" : ""}`} aria-label="Navegação">
          <a href="#processos" onClick={closeNav}>Processos</a>
          <a href="#areas" onClick={closeNav}>Aplicações</a>
          <a href="#modulos" onClick={closeNav}>Capacidades</a>
          <a href="#cobertura" onClick={closeNav}>Cobertura</a>
          <a href="#seguranca" onClick={closeNav}>Segurança</a>
        </nav>
      </header>

      {/* Hero */}
      <section className="hero" id="top">
        <div className="container">
          <div className="hero-stokhos"><span>uma plataforma</span><img src="stokhos-logo-color.png" alt="Stokhos"/></div>
          <span className="hero-eyebrow">
            <LandIcon name="sparkles" size={12}/>Plataforma de inteligência regulatória
          </span>
          <h1>
            {hl.pre}<br/>
            <span className="accent">{hl.accent}</span>
            {hl.suf && <> {hl.suf}</>}
          </h1>
          <p className="lead">
            SEL.IA unifica ANEEL, DOU, SEI e BDGD numa única interface conversacional —
            para as áreas regulatórias dos agentes do setor elétrico. A análise que era manual,
            agora em segundos, com toda resposta rastreável até a fonte oficial.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary btn-lg btn-hero-primary" href="/cadastro?campanha=cide2026">
              Agende uma demo <LandIcon name="arrow" size={16}/>
            </a>
          </div>
          <div className="hero-microcopy">
            <LandIcon name="sparkles" size={13}/>
            Demonstração de 30 min com um especialista do setor — sem compromisso.
          </div>
        </div>
        <div className="container hero-laptop-wrap">
          {isPhoneViewport ? <HeroPhoneDemo/> : <LaptopMockup/>}
        </div>
      </section>

      {/* A. Credibility bar */}
      <CredibilityBar/>

      {/* DARK BAND: integration map + stats + ticker (replaces trust bar) */}
      <section className="section dark-band" id="fontes">
        <div className="container">
          <div className="section-header reveal">
            <div className="section-eyebrow">Fontes integradas</div>
            <h2>Os dados do setor elétrico,<br/>finalmente em um só lugar.</h2>
            <p>SEL.IA é o tecido que une fontes oficiais que, na prática, nunca conversaram entre si. Sete já estão ao vivo. Duas no roadmap. Toda atualização fica disponível em segundos.</p>
          </div>

          <SourceProcessor/>

          <StatsStrip/>

          <ActivityTicker/>
        </div>
      </section>

      {/* PROCESSES — the core SaaS section */}
      <section className="section" id="processos" style={{background:"#fafbfc",borderBottom:"1px solid rgba(16,43,78,0.06)"}}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-eyebrow">Acompanhamento de processos</div>
            <h2>Acompanhe tudo,<br/>em tempo real.</h2>
            <p>Cada processo administrativo da ANEEL, do SEI ao DOU, monitorado continuamente. Receba alertas de prazos, votos e decisões — com predições baseadas no histórico do colegiado.</p>
          </div>

          <ProcessesTimeline/>
        </div>
      </section>

      {/* Vigilância e alertas — conceptual monitoring scene */}
      <section className="section" id="vigilancia" style={{background:"#fafbfc",borderBottom:"1px solid rgba(16,43,78,0.06)"}}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-eyebrow">Vigilância regulatória contínua</div>
            <h2>A SEL.IA fica de olho<br/>no setor por você.</h2>
            <p>Monitoramento contínuo de palavras-chave, citações à sua empresa e atualizações de processos favoritados — no DOU, em reuniões da Diretoria, no SEI, em consultas públicas e newsletters. Com alerta automático por e-mail.</p>
          </div>
        </div>
        <div className="reveal" style={{width:"min(1760px, 94vw)", margin:"0 auto"}}>
          <MonitorEmbed hideTitle/>
        </div>
      </section>

      {/* Modules */}
      <section className="section" id="modulos">
        <div className="container">
          <div className="section-header reveal">
            <div className="section-eyebrow">Capacidades</div>
            <h2>Cinco módulos. Um único contexto regulatório.</h2>
            <p>Cada módulo da SEL.IA é especializado em um vértice do ecossistema regulatório, mas compartilha o mesmo contexto. Pergunte uma vez, obtenha respostas que cruzam todas as fontes.</p>
          </div>
          <ModuleShowcase/>
        </div>
      </section>

      {/* Aplicações por área */}
      <AreasSection/>

      {/* How it works — DARK */}
      <section className="section dark-band" id="como-funciona" style={{display:"none"}}>
        <div className="container">
          <div className="section-header reveal">
            <div className="section-eyebrow">Como funciona</div>
            <h2>Da pergunta à decisão,<br/>em três etapas.</h2>
            <p>Sem upload de documentos. Sem treinamento manual. SEL.IA já conhece as fontes oficiais e atualiza em tempo real.</p>
          </div>
          <div className="steps-grid">
            <div className="step reveal">
              <div className="step-num">1</div>
              <h4>Pergunte em linguagem natural</h4>
              <p>"Como o voto da Diretora Agnes na sessão de 12/03 afeta a tarifa da Enel SP?" SEL.IA entende o jargão técnico do setor.</p>
            </div>
            <div className="step reveal">
              <div className="step-num">2</div>
              <h4>SEL.IA cruza as fontes</h4>
              <p>Em segundos, a IA consulta ANEEL, DOU, SEI, BDGD e processos abertos. Identifica votos, prazos e impactos relacionados.</p>
            </div>
            <div className="step reveal">
              <div className="step-num">3</div>
              <h4>Receba resposta auditável</h4>
              <p>Toda afirmação vem com citação direta da fonte oficial. Exporte o relatório, compartilhe com o time, ou aprofunde com Deep Search.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Cobertura & escala — estatísticas */}
      <StatsSection/>

      {/* Security */}
      <section className="section security" id="seguranca">
        <div className="container">
          <div className="section-header reveal">
            <div className="section-eyebrow">Segurança & privacidade</div>
            <h2>Construída para áreas regulatórias.</h2>
            <p>Suas consultas, suas anotações e seus relatórios não treinam modelos de terceiros. Período.</p>
          </div>
          <div className="sec-grid">
            <div className="sec-card reveal">
              <div className="sec-icon"><LandIcon name="lock" size={20}/></div>
              <h4>Dados isolados por organização</h4>
              <p>Cada distribuidora opera em um tenant isolado. Anotações, conversas e relatórios não cruzam fronteiras organizacionais.</p>
            </div>
            <div className="sec-card reveal">
              <div className="sec-icon"><LandIcon name="server" size={20}/></div>
              <h4>Hospedagem no Brasil</h4>
              <p>Infraestrutura em região brasileira, em conformidade com a LGPD e com requisitos do setor regulado.</p>
            </div>
            <div className="sec-card reveal">
              <div className="sec-icon"><LandIcon name="shield" size={20}/></div>
              <h4>Sem treinamento de modelo</h4>
              <p>Suas perguntas e documentos jamais alimentam modelos generalistas. Auditoria completa de prompts e respostas.</p>
            </div>
          </div>
        </div>
      </section>

      {/* D. FAQ / objeções */}
      <FAQ/>

      {/* CTA Final */}
      <section className="section cta-final" id="contato">
        <div className="container">
          <h2>Veja a SEL.IA aplicada<br/>à sua operação regulatória.</h2>
          <p>Demonstração de 30 minutos com um especialista do setor elétrico, focada nos seus casos de uso reais.</p>
          <div style={{display:"flex",gap:12,justifyContent:"center",flexWrap:"wrap"}}>
            <a className="btn btn-primary btn-lg" href="/cadastro?campanha=cide2026">Agende uma demo <LandIcon name="arrow" size={16}/></a>
          </div>
          <div className="cta-stokhos"><span>uma plataforma</span><img src="stokhos-logo-white.png" alt="Stokhos"/></div>
        </div>
      </section>

      {/* Footer */}
      <footer className="footer">
        <div className="container">
          <div className="footer-grid">
            <div className="footer-col-brand">
              <div className="footer-brand">
                <img className="footer-logo" src="assets/icone.png" alt="SEL.IA"/>
                <SeliaWord/>
              </div>
              <p className="footer-tag">Inteligência artificial a serviço do setor elétrico brasileiro.</p>
              <div className="footer-social">
                <a className="footer-social-btn" href="https://www.linkedin.com/company/stokhos-ia/posts/?feedView=all"
                   target="_blank" rel="noopener noreferrer" aria-label="LinkedIn da Stokhos">
                  <LandIcon name="linkedin" size={18}/>
                </a>
                <a className="footer-site" href="https://stokhosia.com.br" target="_blank" rel="noopener noreferrer">
                  stokhosia.com.br <LandIcon name="arrowupright" size={14}/>
                </a>
              </div>
            </div>
            <div className="footer-col">
              <h5>Empresa</h5>
              <ul>
                <li><a href="https://stokhosia.com.br" target="_blank" rel="noopener noreferrer">Sobre a Stokhos</a></li>
                <li><a href="#carreira">Carreira</a></li>
                <li><a href="https://www.linkedin.com/company/stokhos-ia/posts/?feedView=all" target="_blank" rel="noopener noreferrer">Contato</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h5>Plataforma</h5>
              <ul>
                <li><a href="#processos">Processos</a></li>
                <li><a href="#areas">Aplicações</a></li>
                <li><a href="#modulos">Capacidades</a></li>
                <li><a href="#cobertura">Cobertura</a></li>
                <li><a href="#seguranca">Segurança</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-bottom">
            <div>© 2026 Stokhos · SEL.IA — Sistema de Inteligência Regulatória</div>
            <div className="footer-legal">
              <a href="#privacidade">Privacidade</a>
              <a href="#termos">Termos</a>
              <a href="#lgpd">LGPD</a>
            </div>
          </div>
        </div>
      </footer>

      {/* Painel de Tweaks removido para producao (CIDE) */}
    </>
  );
};

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