const WHATSAPP_NUMBER = "5521974522747";
const WHATSAPP_DISPLAY = "(21) 97452-2747";
const WHATSAPP_MSG = "Ol%C3%A1%21%20Vim%20pelo%20site%20e%20gostaria%20de%20solicitar%20um%20or%C3%A7amento.";
const waLink = (extra = "") => `https://wa.me/${WHATSAPP_NUMBER}?text=${extra || WHATSAPP_MSG}`;

const navStyles = {
  wrap: {
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(255,255,255,.92)',
    backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
    borderBottom: '1px solid var(--silver-100)',
  },
  inner: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '12px 0', gap: 12,
  },
  brand: { display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 },
  logoImg: { width: 40, height: 40, objectFit: 'contain', flexShrink: 0 },
  brandName: {
    fontFamily: 'Archivo, sans-serif', fontWeight: 800, fontSize: 'clamp(17px, 4.5vw, 20px)',
    color: 'var(--navy-800)', letterSpacing: '-0.01em', lineHeight: 1,
  },
  brandSub: { fontSize: 10.5, color: 'var(--silver-500)', fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', marginTop: 3 },
  link: { fontSize: 15, fontWeight: 500, color: 'var(--silver-700)', cursor: 'pointer' },
  cta: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    background: 'var(--whatsapp)', color: 'white',
    padding: '10px 14px', borderRadius: 999, fontWeight: 700, fontSize: 14,
    boxShadow: '0 6px 16px rgba(37,211,102,.35)',
    transition: 'transform .15s ease, box-shadow .15s ease',
    minHeight: 40,
  },
};

function Nav() {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const links = [
    { label: 'Serviços', id: 'servicos' },
    { label: 'Como funciona', id: 'como' },
    { label: 'Diferenciais', id: 'diferenciais' },
    { label: 'Depoimentos', id: 'depoimentos' },
    { label: 'FAQ', id: 'faq' },
    { label: 'Contato', id: 'contato' },
  ];
  const go = (id) => {
    setMobileOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' });
  };
  return (
    <header style={navStyles.wrap}>
      <div className="container">
        <div style={navStyles.inner}>
          <div style={navStyles.brand}>
            <img src="assets/pitertech-logo-assistencia-tecnica-marica-rj.webp" alt="PiterTech - assistência técnica em Maricá-RJ" style={navStyles.logoImg} />
            <div style={{ minWidth: 0 }}>
              <div style={navStyles.brandName}>PiterTech</div>
              <div style={navStyles.brandSub} className="nav-sub">Assistência em TI</div>
            </div>
          </div>
          <nav className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
            {links.map(l => (
              <a key={l.id} onClick={() => go(l.id)} style={navStyles.link} className="nav-link-item">{l.label}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <a href={waLink()} target="_blank" rel="noopener" style={navStyles.cta} className="nav-cta">
              <IconWhatsApp size={18} color="white" />
              <span className="nav-cta-label">WhatsApp</span>
            </a>
            <button className="nav-menu-btn" onClick={() => setMobileOpen(v => !v)} aria-label="Menu">
              {mobileOpen ? <IconClose size={24} color="var(--navy-700)"/> : <IconMenu size={24} color="var(--navy-700)"/>}
            </button>
          </div>
        </div>
        {mobileOpen && (
          <div style={{ padding: '8px 0 14px', borderTop: '1px solid var(--silver-100)', animation: 'navDrop .2s ease' }}>
            {links.map(l => (
              <a key={l.id} onClick={() => go(l.id)} style={{ display: 'block', padding: '14px 4px', color: 'var(--navy-800)', fontWeight: 600, borderBottom: '1px solid var(--silver-100)' }}>{l.label}</a>
            ))}
          </div>
        )}
      </div>
      <style>{`
        .nav-link-item:hover { color: var(--navy-700); }
        .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(37,211,102,.45); }
        .nav-cta:active { transform: translateY(0); }
        .nav-menu-btn { display: none; background: var(--bg); border-radius: 8px; width: 40px; height: 40px; align-items: center; justify-content: center; }
        @keyframes navDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 1024px) {
          .nav-links { display: none !important; }
          .nav-sub { display: none; }
          .nav-menu-btn { display: inline-flex !important; }
        }
        @media (max-width: 560px) {
          .nav-cta-label { display: none; }
          .nav-cta { padding: 10px 11px; }
        }
      `}</style>
    </header>
  );
}

Object.assign(window, { Nav, WHATSAPP_NUMBER, WHATSAPP_DISPLAY, waLink });