// LinkPass — Home Page

// ── Hero ────────────────────────────────────────────────────
const HERO_SEGMENTS = {
  educacao: {
    label: 'Educação', icon: '🏫', color: '#06B6D4', url: 'linkpass.app/escola',
    stats: [
      { label: 'Alunos Presentes',   value: '342', sub: '↑ 12 hoje',     color: '#06B6D4' },
      { label: 'Saídas Autorizadas', value: '28',  sub: 'Últimas 2h',    color: '#10B981' },
      { label: 'Alertas Ativos',     value: '3',   sub: 'Atender agora', color: '#F59E0B' },
      { label: 'Visitantes',         value: '7',   sub: 'No campus',     color: '#818CF8' },
    ],
    activity: [
      { name: 'Ana Lima',     type: 'Entrada · 6º ano',           time: '08:47', tag: 'Aluno',    c: '#10B981' },
      { name: 'Carlos Souza', type: 'Retirada autorizada',        time: '08:51', tag: 'Resp.',    c: '#06B6D4' },
      { name: 'Maria Torres', type: 'Entrada de visitante',       time: '09:02', tag: 'Visita',   c: '#818CF8' },
      { name: 'Pedro Alves',  type: 'Sem autorização de retirada', time: '09:10', tag: 'Bloqueio', c: '#EF4444' },
    ],
    spacesTitle: 'Espaços Ativos',
    spaces: [
      { name: 'Biblioteca',       pct: 72,  c: '#06B6D4' },
      { name: 'Lab. Informática', pct: 100, c: '#EF4444' },
      { name: 'Quadra',           pct: 45,  c: '#10B981' },
      { name: 'Auditório',        pct: 20,  c: '#818CF8' },
    ],
  },
  condominio: {
    label: 'Condomínio', icon: '🏢', color: '#818CF8', url: 'linkpass.app/condominio',
    stats: [
      { label: 'Moradores Presentes', value: '218', sub: '↑ 32 hoje',           color: '#06B6D4' },
      { label: 'Visitantes Hoje',     value: '47',  sub: '12 ativos agora',     color: '#10B981' },
      { label: 'Encomendas',          value: '12',  sub: 'Aguardando retirada', color: '#F59E0B' },
      { label: 'Alertas',             value: '2',   sub: 'Verificar portaria',  color: '#818CF8' },
    ],
    activity: [
      { name: 'Bloco 04 · Apt 1203', type: 'Entrada por reconhecimento facial', time: '14:22', tag: 'Morador', c: '#10B981' },
      { name: 'iFood · Mateus G.',   type: 'Entrega registrada · foto',          time: '14:28', tag: 'Entrega', c: '#F59E0B' },
      { name: 'Carla Mendes',        type: 'Visitante · chave virtual',          time: '14:35', tag: 'Visita',  c: '#06B6D4' },
      { name: 'ABC-1D23',            type: 'Veículo autorizado · LPR',           time: '14:41', tag: 'Veículo', c: '#818CF8' },
    ],
    spacesTitle: 'Áreas Comuns',
    spaces: [
      { name: 'Salão de Festas', pct: 100, c: '#EF4444' },
      { name: 'Academia',        pct: 65,  c: '#10B981' },
      { name: 'Churrasqueira',   pct: 40,  c: '#06B6D4' },
      { name: 'Piscina',         pct: 25,  c: '#818CF8' },
    ],
  },
};

function HomeHero({ onNavigate }) {
  const [seg, setSeg] = React.useState('educacao');
  const isMobile = useMobile();
  const d = HERO_SEGMENTS[seg];

  return (
    <section style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden', paddingTop: 68 }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${T.border} 1px, transparent 1px), linear-gradient(90deg, ${T.border} 1px, transparent 1px)`, backgroundSize: '60px 60px', opacity: 0.5 }} />
      <div style={{ position: 'absolute', top: '15%', left: '50%', transform: 'translateX(-50%)', width: isMobile ? 400 : 800, height: isMobile ? 200 : 400, background: `radial-gradient(ellipse, ${d.color}1f 0%, transparent 70%)`, pointerEvents: 'none', transition: 'background 0.4s' }} />
      <div style={{ position: 'absolute', bottom: '10%', right: '5%', width: 400, height: 400, background: `radial-gradient(ellipse, rgba(129,140,248,0.1) 0%, transparent 70%)`, pointerEvents: 'none' }} />

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '60px 20px' : '80px 40px', position: 'relative', width: '100%' }}>
        <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
          <SPBadge color="cyan">✦ Plataforma de Acesso Inteligente</SPBadge>
          <h1 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 'clamp(36px, 10vw, 52px)' : 'clamp(40px, 6vw, 72px)', lineHeight: 1.08, letterSpacing: '-0.03em', color: T.white, margin: '20px 0 16px', textWrap: 'balance' }}>
            Conecta.{' '}
            <span style={{ background: `linear-gradient(135deg, ${T.cyan}, ${T.indigo})`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Integra.</span>
            {' '}Acessa.
          </h1>
          <p style={{ fontSize: isMobile ? 16 : 18, color: T.mutedLt, lineHeight: 1.7, maxWidth: 620, margin: '0 auto 32px', textWrap: 'balance' }}>
            Mais do que controle de acesso. Um ecossistema inteligente que conecta pessoas, espaços e tecnologia — em escolas, condomínios e empresas.
          </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={() => onNavigate('servicos-' + seg)}>Conhecer recursos →</SPBtn>
          </div>
          <div style={{ display: 'flex', gap: isMobile ? 24 : 40, justifyContent: 'center', marginTop: isMobile ? 40 : 64, flexWrap: 'wrap' }}>
            {[['800+', 'Ambientes conectados'], ['3', 'Segmentos atendidos'], ['99.9%', 'Uptime garantido']].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.cyan }}>{n}</div>
                <div style={{ fontSize: 13, color: T.muted, marginTop: 2 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Segment toggle */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: isMobile ? 36 : 56, marginBottom: 18 }}>
          <div style={{ display: 'inline-flex', gap: 4, background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 100, padding: 5 }}>
            {Object.entries(HERO_SEGMENTS).map(([key, val]) => (
              <button key={key} onClick={() => setSeg(key)} style={{
                background: seg === key ? `${val.color}22` : 'transparent',
                border: `1px solid ${seg === key ? val.color + '55' : 'transparent'}`,
                borderRadius: 100, padding: isMobile ? '8px 14px' : '9px 22px', cursor: 'pointer',
                color: seg === key ? val.color : T.mutedLt, fontWeight: 600, fontSize: isMobile ? 12 : 13.5,
                fontFamily: 'Inter, sans-serif', display: 'inline-flex', alignItems: 'center', gap: 6,
                transition: 'all 0.18s',
              }}>
                <span style={{ fontSize: 15 }}>{val.icon}</span>
                {isMobile ? val.label : `Modo ${val.label}`}
              </button>
            ))}
          </div>
        </div>

        {/* Dashboard preview */}
        <div style={{ position: 'relative' }}>
          <div style={{ background: T.bgCard, borderRadius: 16, border: `1px solid ${d.color}33`, overflow: 'hidden', boxShadow: `0 24px 80px rgba(0,0,0,0.5), 0 0 60px ${d.color}33`, transition: 'all 0.3s' }}>
            {/* Browser bar */}
            <div style={{ background: T.bgSurface, padding: '12px 20px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${T.border}` }}>
              <div style={{ display: 'flex', gap: 6 }}>
                {['#FF5F57', '#FEBC2E', '#28C840'].map(c => <div key={c} style={{ width: 10, height: 10, borderRadius: '50%', background: c }} />)}
              </div>
              <div style={{ flex: 1, background: T.bgDeep, borderRadius: 5, padding: '4px 12px', fontSize: 12, color: T.muted, textAlign: 'center', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{d.url}</div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px', borderRadius: 100, background: `${d.color}22`, color: d.color, fontSize: 11, fontWeight: 600, flexShrink: 0 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: d.color, boxShadow: `0 0 6px ${d.color}` }} />
                ao vivo
              </div>
            </div>
            {/* Stats row */}
            <div style={{ padding: isMobile ? '12px 12px 0' : 24, display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1fr 1fr 1fr', gap: isMobile ? 10 : 16 }}>
              {d.stats.map(s => (
                <div key={s.label} style={{ background: T.bgSurface, borderRadius: 10, padding: isMobile ? 12 : 16, border: `1px solid ${T.border}` }}>
                  <div style={{ fontSize: isMobile ? 9 : 11, color: T.muted, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.07em' }}>{s.label}</div>
                  <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 22 : 28, color: s.color }}>{s.value}</div>
                  <div style={{ fontSize: 11, color: T.muted, marginTop: 4 }}>{s.sub}</div>
                </div>
              ))}
            </div>
            {/* Activity + Spaces */}
            <div style={{ padding: isMobile ? '10px 12px 12px' : '0 24px 24px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr', gap: isMobile ? 10 : 16, marginTop: isMobile ? 0 : 0 }}>
              <div style={{ background: T.bgSurface, borderRadius: 10, padding: isMobile ? 12 : 16, border: `1px solid ${T.border}` }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: T.mutedLt, marginBottom: 14 }}>Acessos Recentes</div>
                {(isMobile ? d.activity.slice(0, 2) : d.activity).map(r => (
                  <div key={r.name + r.time} style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 10, borderBottom: `1px solid ${T.border}`, marginBottom: 10 }}>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', background: `${r.c}22`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, color: r.c, flexShrink: 0 }}>{r.name[0]}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 11, fontWeight: 600, color: T.white, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name}</div>
                      <div style={{ fontSize: 10, color: T.muted, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.type}</div>
                    </div>
                    <div style={{ fontSize: 10, color: T.muted, flexShrink: 0 }}>{r.time}</div>
                    <div style={{ fontSize: 9, padding: '2px 6px', borderRadius: 100, background: `${r.c}22`, color: r.c, fontWeight: 600, whiteSpace: 'nowrap', flexShrink: 0 }}>{r.tag}</div>
                  </div>
                ))}
              </div>
              {!isMobile && (
                <div style={{ background: T.bgSurface, borderRadius: 10, padding: 16, border: `1px solid ${T.border}` }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: T.mutedLt, marginBottom: 14 }}>{d.spacesTitle}</div>
                  {d.spaces.map(e => (
                    <div key={e.name} style={{ marginBottom: 12 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                        <span style={{ fontSize: 11, color: T.mutedLt }}>{e.name}</span>
                        <span style={{ fontSize: 11, color: e.c, fontWeight: 600 }}>{e.pct}%</span>
                      </div>
                      <div style={{ height: 4, background: T.bgDeep, borderRadius: 4, overflow: 'hidden' }}>
                        <div style={{ width: `${e.pct}%`, height: '100%', background: e.c, borderRadius: 4, boxShadow: `0 0 6px ${e.c}`, transition: 'width 0.4s' }} />
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
          <div style={{ position: 'absolute', bottom: -40, left: '50%', transform: 'translateX(-50%)', width: '60%', height: 80, background: `radial-gradient(ellipse, ${d.color}55 0%, transparent 70%)`, filter: 'blur(10px)', pointerEvents: 'none', transition: 'background 0.4s' }} />
        </div>
      </div>
    </section>
  );
}

// ── Features Grid ────────────────────────────────────────────
const FEATURES_BY_SEG = {
  educacao: {
    color: T.cyan,
    headline: 'Tudo que sua escola precisa',
    sub: 'Recursos pensados para o dia a dia da instituição de ensino.',
    items: [
      { icon: '⬡', title: 'Controle de Entrada e Saída',     desc: 'Registre o acesso de alunos, responsáveis, funcionários e visitantes em tempo real.', color: T.cyan },
      { icon: '◎', title: 'Responsáveis Autorizados',         desc: 'Defina quem pode retirar cada aluno, com foto, documento e permissões específicas.', color: T.indigo },
      { icon: '⬢', title: 'Acesso a Espaços Internos',         desc: 'Biblioteca, laboratórios, salas, quadras e auditórios com regras por turma e turno.', color: T.green },
      { icon: '◈', title: 'Eventos e Atividades Extras',      desc: 'Organize reuniões, oficinas e atividades com lista de presença e inscrição online.', color: '#F59E0B' },
      { icon: '◉', title: 'Perfis e Permissões',              desc: 'Acesso granular para administradores, diretoria, professores, funcionários e responsáveis.', color: T.cyan },
      { icon: '◍', title: 'Plataforma White-Label',           desc: 'A plataforma com a logo, cores e identidade da sua escola.', color: T.indigo },
      { icon: '◬', title: 'Dashboard em Tempo Real',          desc: 'Visão completa de acessos, eventos e ocorrências da instituição.', color: T.green },
      { icon: '◫', title: 'Notificações para Famílias',       desc: 'Alertas automáticos por app, SMS e e-mail para pais e responsáveis.', color: '#F59E0B' },
    ],
  },
  condominio: {
    color: T.indigo,
    headline: 'Tudo que seu condomínio precisa',
    sub: 'Recursos pensados para portaria, moradores e segurança condominial.',
    items: [
      { icon: '⬡', title: 'Reconhecimento Facial e LPR',      desc: 'Acesso por face e leitura de placa para moradores e veículos cadastrados.', color: T.cyan },
      { icon: '◎', title: 'Visitantes e Prestadores',         desc: 'Convite por QR Code, chave virtual e self check-in na portaria.', color: T.indigo },
      { icon: '⬢', title: 'Portaria Digital',                 desc: 'Click Aprova, chamadas VoIP, registro de turno e ocorrências em tempo real.', color: T.green },
      { icon: '◈', title: 'Áreas Comuns e Reservas',          desc: 'Salão, academia, churrasqueira e piscina com regras e liberação automática.', color: '#F59E0B' },
      { icon: '◉', title: 'Gestão de Entregas',               desc: 'Recebimento inteligente, fotos, notificações e confirmação facial na retirada.', color: T.cyan },
      { icon: '◍', title: 'App do Morador',                   desc: 'Abertura remota, convites, comunicados e documentos do condomínio.', color: T.indigo },
      { icon: '◬', title: 'Dashboard em Tempo Real',          desc: 'Visão completa de acessos, encomendas, ocorrências e ocupação de áreas.', color: T.green },
      { icon: '◫', title: 'Segurança e Auditoria',            desc: 'Histórico em nuvem, backup de credenciais e conformidade total com LGPD.', color: '#F59E0B' },
    ],
  },
};

function FeaturesSection() {
  const [seg, setSeg] = React.useState('educacao');
  const isMobile = useMobile();
  const cfg = FEATURES_BY_SEG[seg];

  return (
    <section style={{ padding: isMobile ? '72px 20px' : '100px 40px', background: T.bgSurface }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <SPBadge color="indigo">Recursos</SPBadge>
          <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 32 : 44, letterSpacing: '-0.03em', color: T.white, margin: '16px 0 12px' }}>{cfg.headline}</h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted, maxWidth: 520, margin: '0 auto' }}>{cfg.sub}</p>
        </div>

        {/* Segment toggle */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
          <div style={{ display: 'inline-flex', gap: 4, background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 100, padding: 5 }}>
            {[['educacao', '🏫 Educação', T.cyan], ['condominio', '🏢 Condomínio', T.indigo]].map(([key, lbl, col]) => (
              <button key={key} onClick={() => setSeg(key)} style={{
                background: seg === key ? `${col}22` : 'transparent',
                border: `1px solid ${seg === key ? col + '55' : 'transparent'}`,
                borderRadius: 100, padding: isMobile ? '7px 14px' : '8px 20px', cursor: 'pointer',
                color: seg === key ? col : T.mutedLt, fontWeight: 600, fontSize: isMobile ? 12 : 13,
                fontFamily: 'Inter, sans-serif', transition: 'all 0.18s',
              }}>{lbl}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 12 : 16 }}>
          {cfg.items.map(f => (
            <FeatureCard key={f.title} f={f} isMobile={isMobile} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ f, isMobile }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ background: hov ? T.bgCardHov : T.bgCard, border: `1px solid ${hov ? f.color + '44' : T.border}`, borderRadius: 14, padding: isMobile ? 16 : 24, transition: 'all 0.2s ease', cursor: 'default', boxShadow: hov ? `0 0 24px ${f.color}22` : 'none' }}>
      <div style={{ width: 36, height: 36, background: `${f.color}18`, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, color: f.color, marginBottom: 12, border: `1px solid ${f.color}33` }}>{f.icon}</div>
      <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: isMobile ? 13 : 15, color: T.white, marginBottom: 6 }}>{f.title}</div>
      <div style={{ fontSize: isMobile ? 12 : 13, color: T.muted, lineHeight: 1.6 }}>{f.desc}</div>
    </div>
  );
}

// ── Benefits ─────────────────────────────────────────────────
function BenefitsSection() {
  const isMobile = useMobile();
  const benefits = [
    { icon: '🛡', title: 'Mais segurança', sub: 'para todos', desc: 'Cada entrada e saída é registrada e verificada. Zero brechas, máxima rastreabilidade.', color: T.cyan },
    { icon: '🧘', title: 'Mais tranquilidade', sub: 'para as pessoas', desc: 'Notificações em tempo real para famílias, moradores e colaboradores. Confiança sempre.', color: T.indigo },
    { icon: '📊', title: 'Mais controle', sub: 'para a gestão', desc: 'Relatórios, dashboards e histórico completo de todas as movimentações do ambiente.', color: T.green },
    { icon: '⚡', title: 'Menos processos', sub: 'manuais', desc: 'Automatize cadastros, autorizações e registros. Sua equipe foca no que importa.', color: '#F59E0B' },
  ];
  return (
    <section style={{ padding: isMobile ? '72px 20px' : '100px 40px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 800, height: 400, background: `radial-gradient(ellipse, rgba(129,140,248,0.07) 0%, transparent 70%)`, pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 60, alignItems: 'center' }}>
          <div>
            <SPBadge color="green">Benefícios</SPBadge>
            <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 30 : 42, letterSpacing: '-0.03em', color: T.white, margin: '20px 0 16px', lineHeight: 1.1 }}>
              Mais do que controle. Conexão.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted, lineHeight: 1.7, marginBottom: 32 }}>
              Uma solução para proteger pessoas, otimizar processos e criar experiências inteligentes em qualquer ambiente.
            </p>
            <SPBtn variant="primary" size="md">Ver como funciona →</SPBtn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: isMobile ? 12 : 16 }}>
            {benefits.map(b => (
              <div key={b.title} style={{ background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 14, padding: isMobile ? 16 : 24 }}>
                <div style={{ fontSize: isMobile ? 20 : 24, marginBottom: 10 }}>{b.icon}</div>
                <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: isMobile ? 14 : 16, color: b.color }}>{b.title}</div>
                <div style={{ fontSize: 12, fontWeight: 500, color: T.mutedLt, marginBottom: 6 }}>{b.sub}</div>
                <div style={{ fontSize: isMobile ? 12 : 13, color: T.muted, lineHeight: 1.6 }}>{b.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Profiles ─────────────────────────────────────────────────
function ProfilesSection() {
  const [seg, setSeg] = React.useState('educacao');
  const [active, setActive] = React.useState(0);
  const isMobile = useMobile();

  const profilesBySeg = {
    educacao: [
      { name: 'Administrador', color: T.cyan,   access: 'Acesso completo',     icon: '👑',
        perms: ['Dashboard geral', 'Configurações do sistema', 'Gestão de usuários', 'Relatórios avançados', 'Integrações e API', 'White-label'] },
      { name: 'Diretoria',     color: T.indigo, access: 'Acesso amplo',        icon: '🏫',
        perms: ['Dashboard operacional', 'Relatórios e histórico', 'Gestão de eventos', 'Autorização de acessos', 'Notificações'] },
      { name: 'Funcionário',   color: T.green,  access: 'Acesso operacional',  icon: '👤',
        perms: ['Registrar entradas/saídas', 'Consultar responsáveis', 'Verificar autorizações', 'Notificar ocorrências'] },
      { name: 'Responsável',   color: '#F59E0B', access: 'Acesso restrito',   icon: '👨‍👩‍👧',
        perms: ['Ver dados do filho', 'Receber notificações', 'Autorizar retiradas', 'Histórico pessoal'] },
    ],
    condominio: [
      { name: 'Administrador', color: T.cyan,   access: 'Acesso completo',    icon: '🛠',
        perms: ['Configurações gerais', 'Gestão de unidades', 'Integrações e API', 'Relatórios financeiros', 'Backup e auditoria', 'White-label'] },
      { name: 'Síndico',       color: T.indigo, access: 'Gestão condominial', icon: '🔑',
        perms: ['Aprovar moradores', 'Reservas e ocorrências', 'Comunicados', 'Relatórios mensais', 'Painel de equipamentos'] },
      { name: 'Porteiro',      color: T.green,  access: 'Operacional',        icon: '👮',
        perms: ['Registrar visitantes', 'Click Aprova', 'Receber entregas', 'Ocorrências em tempo real', 'Câmeras ao vivo'] },
      { name: 'Morador',       color: '#F59E0B', access: 'Acesso restrito',   icon: '🏠',
        perms: ['Abertura remota', 'Convites por QR Code', 'Reservar áreas comuns', 'Receber notificações', 'Boletos e documentos'] },
    ],
  };

  const profiles = profilesBySeg[seg];
  const p = profiles[active] || profiles[0];

  const handleSeg = (s) => { setSeg(s); setActive(0); };

  return (
    <section style={{ padding: isMobile ? '72px 20px' : '100px 40px', background: T.bgSurface }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <SPBadge color="cyan">Perfis de usuário</SPBadge>
          <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 30 : 44, letterSpacing: '-0.03em', color: T.white, margin: '16px 0 12px' }}>Para cada papel, o acesso certo</h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted }}>Permissões que se adaptam à realidade de cada ambiente.</p>
        </div>

        {/* Segment toggle */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 36 }}>
          <div style={{ display: 'inline-flex', gap: 4, background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 100, padding: 5 }}>
            {[['educacao', '🏫 Educação', T.cyan], ['condominio', '🏢 Condomínio', T.indigo]].map(([key, lbl, col]) => (
              <button key={key} onClick={() => handleSeg(key)} style={{
                background: seg === key ? `${col}22` : 'transparent',
                border: `1px solid ${seg === key ? col + '55' : 'transparent'}`,
                borderRadius: 100, padding: isMobile ? '7px 14px' : '8px 20px', cursor: 'pointer',
                color: seg === key ? col : T.mutedLt, fontWeight: 600, fontSize: isMobile ? 12 : 13,
                fontFamily: 'Inter, sans-serif', transition: 'all 0.18s',
              }}>{lbl}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: 24, alignItems: 'start' }}>
          {/* Profile selector */}
          <div style={{ display: isMobile ? 'grid' : 'flex', gridTemplateColumns: isMobile ? '1fr 1fr' : undefined, flexDirection: isMobile ? undefined : 'column', gap: 10 }}>
            {profiles.map((pr, i) => (
              <div key={pr.name} onClick={() => setActive(i)} style={{ background: active === i ? `${pr.color}18` : T.bgCard, border: `1px solid ${active === i ? pr.color + '55' : T.border}`, borderRadius: 12, padding: isMobile ? '12px 14px' : '16px 20px', cursor: 'pointer', transition: 'all 0.2s', display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 18 }}>{pr.icon}</span>
                <div>
                  <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: isMobile ? 13 : 15, color: active === i ? pr.color : T.white }}>{pr.name}</div>
                  <div style={{ fontSize: 11, color: T.muted }}>{pr.access}</div>
                </div>
              </div>
            ))}
          </div>
          {/* Permission detail */}
          <div style={{ background: T.bgCard, border: `1px solid ${p.color}33`, borderRadius: 16, padding: isMobile ? 20 : 32, boxShadow: `0 0 40px ${p.color}15` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
              <div style={{ width: 44, height: 44, background: `${p.color}22`, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>{p.icon}</div>
              <div>
                <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 18 : 22, color: T.white }}>{p.name}</div>
                <SPBadge color={active === 0 ? 'cyan' : active === 1 ? 'indigo' : active === 2 ? 'green' : 'cyan'}>{p.access}</SPBadge>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 10 }}>
              {p.perms.map(perm => (
                <div key={perm} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: isMobile ? 13 : 14, color: T.mutedLt }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: `${p.color}22`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5l2.5 2.5 3.5-4" stroke={p.color} strokeWidth="1.5" strokeLinecap="round" fill="none"/></svg>
                  </div>
                  {perm}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Segments ─────────────────────────────────────────────────
function SegmentsSection({ onNavigate }) {
  const [active, setActive] = React.useState(0);
  const isMobile = useMobile();
  const segments = [
    {
      tag: 'Educação',
      icon: '🏫',
      color: T.cyan,
      title: 'Escolas mais seguras e conectadas',
      desc: 'Controle escolar inteligente, entrada e saída de alunos, responsáveis autorizados, notificações em tempo real, eventos e gestão integrada.',
      bullets: ['Entrada e saída de alunos', 'Responsáveis autorizados', 'Eventos e atividades', 'App para famílias'],
    },
    {
      tag: 'Condomínios',
      icon: '🏢',
      color: T.indigo,
      title: 'Portaria inteligente e automação',
      desc: 'Reconhecimento facial, controle de veículos, visitantes, QR Code, automação e monitoramento em tempo real.',
      bullets: ['Reconhecimento facial', 'Controle de veículos', 'Visitantes e QR Code', 'Automação e CFTV'],
    },
    {
      tag: 'Empresas',
      icon: '🏭',
      color: T.green,
      title: 'Ambientes corporativos sob controle',
      desc: 'Controle de colaboradores, visitantes, credenciais temporárias e gestão de acessos a salas, andares e perímetros.',
      bullets: ['Colaboradores e visitantes', 'Credenciais temporárias', 'Salas e perímetros', 'Integração com RH'],
    },
  ];

  return (
    <section style={{ padding: isMobile ? '72px 20px' : '100px 40px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '20%', left: '10%', width: 400, height: 400, background: `radial-gradient(ellipse, rgba(6,182,212,0.08) 0%, transparent 70%)`, pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <SPBadge color="indigo">Segmentos</SPBadge>
          <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 28 : 44, letterSpacing: '-0.03em', color: T.white, margin: '16px 0 12px' }}>Uma plataforma. Múltiplos mundos.</h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted, maxWidth: 560, margin: '0 auto' }}>A LinkPass adapta-se ao seu ambiente — da escola ao corporativo, do condomínio ao espaço público.</p>
        </div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 32, flexWrap: 'wrap' }}>
          {segments.map((s, i) => (
            <button key={s.tag} onClick={() => setActive(i)} style={{
              padding: isMobile ? '10px 18px' : '12px 24px', borderRadius: 100,
              border: `1px solid ${active === i ? s.color + '66' : T.border}`,
              background: active === i ? `${s.color}18` : T.bgCard,
              color: active === i ? s.color : T.mutedLt,
              fontSize: isMobile ? 13 : 14, fontWeight: 600, cursor: 'pointer',
              transition: 'all 0.2s', fontFamily: 'Inter, sans-serif',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{ fontSize: 16 }}>{s.icon}</span> {s.tag}
            </button>
          ))}
        </div>
        <div style={{ background: T.bgCard, border: `1px solid ${segments[active].color}33`, borderRadius: 20, padding: isMobile ? 24 : 48, boxShadow: `0 0 60px ${segments[active].color}15`, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 28 : 48, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 32, marginBottom: 14 }}>{segments[active].icon}</div>
            <h3 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 22 : 32, color: T.white, lineHeight: 1.15, marginBottom: 14 }}>{segments[active].title}</h3>
            <p style={{ fontSize: isMobile ? 14 : 16, color: T.mutedLt, lineHeight: 1.7, marginBottom: 24 }}>{segments[active].desc}</p>
            <SPBtn variant="outline" size="md" onClick={() => onNavigate('servicos')}>Ver detalhes →</SPBtn>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: isMobile ? 10 : 12 }}>
            {segments[active].bullets.map(b => (
              <div key={b} style={{ background: T.bgSurface, border: `1px solid ${T.border}`, borderRadius: 12, padding: isMobile ? '14px 16px' : '18px 20px', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: segments[active].color, boxShadow: `0 0 8px ${segments[active].color}`, flexShrink: 0 }} />
                <span style={{ fontSize: isMobile ? 13 : 14, color: T.white, fontWeight: 500 }}>{b}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Manifesto ─────────────────────────────────────────────────
function ManifestoSection() {
  const isMobile = useMobile();
  const lines = [
    { text: 'Todo lugar possui entradas.', tone: 'muted' },
    { text: 'Mas poucas empresas enxergam o que existe além delas.', tone: 'muted' },
    { text: 'Nós enxergamos conexões.', tone: 'highlight' },
    { text: 'Acreditamos que segurança não deve ser complicada.', tone: 'normal' },
    { text: 'Que tecnologia deve aproximar pessoas.', tone: 'normal' },
    { text: 'E que acesso inteligente significa liberdade, organização e tranquilidade.', tone: 'normal' },
    { text: 'Criamos a LinkPass para integrar mundos.', tone: 'highlight' },
    { text: 'Porque conectar é mais poderoso do que apenas permitir entrada.', tone: 'muted' },
  ];
  return (
    <section style={{ padding: isMobile ? '80px 20px' : '120px 40px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 900, height: 500, background: `radial-gradient(ellipse, rgba(6,182,212,0.08) 0%, transparent 70%)`, pointerEvents: 'none' }} />
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 12 : 16 }}>
          {lines.map((l, i) => {
            const hi = l.tone === 'highlight';
            return (
              <div key={i} style={{
                fontFamily: "'Plus Jakarta Sans', sans-serif",
                fontWeight: hi ? 800 : 500,
                fontSize: hi ? (isMobile ? 22 : 32) : (isMobile ? 16 : 22),
                lineHeight: 1.35,
                letterSpacing: '-0.02em',
                color: hi ? 'transparent' : (l.tone === 'muted' ? T.muted : T.white),
                background: hi ? `linear-gradient(135deg, ${T.cyan}, ${T.indigo})` : 'none',
                WebkitBackgroundClip: hi ? 'text' : 'unset',
                WebkitTextFillColor: hi ? 'transparent' : 'unset',
                textWrap: 'balance',
              }}>{l.text}</div>
            );
          })}
        </div>
        <div style={{ marginTop: isMobile ? 40 : 56, display: 'inline-flex', alignItems: 'center', gap: isMobile ? 14 : 24, padding: isMobile ? '14px 24px' : '20px 36px', border: `1px solid ${T.border}`, borderRadius: 100, background: T.bgCard }}>
          <span style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 15 : 18, color: T.white }}>LinkPass.</span>
          <span style={{ width: 4, height: 4, borderRadius: '50%', background: T.muted }} />
          <span style={{ fontSize: isMobile ? 12 : 14, color: T.cyan, fontWeight: 600, letterSpacing: '0.05em' }}>Conecta. Integra. Acessa.</span>
        </div>
      </div>
    </section>
  );
}

// ── White-label ──────────────────────────────────────────────
function WhiteLabelSection() {
  const [theme, setTheme] = React.useState(0);
  const isMobile = useMobile();
  const themes = [
    { name: 'Escola Alpha', primary: '#06B6D4', secondary: '#818CF8', logo: 'A', kind: 'Educação' },
    { name: 'Condomínio Vista', primary: '#10B981', secondary: '#06B6D4', logo: 'V', kind: 'Condomínio' },
    { name: 'Acme Corp', primary: '#F43F5E', secondary: '#818CF8', logo: 'A', kind: 'Empresa' },
  ];
  const t = themes[theme];
  return (
    <section style={{ padding: isMobile ? '72px 20px' : '100px 40px', background: T.bgDeep }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 36 : 64, alignItems: 'center' }}>
          <div>
            <SPBadge color="indigo">White-label</SPBadge>
            <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 28 : 40, letterSpacing: '-0.03em', color: T.white, margin: '20px 0 14px', lineHeight: 1.15 }}>A plataforma com a cara do seu ambiente</h2>
            <p style={{ fontSize: isMobile ? 14 : 16, color: T.muted, lineHeight: 1.7, marginBottom: 24 }}>Personalize cores, logo e identidade visual. Seus usuários veem a marca da instituição — escola, condomínio ou empresa —, não a nossa.</p>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {themes.map((th, i) => (
                <button key={th.name} onClick={() => setTheme(i)} style={{ padding: '8px 14px', borderRadius: 8, border: `1px solid ${theme === i ? th.primary : T.border}`, background: theme === i ? `${th.primary}18` : T.bgCard, color: theme === i ? th.primary : T.muted, fontSize: 12, fontWeight: 600, cursor: 'pointer', transition: 'all 0.2s' }}>{th.name}</button>
              ))}
            </div>
          </div>
          {/* Live preview */}
          <div style={{ background: T.bgCard, borderRadius: 16, border: `1px solid ${t.primary}33`, overflow: 'hidden', boxShadow: `0 0 40px ${t.primary}20` }}>
            <div style={{ background: `linear-gradient(135deg, ${t.primary}22, ${t.secondary}22)`, padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${T.border}` }}>
              <div style={{ width: 36, height: 36, background: t.primary, borderRadius: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 16, color: '#07091A' }}>{t.logo}</div>
              <span style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 16, color: T.white }}>{t.name}</span>
            </div>
            <div style={{ padding: 18 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
                {[`${t.kind} • ${t.name}`, 'Acessos hoje: 342', 'Alertas: 3', 'Visitantes: 7'].map(s => (
                  <div key={s} style={{ background: T.bgSurface, borderRadius: 8, padding: '12px 14px', fontSize: 12, color: T.mutedLt }}>{s}</div>
                ))}
              </div>
              <button style={{ width: '100%', padding: '10px', borderRadius: 8, background: t.primary, border: 'none', color: '#07091A', fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>Registrar acesso</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── CTA ──────────────────────────────────────────────────────
function HomeCTA({ onNavigate }) {
  const isMobile = useMobile();
  return (
    <section style={{ padding: isMobile ? '72px 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(6,182,212,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 : 48, letterSpacing: '-0.03em', color: T.white, marginBottom: 16, lineHeight: 1.1 }}>
          Leve mais segurança e conexão para o seu ambiente.
        </h2>
        <p style={{ fontSize: isMobile ? 15 : 18, color: T.muted, marginBottom: 32 }}>Solicite uma demonstração e descubra como transformar o acesso da sua instituição.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <SPBtn variant="primary" size={isMobile ? 'md' : 'lg'} onClick={() => onNavigate('contato')}>Agendar demonstração</SPBtn>
          <SPBtn variant="dark" size={isMobile ? 'md' : 'lg'} onClick={() => onNavigate('servicos')}>Ver todos os recursos</SPBtn>
        </div>
      </div>
    </section>
  );
}

// ── Home Page ────────────────────────────────────────────────
function HomePage({ onNavigate }) {
  return (
    <>
      <HomeHero onNavigate={onNavigate} />
      <SegmentsSection onNavigate={onNavigate} />
      <FeaturesSection />
      <BenefitsSection />
      <ProfilesSection />
      <WhiteLabelSection />
      <ManifestoSection />
      <HomeCTA onNavigate={onNavigate} />
    </>
  );
}
Object.assign(window, { HomePage });