/* Variation B — components: Nav, Footer, WhatsApp, icons, page header */

const VbIcon = {
  arrow: (p) => (
    <svg width={p?.size||18} height={p?.size||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
    </svg>
  ),
  arrowUR: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>
    </svg>
  ),
  plus: () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  ),
  check: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  ),
  whatsapp: () => (
    <svg width="18" height="18" viewBox="0 0 32 32" fill="currentColor">
      <path d="M16 .5C7.4.5.5 7.4.5 16c0 2.8.8 5.6 2.2 8L0 32l8.4-2.2A15.4 15.4 0 0 0 16 31.5 15.5 15.5 0 0 0 16 .5zm0 28.3c-2.5 0-4.9-.7-7-2l-.5-.3-5 1.3 1.3-4.9-.3-.5A12.8 12.8 0 1 1 16 28.8zm7.2-9.6c-.4-.2-2.3-1.1-2.7-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.2 1.5-.2.3-.4.3-.8.1-.4-.2-1.6-.6-3.1-1.9-1.1-1-1.9-2.3-2.2-2.7-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.7l.3-.5c.1-.2.1-.4 0-.6 0-.2-.9-2.2-1.2-3-.3-.8-.6-.6-.9-.7H10c-.2 0-.6.1-.9.4-.3.4-1.2 1.2-1.2 2.9 0 1.7 1.2 3.4 1.4 3.6.2.3 2.5 3.8 6 5.3.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2.3-1 2.6-1.9.3-1 .3-1.7.2-1.9 0-.2-.3-.3-.6-.5z"/>
    </svg>
  ),
};

function VbNav({ current, go }) {
  const links = [
    { id: 'home', label: 'Início' },
    { id: 'servicos', label: 'Serviços' },
    { id: 'sobre', label: 'Sobre' },
    { id: 'contato', label: 'Contato' },
  ];
  return (
    <nav className="vb-nav">
      <div className="vb-wrap vb-nav-inner">
        <a className="vb-logo" href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <img src="assets/logo-light-bg.png" alt="AS Marketing Digital"/>
        </a>
        <div className="vb-nav-mid">
          {links.map(l => (
            <a key={l.id} href="#" className={current === l.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); go(l.id); }}>{l.label}</a>
          ))}
        </div>
        <div className="vb-nav-right">
          <a href={VbWa(VbWaMsgs.diagnostico)} target="_blank" rel="noopener" className="vb-nav-cta">
            Diagnóstico grátis <VbIcon.arrow size={14}/>
          </a>
        </div>
      </div>
    </nav>
  );
}

function VbFooter({ go }) {
  return (
    <footer className="vb-footer">
      <div className="vb-wrap">
        <div className="vb-footer-top">
          <div>
            <img src="assets/logo-dark-bg.png" alt="AS" style={{ height: 44 }}/>
            <p className="vb-footer-tagline">Marketing como <em>parceria estratégica</em>, não como entrega.</p>
          </div>
          <div>
            <h5>Navegação</h5>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>Início</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('servicos'); }}>Serviços</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('sobre'); }}>Sobre</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('contato'); }}>Contato</a></li>
            </ul>
          </div>
          <div>
            <h5>Serviços</h5>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('servicos'); }}>Projeto personalizado</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('servicos'); }}>Mentoria individual</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); go('servicos'); }}>Consultoria individual</a></li>
            </ul>
          </div>
          <div>
            <h5>Contato</h5>
            <ul>
              <li><a href={'mailto:' + VbConfig.EMAIL}>{VbConfig.EMAIL}</a></li>
              <li><a href={VbWa()} target="_blank" rel="noopener">{VbConfig.WA_DISPLAY}</a></li>
              <li><a href={VbConfig.INSTAGRAM} target="_blank" rel="noopener">Instagram {VbConfig.INSTAGRAM_HANDLE}</a></li>
              <li><a href={VbConfig.YOUTUBE} target="_blank" rel="noopener">YouTube {VbConfig.YOUTUBE_HANDLE}</a></li>
            </ul>
          </div>
        </div>
        <div className="vb-footer-bot">
          <span>© 2026 AS Marketing Digital · CNPJ 26.824.794/0001-00</span>
          <span>Política de privacidade · Termos de uso</span>
        </div>
      </div>
    </footer>
  );
}

function VbWhatsapp() {
  return (
    <a className="vb-wpp" href={VbWa()} target="_blank" rel="noopener">
      <span className="vb-wpp-dot"><VbIcon.whatsapp/></span>
      <span className="vb-wpp-label">WhatsApp</span>
    </a>
  );
}

function VbPageHeader({ section, eyebrow, title, lede }) {
  return (
    <header style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="vb-wrap">
        <div className="vb-hero-meta">
          <div className="vb-eyebrow">{eyebrow}</div>
          <div className="vb-meta-num">{section}</div>
        </div>
        <h1 className="vb-h1" style={{ fontSize: 'clamp(56px, 8vw, 116px)' }}
            dangerouslySetInnerHTML={{__html: title}}/>
        {lede && (
          <p style={{
            fontSize: 19, lineHeight: 1.6, color: 'rgba(0,0,0,0.65)',
            maxWidth: '54ch', marginTop: 40,
          }}>{lede}</p>
        )}
      </div>
    </header>
  );
}

Object.assign(window, { VbNav, VbFooter, VbWhatsapp, VbPageHeader, VbIcon });