// LinkPass — Shared Components: Buttons, Nav, Footer

// ── Tokens ──────────────────────────────────────────────────
const T = {
  bgDeep:    '#070B18',
  bgSurface: '#0D1426',
  bgCard:    '#111C35',
  bgCardHov: '#162040',
  border:    'rgba(255,255,255,0.07)',
  borderHov: 'rgba(6,182,212,0.4)',
  cyan:      '#06B6D4',
  cyanDim:   'rgba(6,182,212,0.12)',
  cyanGlow:  'rgba(6,182,212,0.25)',
  indigo:    '#818CF8',
  indigoDim: 'rgba(129,140,248,0.12)',
  green:     '#10B981',
  greenDim:  'rgba(16,185,129,0.12)',
  white:     '#F1F5F9',
  muted:     '#64748B',
  mutedLt:   '#94A3B8',
};
Object.assign(window, { T });

// ── useMobile hook ───────────────────────────────────────────
function useMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth <= breakpoint);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth <= breakpoint);
    window.addEventListener('resize', handler, { passive: true });
    return () => window.removeEventListener('resize', handler);
  }, [breakpoint]);
  return isMobile;
}
Object.assign(window, { useMobile });

// ── Button ──────────────────────────────────────────────────
function SPBtn({ variant = 'primary', size = 'md', children, onClick, style, href }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    gap: 6, fontFamily: 'Inter, sans-serif', fontWeight: 600, cursor: 'pointer',
    border: '1px solid transparent', borderRadius: 8, transition: 'all 0.18s ease',
    textDecoration: 'none', whiteSpace: 'nowrap', lineHeight: 1, letterSpacing: '0.01em',
  };
  const sizes = {
    sm: { fontSize: 13, padding: '8px 16px' },
    md: { fontSize: 14, padding: '11px 22px' },
    lg: { fontSize: 15, padding: '14px 28px' },
  };
  const variants = {
    primary: { background: T.cyan, color: '#07091A', borderColor: T.cyan, boxShadow: `0 0 20px ${T.cyanGlow}` },
    outline: { background: 'transparent', color: T.cyan, borderColor: T.cyan },
    ghost:   { background: T.cyanDim, color: T.cyan, borderColor: 'transparent' },
    dark:    { background: T.bgCard, color: T.white, borderColor: T.border },
    indigo:  { background: T.indigo, color: '#07091A', borderColor: T.indigo, boxShadow: '0 0 20px rgba(129,140,248,0.3)' },
  };
  const [hov, setHov] = React.useState(false);
  const hovStyle = hov ? { opacity: 0.88, transform: 'translateY(-1px)' } : {};
  const tag = href ? 'a' : 'button';
  return React.createElement(tag, {
    href, onClick,
    onMouseEnter: () => setHov(true),
    onMouseLeave: () => setHov(false),
    style: { ...base, ...sizes[size], ...variants[variant], ...hovStyle, ...style }
  }, children);
}
Object.assign(window, { SPBtn });

// ── Badge ───────────────────────────────────────────────────
function SPBadge({ color = 'cyan', children }) {
  const colors = {
    cyan:   { bg: T.cyanDim,   text: T.cyan,   border: 'rgba(6,182,212,0.3)' },
    indigo: { bg: T.indigoDim, text: T.indigo,  border: 'rgba(129,140,248,0.3)' },
    green:  { bg: T.greenDim,  text: T.green,   border: 'rgba(16,185,129,0.3)' },
  };
  const c = colors[color] || colors.cyan;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: c.bg, color: c.text, border: `1px solid ${c.border}`, borderRadius: 100, fontSize: 11, fontWeight: 600, padding: '4px 12px', letterSpacing: '0.06em', textTransform: 'uppercase', fontFamily: 'Inter, sans-serif' }}>
      {children}
    </span>
  );
}
Object.assign(window, { SPBadge });

// ── Nav ─────────────────────────────────────────────────────
function SPNav({ page, onNavigate }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [openMenu, setOpenMenu] = React.useState(null);
  const isMobile = useMobile();

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

  // Close mobile menu when switching to desktop
  React.useEffect(() => {
    if (!isMobile) setMobileOpen(false);
  }, [isMobile]);

  const handleNavigate = (id) => {
    onNavigate(id);
    setMobileOpen(false);
    setOpenMenu(null);
  };

  const links = [
    { id: 'home',     label: 'Home' },
    { id: 'servicos', label: 'Serviços', sub: [
      { id: 'servicos-educacao',   label: 'Educação',   icon: '🏫', desc: 'Controle escolar inteligente' },
      { id: 'servicos-condominio', label: 'Condomínio', icon: '🏢', desc: 'Portaria e automação' },
    ]},
    { id: 'sobre',    label: 'Sobre' },
    { id: 'contato',  label: 'Contato' },
  ];

  const isServicosActive = page === 'servicos' || page === 'servicos-educacao' || page === 'servicos-condominio';

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      background: scrolled || mobileOpen ? 'rgba(7,11,24,0.97)' : 'transparent',
      backdropFilter: scrolled || mobileOpen ? 'blur(16px)' : 'none',
      borderBottom: scrolled || mobileOpen ? `1px solid ${T.border}` : '1px solid transparent',
      transition: 'all 0.3s ease',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: isMobile ? '0 20px' : '0 40px',
        height: 68, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        {/* Logo */}
        <div onClick={() => handleNavigate('home')} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
          <img src="assets/linkpass-icon.png" alt="LinkPass" style={{ height: 36, width: 'auto', display: 'block' }} />
          <span style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 19, color: T.white, letterSpacing: '-0.02em' }}>
            <span style={{ color: T.white }}>Link</span><span style={{ color: T.cyan }}>Pass</span>
          </span>
        </div>

        {/* Desktop nav links */}
        {!isMobile && (
          <nav style={{ display: 'flex', gap: 2 }}>
            {links.map(l => {
              const isActive = l.sub ? isServicosActive : page === l.id;
              const hasSub = !!l.sub;
              return (
                <div key={l.id} style={{ position: 'relative' }}
                  onMouseEnter={() => hasSub && setOpenMenu(l.id)}
                  onMouseLeave={() => hasSub && setOpenMenu(null)}>
                  <button onClick={() => !hasSub && handleNavigate(l.id)} style={{
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    padding: '7px 14px', borderRadius: 7, fontSize: 14, fontWeight: 500,
                    fontFamily: 'Inter, sans-serif',
                    color: isActive ? T.cyan : T.mutedLt,
                    borderBottom: isActive ? `2px solid ${T.cyan}` : '2px solid transparent',
                    transition: 'all 0.15s ease',
                    display: 'inline-flex', alignItems: 'center', gap: 4,
                  }}>
                    {l.label}
                    {hasSub && (
                      <svg width="10" height="10" viewBox="0 0 10 10" style={{ transform: openMenu === l.id ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.2s' }}>
                        <path d="M2 4l3 3 3-3" stroke={isActive ? T.cyan : T.muted} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
                      </svg>
                    )}
                  </button>
                  {hasSub && openMenu === l.id && (
                    <div style={{ position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)', paddingTop: 8, zIndex: 300 }}>
                      <div style={{ background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 14, padding: 8, minWidth: 280, boxShadow: '0 12px 48px rgba(0,0,0,0.5), 0 0 24px rgba(6,182,212,0.1)' }}>
                        {l.sub.map(s => (
                          <button key={s.id} onClick={() => { handleNavigate(s.id); setOpenMenu(null); }} style={{
                            width: '100%', textAlign: 'left', background: page === s.id ? T.cyanDim : 'transparent', border: 'none', cursor: 'pointer',
                            padding: '12px 14px', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 12,
                            fontFamily: 'Inter, sans-serif', transition: 'background 0.15s',
                          }}
                          onMouseEnter={e => e.currentTarget.style.background = T.cyanDim}
                          onMouseLeave={e => e.currentTarget.style.background = page === s.id ? T.cyanDim : 'transparent'}>
                            <div style={{ width: 36, height: 36, background: T.bgSurface, borderRadius: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>{s.icon}</div>
                            <div>
                              <div style={{ fontSize: 14, fontWeight: 600, color: page === s.id ? T.cyan : T.white }}>{s.label}</div>
                              <div style={{ fontSize: 12, color: T.muted, marginTop: 2 }}>{s.desc}</div>
                            </div>
                          </button>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </nav>
        )}

        {/* Desktop CTA */}
        {!isMobile && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button onClick={() => handleNavigate('login')} style={{
              background: 'transparent', border: 'none', cursor: 'pointer',
              padding: '8px 14px', borderRadius: 7, fontSize: 14, fontWeight: 500,
              fontFamily: 'Inter, sans-serif',
              color: page === 'login' ? T.cyan : T.mutedLt,
              transition: 'all 0.15s ease',
            }}
            onMouseEnter={e => e.currentTarget.style.color = T.cyan}
            onMouseLeave={e => e.currentTarget.style.color = page === 'login' ? T.cyan : T.mutedLt}>
              Entrar
            </button>
            <SPBtn variant="primary" size="sm" onClick={() => handleNavigate('contato')}>
              Solicitar demo
            </SPBtn>
          </div>
        )}

        {/* Mobile hamburger */}
        {isMobile && (
          <button
            onClick={() => setMobileOpen(o => !o)}
            aria-label="Menu"
            style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 8, display: 'flex', flexDirection: 'column', gap: 5 }}>
            <span style={{ display: 'block', width: 24, height: 2, background: mobileOpen ? T.cyan : T.white, borderRadius: 2, transition: 'all 0.25s', transform: mobileOpen ? 'rotate(45deg) translate(5px, 5px)' : 'none' }} />
            <span style={{ display: 'block', width: 24, height: 2, background: mobileOpen ? T.cyan : T.white, borderRadius: 2, transition: 'all 0.25s', opacity: mobileOpen ? 0 : 1 }} />
            <span style={{ display: 'block', width: 24, height: 2, background: mobileOpen ? T.cyan : T.white, borderRadius: 2, transition: 'all 0.25s', transform: mobileOpen ? 'rotate(-45deg) translate(5px, -5px)' : 'none' }} />
          </button>
        )}
      </div>

      {/* Mobile menu drawer */}
      {isMobile && mobileOpen && (
        <div style={{ background: 'rgba(7,11,24,0.99)', borderTop: `1px solid ${T.border}`, padding: '8px 20px 24px' }}>
          {links.map(l => {
            const isActive = l.sub ? isServicosActive : page === l.id;
            const hasSub = !!l.sub;
            return (
              <div key={l.id}>
                <button onClick={() => {
                  if (hasSub) setOpenMenu(openMenu === l.id ? null : l.id);
                  else handleNavigate(l.id);
                }} style={{
                  width: '100%', textAlign: 'left', background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: '14px 0', fontSize: 16, fontWeight: 600, fontFamily: 'Inter, sans-serif',
                  color: isActive ? T.cyan : T.white,
                  borderBottom: `1px solid ${T.border}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  {l.label}
                  {hasSub && (
                    <svg width="12" height="12" viewBox="0 0 10 10" style={{ transform: openMenu === l.id ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', flexShrink: 0 }}>
                      <path d="M2 4l3 3 3-3" stroke={T.muted} strokeWidth="1.5" strokeLinecap="round" fill="none"/>
                    </svg>
                  )}
                </button>
                {hasSub && openMenu === l.id && (
                  <div style={{ paddingLeft: 16 }}>
                    {l.sub.map(s => (
                      <button key={s.id} onClick={() => handleNavigate(s.id)} style={{
                        width: '100%', textAlign: 'left', background: 'transparent', border: 'none', cursor: 'pointer',
                        padding: '12px 0', fontSize: 15, fontWeight: 500, fontFamily: 'Inter, sans-serif',
                        color: page === s.id ? T.cyan : T.mutedLt,
                        borderBottom: `1px solid ${T.border}`,
                        display: 'flex', alignItems: 'center', gap: 10,
                      }}>
                        <span style={{ fontSize: 18 }}>{s.icon}</span> {s.label}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
          <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button onClick={() => handleNavigate('login')} style={{
              background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 8, cursor: 'pointer',
              padding: '12px 16px', fontSize: 15, fontWeight: 600, fontFamily: 'Inter, sans-serif', color: T.white,
            }}>
              Entrar
            </button>
            <SPBtn variant="primary" size="lg" onClick={() => handleNavigate('contato')} style={{ width: '100%', justifyContent: 'center' }}>
              Solicitar demo
            </SPBtn>
          </div>
        </div>
      )}
    </header>
  );
}
Object.assign(window, { SPNav });

// ── Footer ──────────────────────────────────────────────────
function SPFooter({ onNavigate }) {
  const isMobile = useMobile();

  const cols = [
    { title: 'Segmentos', links: [
      { label: 'Educação',    page: 'servicos-educacao' },
      { label: 'Condomínios', page: 'servicos-condominio' },
      { label: 'Empresas',    page: 'contato' },
      { label: 'Eventos',     page: 'contato' },
    ]},
    { title: 'Empresa', links: [
      { label: 'Sobre Nós', page: 'sobre' },
      { label: 'Contato',   page: 'contato' },
    ]},
    { title: 'Suporte', links: [
      { label: 'Central de Ajuda', page: 'ajuda' },
    ]},
    { title: 'Legal', links: [
      { label: 'Privacidade',   page: 'privacidade' },
      { label: 'Termos de Uso', page: 'termos' },
      { label: 'LGPD',          page: 'lgpd' },
      { label: 'Cookies',       page: 'cookies' },
    ]},
  ];

  return (
    <footer style={{ background: '#050810', borderTop: `1px solid ${T.border}`, padding: isMobile ? '48px 20px 28px' : '64px 40px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : '2fr 1fr 1fr 1fr 1fr',
          gap: isMobile ? 32 : 40,
          marginBottom: 48,
        }}>
          {/* Brand — spans full row on mobile */}
          <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
            <div onClick={() => onNavigate('home')} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, cursor: 'pointer' }}>
              <img src="assets/linkpass-icon.png" alt="LinkPass" style={{ height: 32, width: 'auto' }} />
              <span style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 17, color: T.white }}>
                <span style={{ color: T.white }}>Link</span><span style={{ color: T.cyan }}>Pass</span>
              </span>
            </div>
            <p style={{ fontSize: 14, color: T.muted, lineHeight: 1.7, maxWidth: 240 }}>Plataforma de acesso inteligente para escolas, condomínios e empresas. Conecta. Integra. Acessa.</p>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <div style={{ fontSize: 11, fontWeight: 700, color: T.muted, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 16 }}>{col.title}</div>
              {col.links.map(l => (
                <button key={l.label} onClick={() => onNavigate(l.page)} style={{
                  display: 'block', background: 'transparent', border: 'none', padding: 0, margin: '0 0 10px',
                  fontSize: 13, color: T.mutedLt, cursor: 'pointer', transition: 'color 0.15s',
                  fontFamily: 'Inter, sans-serif', textAlign: 'left',
                }}
                  onMouseEnter={e => e.currentTarget.style.color = T.cyan}
                  onMouseLeave={e => e.currentTarget.style.color = T.mutedLt}>{l.label}</button>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: `1px solid ${T.border}`, paddingTop: 24, display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center', gap: isMobile ? 8 : 0 }}>
          <span style={{ fontSize: 13, color: T.muted }}>© 2026 LinkPass. Todos os direitos reservados.</span>
          <span style={{ fontSize: 13, color: T.muted }}>Conecta. Integra. Acessa.</span>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { SPFooter });