// LinkPass — Serviços Condomínio Page

const CONDO_MODULES = [
  {
    id: 'acesso',
    title: 'Controle de Acesso Inteligente',
    icon: '🔐',
    color: '#06B6D4',
    intro: 'Múltiplas formas de autenticação para moradores, visitantes e prestadores.',
    items: [
      { name: 'Reconhecimento Facial', desc: 'Cadastre moradores, visitantes e prestadores com acesso por reconhecimento facial.' },
      { name: 'QR Code Inteligente', desc: 'Acesso rápido por QR Code dinâmico ou leitor físico.' },
      { name: 'Leitura de Placas (LPR)', desc: 'Abertura automática para veículos autorizados.' },
      { name: 'Cartão RFID e TAG Veicular', desc: 'Múltiplas formas de autenticação para diferentes perfis.' },
      { name: 'Convite Facial', desc: 'Envie convites por WhatsApp e permita cadastro antecipado da face.' },
      { name: 'Chave Virtual', desc: 'Convites temporários para visitantes abrirem portões pelo celular.' },
      { name: 'Rotas Inteligentes', desc: 'Defina quais acessos cada perfil pode utilizar.' },
    ],
  },
  {
    id: 'portaria',
    title: 'Portaria Digital',
    icon: '🛎',
    color: '#818CF8',
    intro: 'Portaria presencial, remota, virtual ou autônoma — você escolhe o modelo.',
    items: [
      { name: 'Tela operacional em tempo real', desc: 'Visualização instantânea de entradas, saídas e alertas.' },
      { name: 'Click Aprova', desc: 'Receba foto e vídeo do visitante e aprove o acesso em um toque.' },
      { name: 'Chamadas VoIP + vídeo', desc: 'Comunicação entre visitante e morador sem PABX.' },
      { name: 'Registro de Turno', desc: 'Substitui livros físicos e digitaliza operações da portaria.' },
      { name: 'Ocorrências Inteligentes', desc: 'Botão de emergência, alertas e registros personalizados.' },
    ],
  },
  {
    id: 'app',
    title: 'Aplicativo do Morador',
    icon: '📱',
    color: '#10B981',
    intro: 'Tudo o que o morador precisa, direto no celular.',
    items: [
      { name: 'Abertura remota de portões', desc: 'Libere acesso mesmo à distância.' },
      { name: 'Histórico completo de acessos', desc: 'Veja quem entrou e saiu, com data e hora.' },
      { name: 'Notificações em tempo real', desc: 'Receba alertas sobre visitas, encomendas e ocorrências.' },
      { name: 'Bilhetes digitais', desc: 'Convites e bilhetes para visitantes e eventos.' },
      { name: 'Avisos e comunicados', desc: 'Receba comunicados oficiais do condomínio.' },
      { name: 'Documentos do condomínio', desc: 'Atas, regulamentos e arquivos acessíveis no app.' },
      { name: 'Lista de convidados', desc: 'Gerencie quem pode acessar sua unidade.' },
      { name: 'Convites por QR Code', desc: 'Envie um QR Code temporário para qualquer visitante.' },
      { name: 'Convites por link inteligente', desc: 'Compartilhe convites por WhatsApp em poucos toques.' },
    ],
  },
  {
    id: 'visitantes',
    title: 'Gestão de Visitantes e Prestadores',
    icon: '👥',
    color: '#F59E0B',
    intro: 'Cadastro e autorização automatizados — sem filas, sem papel.',
    items: [
      { name: 'Cadastro antecipado', desc: 'Visitantes pré-cadastrados pelo morador.' },
      { name: 'Autorização prévia', desc: 'Aprovação de acesso antes da chegada.' },
      { name: 'Prestadores recorrentes', desc: 'Cadastros permanentes para serviços fixos.' },
      { name: 'Self Check-in', desc: 'O próprio visitante faz seu check-in na chegada.' },
      { name: 'Autotriagem', desc: 'Triagem automática para visitantes habituais.' },
      { name: 'Visitantes temporários', desc: 'Acessos com validade pré-definida.' },
      { name: 'Faces temporárias', desc: 'Reconhecimento facial com data de expiração.' },
      { name: 'Ficha virtual de cadastro', desc: 'Substitui o papel por formulário digital.' },
      { name: 'Lista de eventos e festas', desc: 'Gestão de convidados para grandes eventos.' },
    ],
  },
  {
    id: 'entregas',
    title: 'Gestão de Entregas',
    icon: '📦',
    color: '#06B6D4',
    intro: 'Mais controle e rastreabilidade no recebimento e retirada.',
    items: [
      { name: 'Recebimento inteligente', desc: 'Cadastro automático de entregas na portaria.' },
      { name: 'Fotos da entrega', desc: 'Registro visual de cada pacote recebido.' },
      { name: 'Notificações automáticas', desc: 'O morador é avisado assim que a entrega chega.' },
      { name: 'Confirmação facial na retirada', desc: 'Reconhecimento facial valida quem retira.' },
    ],
  },
  {
    id: 'areas-comuns',
    title: 'Áreas Comuns',
    icon: '🏊',
    color: '#818CF8',
    intro: 'Agende churrasqueira, salão, academia e outros ambientes.',
    items: [
      { name: 'Reserva de espaços', desc: 'Sistema online de reservas com calendário.' },
      { name: 'Regras automáticas', desc: 'Limites de uso, antecedência e validações.' },
      { name: 'Liberação automática de acesso', desc: 'O acesso é liberado no horário reservado.' },
      { name: 'Controle de horários', desc: 'Defina janelas de funcionamento por ambiente.' },
    ],
  },
  {
    id: 'seguranca',
    title: 'Segurança e Auditoria',
    icon: '🛡',
    color: '#10B981',
    intro: 'Registros acessíveis em qualquer lugar, com segurança e conformidade.',
    items: [
      { name: 'Histórico em nuvem', desc: 'Todos os acessos armazenados com segurança.' },
      { name: 'Relatórios avançados', desc: 'Dados consolidados para a administração.' },
      { name: 'Backup de credenciais', desc: 'Cópia segura de cadastros e permissões.' },
      { name: 'Gestão centralizada', desc: 'Um painel para várias unidades ou torres.' },
      { name: 'Painel de equipamentos', desc: 'Status em tempo real de todos os dispositivos.' },
      { name: 'Alertas em tempo real', desc: 'Notificações imediatas em qualquer ocorrência.' },
      { name: 'Armazenamento seguro', desc: 'Conformidade total com LGPD e padrões de segurança.' },
    ],
  },
];

function ServicosCondominioPage({ onNavigate }) {
  const [activeModule, setActiveModule] = React.useState(CONDO_MODULES[0].id);
  const isMobile = useMobile();

  // Scroll to module when clicking sidebar
  const scrollToModule = (id) => {
    setActiveModule(id);
    const el = document.getElementById(`mod-${id}`);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 100;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <>
      {/* Em breve banner */}
      <div style={{ background: 'rgba(129,140,248,0.07)', borderBottom: '1px solid rgba(129,140,248,0.18)', padding: isMobile ? '12px 20px' : '13px 40px', marginTop: 68, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, flexWrap: 'wrap' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(129,140,248,0.15)', border: '1px solid rgba(129,140,248,0.35)', borderRadius: 100, fontSize: 11, fontWeight: 700, padding: '3px 11px', color: T.indigo, letterSpacing: '0.06em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
          🚀 Em breve
        </span>
        <p style={{ fontSize: isMobile ? 13 : 14, color: T.mutedLt, margin: 0, textAlign: 'center' }}>
          Esta solução está em desenvolvimento e será lançada em breve.
        </p>
      </div>

      {/* Hero */}
      <section style={{ padding: isMobile ? '60px 20px 48px' : '80px 40px 60px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '20%', left: '50%', transform: 'translateX(-50%)', width: 700, height: 400, background: `radial-gradient(ellipse, rgba(129,140,248,0.12) 0%, transparent 70%)`, pointerEvents: 'none' }} />
        <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <SPBadge color="indigo">🏢 Condomínio</SPBadge>
          <h1 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 34 : 56, letterSpacing: '-0.03em', color: T.white, margin: '20px 0 16px', lineHeight: 1.1 }}>
            Tecnologia que conecta moradores, visitantes e segurança.
          </h1>
          <p style={{ fontSize: isMobile ? 15 : 18, color: T.muted, lineHeight: 1.7, maxWidth: 620, margin: '0 auto 32px' }}>
            Uma solução inteligente para portaria presencial, remota, virtual e autônoma — integrando acesso, automação, comunicação e gestão condominial.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <SPBtn variant="primary" size={isMobile ? 'md' : 'lg'} onClick={() => onNavigate('contato')}>Solicitar demonstração</SPBtn>
            <SPBtn variant="outline" size={isMobile ? 'md' : 'lg'} onClick={() => scrollToModule('acesso')}>Ver módulos ↓</SPBtn>
          </div>

          {/* Module count strip */}
          <div style={{ display: 'flex', gap: isMobile ? 20 : 32, justifyContent: 'center', marginTop: isMobile ? 36 : 56, flexWrap: 'wrap' }}>
            {[['7', 'Módulos'], ['50+', 'Recursos'], ['4', 'Modelos de portaria']].map(([n, l]) => (
              <div key={n} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 22 : 28, color: T.indigo }}>{n}</div>
                <div style={{ fontSize: 13, color: T.muted, marginTop: 2 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LPR Animation Demo */}
      <LPRDemo />

      {/* Module index strip */}      <section style={{ padding: isMobile ? '0 20px 20px' : '0 40px 40px', background: T.bgDeep, position: 'sticky', top: 68, zIndex: 50, backdropFilter: 'blur(10px)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center', padding: '20px 0', borderTop: `1px solid ${T.border}` }}>
          {CONDO_MODULES.map(m => (
            <button key={m.id} onClick={() => scrollToModule(m.id)} style={{
              padding: '8px 16px', borderRadius: 100,
              border: `1px solid ${activeModule === m.id ? m.color + '55' : T.border}`,
              background: activeModule === m.id ? `${m.color}18` : T.bgCard,
              color: activeModule === m.id ? m.color : T.mutedLt,
              fontSize: 12, fontWeight: 600, cursor: 'pointer', transition: 'all 0.2s',
              fontFamily: 'Inter, sans-serif',
              display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
            }}>
              <span style={{ fontSize: 14 }}>{m.icon}</span> {m.title}
            </button>
          ))}
        </div>
      </section>

      {/* Modules */}
      <section style={{ padding: isMobile ? '24px 20px 60px' : '40px 40px 80px', background: T.bgSurface }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 32 }}>
          {CONDO_MODULES.map((m, idx) => (
            <CondoModuleBlock key={m.id} m={m} idx={idx} />
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: isMobile ? '64px 20px' : '100px 40px', background: T.bgCard, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${T.border} 1px, transparent 1px), linear-gradient(90deg, ${T.border} 1px, transparent 1px)`, backgroundSize: '50px 50px' }} />
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 600, height: 300, background: `radial-gradient(ellipse, rgba(129,140,248,0.15) 0%, transparent 70%)`, pointerEvents: 'none' }} />
        <div style={{ maxWidth: 680, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 28 : 44, letterSpacing: '-0.03em', color: T.white, marginBottom: 16, lineHeight: 1.1 }}>
            Modernize a portaria do seu condomínio.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted, marginBottom: 28 }}>Agende uma demonstração e veja a LinkPass funcionando no seu ambiente.</p>
          <SPBtn variant="primary" size={isMobile ? 'md' : 'lg'} onClick={() => onNavigate('contato')}>Agendar demonstração</SPBtn>
        </div>
      </section>
    </>
  );
}

function CondoModuleBlock({ m, idx }) {
  const isMobile = useMobile();
  return (
    <div id={`mod-${m.id}`} style={{ background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 20, padding: isMobile ? 20 : 40, scrollMarginTop: 100 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 8 }}>
        <div style={{ width: 46, height: 46, background: `${m.color}18`, border: `1px solid ${m.color}33`, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, flexShrink: 0 }}>{m.icon}</div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: m.color, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Módulo {String(idx + 1).padStart(2, '0')}</div>
          <h3 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 18 : 26, color: T.white, letterSpacing: '-0.02em', marginTop: 2 }}>{m.title}</h3>
        </div>
      </div>
      <p style={{ fontSize: isMobile ? 13 : 15, color: T.mutedLt, lineHeight: 1.6, margin: '10px 0 20px', maxWidth: 700 }}>{m.intro}</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
        {m.items.map(item => (
          <div key={item.name} style={{ background: T.bgSurface, border: `1px solid ${T.border}`, borderRadius: 12, padding: 18, transition: 'all 0.18s', cursor: 'default' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = m.color + '44'; e.currentTarget.style.background = T.bgCardHov; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = T.border; e.currentTarget.style.background = T.bgSurface; }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: m.color, boxShadow: `0 0 6px ${m.color}` }} />
              <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: 14, color: T.white }}>{item.name}</div>
            </div>
            <div style={{ fontSize: 12.5, color: T.muted, lineHeight: 1.55, paddingLeft: 16 }}>{item.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ServicosCondominioPage });