// chrome.jsx — AnnouncementBar + Header (fixed nav w/ mega-menus) + Footer-lite
// Exports to window: AnnouncementBar, Header

const LINKS = {
  signup: 'https://os.jynx.com.br',
  login: 'https://os.jynx.com.br',
  demo: 'https://calendly.com/ygor-lima-jynx/demonstracao-fluig',
  wa: 'https://wa.me/5511912692409',
  email: 'mailto:relacionamento@jynx.com.br',
};
window.JYNX_LINKS = LINKS;

function AnnouncementBar() {
  return (
    <a className="annbar" href={jbase() + 'protheus/reforma-tributaria.html'}>
      <span className="annbar__pill">Reforma Tributária</span>
      <span className="annbar__txt">
        2026: seu Protheus está preparado? <strong>Diagnóstico gratuito.</strong>
      </span>
      <Icon name="arrow-right" size={15} className="annbar__arrow" />
    </a>
  );
}

const MEGA = {
  'Soluções': {
    intro: { label: 'Por área de negócio', sub: 'Automações prontas que rodam no Fluig, implantadas em semanas.' },
    cols: [
      { items: [
        ['layout-dashboard', 'TI e Governança', 'Sustentação, AMS, GMUD, backlog'],
        ['users', 'RH e Pessoas', 'Admissão digital, avaliação, desligamento'],
        ['receipt', 'Financeiro', 'Pagamento de notas, rateio, alçadas'],
      ]},
      { items: [
        ['shopping-cart', 'Compras', 'Portal, cotação, fornecedores, contratos'],
        ['headset', 'Operações', 'Central de serviços, chamados, SLA'],
        ['chart-no-axes-column', 'Diretoria', 'Indicadores, gargalos, ROI'],
      ]},
    ],
    feature: { tag: '+20 soluções', title: 'Catálogo completo', desc: 'Veja prazo, ERP e escopo de cada solução.', cta: 'Ver catálogo' },
  },
  'Serviços': {
    intro: { label: 'Capacidades', sub: 'Sustentar, integrar e evoluir o seu ambiente TOTVS.' },
    cols: [
      { items: [
        ['shield-check', 'Sustentar', 'Fluig, AMS, Service Desk com SLA'],
        ['workflow', 'Integrar', 'Fluig + Protheus, RM, Datasul, Winthor'],
      ]},
      { items: [
        ['trending-up', 'Evoluir', 'Consultoria, portais, automações, IA'],
        ['user-cog', 'Alocação', 'Consultores TOTVS no seu time em dias'],
      ]},
    ],
    feature: { tag: 'Protheus', title: 'Consultoria Protheus', desc: 'Implantação, release, reforma tributária, ADVPL.', cta: 'Ver serviços Protheus' },
  },
};

const NAV = ['Soluções', 'Serviços', 'Integrações', 'Diagnósticos', 'Segmentos', 'Recursos', 'Blog', 'Sobre', 'Contato'];

// Cross-page routing.
//   window.JYNX_IS_HOME = true   -> this IS the home page (anchors stay local)
//   window.JYNX_BASE = '../'      -> path prefix from this page to the site root (default '')
function jbase() { return (typeof window !== 'undefined' && window.JYNX_BASE) || ''; }
function jIsHome() { return typeof window !== 'undefined' && !!window.JYNX_IS_HOME; }
function homeFile() { return jIsHome() ? '' : jbase() + 'index.html'; }
function navHref(item) {
  if (item === 'Soluções') return jbase() + 'solucoes.html';
  if (item === 'Serviços') return jbase() + 'servicos.html';
  if (item === 'Integrações') return jbase() + 'integracoes.html';
  if (item === 'Diagnósticos') return jbase() + 'diagnosticos.html';
  if (item === 'Sobre') return jbase() + 'sobre.html';
  if (item === 'Contato') return jbase() + 'contato.html';
  if (item === 'Segmentos') return jbase() + 'segmentos.html';
  if (item === 'Recursos') return jbase() + 'recursos.html';
  if (item === 'Blog') return jbase() + 'blog';
  return homeFile() + '#' + item.toLowerCase();
}
function logoHref() { return jIsHome() ? '#top' : jbase() + 'index.html'; }
function megaBase(key) {
  return key === 'Soluções' ? jbase() + 'solucoes.html' : jbase() + 'servicos.html';
}

function MegaPanel({ data, base }) {
  return (
    <div className="mega">
      <div className="mega__intro">
        <div className="eyebrow">{data.intro.label}</div>
        <p>{data.intro.sub}</p>
      </div>
      <div className="mega__cols">
        {data.cols.map((col, ci) => (
          <ul key={ci} className="mega__col">
            {col.items.map(([icon, title, desc]) => (
              <li key={title}>
                <a href={base} className="mega__item">
                  <span className="mega__ic"><Icon name={icon} size={18} /></span>
                  <span>
                    <span className="mega__t">{title}</span>
                    <span className="mega__d">{desc}</span>
                  </span>
                </a>
              </li>
            ))}
          </ul>
        ))}
      </div>
      <a href={data.featureHref || base} className="mega__feature">
        <span className="tag tag--accent">{data.feature.tag}</span>
        <span className="mega__ft">{data.feature.title}</span>
        <span className="mega__fd">{data.feature.desc}</span>
        <span className="mega__fc">{data.feature.cta} <Icon name="arrow-right" size={15} /></span>
      </a>
    </div>
  );
}

function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(null);
  const [mobile, setMobile] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={'hdr' + (scrolled ? ' hdr--scrolled' : '')}>
      <div className="hdr__inner wrap">
        <a href={logoHref()} className="hdr__logo" aria-label="JYNX início">
          <JynxLogo height={22} text="var(--ink)" />
        </a>

        <nav className="hdr__nav" onMouseLeave={() => setOpen(null)}>
          {NAV.map((item) => {
            const hasMega = MEGA[item];
            return (
              <div key={item} className="navitem"
                   onMouseEnter={() => setOpen(hasMega ? item : null)}>
                <a href={navHref(item)} className={'navlink' + (open === item ? ' navlink--open' : '')}>
                  {item}
                  {hasMega && <Icon name="chevron-down" size={14} className="navlink__chev" />}
                </a>
                {hasMega && open === item && (
                  <div className="navdrop"><MegaPanel data={MEGA[item]} base={megaBase(item)} /></div>
                )}
              </div>
            );
          })}
        </nav>

        <div className="hdr__cta">
          <a href={LINKS.login} className="hdr__login">Entrar</a>
          <a href={LINKS.signup} className="btn btn--primary btn--sm">Cadastrar</a>
          <button className="hdr__burger" aria-label="Menu" onClick={() => setMobile(m => !m)}>
            <Icon name={mobile ? 'x' : 'menu'} size={22} />
          </button>
        </div>
      </div>

      {mobile && (
        <div className="hdr__mobile">
          {NAV.map(item => (
            <a key={item} href={navHref(item)} onClick={() => setMobile(false)}>{item}</a>
          ))}
          <div className="hdr__mobile-cta">
            <a href={LINKS.login} className="btn btn--ghost">Entrar</a>
            <a href={LINKS.signup} className="btn btn--primary">Cadastrar</a>
          </div>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { AnnouncementBar, Header });

/* ---------------- Footer (shared across pages) ---------------- */
const FOOT_NAV = ['Início', 'Soluções', 'Serviços', 'Integrações', 'Diagnósticos', 'Segmentos', 'Recursos', 'Blog', 'Sobre', 'Contato'];
function footHref(n) {
  if (n === 'Início') return jIsHome() ? '#top' : jbase() + 'index.html';
  if (n === 'Soluções') return jbase() + 'solucoes.html';
  if (n === 'Serviços') return jbase() + 'servicos.html';
  if (n === 'Integrações') return jbase() + 'integracoes.html';
  if (n === 'Diagnósticos') return jbase() + 'diagnosticos.html';
  if (n === 'Sobre') return jbase() + 'sobre.html';
  if (n === 'Contato') return jbase() + 'contato.html';
  if (n === 'Segmentos') return jbase() + 'segmentos.html';
  if (n === 'Recursos') return jbase() + 'recursos.html';
  if (n === 'Blog') return jbase() + 'blog';
  return homeFile() + '#' + n.toLowerCase();
}

function Footer() {
  const L = window.JYNX_LINKS;
  return (
    <footer className="footer">
      <div className="wrap footer__top">
        <div className="footer__brand">
          <JynxLogo height={26} text="#fff" mark="var(--accent)" />
          <p className="footer__tag">A extensão do seu time TOTVS. Soluções prontas, consultoria e sustentação para Protheus, Fluig, RM e Analytics.</p>
          <address className="footer__addr">
            Rua Augusta, 1836, 5º andar<br />
            Paulista, São Paulo, SP, Brasil<br />
            <span className="footer__nat">Atuação nacional</span>
          </address>
          <a href={L.email} className="footer__email"><Icon name="mail" size={15} /> relacionamento@jynx.com.br</a>
        </div>

        <div className="footer__cols">
          <div className="footer__col">
            <h4>Navegação</h4>
            <ul>
              {FOOT_NAV.map(n => <li key={n}><a href={footHref(n)}>{n}</a></li>)}
            </ul>
          </div>
          <div className="footer__col">
            <h4>Empresa</h4>
            <ul>
              <li><a href={jbase() + 'sobre.html'}>Trabalhe conosco</a></li>
              <li><a href="https://jynxeducacao.com.br" target="_blank" rel="noopener" className="footer__ext">JYNX Educação <Icon name="arrow-up-right" size={13} /></a></li>
              <li><a href="https://vagas.jynx.com.br" target="_blank" rel="noopener" className="footer__ext">Vagas <Icon name="arrow-up-right" size={13} /></a></li>
              <li><a href={jbase() + 'sobre.html'}>LGPD e segurança</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Contato</h4>
            <ul>
              <li><a href={L.wa}>Fale pelo WhatsApp</a></li>
              <li><a href={homeFile() + '#contato'}>Página de contato</a></li>
            </ul>
            <div className="footer__ctas">
              <a href={L.signup} className="btn btn--primary btn--sm">Cadastre-se gratuitamente</a>
              <a href={L.demo} className="btn btn--ghost btn--sm">Agendar demonstração</a>
            </div>
          </div>
        </div>
      </div>

      <div className="wrap footer__bottom">
        <span className="footer__selo">🇧🇷 Orgulhosamente brasileira</span>
        <span className="footer__copy">© 2026 JYNX</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });

/* ================= Real media: client logos, video, photos ================= */
const CLIENT_LOGOS = [
  ['gol.png', 'GOL'],
  ['sebrae.png', 'SEBRAE'],
  ['bombril.png', 'Bombril'],
  ['shineray.png', 'Shineray'],
  ['botec.png', 'Botec'],
  ['oba.png', 'Oba'],
  ['zaraplast.png', 'Zaraplast'],
];

function ClientLogos({ compact }) {
  const base = (typeof window !== 'undefined' && window.JYNX_BASE ? window.JYNX_BASE : '') + 'assets/logos/';
  const row = [...CLIENT_LOGOS, ...CLIENT_LOGOS];
  return (
    <div className={'logos-marquee' + (compact ? ' logos-marquee--compact' : '')}>
      <div className="logos-track">
        {row.map(([f, name], i) => (
          <img key={i} src={base + f} alt={'Logo ' + name} loading="lazy" className="client-logo" aria-hidden={i >= CLIENT_LOGOS.length ? 'true' : undefined} />
        ))}
      </div>
    </div>
  );
}

const JYNX_VIDEO = {
  iframe: 'https://customer-r6biqp379yd4lbg8.cloudflarestream.com/ad37ab2373e59201b0ea5e5531852825/iframe?autoplay=true&poster=https%3A%2F%2Fcustomer-r6biqp379yd4lbg8.cloudflarestream.com%2Fad37ab2373e59201b0ea5e5531852825%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600',
  thumb: 'https://customer-r6biqp379yd4lbg8.cloudflarestream.com/ad37ab2373e59201b0ea5e5531852825/thumbnails/thumbnail.jpg?time=&height=600',
};
window.JYNX_VIDEO = JYNX_VIDEO;

function VideoPlayer() {
  const [play, setPlay] = React.useState(false);
  if (play) {
    return (
      <div className="video16">
        <iframe
          src={JYNX_VIDEO.iframe}
          loading="lazy"
          title="Conheça a JYNX"
          allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
          allowFullScreen></iframe>
      </div>
    );
  }
  return (
    <div className="video16">
      <button className="video16__poster" onClick={() => setPlay(true)} aria-label="Tocar o vídeo Conheça a JYNX"
        style={{ backgroundImage: `url(${JYNX_VIDEO.thumb})` }}>
        <span className="video16__play"><Icon name="play" size={28} /></span>
        <span className="video16__label">Conheça a JYNX</span>
      </button>
    </div>
  );
}

function VideoConheca() {
  const base = (typeof window !== 'undefined' && window.JYNX_BASE ? window.JYNX_BASE : '') + 'assets/photos/';
  return (
    <section className="section conheca section--ink" id="conheca-jynx">
      <div className="conheca__bg" aria-hidden="true" style={{ backgroundImage: `url(${base}time-remo.png)` }}></div>
      <div className="wrap conheca__inner">
        <div className="conheca__copy" data-reveal>
          <div className="eyebrow">Conheça a JYNX</div>
          <h2>A extensão do seu<br />time TOTVS, em vídeo</h2>
          <p>Em poucos minutos, veja como a JYNX conecta soluções prontas, especialistas e plataforma para destravar o seu ambiente TOTVS.</p>
          <div className="conheca__trust">
            <span><b>+7 anos</b> no ecossistema TOTVS</span>
            <span className="conheca__dot"></span>
            <span><b>+200</b> processos automatizados</span>
          </div>
        </div>
        <div className="conheca__video" data-reveal style={{ '--reveal-delay': '120ms' }}>
          <VideoPlayer />
        </div>
      </div>
    </section>
  );
}

function PhotoStrip() {
  const base = (typeof window !== 'undefined' && window.JYNX_BASE ? window.JYNX_BASE : '') + 'assets/photos/';
  const ph = [
    ['studio-retrato.png', 'Retrato em estúdio de uma profissional da JYNX', 'tall'],
    ['escritorio-tablet.png', 'Especialista da JYNX usando um tablet no escritório', 'wide'],
    ['time-remo.png', 'Equipe remando em sincronia, uma metáfora de trabalho em equipe', 'wide'],
  ];
  return (
    <div className="photostrip" data-reveal>
      {ph.map(([f, alt, r]) => (
        <figure key={f} className={'photostrip__item photostrip__item--' + r}>
          <img src={base + f} alt={alt} loading="lazy" />
        </figure>
      ))}
    </div>
  );
}

function PhotoDivider({ img, alt, caption }) {
  const base = (typeof window !== 'undefined' && window.JYNX_BASE ? window.JYNX_BASE : '') + 'assets/photos/';
  return (
    <div className="photodivider" role="img" aria-label={alt}>
      <div className="photodivider__bg" style={{ backgroundImage: `url(${base}${img})` }}></div>
      {caption && <div className="wrap photodivider__cap"><JynxMark size={20} color="var(--accent)" /> <span>{caption}</span></div>}
    </div>
  );
}

Object.assign(window, { ClientLogos, VideoPlayer, VideoConheca, PhotoStrip, PhotoDivider, CLIENT_LOGOS });

/* ================= Floating WhatsApp button (site-wide) ================= */
(function () {
  if (typeof document === 'undefined') return;
  const msg = encodeURIComponent('Olá! Quero conhecer as soluções da JYNX.');
  const href = 'https://wa.me/5511912692409?text=' + msg;
  const glyph = '<svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>';
  const mount = () => {
    if (document.querySelector('.wa-fab')) return;
    const a = document.createElement('a');
    a.className = 'wa-fab';
    a.href = href;
    a.target = '_blank';
    a.rel = 'noopener';
    a.setAttribute('aria-label', 'Falar pelo WhatsApp');
    a.title = 'Falar pelo WhatsApp';
    a.innerHTML = glyph;
    document.body.appendChild(a);
  };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount);
  else mount();
})();

/* ================= Vercel Web Analytics (site-wide) =================
   Static-site equivalent of @vercel/analytics: loads the first-party
   insights script served by Vercel at /_vercel/insights/script.js.
   Requires "Web Analytics" enabled in the Vercel project (Analytics tab). */
(function () {
  if (typeof document === 'undefined' || window.__vaInjected) return;
  window.__vaInjected = true;
  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
  const s = document.createElement('script');
  s.defer = true;
  s.src = '/_vercel/insights/script.js';
  document.head.appendChild(s);
})();

/* ================= GA4 contact-point events (site-wide) =================
   A single delegated click listener fires a semantic GA4 event at each
   strategic contact / conversion point (WhatsApp, scheduling, sign-up, login,
   e-mail, phone), inferred from the link destination — no per-CTA markup
   changes, works on every page (including /protheus and /blog). */
(function () {
  if (typeof document === 'undefined' || window.__jynxEvents) return;
  window.__jynxEvents = true;

  function track(name, params) {
    if (typeof window.gtag === 'function') window.gtag('event', name, params || {});
  }

  function locationOf(a) {
    if (a.classList.contains('wa-fab') || a.closest('.wa-fab')) return 'floating_button';
    if (a.closest('.annbar')) return 'announcement_bar';
    if (a.closest('.hdr')) return 'header';
    if (a.closest('footer, .footer')) return 'footer';
    if (a.closest('.blog-article, .blog-list')) return 'blog';
    return 'page_body';
  }

  function classify(a) {
    const href = (a.getAttribute('href') || '').trim();
    const text = (a.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 100);
    const base = { link_location: locationOf(a), link_text: text, page_path: location.pathname };
    if (a.classList.contains('wa-fab') || /^https?:\/\/(wa\.me|api\.whatsapp\.com)/i.test(href))
      return { name: 'contact_whatsapp', params: base };
    if (/^https?:\/\/calendly\.com/i.test(href))
      return { name: 'schedule_meeting', params: base };
    if (/^mailto:/i.test(href))
      return { name: 'contact_email', params: base };
    if (/^tel:/i.test(href))
      return { name: 'contact_phone', params: base };
    if (/^https?:\/\/os\.jynx\.com\.br/i.test(href)) {
      if (/cadastr|criar conta|come[cç]/i.test(text)) return { name: 'sign_up_click', params: base };
      if (/entrar|login|acessar/i.test(text)) return { name: 'login_click', params: base };
      return { name: 'app_access_click', params: base };
    }
    return null;
  }

  document.addEventListener('click', function (e) {
    const t = e.target;
    const a = t && t.closest ? t.closest('a[href]') : null;
    if (!a) return;
    const ev = classify(a);
    if (ev) track(ev.name, ev.params);
  }, true);
})();