function ChatMockup() {
  const USER_MSG = 'Como solicito 2ª via do IPTU?';
  const AI_MSG = 'Direcionei para a Secretaria de Finanças. Acesse pelo menu Finanças → 2ª via.';

  const [userText, setUserText] = React.useState('');
  const [aiText, setAiText]     = React.useState('');
  const [phase, setPhase]       = React.useState('typing-user');

  React.useEffect(() => {
    let t;
    if (phase === 'typing-user') {
      if (userText.length < USER_MSG.length) {
        t = setTimeout(() => setUserText(USER_MSG.slice(0, userText.length + 1)), 45);
      } else {
        t = setTimeout(() => setPhase('thinking'), 500);
      }
    } else if (phase === 'thinking') {
      t = setTimeout(() => setPhase('typing-ai'), 900);
    } else if (phase === 'typing-ai') {
      if (aiText.length < AI_MSG.length) {
        t = setTimeout(() => setAiText(AI_MSG.slice(0, aiText.length + 1)), 28);
      } else {
        t = setTimeout(() => { setUserText(''); setAiText(''); setPhase('typing-user'); }, 3000);
      }
    }
    return () => clearTimeout(t);
  }, [phase, userText, aiText]);

  return (
    <div className="svc-mockup-window">
      <div className="svc-mockup-dots"><span/><span/><span/></div>
      <div className="svc-mockup-chat">
        {userText.length > 0 && (
          <div className="svc-mockup-bubble svc-mock-user">
            {userText}{phase === 'typing-user' && <span className="svc-mock-cursor">|</span>}
          </div>
        )}
        {phase === 'thinking' && (
          <div className="svc-mockup-bubble svc-mock-ai svc-mock-thinking">
            <span/><span/><span/>
          </div>
        )}
        {aiText.length > 0 && (
          <div className="svc-mockup-bubble svc-mock-ai">
            <span className="svc-mock-spark">✦</span>{' '}{aiText}{phase === 'typing-ai' && <span className="svc-mock-cursor svc-mock-cursor-navy">|</span>}
          </div>
        )}
      </div>
    </div>
  );
}

function Services() {
  const BgSvg = ({ children, style = {} }) => (
    <span className="svc-bg-svg" style={style}>{children}</span>
  );

  return (
    <section id="servicos" style={{ background: 'var(--bg-2)', borderRadius: 32, margin: '0 16px' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Funcionalidades</span>
          <h2>Todos os serviços<br />da prefeitura<br /><span className="serif-i" style={{ color: 'var(--primary)' }}>em um só lugar!</span></h2>
          <p className="lead" style={{fontSize:17}}>Crie canais que sua prefeitura precisa, integre sistemas já existentes e mantenha total controle dos seus dados e serviços.</p>
        </div>
        <div className="services-grid">

          {/* Pergunta Tudo — chat mockup animado */}
          <div className="svc svc-feature span-3 tall">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div className="icon"><Icons.Sparkle style={{ width: 22, height: 22 }} /></div>
              <span className="svc-included"><span className="svc-dot-badge" />INCLUÍDO</span>
            </div>
            <ChatMockup />
            <div>
              <h4>Pergunta Tudo</h4>
              <p>IA avançada à disposição do cidadão para auxiliar em tarefas do dia a dia — pesquisa, redação, dúvidas, traduções e mais.</p>
              <div style={{ marginTop: 14, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {['IA generativa', 'Multilíngue', 'Acessível'].map((t) =>
                  <span key={t} style={{ fontSize: 11, padding: '5px 10px', borderRadius: 99, background: 'rgba(255,255,255,.14)' }}>{t}</span>
                )}
              </div>
              <div className="svc-conv-label">INTELIGÊNCIA CONVERSACIONAL</div>
            </div>
          </div>

          {/* Pergunta Cidade — skyline */}
          <div className="svc span-3">
            <BgSvg>
              <svg viewBox="0 0 160 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="10" y="55" width="20" height="45" fill="currentColor"/>
                <rect x="15" y="40" width="10" height="15" fill="currentColor"/>
                <rect x="35" y="35" width="25" height="65" fill="currentColor"/>
                <rect x="65" y="20" width="30" height="80" fill="currentColor"/>
                <rect x="70" y="10" width="8" height="10" fill="currentColor"/>
                <rect x="100" y="40" width="22" height="60" fill="currentColor"/>
                <rect x="127" y="50" width="18" height="50" fill="currentColor"/>
                <rect x="0" y="95" width="160" height="5" fill="currentColor"/>
                <rect x="18" y="62" width="4" height="5" fill="white" opacity=".4"/>
                <rect x="18" y="72" width="4" height="5" fill="white" opacity=".4"/>
                <rect x="42" y="45" width="4" height="5" fill="white" opacity=".4"/>
                <rect x="52" y="55" width="4" height="5" fill="white" opacity=".4"/>
                <rect x="72" y="30" width="5" height="6" fill="white" opacity=".4"/>
                <rect x="82" y="40" width="5" height="6" fill="white" opacity=".4"/>
              </svg>
            </BgSvg>
            <div className="icon"><Icons.Mic style={{ width: 22, height: 22 }} /></div>
            <div>
              <h4>Pergunta Cidade</h4>
              <p>Canal específico de IA para informações municipais — horários, endereços, serviços e como acessá-los.</p>
            </div>
          </div>

          {/* Roteamento inteligente — rede de nós */}
          <div className="svc span-3">
            <BgSvg>
              <svg viewBox="0 0 160 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="80" cy="50" r="12" fill="currentColor"/>
                <circle cx="30" cy="25" r="8" fill="currentColor"/>
                <circle cx="130" cy="25" r="8" fill="currentColor"/>
                <circle cx="20" cy="75" r="8" fill="currentColor"/>
                <circle cx="140" cy="75" r="8" fill="currentColor"/>
                <circle cx="80" cy="90" r="7" fill="currentColor"/>
                <line x1="80" y1="50" x2="30" y2="25" stroke="currentColor" strokeWidth="2" opacity=".5"/>
                <line x1="80" y1="50" x2="130" y2="25" stroke="currentColor" strokeWidth="2" opacity=".5"/>
                <line x1="80" y1="50" x2="20" y2="75" stroke="currentColor" strokeWidth="2" opacity=".5"/>
                <line x1="80" y1="50" x2="140" y2="75" stroke="currentColor" strokeWidth="2" opacity=".5"/>
                <line x1="80" y1="50" x2="80" y2="90" stroke="currentColor" strokeWidth="2" opacity=".5"/>
                <line x1="30" y1="25" x2="20" y2="75" stroke="currentColor" strokeWidth="1.5" opacity=".3"/>
                <line x1="130" y1="25" x2="140" y2="75" stroke="currentColor" strokeWidth="1.5" opacity=".3"/>
              </svg>
            </BgSvg>
            <div className="icon"><Icons.Layers style={{ width: 22, height: 22 }} /></div>
            <div>
              <h4>Roteamento inteligente</h4>
              <p>A IA classifica cada mensagem do cidadão e direciona automaticamente ao departamento responsável.</p>
            </div>
          </div>

          {/* Saúde — cruz + ECG */}
          <div className="svc svc-accent span-2">
            <BgSvg>
              <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="45" y="15" width="30" height="70" rx="4" fill="currentColor"/>
                <rect x="15" y="35" width="90" height="30" rx="4" fill="currentColor"/>
                <polyline points="0,65 20,65 30,35 40,80 55,45 65,65 80,65 90,50 100,65 120,65" stroke="white" strokeWidth="3" fill="none" opacity=".5"/>
              </svg>
            </BgSvg>
            <div className="icon"><Icons.Heart style={{ width: 22, height: 22 }} /></div>
            <div>
              <h4>Saúde</h4>
              <p>Agendamentos, vacinação, receitas digitais e atendimento ao cidadão.</p>
            </div>
          </div>

          {/* Educação — chapéu de formatura */}
          <div className="svc span-2">
            <BgSvg>
              <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points="60,15 110,40 60,65 10,40" fill="currentColor"/>
                <path d="M30 52 L30 80 Q60 95 90 80 L90 52" fill="currentColor" opacity=".7"/>
                <line x1="110" y1="40" x2="110" y2="70" stroke="currentColor" strokeWidth="4" strokeLinecap="round"/>
                <circle cx="110" cy="73" r="5" fill="currentColor"/>
              </svg>
            </BgSvg>
            <div className="icon"><Icons.Users style={{ width: 22, height: 22 }} /></div>
            <div>
              <h4>Educação</h4>
              <p>Portal do aluno, calendário escolar e comunicação entre escolas e famílias.</p>
            </div>
          </div>

          {/* Assistência Social — pessoas/mãos */}
          <div className="svc span-2">
            <BgSvg>
              <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="40" cy="28" r="14" fill="currentColor"/>
                <path d="M15 85 Q15 58 40 58 Q65 58 65 85Z" fill="currentColor"/>
                <circle cx="85" cy="32" r="11" fill="currentColor" opacity=".7"/>
                <path d="M65 85 Q65 63 85 63 Q105 63 105 85Z" fill="currentColor" opacity=".7"/>
                <path d="M38 72 Q60 60 82 72" stroke="currentColor" strokeWidth="3" fill="none" opacity=".4" strokeLinecap="round"/>
              </svg>
            </BgSvg>
            <div className="icon"><Icons.Tree style={{ width: 22, height: 22 }} /></div>
            <div>
              <h4>Assistência Social</h4>
              <p>Gestão de benefícios, programas sociais e atendimento integrado à população.</p>
            </div>
          </div>

          {/* Habitação */}
          <div className="svc span-2">
            <BgSvg>
              <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 55 L60 10 L110 55" fill="currentColor" opacity=".9"/>
                <rect x="30" y="55" width="60" height="45" fill="currentColor"/>
                <rect x="48" y="68" width="24" height="32" rx="3" fill="white" opacity=".3"/>
                <rect x="35" y="62" width="16" height="16" rx="2" fill="white" opacity=".25"/>
                <rect x="69" y="62" width="16" height="16" rx="2" fill="white" opacity=".25"/>
              </svg>
            </BgSvg>
            <div className="icon"><Icons.Home style={{ width: 22, height: 22 }} /></div>
            <div>
              <h4>Habitação</h4>
              <p>Cadastro habitacional, solicitações e acompanhamento de programas sociais.</p>
            </div>
          </div>

          {/* Transporte */}
          <div className="svc span-2">
            <BgSvg>
              <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="10" y="30" width="100" height="50" rx="12" fill="currentColor"/>
                <rect x="18" y="38" width="35" height="22" rx="4" fill="white" opacity=".3"/>
                <rect x="67" y="38" width="35" height="22" rx="4" fill="white" opacity=".3"/>
                <circle cx="30" cy="88" r="10" fill="currentColor"/>
                <circle cx="90" cy="88" r="10" fill="currentColor"/>
                <rect x="0" y="76" width="120" height="8" fill="currentColor" opacity=".5"/>
              </svg>
            </BgSvg>
            <div className="icon"><Icons.Map style={{ width: 22, height: 22 }} /></div>
            <div>
              <h4>Transporte</h4>
              <p>Controle de frotas, checklists operacionais e monitoramento de serviços.</p>
            </div>
          </div>

          {/* Segurança */}
          <div className="svc span-2">
            <BgSvg>
              <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M60 5 L105 22 L105 55 Q105 82 60 97 Q15 82 15 55 L15 22 Z" fill="currentColor"/>
                <path d="M40 50 L54 64 L80 38" stroke="white" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity=".6"/>
              </svg>
            </BgSvg>
            <div className="icon"><Icons.Shield style={{ width: 22, height: 22 }} /></div>
            <div>
              <h4>Segurança</h4>
              <p>Botão de pânico, denúncias anônimas e alertas em massa em tempo real.</p>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}
window.Services = Services;