// Unicampo: peças comuns a todas as páginas (menu, capa interna, números,
// linhas de produto, chamada final, rodapé) e os elementos gráficos do manual
// de marca desenhados em SVG. Carregado antes do script de cada página.

// ── Elementos do manual (p. 21) ───────────────────────────────────────────────
function Chevron({ className }) {
  return (
    <svg className={className} viewBox="0 0 20 12" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" aria-hidden="true">
      <path d="M2 1.5c4 1.2 7 2.9 9 4.5-2 1.6-5 3.3-9 4.5" />
      <path d="M9 1.5c4 1.2 7 2.9 9 4.5-2 1.6-5 3.3-9 4.5" />
    </svg>
  );
}

function Seta({ className }) {
  return (
    <svg className={className} viewBox="0 0 30 14" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" aria-hidden="true">
      <path d="M2 2c4 1.4 7 3.3 9 5-2 1.7-5 3.6-9 5" />
      <path d="M10 2c4 1.4 7 3.3 9 5-2 1.7-5 3.6-9 5" />
      <path d="M18 2c4 1.4 7 3.3 9 5-2 1.7-5 3.6-9 5" />
    </svg>
  );
}

function IconeWhats({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.88-.79-1.48-1.76-1.66-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.07-.12-.27-.2-.57-.35zM12.05 21.5h-.01a9.4 9.4 0 0 1-4.8-1.31l-.34-.2-3.57.94.95-3.48-.22-.36a9.4 9.4 0 0 1-1.44-5.01c0-5.2 4.23-9.43 9.44-9.43a9.38 9.38 0 0 1 9.43 9.44c0 5.2-4.23 9.42-9.44 9.42zm8.03-17.46A11.27 11.27 0 0 0 12.05.71C5.8.71.71 5.8.71 12.05c0 2 .52 3.95 1.52 5.67L.62 23.6l6.02-1.58a11.32 11.32 0 0 0 5.41 1.38c6.25 0 11.34-5.09 11.34-11.34 0-3.03-1.18-5.88-3.31-8.02z" />
    </svg>
  );
}

function IconeMenu({ aberto }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" aria-hidden="true">
      {aberto ? <path d="M5 5l14 14M19 5L5 19" /> : <path d="M3 7h18M3 12h18M3 17h12" />}
    </svg>
  );
}

function IconeAbaixo({ className }) {
  return (
    <svg className={className} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
      <path d="M2 4l4 4 4-4" />
    </svg>
  );
}

// ── Botões ────────────────────────────────────────────────────────────────────
function BtnWhats({ children = 'Falar no WhatsApp', href = WA_GENERAL, variante = 'limao' }) {
  return (
    <a href={href} target="_blank" rel="noopener" className={`btn btn-${variante}`}>
      <IconeWhats /> {children}
    </a>
  );
}

// ── Menu ──────────────────────────────────────────────────────────────────────
const PAGINAS = [
  { href: '/', label: 'Início', key: 'home' },
  { href: '/produtos/', label: 'Produtos', key: 'produtos' },
  { href: '/comercial/', label: 'Loja', key: 'comercial' },
  { href: '/sobre/', label: 'Sobre', key: 'sobre' },
  { href: '/contato/', label: 'Contato', key: 'contato' },
];

// `clara`: o menu começa transparente sobre uma capa escura (texto branco).
function Nav({ atual, clara }) {
  const [rolou, setRolou] = React.useState(false);
  const [aberto, setAberto] = React.useState(false);
  React.useEffect(() => {
    const h = () => setRolou(window.scrollY > 40);
    h();
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  const solida = rolou || aberto;
  const logoBranca = clara && !solida;
  return (
    <>
      <nav className={`nav${solida ? ' solida' : ''}${clara ? ' clara' : ''}`}>
        <a href="/" className="logo" aria-label="Unicampo, página inicial">
          <img src="/uploads/logo-nav.png" alt="Unicampo Nutrição Animal & Sementes" style={{ filter: logoBranca ? 'brightness(0) invert(1)' : 'none' }} />
        </a>
        <div className="nav-links">
          {PAGINAS.map(p => (
            <a key={p.key} href={p.href} className={atual === p.key ? 'ativo' : ''}>{p.label}</a>
          ))}
          <BtnWhats variante="limao">WhatsApp</BtnWhats>
        </div>
        <button className="nav-burger" onClick={() => setAberto(a => !a)} aria-label={aberto ? 'Fechar menu' : 'Abrir menu'} aria-expanded={aberto}>
          <IconeMenu aberto={aberto} />
        </button>
      </nav>
      {aberto && (
        <div className="nav-mobile">
          {PAGINAS.map(p => (
            <a key={p.key} href={p.href} className={atual === p.key ? 'ativo' : ''}>{p.label}</a>
          ))}
          <BtnWhats>Falar no WhatsApp</BtnWhats>
        </div>
      )}
    </>
  );
}

// ── Capa das páginas internas ─────────────────────────────────────────────────
function CapaInterna({ titulo, trilha = [], children }) {
  return (
    <header className="capa-interna padrao-folhas on-dark">
      <div className="forma"></div>
      <div className="wrap" style={{ position: 'relative' }}>
        <nav className="trilha rotulo" aria-label="Você está em">
          <a href="/">Unicampo</a>
          {trilha.map(([href, label]) => (
            <React.Fragment key={label}>
              <Chevron />
              {href ? <a href={href}>{label}</a> : <span style={{ color: '#fff' }}>{label}</span>}
            </React.Fragment>
          ))}
        </nav>
        <h1 className="t-1" style={{ maxWidth: '14ch' }}>{titulo}</h1>
        {children && <p className="lead" style={{ marginTop: 24 }}>{children}</p>}
      </div>
    </header>
  );
}

// ── Faixa de números ──────────────────────────────────────────────────────────
const NUMEROS = [
  ['28', 'anos', 'acompanhando o produtor desde 1998'],
  ['48 mil', 'm²', 'de sede própria em Piracanjuba-GO'],
  ['10+', '', 'cultivares de gramíneas para pastagem'],
  ['100%', '', 'dos lotes analisados no laboratório próprio'],
];

function Numeros() {
  return (
    <section className="bg-escuro on-dark">
      <div className="wrap">
        <div className="numeros">
          {NUMEROS.map(([n, unidade, texto]) => (
            <div key={texto}>
              <div className="t-num" style={{ whiteSpace: 'nowrap' }}>{n}{unidade && <span style={{ fontSize: '.42em', marginLeft: 6 }}>{unidade}</span>}</div>
              <p>{texto}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Linhas de produto ─────────────────────────────────────────────────────────
function LinhasProduto() {
  return (
    <section className="linhas">
      <a href="/produtos/sementes/" className="linha escura padrao-folhas on-dark quarto-tr">
        <div className="rotulo" style={{ color: 'var(--bege)' }}>{PRODUCTS.length} cultivares</div>
        <h2 className="t-1" style={{ marginTop: 14 }}>Sementes</h2>
        <p className="lead" style={{ marginTop: 18 }}>Gramíneas forrageiras para formar e recuperar pastagens, com cultivares da EMBRAPA.</p>
        <ul className="lista-chevron">
          <li><Chevron /> Brachiaria: Piatã, Xaraés, Decumbens, Humidicola</li>
          <li><Chevron /> Panicum: Mombaça, Tanzânia, Massai</li>
          <li><Chevron /> Lotes com germinação e pureza testadas</li>
        </ul>
        <span className="link-seta">Ver catálogo de sementes <Seta /></span>
        <div className="foto"><img src="/uploads/sementes-duas-embalagens-recorte.webp" alt="Embalagens de Sementes Unicampo" loading="lazy" /></div>
      </a>
      <a href="/produtos/nutricao/" className="linha bege bg-bege">
        <div className="rotulo" style={{ color: 'var(--verde)' }}>{NUTRICAO.length} produtos</div>
        <h2 className="t-1" style={{ marginTop: 14 }}>Nutrição animal</h2>
        <p className="lead" style={{ marginTop: 18 }}>Rações, minerais, proteinados e grãos para bovinos, aves, suínos e peixes.</p>
        <ul className="lista-chevron">
          <li><Chevron /> Minerais e proteinados para cria, recria e engorda</li>
          <li><Chevron /> Rações para corte, leite, aves e suínos</li>
          <li><Chevron /> Milho em grão e moído, ingredientes</li>
        </ul>
        <span className="link-seta">Ver catálogo de nutrição <Seta /></span>
        <div className="foto"><img src="/uploads/racao-bovinos-recorte.webp" alt="Ração Unicampo para bovinos" loading="lazy" /></div>
      </a>
    </section>
  );
}

// ── Chamada final ─────────────────────────────────────────────────────────────
function Chamada({ titulo = 'Fale com quem entende de pastagem', texto = 'Nossa equipe indica a cultivar e o manejo certos para o seu solo e o seu rebanho. Atendemos todo o Brasil.' }) {
  return (
    <section className="chamada sec bg-bege padrao-sementes">
      <img className="simbolo" src="/uploads/simbolo-bege.png" alt="" aria-hidden="true" />
      <div className="wrap">
        <h2 className="t-1" style={{ maxWidth: '16ch' }}>{titulo}</h2>
        <p className="lead" style={{ marginTop: 22 }}>{texto}</p>
        <div className="acoes">
          <BtnWhats variante="escuro">Chamar no WhatsApp</BtnWhats>
          <a className="tel" href={`tel:+${WA_NUMBER}`}>(64) 99204-2662</a>
        </div>
      </div>
    </section>
  );
}

// ── Rodapé ────────────────────────────────────────────────────────────────────
function Rodape() {
  return (
    <footer className="rodape">
      <div className="wrap">
        <div className="rodape-grade">
          <div>
            <img src="/uploads/logo-footer.png" alt="Unicampo Nutrição Animal & Sementes" className="logo" />
            <p style={{ maxWidth: '30ch' }}>Sementes forrageiras e nutrição animal. Piracanjuba-GO, desde 1998.</p>
          </div>
          <div>
            <h4 className="rotulo">Produtos</h4>
            <a href="/produtos/sementes/">Sementes</a>
            <a href="/produtos/nutricao/">Nutrição animal</a>
          </div>
          <div>
            <h4 className="rotulo">Empresa</h4>
            <a href="/sobre/">Sobre</a>
            <a href="/comercial/">Loja</a>
            <a href="/contato/">Contato</a>
          </div>
          <div>
            <h4 className="rotulo">Indústria</h4>
            <p style={{ marginBottom: 18 }}>Rodovia GO-217, Km 30<br />Piracanjuba, GO</p>
            <a href={WA_GENERAL} target="_blank" rel="noopener" className="wa"><IconeWhats /> (64) 99204-2662</a>
          </div>
        </div>
        <div className="rodape-base">
          <span>© {new Date().getFullYear()} Unicampo Nutrição Animal & Sementes</span>
          <span>Piracanjuba, Goiás</span>
        </div>
      </div>
    </footer>
  );
}

// ── Página ────────────────────────────────────────────────────────────────────
function Pagina({ atual, navClara = true, chamada = true, children }) {
  return (
    <>
      <Nav atual={atual} clara={navClara} />
      <main>{children}</main>
      {chamada && (chamada === true ? <Chamada /> : chamada)}
      <Rodape />
      <a href={WA_GENERAL} target="_blank" rel="noopener" className="wa-float" aria-label="Falar no WhatsApp"><IconeWhats /></a>
    </>
  );
}

function montar(conteudo) {
  ReactDOM.createRoot(document.getElementById('root')).render(conteudo);
}