/* === Nav === */
const Nav = ({ dark = true }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navLinks = [
    { label: 'Como funciona', href: '#como-funciona' },
    { label: 'Para advogados', href: '#advogados' },
    { label: 'Para clientes', href: '#clientes' },
    { label: 'FAQ', href: '#faq' },
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '12px 0' : '20px 0',
      background: scrolled
        ? (dark ? 'rgba(11,37,69,0.85)' : 'rgba(247,245,239,0.85)')
        : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      borderBottom: scrolled ? `1px solid ${dark ? 'var(--line-dark)' : 'var(--line)'}` : '1px solid transparent',
      transition: 'all 0.25s ease',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <Logo light={dark} />
        <nav style={{ display: 'flex', gap: 6, alignItems: 'center' }} className="nav-links">
          {navLinks.map(l => (
            <a key={l.href} href={l.href} style={{
              padding: '8px 14px',
              color: dark ? 'rgba(255,255,255,0.78)' : 'var(--ink-2)',
              textDecoration: 'none',
              fontSize: 14,
              fontWeight: 500,
              borderRadius: 8,
              transition: 'color 0.15s',
            }}
            onMouseEnter={e => e.currentTarget.style.color = dark ? '#fff' : 'var(--navy-900)'}
            onMouseLeave={e => e.currentTarget.style.color = dark ? 'rgba(255,255,255,0.78)' : 'var(--ink-2)'}
            >{l.label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <a href="#verificar" style={{
            padding: '10px 16px',
            color: dark ? 'rgba(255,255,255,0.85)' : 'var(--ink-2)',
            textDecoration: 'none',
            fontSize: 14,
            fontWeight: 500,
          }}>Entrar</a>
          <a href="#cadastro" className="btn btn-light" style={{ padding: '10px 18px', fontSize: 14 }}>
            Cadastrar
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </header>
  );
};

/* === Footer === */
const Footer = () => {
  const cols = [
    { title: 'Produto', links: ['Verificar contato', 'Para advogados', 'Para escritórios', 'Aplicativo móvel', 'Selo de verificação'] },
    { title: 'Empresa', links: ['Sobre o JurisID', 'Imprensa', 'Investidores', 'Carreiras', 'Contato'] },
    { title: 'Recursos', links: ['Central de ajuda', 'Como denunciar fraude', 'Boletim de ocorrência', 'API para escritórios', 'Status'] },
    { title: 'Legal', links: ['Termos de uso', 'Política de privacidade', 'LGPD', 'Cookies', 'Conformidade ICP-Brasil'] },
  ];
  return (
    <footer style={{ background: 'var(--navy-900)', color: 'var(--blue-200)', paddingTop: 96, paddingBottom: 40 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 48, paddingBottom: 64 }} className="footer-grid">
          <div>
            <Logo light={true} size={24} />
            <p style={{ marginTop: 20, fontSize: 14, lineHeight: 1.6, color: 'var(--blue-300)', maxWidth: 280 }}>
              Identidade segura para advogados.<br />A blindagem digital contra o golpe do falso advogado.
            </p>
            <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span className="pill"><span className="dot"></span>Sistema operando</span>
            </div>
            <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
              <a href="#" className="btn btn-ghost" style={{ padding: '10px 14px', fontSize: 13 }}>
                <Icon.download s={16} /> iOS
              </a>
              <a href="#" className="btn btn-ghost" style={{ padding: '10px 14px', fontSize: 13 }}>
                <Icon.download s={16} /> Android
              </a>
            </div>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <div className="eyebrow" style={{ color: 'var(--blue-300)', marginBottom: 18 }}>{col.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
                {col.links.map(l => (
                  <li key={l}>
                    <a href="#" style={{ color: 'var(--blue-200)', textDecoration: 'none', fontSize: 14 }}
                      onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                      onMouseLeave={e => e.currentTarget.style.color = 'var(--blue-200)'}
                    >{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="divider-dark"></div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 28, flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontSize: 13, color: 'var(--blue-300)' }}>
            © 2026 JurisID Tecnologia em Verificação Jurídica Ltda. — CNPJ 00.000.000/0001-00
          </div>
          <div style={{ display: 'flex', gap: 18, fontSize: 12, color: 'var(--blue-300)', fontFamily: 'var(--font-mono)' }}>
            <span>ICP-BRASIL</span>
            <span>·</span>
            <span>LGPD</span>
            <span>·</span>
            <span>OAB API v2</span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </footer>
  );
};

window.Nav = Nav;
window.Footer = Footer;