// LinkPass — Serviços, Sobre, Projetos, Contato Pages

// ═══════════════════════════════════════════════════════════
// SERVIÇOS EDUCAÇÃO
// ═══════════════════════════════════════════════════════════
function ServicosEducacaoPage({ onNavigate }) {
  const isMobile = useMobile();
  const services = [
    {
      icon: '⬡', color: T.cyan, title: 'Controle de Entrada e Saída',
      desc: 'Sistema completo de registro e monitoramento de todos que entram e saem da escola. Funciona com QR Code, biometria facial, cartão RFID ou aplicativo mobile.',
      items: ['Registro em tempo real', 'Histórico completo', 'Relatórios automáticos', 'Alertas instantâneos', 'Integração com catracas'],
    },
    {
      icon: '◎', color: T.indigo, title: 'Cadastro de Responsáveis Autorizados',
      desc: 'Gerencie quem pode retirar cada aluno com segurança máxima. Foto, documento e permissões personalizadas por responsável.',
      items: ['Foto e biometria do responsável', 'Documento com OCR automático', 'Permissões por horário', 'Autorização temporária', 'Notificação ao retirar'],
    },
    {
      icon: '⬢', color: T.green, title: 'Acesso a Espaços Internos',
      desc: 'Controle quem acessa cada ambiente da escola — biblioteca, laboratórios, salas especiais, quadras e auditórios.',
      items: ['Mapa interativo da escola', 'Regras por turno e turma', 'Ocupação em tempo real', 'Bloqueio remoto', 'Log de entradas por sala'],
    },
    {
      icon: '◈', color: '#F59E0B', title: 'Agendamento de Eventos',
      desc: 'Organize qualquer atividade extracurricular com controle de participação, lista de presença digital e notificações automáticas.',
      items: ['Calendário integrado', 'Inscrições online', 'Lista de presença digital', 'Controle de capacidade', 'Comunicados automáticos'],
    },
    {
      icon: '◉', color: T.cyan, title: 'Perfis e Permissões',
      desc: 'Sistema granular de controle de acesso ao software. Cada usuário vê e faz apenas o que é de sua responsabilidade.',
      items: ['4 perfis padrão', 'Permissões customizáveis', 'Autenticação multifator', 'Log de ações', 'Revogação instantânea'],
    },
    {
      icon: '◍', color: T.indigo, title: 'Dashboard Administrativo',
      desc: 'Visão unificada de toda a movimentação escolar. Gráficos, alertas e relatórios para tomada de decisão em tempo real.',
      items: ['Painel em tempo real', 'Gráficos interativos', 'Exportação em PDF/Excel', 'Comparativos históricos', 'Alertas configuráveis'],
    },
    {
      icon: '◬', color: T.green, title: 'Notificações Inteligentes',
      desc: 'Alertas automáticos por app, SMS e e-mail para responsáveis e gestores. Comunicação instantânea em qualquer situação.',
      items: ['Push notification', 'SMS e WhatsApp', 'Templates customizáveis', 'Filtros por evento', 'Confirmação de leitura'],
    },
    {
      icon: '◫', color: '#F59E0B', title: 'Plataforma White-Label',
      desc: 'A escola usa a plataforma com sua própria marca. Logo, cores, domínio e aplicativo personalizado para cada instituição.',
      items: ['Logo e cores da escola', 'Domínio próprio', 'App mobile personalizado', 'E-mails com marca', 'Portal para responsáveis'],
    },
  ];

  return (
    <>
      {/* Hero */}
      <section style={{ padding: isMobile ? '110px 20px 60px' : '140px 40px 80px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)', width: 700, height: 300, background: `radial-gradient(ellipse, rgba(6,182,212,0.1) 0%, transparent 70%)`, pointerEvents: 'none' }} />
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
          <SPBadge color="cyan">🏫 Educação</SPBadge>
          <h1 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 36 : 56, letterSpacing: '-0.03em', color: T.white, margin: '20px 0 16px', lineHeight: 1.1 }}>
            Oito módulos para a sua escola.
          </h1>
          <p style={{ fontSize: isMobile ? 15 : 18, color: T.muted, lineHeight: 1.7, maxWidth: 540, margin: '0 auto 32px' }}>
            Cada recurso foi pensado para resolver um problema real da gestão escolar — integrados e prontos para usar.
          </p>
          <SPBtn variant="primary" size={isMobile ? 'md' : 'lg'} onClick={() => onNavigate('contato')}>Solicitar demonstração</SPBtn>
        </div>
      </section>

      {/* Facial Recognition Demo */}
      <FacialRecognitionDemo />

      {/* Services grid */}
      <section style={{ padding: isMobile ? '48px 20px 72px' : '80px 40px 100px', background: T.bgSurface }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 16 : 24 }}>
            {services.map(s => (
              <ServiceCard key={s.title} s={s} isMobile={isMobile} />
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function ServiceCard({ s, 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 ? s.color + '44' : T.border}`, borderRadius: 16, padding: isMobile ? 20 : 32, transition: 'all 0.22s ease', boxShadow: hov ? `0 0 30px ${s.color}15` : 'none' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 14 }}>
        <div style={{ width: 44, height: 44, background: `${s.color}18`, border: `1px solid ${s.color}33`, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, color: s.color, flexShrink: 0 }}>{s.icon}</div>
        <div>
          <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 16 : 18, color: T.white, marginBottom: 6 }}>{s.title}</div>
          <div style={{ fontSize: isMobile ? 13 : 14, color: T.muted, lineHeight: 1.6 }}>{s.desc}</div>
        </div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>
        {s.items.map(item => (
          <span key={item} style={{ fontSize: 12, padding: '4px 10px', borderRadius: 100, background: `${s.color}12`, color: s.color, border: `1px solid ${s.color}28`, fontWeight: 500 }}>{item}</span>
        ))}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// SOBRE
// ═══════════════════════════════════════════════════════════
function SobrePage({ onNavigate }) {
  const isMobile = useMobile();

  const values = [
    { icon: '🔗', title: 'Conexão antes de tudo', desc: 'Não entregamos catracas ou software. Criamos pontes entre pessoas, espaços e tecnologia.' },
    { icon: '🛡', title: 'Segurança simples', desc: 'Acreditamos que tecnologia de segurança deve ser invisível para quem usa e poderosa para quem gerencia.' },
    { icon: '⚡', title: 'Integração real', desc: 'Conectamos hardware, software e processos em uma única experiência — sem complicação.' },
    { icon: '🌱', title: 'Evolução contínua', desc: 'A plataforma cresce com nossos clientes. Cada feedback se transforma em uma nova conexão possível.' },
  ];


  return (
    <>
      {/* Hero */}
      <section style={{ padding: isMobile ? '110px 20px 60px' : '140px 40px 80px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '50%', right: '5%', width: 500, height: 400, background: `radial-gradient(ellipse, rgba(129,140,248,0.1) 0%, transparent 70%)`, pointerEvents: 'none' }} />
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 36 : 60, alignItems: 'center', position: 'relative' }}>
          <div>
            <SPBadge color="indigo">Nossa história</SPBadge>
            <h1 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 34 : 52, letterSpacing: '-0.03em', color: T.white, margin: '20px 0 18px', lineHeight: 1.1 }}>
              Criamos a LinkPass para integrar mundos.
            </h1>
            <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted, lineHeight: 1.75, marginBottom: 16 }}>
              Acreditamos que acesso não é apenas abrir portas. É criar conexões — entre pessoas, espaços e tecnologia.
            </p>
            <p style={{ fontSize: isMobile ? 15 : 17, color: T.muted, lineHeight: 1.75, marginBottom: 28 }}>
              Conectamos pessoas aos lugares certos, no momento certo, com inteligência, automação e simplicidade.
            </p>
          </div>
          <div style={{ background: T.bgCard, borderRadius: 20, border: `1px solid ${T.border}`, padding: isMobile ? 24 : 36 }}>
            <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: isMobile ? 16 : 18, color: T.white, marginBottom: 8 }}>Nosso propósito</div>
            <p style={{ fontSize: isMobile ? 14 : 15, color: T.mutedLt, lineHeight: 1.75, marginBottom: 20 }}>
              "Tornar ambientes mais seguros, inteligentes e integrados através da tecnologia."
            </p>
            <div style={{ height: 1, background: T.border, marginBottom: 20 }} />
            <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: isMobile ? 16 : 18, color: T.white, marginBottom: 8 }}>Nossa visão</div>
            <p style={{ fontSize: isMobile ? 14 : 15, color: T.mutedLt, lineHeight: 1.75 }}>
              "Ser referência nacional em soluções integradas de acesso inteligente, conectando tecnologia e pessoas em qualquer ambiente."
            </p>
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ padding: isMobile ? '60px 20px' : '90px 40px', background: T.bgSurface }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <SPBadge color="green">Valores</SPBadge>
            <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 28 : 40, color: T.white, margin: '16px 0' }}>O que nos guia</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 14 : 20 }}>
            {values.map(v => (
              <div key={v.title} style={{ background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 14, padding: isMobile ? 20 : 28 }}>
                <div style={{ fontSize: isMobile ? 22 : 28, marginBottom: 12 }}>{v.icon}</div>
                <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 700, fontSize: isMobile ? 14 : 16, color: T.white, marginBottom: 8 }}>{v.title}</div>
                <div style={{ fontSize: isMobile ? 12 : 14, color: T.muted, lineHeight: 1.65 }}>{v.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

    </>
  );
}

// ═══════════════════════════════════════════════════════════
// PROJETOS
// ═══════════════════════════════════════════════════════════
function ProjetosPage({ onNavigate }) {
  const [filter, setFilter] = React.useState('Todos');
  const isMobile = useMobile();
  const tags = ['Todos', 'Educação', 'Condomínios', 'Empresas'];

  const projects = [
    { title: 'Rede Estadual SP', tag: 'Educação', color: T.cyan, desc: 'Implantação em 42 unidades escolares com controle centralizado de acesso, relatórios consolidados e painel por unidade.', result: '42 unidades • 18.000 alunos', stats: [['98%', 'Satisfação'], ['40%', 'Menos ocorrências'], ['3min', 'Tempo de entrada']] },
    { title: 'Condomínio Vista Park', tag: 'Condomínios', color: T.indigo, desc: 'Portaria inteligente com reconhecimento facial, controle de veículos por placa e gestão de visitantes via QR Code para 480 unidades residenciais.', result: '480 unidades • 1.500 moradores', stats: [['Zero', 'Filas na portaria'], ['98%', 'Visitantes via QR'], ['24/7', 'Monitoramento']] },
    { title: 'Acme Tech HQ', tag: 'Empresas', color: T.green, desc: 'Sede corporativa com 6 andares, controle de colaboradores por crachá RFID, credenciais temporárias para visitantes e integração com SAP HR.', result: '1.200 colaboradores • 6 andares', stats: [['SSO + RFID', 'Integrado'], ['100%', 'Conformidade LGPD'], ['Real-time', 'Ocupação']] },
    { title: 'Colégio Salesiano', tag: 'Educação', color: T.cyan, desc: 'Plataforma white-label com app mobile personalizado, portal para responsáveis e integração com sistema acadêmico existente.', result: '1.200 alunos • App próprio', stats: [['95%', 'Pais notificados'], ['Zero', 'Retiradas não autorizadas'], ['4.8★', 'App Store']] },
    { title: 'Residencial Marina Bay', tag: 'Condomínios', color: T.indigo, desc: 'Condomínio de luxo à beira-mar com controle de acesso às áreas comuns, reserva de espaços e automação integrada à iluminação e CFTV.', result: '120 unidades • Alto padrão', stats: [['12 áreas', 'Comuns conectadas'], ['App próprio', 'Para moradores'], ['Zero', 'Incidentes']] },
    { title: 'TechHub Coworking', tag: 'Empresas', color: T.green, desc: 'Espaço compartilhado com 80 salas e credenciais temporárias por hora, integração com sistema de cobrança e app para reserva de espaços.', result: '80 salas • 1.500 membros', stats: [['Por hora', 'Faturamento'], ['App próprio', 'Para reservas'], ['Auto-checkin', 'Sem recepção']] },
  ];

  const filtered = filter === 'Todos' ? projects : projects.filter(p => p.tag === filter);

  return (
    <>
      <section style={{ padding: isMobile ? '110px 20px 40px' : '140px 40px 60px', background: T.bgDeep }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <SPBadge color="green">Casos de uso</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 }}>
            Ambientes que se transformaram em conexões.
          </h1>
          <p style={{ fontSize: isMobile ? 15 : 18, color: T.muted, lineHeight: 1.7, maxWidth: 540, margin: '0 auto' }}>
            Escolas, condomínios e empresas que modernizaram sua gestão de acesso com a LinkPass.
          </p>
        </div>
      </section>

      <section style={{ padding: isMobile ? '20px 20px 72px' : '20px 40px 100px', background: T.bgSurface }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          {/* Filter */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}>
            {tags.map(t => (
              <button key={t} onClick={() => setFilter(t)} style={{ padding: '8px 16px', borderRadius: 100, border: `1px solid ${filter === t ? T.cyan : T.border}`, background: filter === t ? T.cyanDim : T.bgCard, color: filter === t ? T.cyan : T.muted, fontSize: 13, fontWeight: 500, cursor: 'pointer', transition: 'all 0.18s', fontFamily: 'Inter, sans-serif' }}>{t}</button>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 16 : 20 }}>
            {filtered.map(p => (
              <ProjectCard key={p.title} p={p} isMobile={isMobile} />
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function ProjectCard({ p, 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 ? p.color + '44' : T.border}`, borderRadius: 16, padding: isMobile ? 20 : 28, transition: 'all 0.22s', boxShadow: hov ? `0 0 28px ${p.color}18` : 'none', cursor: 'default' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
        <span style={{ fontSize: 11, padding: '3px 10px', borderRadius: 100, background: `${p.color}18`, color: p.color, fontWeight: 600, letterSpacing: '0.05em' }}>{p.tag}</span>
      </div>
      <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 17 : 20, color: T.white, marginBottom: 8 }}>{p.title}</div>
      <div style={{ fontSize: isMobile ? 12 : 13, color: T.muted, lineHeight: 1.65, marginBottom: 14 }}>{p.desc}</div>
      <div style={{ fontSize: 12, color: p.color, fontWeight: 600, marginBottom: 14 }}>{p.result}</div>
      <div style={{ display: 'flex', gap: 8, borderTop: `1px solid ${T.border}`, paddingTop: 14 }}>
        {p.stats.map(([val, label]) => (
          <div key={label} style={{ flex: 1, textAlign: 'center' }}>
            <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 12 : 14, color: T.white }}>{val}</div>
            <div style={{ fontSize: 10, color: T.muted, marginTop: 2 }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// CONTATO
// ═══════════════════════════════════════════════════════════
function ContatoPage() {
  const [form, setForm] = React.useState({ nome: '', email: '', organizacao: '', telefone: '', cnpj: '', segmento: '', tamanho: '', mensagem: '' });
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [erro, setErro] = React.useState('');
  const isMobile = useMobile();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setErro('');
    try {
      const res = await fetch('https://formspree.io/f/mpqndbkw', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          nome: form.nome,
          email: form.email,
          organizacao: form.organizacao,
          telefone: form.telefone,
          cnpj: form.cnpj,
          segmento: form.segmento,
          tamanho: form.tamanho,
          mensagem: form.mensagem,
        }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        setErro('Erro ao enviar. Tente novamente em instantes.');
      }
    } catch (err) {
      setErro('Erro de conexão. Verifique sua internet e tente novamente.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <section style={{ padding: isMobile ? '110px 20px 60px' : '140px 40px 80px', background: T.bgDeep, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '40%', right: '5%', width: 500, height: 400, background: `radial-gradient(ellipse, rgba(6,182,212,0.1) 0%, transparent 70%)`, pointerEvents: 'none' }} />
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 60, alignItems: 'start', position: 'relative' }}>
          {/* Left info */}
          <div style={{ order: isMobile ? 2 : 0 }}>
            <SPBadge color="cyan">Fale conosco</SPBadge>
            <h1 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 34 : 50, letterSpacing: '-0.03em', color: T.white, margin: '20px 0 18px', lineHeight: 1.1 }}>
              Vamos conectar o seu ambiente.
            </h1>
            <p style={{ fontSize: isMobile ? 15 : 16, color: T.muted, lineHeight: 1.75, marginBottom: 36 }}>
              Agende uma demonstração gratuita e veja como a LinkPass pode integrar segurança, gestão e tecnologia no seu espaço em menos de 30 dias.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              {[
                { icon: '📍', label: 'Localização', value: 'Belém, PA — Brasil' },
                { icon: '✉️', label: 'E-mail', value: 'contato@linkpasstech.com.br' },
                { icon: '📞', label: 'Telefone', value: '(91) 98942-8497' },
                { icon: '🕐', label: 'Atendimento', value: 'Seg–Sex, 8h às 18h' },
              ].map(item => (
                <div key={item.label} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 40, height: 40, background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>{item.icon}</div>
                  <div>
                    <div style={{ fontSize: 11, color: T.muted, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.07em' }}>{item.label}</div>
                    <div style={{ fontSize: 14, color: T.white, marginTop: 2 }}>{item.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Form */}
          <div style={{ background: T.bgCard, border: `1px solid ${T.border}`, borderRadius: 20, padding: isMobile ? 24 : 40, order: isMobile ? 1 : 0 }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{ fontSize: 56, marginBottom: 16 }}>✅</div>
                <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: 24, color: T.white, marginBottom: 10 }}>Mensagem enviada!</div>
                <p style={{ color: T.muted, fontSize: 15, lineHeight: 1.65 }}>Nosso time entrará em contato em até 1 dia útil para agendar sua demonstração.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontWeight: 800, fontSize: isMobile ? 20 : 22, color: T.white, marginBottom: 22 }}>Agende uma demonstração</div>
                {[
                  { id: 'nome', label: 'Nome completo', placeholder: 'Seu nome', type: 'text' },
                  { id: 'email', label: 'E-mail profissional', placeholder: 'voce@empresa.com.br', type: 'email' },
                  { id: 'organizacao', label: 'Nome da sua empresa', placeholder: 'Razão social ou nome fantasia', type: 'text' },
                  { id: 'telefone', label: 'Telefone', placeholder: '(00) 00000-0000', type: 'tel' },
                  { id: 'cnpj', label: 'CNPJ', placeholder: '00.000.000/0001-00', type: 'text' },
                ].map(field => (
                  <div key={field.id} style={{ marginBottom: 14 }}>
                    <label style={{ fontSize: 12, fontWeight: 600, color: T.muted, textTransform: 'uppercase', letterSpacing: '0.07em', display: 'block', marginBottom: 6 }}>{field.label}</label>
                    <input type={field.type} placeholder={field.placeholder} required value={form[field.id]} onChange={e => setForm(f => ({ ...f, [field.id]: e.target.value }))}
                      style={{ width: '100%', background: T.bgSurface, border: `1px solid ${T.border}`, borderRadius: 9, padding: '11px 14px', fontSize: 14, color: T.white, fontFamily: 'Inter, sans-serif', outline: 'none', transition: 'border 0.15s', boxSizing: 'border-box' }}
                      onFocus={e => e.target.style.borderColor = T.cyan} onBlur={e => e.target.style.borderColor = T.border} />
                  </div>
                ))}
                <div style={{ marginBottom: 14 }}>
                  <label style={{ fontSize: 12, fontWeight: 600, color: T.muted, textTransform: 'uppercase', letterSpacing: '0.07em', display: 'block', marginBottom: 6 }}>Segmento</label>
                  <select value={form.segmento} onChange={e => setForm(f => ({ ...f, segmento: e.target.value }))} style={{ width: '100%', background: T.bgSurface, border: `1px solid ${T.border}`, borderRadius: 9, padding: '11px 14px', fontSize: 14, color: form.segmento ? T.white : T.muted, fontFamily: 'Inter, sans-serif', outline: 'none', boxSizing: 'border-box' }}>
                    <option value="" style={{ background: T.bgSurface }}>Selecione...</option>
                    {['Educação', 'Condomínio', 'Empresa', 'Outro'].map(o => <option key={o} value={o} style={{ background: T.bgSurface }}>{o}</option>)}
                  </select>
                </div>
                <div style={{ marginBottom: 14 }}>
                  <label style={{ fontSize: 12, fontWeight: 600, color: T.muted, textTransform: 'uppercase', letterSpacing: '0.07em', display: 'block', marginBottom: 6 }}>Número de usuários</label>
                  <select value={form.tamanho} onChange={e => setForm(f => ({ ...f, tamanho: e.target.value }))} style={{ width: '100%', background: T.bgSurface, border: `1px solid ${T.border}`, borderRadius: 9, padding: '11px 14px', fontSize: 14, color: form.tamanho ? T.white : T.muted, fontFamily: 'Inter, sans-serif', outline: 'none', boxSizing: 'border-box' }}>
                    <option value="" style={{ background: T.bgSurface }}>Selecione...</option>
                    {['Até 500', '500–1.000', 'Mais de 1.000', 'Múltiplas unidades'].map(o => <option key={o} value={o} style={{ background: T.bgSurface }}>{o}</option>)}
                  </select>
                </div>
                <div style={{ marginBottom: 22 }}>
                  <label style={{ fontSize: 12, fontWeight: 600, color: T.muted, textTransform: 'uppercase', letterSpacing: '0.07em', display: 'block', marginBottom: 6 }}>Mensagem (opcional)</label>
                  <textarea placeholder="Conte um pouco sobre o que você precisa..." value={form.mensagem} onChange={e => setForm(f => ({ ...f, mensagem: e.target.value }))} rows={3}
                    style={{ width: '100%', background: T.bgSurface, border: `1px solid ${T.border}`, borderRadius: 9, padding: '11px 14px', fontSize: 14, color: T.white, fontFamily: 'Inter, sans-serif', outline: 'none', resize: 'vertical', boxSizing: 'border-box' }}
                    onFocus={e => e.target.style.borderColor = T.cyan} onBlur={e => e.target.style.borderColor = T.border} />
                </div>
                {erro && (
                  <div style={{ background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', borderRadius: 9, padding: '10px 14px', fontSize: 13, color: '#FCA5A5' }}>
                    {erro}
                  </div>
                )}
                <button type="submit" disabled={loading} style={{
                  width: '100%', background: loading ? '#0891B2' : T.cyan,
                  color: '#07091A', fontWeight: 700, fontSize: 15,
                  border: 'none', borderRadius: 10, padding: '14px 18px',
                  cursor: loading ? 'wait' : 'pointer',
                  fontFamily: 'Inter, sans-serif',
                  boxShadow: '0 0 20px rgba(6,182,212,0.3)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  transition: 'all 0.15s',
                }}>
                  {loading ? (
                    <>
                      <div style={{ width: 14, height: 14, border: '2px solid rgba(7,9,26,0.3)', borderTopColor: '#07091A', borderRadius: '50%', animation: 'lp-spin 0.7s linear infinite' }} />
                      Enviando...
                    </>
                  ) : 'Enviar solicitação →'}
                </button>
                <style>{`@keyframes lp-spin { to { transform: rotate(360deg) } }`}</style>
              </form>
            )}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ServicosEducacaoPage, SobrePage, ProjetosPage, ContatoPage });