// Nav compartida para subpáginas (Blog, Privacidad, Nosotros)
function PageNav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const { isMobile, isTablet } = useBreakpoint();

  const WA_URL = "https://wa.me/528180213305?text=Hola%2C%20me%20interesa%20conocer%20m%C3%A1s%20sobre%20AccessToGo%20para%20mi%20fraccionamiento.%20%C2%BFMe%20pueden%20dar%20m%C3%A1s%20informaci%C3%B3n%3F";

  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);

  // Links a secciones del home + páginas externas
  const homeLinks = [
    ['/#como',       '¿Cómo funciona?'],
    ['/#beneficios', 'Beneficios'],
    ['/#enfoque',    'Para quién es'],
    ['/#faq',        'Preguntas'],
  ];

  const px = isMobile ? '20px' : isTablet ? '32px' : '48px';

  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled || menuOpen ? 'rgba(255,255,255,0.96)' : '#fff',
      backdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${TOKENS.rule}`,
      transition: 'background 0.2s ease',
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: `${isMobile ? 16 : 18}px ${px}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: TOKENS.ink }}>
          <div style={{ width: 34, height: 34, borderRadius: 8, background: TOKENS.ink, display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, fontSize: 15 }}>A</div>
          <div style={{ fontWeight: 600, fontSize: 16, letterSpacing: '-0.01em' }}>AccessToGo</div>
        </a>

        {/* Links desktop */}
        {!isMobile && (
          <div style={{ display: 'flex', gap: isTablet ? 20 : 28, fontSize: 14, color: TOKENS.inkSoft, alignItems: 'center' }}>
            {homeLinks.map(([href, label]) => (
              <a key={href} href={href} style={{ color: 'inherit', textDecoration: 'none' }}
                onMouseEnter={(e) => e.currentTarget.style.color = TOKENS.ink}
                onMouseLeave={(e) => e.currentTarget.style.color = TOKENS.inkSoft}
              >{label}</a>
            ))}
            <a href="Nosotros.html" style={{ color: 'inherit', textDecoration: 'none' }}
              onMouseEnter={(e) => e.currentTarget.style.color = TOKENS.ink}
              onMouseLeave={(e) => e.currentTarget.style.color = TOKENS.inkSoft}
            >Nosotros</a>
            <a href="Blog.html" style={{ color: TOKENS.accent, fontWeight: 600, textDecoration: 'none', letterSpacing: '-0.01em' }}
              onMouseEnter={(e) => e.currentTarget.style.opacity = '0.75'}
              onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
            >Blog</a>
          </div>
        )}

        {/* CTA + hamburger */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {!isMobile && (
            <a href={WA_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
              <Button kind="whatsapp" icon={<WhatsAppGlyph size={15} />}>Contáctanos</Button>
            </a>
          )}
          {isMobile && (
            <button onClick={() => setMenuOpen(!menuOpen)} style={{
              background: 'transparent', border: `1px solid ${TOKENS.rule}`, borderRadius: 8, padding: '8px 10px', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', gap: 4,
            }}>
              <span style={{ width: 20, height: 2, background: TOKENS.ink, borderRadius: 2, display: 'block', transition: 'all 0.2s', transform: menuOpen ? 'rotate(45deg) translate(4px, 4px)' : 'none' }}></span>
              <span style={{ width: 20, height: 2, background: TOKENS.ink, borderRadius: 2, display: 'block', opacity: menuOpen ? 0 : 1, transition: 'opacity 0.2s' }}></span>
              <span style={{ width: 20, height: 2, background: TOKENS.ink, borderRadius: 2, display: 'block', transition: 'all 0.2s', transform: menuOpen ? 'rotate(-45deg) translate(4px, -4px)' : 'none' }}></span>
            </button>
          )}
        </div>
      </div>

      {/* Menú móvil */}
      {isMobile && (
        <div style={{ maxHeight: menuOpen ? 500 : 0, overflow: 'hidden', transition: 'max-height 0.3s ease', borderTop: menuOpen ? `1px solid ${TOKENS.rule}` : 'none' }}>
          <div style={{ padding: '12px 20px 24px', display: 'flex', flexDirection: 'column' }}>
            {homeLinks.map(([href, label]) => (
              <a key={href} href={href}
                style={{ color: TOKENS.inkSoft, textDecoration: 'none', fontSize: 17, padding: '13px 0', borderBottom: `1px solid ${TOKENS.ruleSoft}`, display: 'block' }}
              >{label}</a>
            ))}
            <a href="Nosotros.html" style={{ color: TOKENS.inkSoft, textDecoration: 'none', fontSize: 17, padding: '13px 0', borderBottom: `1px solid ${TOKENS.ruleSoft}`, display: 'block' }}>Nosotros</a>
            <a href="Blog.html" style={{ color: TOKENS.accent, fontWeight: 600, textDecoration: 'none', fontSize: 17, padding: '13px 0', borderBottom: `1px solid ${TOKENS.ruleSoft}`, display: 'block' }}>Blog</a>
            <div style={{ marginTop: 18 }}>
              <a href={WA_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
                <Button kind="whatsapp" icon={<WhatsAppGlyph size={16} />}>Contáctanos por WhatsApp</Button>
              </a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function PageFooter() {
  const { isMobile } = useBreakpoint();
  return (
    <footer style={{ background: TOKENS.bgAlt, borderTop: `1px solid ${TOKENS.rule}`, padding: '32px 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: isMobile ? '0 20px' : '0 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 16 : 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 26, height: 26, borderRadius: 6, background: TOKENS.ink, display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, fontSize: 12 }}>A</div>
          <div style={{ fontSize: 13, color: TOKENS.inkSoft }}>© 2026 AccessToGo · Guadalupe, N.L., México</div>
        </div>
        <div style={{ display: 'flex', gap: 20, fontSize: 13, color: TOKENS.inkSoft, flexWrap: 'wrap' }}>
          <a href="/"               style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>Inicio</a>
          <a href="Nosotros.html"   style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>Nosotros</a>
          <a href="Blog.html"       style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>Blog</a>
          <a href="Privacidad.html" style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>Aviso de Privacidad</a>
          <a href="mailto:soporte@accesstogo.com" style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>soporte@accesstogo.com</a>
        </div>
      </div>
    </footer>
  );
}

window.PageNav = PageNav;
window.PageFooter = PageFooter;