/* Cerrado Express — Site UI Kit · primitives (desktop) */

const CE = {
  blue: '#1E3A8A', blue700: '#18306F', blue800: '#142655', blue900: '#0F1C3E',
  blue50: '#EEF2FB', blue100: '#D8E0F5', blue200: '#B0C0E8',
  rust: '#C2410C', rust50: '#FCEFE8', rust600: '#A4360A', rust700: '#832A07',
  sun: '#FB923C', sun300: '#FDB066', sun100: '#FFE6CC', sun50: '#FFF5EB', sun800: '#8A3806',
  white: '#FFFFFF', n50: '#F6F7F9', n100: '#ECEEF3', n200: '#DCE0E8', n300: '#BFC6D4',
  n400: '#97A1B4', n500: '#6B7689', n600: '#4D5666', n700: '#353C49', n800: '#222730',
  n900: '#14171D', n950: '#0C0E12', success: '#1F8A5B',
  disp: "'Bahnschrift','Saira Condensed',sans-serif",
  body: "'Inter',system-ui,sans-serif",
  mono: "'JetBrains Mono',monospace",
};

const ICON_PATHS = {
  truck: <><path d="M10 17h4V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12h2"/><path d="M14 9h4l3 3v5h-2"/><path d="M10 17H8"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></>,
  package: <><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></>,
  zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
  clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
  pin: <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>,
  shield: <><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></>,
  chart: <><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></>,
  check: <path d="M20 6 9 17l-5-5"/>,
  arrow: <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
  headset: <><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M16 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2z"/><path d="M21 14a9 9 0 0 0-18 0"/></>,
  globe: <><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></>,
  search: <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>,
  route: <><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></>,
  building: <><rect width="16" height="20" x="4" y="2" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01"/></>,
  wallet: <><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/></>,
  phone: <><rect width="14" height="20" x="5" y="2" rx="2"/><path d="M12 18h.01"/></>,
  calendar: <><path d="M8 2v4M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></>,
  heart: <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.49 4.04 3 5.5l7 7Z"/>,
  star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
  trending: <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>,
  bolt: <><path d="M14.4 2.9 7.5 12h4.5l-1.4 9.1L18 12h-4.5z" fill="currentColor" stroke="none"/></>,
  gift: <><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5"/></>,
  userplus: <><path d="M2 21v-2a4 4 0 0 1 4-4h5a4 4 0 0 1 4 4v2"/><circle cx="8.5" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></>,
  lifebuoy: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><path d="m4.9 4.9 4.2 4.2M14.9 14.9l4.2 4.2M14.9 9.1l4.2-4.2M14.9 9.1l3.5-3.5M4.9 19.1l4.2-4.2"/></>,
  star_fill: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor" stroke="none"/>,
};

function Icon({ name, size = 24, color = 'currentColor', strokeWidth = 2, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round" style={style}>{ICON_PATHS[name] || null}</svg>
  );
}

/* Canais de contato do grupo — ponto único.
   Assim que o WhatsApp/e-mail forem preenchidos aqui, todos os botões
   de contato do site passam a apontar para eles automaticamente. */
var CE_CONTATO = {
  whatsapp: '',   // só dígitos com DDI, ex: '5562999999999'
  email: '',      // ex: 'contato@grupocerrado.com'
  telefone: '',   // ex: '+556230000000'
};

// Destino de um botão de contato. Cai para a seção #contato da própria
// página enquanto os canais não estiverem configurados.
function contatoHref(msg) {
  if (CE_CONTATO.whatsapp) {
    return 'https://wa.me/' + CE_CONTATO.whatsapp + (msg ? '?text=' + encodeURIComponent(msg) : '');
  }
  if (CE_CONTATO.email) {
    return 'mailto:' + CE_CONTATO.email + (msg ? '?subject=' + encodeURIComponent(msg) : '');
  }
  return '#contato';
}

function telHref() {
  return CE_CONTATO.telefone ? 'tel:' + CE_CONTATO.telefone : contatoHref();
}

function Button({ children, variant = 'primary', size = 'md', icon, onClick, href, target, rel, style = {} }) {
  const base = { fontFamily: CE.disp, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em',
    border: 'none', borderRadius: 999, cursor: 'pointer', display: 'inline-flex', alignItems: 'center',
    justifyContent: 'center', gap: 9, transition: 'all .18s cubic-bezier(.16,1,.3,1)', whiteSpace: 'nowrap' };
  const sizes = { sm: { padding: '10px 18px', fontSize: 14 }, md: { padding: '14px 26px', fontSize: 15 }, lg: { padding: '18px 34px', fontSize: 18 } };
  const variants = {
    primary: { background: CE.blue, color: '#fff', boxShadow: '0 10px 24px rgba(30,58,138,.25)' },
    accent: { background: CE.rust, color: '#fff' },
    sun: { background: CE.sun, color: '#3D1303' },
    ghost: { background: 'transparent', color: CE.blue, border: `1.5px solid ${CE.n300}` },
    light: { background: '#fff', color: CE.blue },
    onblue: { background: 'rgba(255,255,255,.12)', color: '#fff', border: '1.5px solid rgba(255,255,255,.3)' },
  };
  var css = { ...base, ...sizes[size], ...variants[variant], ...style };
  var inner = [children, icon ? <Icon key="i" name={icon} size={size === 'lg' ? 20 : 18} color={variants[variant].color} /> : null];

  // Com href vira link de verdade: abre em nova aba, copia endereço,
  // funciona com teclado e é lido como link por leitor de tela.
  if (href) {
    return (
      <a href={href} target={target} rel={rel || (target === '_blank' ? 'noopener noreferrer' : undefined)}
        onClick={onClick} style={{ ...css, textDecoration: 'none' }}>{inner}</a>
    );
  }
  return <button onClick={onClick} style={css}>{inner}</button>;
}

// Horizontal logo lockup — variant: express (default) | grupo | erp | lex
var LOGO_WORDS = {
  express:     ['Cerrado', 'Express'],
  grupo:       ['Grupo',   'Cerrado'],
  erp:         ['Cerrado', 'ERP'],
  lex:         ['Cerrado', 'Lex'],
  consultoria: ['Cerrado', 'Consultoria'],
};

function LogoLockup({ height = 34, mono = false, variant = 'express' }) {
  const base = (typeof window !== 'undefined' && window.ASSET_BASE != null) ? window.ASSET_BASE : '../../';
  var words = LOGO_WORDS[variant] || LOGO_WORDS.express;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img src={base + (mono ? 'assets/symbol-white.png' : 'assets/symbol-color.png')}
        alt="" style={{ height }} />
      <div style={{ lineHeight: .82 }}>
        <div style={{ fontFamily: CE.disp, fontWeight: 800, fontStyle: 'italic', textTransform: 'uppercase',
          fontSize: height * .62, letterSpacing: '-.01em', color: mono ? '#fff' : CE.blue }}>{words[0]}</div>
        <div style={{ fontFamily: CE.disp, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.34em',
          fontSize: height * .26, color: mono ? CE.sun : CE.rust, marginTop: 1 }}>{words[1]}</div>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════
   Divisões do Grupo Cerrado — fonte única de verdade.
   Usada pela barra institucional, pelos menus flutuantes e
   pelos cards da home do grupo.
   ═══════════════════════════════════════════════════════════ */
var CE_DIVISIONS = [
  {
    key: 'express', display: 'Express', full: 'Cerrado Express', tag: 'Logística e entregas',
    href: '/express', cor: '#1E3A8A', corLight: '#EEF2FB', icon: 'truck',
    desc: 'Entrega rápida, rastreio em tempo real e gestão logística completa para empresas. Tecnologia e frota própria a serviço do seu negócio.',
    cta: 'Acessar Express',
    menu: [
      { label: 'Visão geral',       href: '/express',      desc: 'A operação logística completa' },
      { label: 'Para Empresas',     href: '/empresas',     desc: 'Entregas para o seu negócio' },
      { label: 'Para Consumidores', href: '/consumidor',   desc: 'Rastreie sua encomenda' },
      { label: 'Seja Entregador',   href: '/entregadores', desc: 'Rode como parceiro' },
    ],
  },
  {
    key: 'consultoria', display: 'Consultoria', full: 'Cerrado Consultoria', tag: 'Gestão 4.0',
    href: '/consultoria', cor: '#0F5F6B', corLight: '#ECFAFB', icon: 'trending',
    desc: 'Consultoria em gestão empresarial com foco em Gestão 4.0: processos, indicadores e automação para empresas que precisam decidir com número em vez de intuição.',
    cta: 'Conhecer Consultoria',
    menu: [
      { label: 'Visão geral',     href: '/consultoria',             desc: 'Gestão 4.0 na prática' },
      { label: 'O que fazemos',   href: '/consultoria#pilares',     desc: 'Processos, dados, automação' },
      { label: 'Como funciona',   href: '/consultoria#metodo',      desc: 'As 4 etapas do trabalho' },
      { label: 'Diagnóstico',     href: '/consultoria#diagnostico', desc: 'Primeira conversa, sem custo' },
    ],
  },
  {
    key: 'energias', display: 'Energias', full: 'Cerrado Energias', tag: 'Energia solar',
    href: 'https://energias.grupocerrado.com/', external: true,
    cor: '#16A34A', corLight: '#F0FDF4', icon: 'zap',
    desc: 'Soluções completas em energia solar para residências, comércios e indústrias. Reduza sua conta de luz e invista em sustentabilidade.',
    cta: 'Acessar Energias',
  },
  {
    key: 'erp', display: 'ERP', full: 'Cerrado ERP', tag: 'Varejo e serviços',
    href: '/erp', cor: '#C2410C', corLight: '#FCEFE8', icon: 'chart',
    desc: 'Sistema ERP desenvolvido para o setor logístico e varejista. Controle financeiro, estoque, emissão de NF-e e relatórios em um só lugar.',
    cta: 'Conhecer ERP',
    menu: [
      { label: 'Visão geral', href: '/erp',         desc: 'O sistema de gestão' },
      { label: 'Módulos',     href: '/erp#modulos', desc: 'Financeiro, estoque, NF-e' },
      { label: 'Pedir demo',  href: '/erp#demo',    desc: 'Demonstração gratuita' },
    ],
  },
  {
    key: 'lex', display: 'Lex', full: 'Cerrado Lex', tag: 'Jurídico e compliance',
    href: '/lex', cor: '#222730', corLight: '#F6F7F9', icon: 'shield',
    desc: 'Plataforma de gestão jurídica e compliance para empresas. Contratos, processos, prazos e documentos sempre sob controle.',
    cta: 'Conhecer Lex',
    menu: [
      { label: 'Visão geral',     href: '/lex',          desc: 'A plataforma jurídica' },
      { label: 'Funcionalidades', href: '/lex#recursos', desc: 'Contratos, prazos, documentos' },
      { label: 'Começar grátis',  href: '/lex#comecar',  desc: '14 dias, sem cartão' },
    ],
  },
];

/* Regras de hover que não dá pra fazer com style inline */
function NavStyles() {
  return <style dangerouslySetInnerHTML={{ __html:
    '.ce-mi{transition:background .14s}' +
    '.ce-mi:hover{background:#F6F7F9}' +
    '.ce-mi:hover .ce-mi-l{color:#C2410C}' +
    '.ce-gb-a:hover .ce-gb-t{color:#fff}' +
    '.ce-gb-d:hover{color:rgba(255,255,255,.95)}' +
    '.ce-nl:hover{color:#C2410C}'
  }} />;
}

/* ── Barra institucional: onde você está dentro do grupo ── */
function GroupBar({ active }) {
  var cur = (active || '').toLowerCase();
  var onHome = !cur;
  return (
    <div style={{ background: CE.blue900 }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <a href="/" className="ce-gb-a"
          title={onHome ? 'Grupo Cerrado' : 'Voltar para o site do Grupo Cerrado'}
          style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', padding: '11px 0' }}>
          <span style={{ color: CE.sun, fontSize: 13, lineHeight: 1 }}>{onHome ? '●' : '←'}</span>
          <span className="ce-gb-t" style={{ fontFamily: CE.disp, fontWeight: 700, textTransform: 'uppercase',
            letterSpacing: '.16em', fontSize: 11.5, transition: 'color .14s',
            color: onHome ? '#fff' : 'rgba(255,255,255,.7)' }}>Grupo Cerrado</span>
        </a>
        <nav className="ce-gb-nav" style={{ display: 'flex', alignItems: 'center' }}>
          {CE_DIVISIONS.map(function(d) {
            var on = d.key === cur;
            return (
              <a key={d.key} href={d.href} className="ce-gb-d"
                target={d.external ? '_blank' : undefined}
                rel={d.external ? 'noopener noreferrer' : undefined}
                style={{ fontFamily: CE.body, fontSize: 12.5, fontWeight: on ? 700 : 500,
                  color: on ? CE.sun : 'rgba(255,255,255,.6)', textDecoration: 'none',
                  padding: '12px 13px', display: 'flex', alignItems: 'center', gap: 5,
                  transition: 'color .14s',
                  boxShadow: on ? 'inset 0 -2px 0 ' + CE.sun : 'none' }}>
                {d.display}
                {d.external && <span style={{ fontSize: 9.5, opacity: .65 }}>{'↗'}</span>}
              </a>
            );
          })}
        </nav>
      </div>
    </div>
  );
}

/* ── Item de nav com menu flutuante no hover ── */
function DivisionNavItem({ div, active }) {
  var st = React.useState(false), open = st[0], setOpen = st[1];
  var on = div.key === active;
  var hasMenu = !!(div.menu && div.menu.length);
  return (
    <div style={{ position: 'relative' }}
      onMouseEnter={function() { setOpen(true); }}
      onMouseLeave={function() { setOpen(false); }}>
      <a href={div.href} className="ce-nl"
        target={div.external ? '_blank' : undefined}
        rel={div.external ? 'noopener noreferrer' : undefined}
        style={{ display: 'flex', alignItems: 'center', gap: 6,
          fontFamily: CE.body, fontSize: 15, fontWeight: on ? 700 : 500,
          color: on ? CE.rust : CE.n700, textDecoration: 'none',
          padding: '26px 15px', transition: 'color .14s',
          boxShadow: (on || open) ? 'inset 0 -3px 0 ' + div.cor : 'none' }}>
        {div.display}
        {div.external
          ? <span style={{ fontSize: 10, opacity: .5 }}>{'↗'}</span>
          : hasMenu && <span style={{ fontSize: 8, opacity: .45, display: 'inline-block',
              transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .18s' }}>{'▼'}</span>}
      </a>

      {hasMenu && open && (
        <div style={{ position: 'absolute', top: '100%', left: 0, minWidth: 296, zIndex: 80,
          background: '#fff', border: '1px solid ' + CE.n200, borderRadius: 14,
          boxShadow: '0 20px 46px rgba(15,28,62,.17)', padding: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px 13px',
            borderBottom: '1px solid ' + CE.n100, marginBottom: 6 }}>
            <div style={{ width: 34, height: 34, borderRadius: 10, background: div.cor, flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={div.icon} size={18} color="#fff" />
            </div>
            <div>
              <div style={{ fontFamily: CE.disp, fontWeight: 800, textTransform: 'uppercase',
                fontSize: 16, color: div.cor, lineHeight: 1.05 }}>{div.full}</div>
              <div style={{ fontFamily: CE.body, fontSize: 11.5, color: CE.n500, marginTop: 2 }}>{div.tag}</div>
            </div>
          </div>
          {div.menu.map(function(m) {
            return (
              <a key={m.href} href={m.href} className="ce-mi"
                style={{ display: 'block', padding: '9px 12px', borderRadius: 9, textDecoration: 'none' }}>
                <div className="ce-mi-l" style={{ fontFamily: CE.body, fontSize: 14.5, fontWeight: 600,
                  color: CE.n800, transition: 'color .14s' }}>{m.label}</div>
                <div style={{ fontFamily: CE.body, fontSize: 12.5, color: CE.n500, marginTop: 1 }}>{m.desc}</div>
              </a>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ── Menu mobile: hamburguer + painel deslizante ──
   A nav horizontal com 5 divisoes nao cabe em 390px. Abaixo de 860px
   o CSS esconde a nav de desktop e mostra este. ── */
function BotaoMenu({ aberto, onToggle }) {
  return (
    <button className="ce-burger" onClick={onToggle}
      aria-label={aberto ? 'Fechar menu' : 'Abrir menu'} aria-expanded={aberto}
      style={{ background: 'transparent', border: '1px solid ' + CE.n200, borderRadius: 10,
        width: 44, height: 40, cursor: 'pointer', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column', gap: 4, padding: 0 }}>
      {[0, 1, 2].map(function(i) {
        var t = aberto && i === 0 ? 'translateY(6px) rotate(45deg)'
              : aberto && i === 2 ? 'translateY(-6px) rotate(-45deg)' : 'none';
        return <span key={i} style={{ display: 'block', width: 19, height: 2, borderRadius: 2,
          background: CE.n800, transform: t, opacity: aberto && i === 1 ? 0 : 1,
          transition: 'transform .2s, opacity .2s' }} />;
      })}
    </button>
  );
}

function PainelMenu({ aberto, itens, ativo, contato }) {
  if (!aberto) return null;
  return (
    <nav className="ce-nav-mob" style={{ borderTop: '1px solid ' + CE.n100,
      background: '#fff', padding: '10px 18px 20px', maxHeight: '75vh', overflowY: 'auto' }}>
      {itens.map(function(it) {
        var on = it.key === ativo;
        return (
          <div key={it.key}>
            <a href={it.href}
              target={it.external ? '_blank' : undefined}
              rel={it.external ? 'noopener noreferrer' : undefined}
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '13px 12px', borderRadius: 10, textDecoration: 'none',
                fontFamily: CE.disp, fontWeight: 700, textTransform: 'uppercase',
                fontSize: 17, letterSpacing: '.02em',
                color: on ? CE.rust : CE.n800,
                background: on ? CE.rust50 : 'transparent' }}>
              {it.display}
              {it.external && <span style={{ fontSize: 12, opacity: .5 }}>{'\u2197'}</span>}
            </a>
            {it.menu && it.menu.map(function(m) {
              return (
                <a key={m.href} href={m.href}
                  style={{ display: 'block', padding: '9px 12px 9px 26px', textDecoration: 'none',
                    fontFamily: CE.body, fontSize: 14.5, color: CE.n600 }}>{m.label}</a>
              );
            })}
          </div>
        );
      })}
      <a href={contato} style={{ display: 'block', marginTop: 14, padding: '15px 0',
        borderRadius: 999, background: CE.rust, color: '#fff', textAlign: 'center',
        textDecoration: 'none', fontFamily: CE.disp, fontWeight: 700,
        textTransform: 'uppercase', letterSpacing: '.04em', fontSize: 15 }}>Fale Conosco</a>
    </nav>
  );
}

/* ── Nav das páginas do grupo (home, ERP, Lex) ── */
function GrupoNav({ active }) {
  var cur = (active || '').toLowerCase();
  var isDiv = cur === 'erp' || cur === 'lex';
  var st = React.useState(false), aberto = st[0], setAberto = st[1];
  var contato = contatoHref('Olá! Vim pelo site do Grupo Cerrado.');
  return (
    <div>
      <NavStyles />
      <GroupBar active={cur} />
      <header style={{ position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(255,255,255,.97)', backdropFilter: 'blur(14px)',
        borderBottom: '1px solid ' + CE.n100, boxShadow: '0 1px 3px rgba(15,28,62,.06)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 40px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
          <a href={isDiv ? '/' + cur : '/'} style={{ textDecoration: 'none', flexShrink: 0 }}>
            <LogoLockup height={34} variant={isDiv ? cur : 'grupo'} />
          </a>
          <nav className="ce-nav-desk" style={{ display: 'flex', alignItems: 'stretch' }}>
            {CE_DIVISIONS.map(function(d) {
              return <DivisionNavItem key={d.key} div={d} active={cur} />;
            })}
          </nav>
          <div className="ce-cta-desk">
            <Button variant="accent" size="sm" href={contato}>Fale Conosco</Button>
          </div>
          <BotaoMenu aberto={aberto} onToggle={function() { setAberto(!aberto); }} />
        </div>
        <PainelMenu aberto={aberto} itens={CE_DIVISIONS} ativo={cur} contato={contato} />
      </header>
    </div>
  );
}

/* ── Nav das páginas da Cerrado Express ── */
var EXPRESS_NAV = [
  { label: 'express',      display: 'Express',      href: '/express' },
  { label: 'empresas',     display: 'Empresas',      href: '/empresas' },
  { label: 'consumidor',   display: 'Consumidor',    href: '/consumidor' },
  { label: 'entregadores', display: 'Entregadores',  href: '/entregadores' },
];

function SharedNav({ active }) {
  var cur = (active || '').toLowerCase();
  var st = React.useState(false), aberto = st[0], setAberto = st[1];
  var contato = contatoHref('Olá! Vim pelo site da Cerrado Express.');
  return (
    <div>
      <NavStyles />
      <GroupBar active="express" />
      <header style={{ position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(255,255,255,.97)', backdropFilter: 'blur(14px)',
        borderBottom: '1px solid ' + CE.n100, boxShadow: '0 1px 3px rgba(15,28,62,.06)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 40px', height: 72,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
          <a href="/express" style={{ textDecoration: 'none', flexShrink: 0 }}>
            <LogoLockup height={34} variant="express" />
          </a>
          <nav className="ce-nav-desk" style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            {EXPRESS_NAV.map(function(link) {
              var on = link.label === cur;
              return (
                <a key={link.label} href={link.href} className={on ? '' : 'ce-nl'} style={{
                  fontFamily: CE.body, fontSize: 15,
                  fontWeight: on ? 700 : 500,
                  color: on ? CE.rust : CE.n700,
                  textDecoration: 'none', padding: '6px 16px', borderRadius: 8,
                  transition: 'color .14s',
                  background: on ? CE.rust50 : 'transparent',
                }}>{link.display}</a>
              );
            })}
          </nav>
          <div className="ce-cta-desk">
            <Button variant="accent" size="sm" href={contato}>Fale Conosco</Button>
          </div>
          <BotaoMenu aberto={aberto} onToggle={function() { setAberto(!aberto); }} />
        </div>
        <PainelMenu aberto={aberto} ativo={cur} contato={contato}
          itens={EXPRESS_NAV.map(function(l) { return { key: l.label, display: l.display, href: l.href }; })} />
      </header>
    </div>
  );
}


function Eyebrow({ children, light = false }) {
  return <div style={{ fontFamily: CE.disp, fontWeight: 700, fontStyle: 'italic', textTransform: 'uppercase',
    letterSpacing: '.1em', fontSize: 14, color: light ? CE.sun : CE.rust }}>{children}</div>;
}

Object.assign(window, { CE, Icon, Button, LogoLockup, Eyebrow, CE_CONTATO, contatoHref, telHref,
  SharedNav, GrupoNav, GroupBar, DivisionNavItem, NavStyles,
  EXPRESS_NAV, CE_DIVISIONS });

/* ═══════════════════════════════════════════════════════════
   Mapa de cobertura — onde o grupo opera de verdade.
   Depende de mapa-cobertura.js (window.BR_MAPA / CE_OPERACOES).
   ═══════════════════════════════════════════════════════════ */
function MapaCobertura({ titulo, subtitulo, sobre }) {
  var st = React.useState(null), ativo = st[0], setAtivo = st[1];
  var mapa = window.BR_MAPA, ops = window.CE_OPERACOES || [];
  if (!mapa) return null;

  var ufAtivas = window.CE_UF_ATIVAS || [];
  var nomes = window.CE_UF_NOMES || {};
  var porUf = {};
  ops.forEach(function(o) { porUf[o.uf] = (porUf[o.uf] || 0) + 1; });
  var ufOrdenadas = ufAtivas.slice().sort(function(a, b) { return porUf[b] - porUf[a]; });

  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: CE.n950 }}>
      <style dangerouslySetInnerHTML={{ __html:
        '@keyframes cePulso{0%{r:3;opacity:.85}70%{r:13;opacity:0}100%{r:13;opacity:0}}' +
        // sem pointer-events o anel em expansao rouba o hover do pin
        '.ce-pulso{animation:cePulso 2.8s ease-out infinite;pointer-events:none}' +
        '.ce-pin{cursor:pointer;transition:r .15s}' +
        '.ce-pin:hover{r:6}' +
        '@media (prefers-reduced-motion:reduce){.ce-pulso{animation:none;opacity:0}}'
      }} />
      <div style={{ position: 'absolute', left: '32%', top: '18%', width: 520, height: 520, borderRadius: '50%',
        background: 'radial-gradient(circle, ' + CE.blue + ' 0%, transparent 62%)', opacity: .5 }} />

      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto', padding: '92px 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow light>{subtitulo || 'Onde estamos'}</Eyebrow>
          <h2 style={{ fontFamily: CE.disp, fontWeight: 800, textTransform: 'uppercase', fontSize: 46,
            color: '#fff', margin: '12px 0 0', letterSpacing: '-.01em' }}>
            {titulo || 'Cobertura nacional'}
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 48, alignItems: 'center' }}>
          {/* ── mapa ── */}
          <div style={{ position: 'relative' }}>
            <svg viewBox={mapa.viewBox} style={{ width: '100%', height: 'auto', display: 'block', overflow: 'visible' }}>
              {mapa.estados.map(function(e) {
                var on = ufAtivas.indexOf(e.id) >= 0;
                var real = ativo && ativo.uf === e.id;
                return (
                  <path key={e.id} d={e.d}
                    fill={real ? CE.blue : on ? 'rgba(30,58,138,.55)' : 'rgba(255,255,255,.045)'}
                    stroke={on ? 'rgba(148,178,255,.5)' : 'rgba(255,255,255,.09)'}
                    strokeWidth={on ? .7 : .5}
                    style={{ transition: 'fill .2s' }} />
                );
              })}
              {ops.map(function(o, i) {
                var real = ativo && ativo.n === o.n;
                return (
                  <g key={o.n}>
                    <circle className="ce-pulso" cx={o.x} cy={o.y} r="3" fill={CE.sun}
                      style={{ animationDelay: (i * 0.1).toFixed(1) + 's' }} />
                    <circle className="ce-pin" cx={o.x} cy={o.y} r={real ? 6 : 3.6}
                      fill={CE.sun} stroke={CE.n950} strokeWidth="1.1"
                      onMouseEnter={function() { setAtivo(o); }}
                      onMouseLeave={function() { setAtivo(null); }}
                      onClick={function() { setAtivo(o); }}>
                      <title>{o.n} — {nomes[o.uf]}</title>
                    </circle>
                  </g>
                );
              })}
            </svg>
            {ativo && (
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: -6, textAlign: 'center',
                fontFamily: CE.disp, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.06em',
                fontSize: 15, color: CE.sun }}>
                {ativo.n} <span style={{ color: CE.n500 }}>· {nomes[ativo.uf]}</span>
              </div>
            )}
          </div>

          {/* ── números e lista ── */}
          <div>
            <div style={{ display: 'flex', gap: 36, marginBottom: 30 }}>
              {[[ops.length, 'operações'], [ufAtivas.length, 'estados']].map(function(s) {
                return (
                  <div key={s[1]}>
                    <div style={{ fontFamily: CE.disp, fontWeight: 800, fontStyle: 'italic', fontSize: 58,
                      color: CE.sun, lineHeight: .9 }}>{s[0]}</div>
                    <div style={{ fontFamily: CE.body, fontSize: 14.5, color: CE.n400, marginTop: 6 }}>{s[1]}</div>
                  </div>
                );
              })}
            </div>
            <p style={{ fontFamily: CE.body, fontSize: 16.5, lineHeight: 1.65, color: CE.n300, margin: '0 0 28px' }}>
              {sobre || 'Operação própria no Centro-Oeste, Sudeste e Nordeste. Toque em um ponto para ver a cidade.'}
            </p>
            <div className="ce-mapa-lista" style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              {ufOrdenadas.map(function(uf) {
                var on = ativo && ativo.uf === uf;
                return (
                  <div key={uf} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '11px 14px', borderRadius: 9,
                    background: on ? 'rgba(251,146,60,.12)' : 'transparent',
                    borderBottom: '1px solid ' + CE.n800, transition: 'background .18s' }}>
                    <span style={{ fontFamily: CE.body, fontSize: 15, color: on ? CE.sun : CE.n200 }}>{nomes[uf]}</span>
                    <span style={{ fontFamily: CE.disp, fontWeight: 800, fontSize: 17,
                      color: on ? CE.sun : CE.n400 }}>{porUf[uf]}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MapaCobertura, BotaoMenu, PainelMenu });