const servicesStyles = {
  section: {
    background: 'linear-gradient(180deg, #F4F6F9 0%, #ECEFF4 100%)',
    position: 'relative', overflow: 'hidden',
  },
  header: { textAlign: 'center', marginBottom: 'clamp(32px, 6vw, 56px)', maxWidth: 720, margin: '0 auto clamp(32px, 6vw, 56px)' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 'var(--grid-gap, 22px)' },
  card: {
    background: 'white', borderRadius: 20, padding: 'var(--card-pad, 28px)',
    border: '1px solid var(--silver-100)',
    transition: 'all .25s ease',
    display: 'flex', flexDirection: 'column', gap: 16,
    position: 'relative', overflow: 'hidden',
  },
  cardFeatured: {
    background: 'linear-gradient(160deg, var(--navy-800) 0%, var(--navy-700) 100%)',
    color: 'white', border: '1px solid var(--navy-700)',
  },
  iconBox: {
    width: 60, height: 60, borderRadius: 14,
    background: 'rgba(30,58,111,.08)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  iconBoxFeatured: { background: 'rgba(255,255,255,.12)' },

  svcDescFeatured: { color: 'rgba(255,255,255,.8)' },
  list: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 },
  listItem: { display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13.5, color: 'var(--silver-700)', lineHeight: 1.45 },
  listItemFeatured: { color: 'rgba(255,255,255,.85)' },
  tag: {
    position: 'absolute', top: 20, right: 20,
    background: 'var(--whatsapp)', color: 'white',
    padding: '4px 10px', borderRadius: 999,
    fontSize: 11, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase',
  },
};

const services = [
  {
    icon: <IconDesktop size={30} color="#1E3A6F"/>,
    title: 'Montagem e Manutenção',
    desc: 'Identificamos a causa do defeito e aplicamos a correção certa: hardware, sistema, limpeza ou configuração.',
    items: ['PC não liga, travando ou com tela azul', 'Limpeza interna e troca de pasta térmica', 'Troca de peças defeituosas', 'Diagnóstico técnico gratuito'],
  },
  {
    icon: <IconBolt size={30} color="white"/>,
    title: 'Upgrade de PC e Notebook',
    desc: 'Melhoramos desempenho com upgrade correto para o seu uso, sem empurrar peça desnecessária.',
    items: ['Troca do HD por SSD (PC abre em segundos)', 'Adicionar mais memória RAM', 'Atualização de placa de vídeo', 'Avaliação técnica do que vale a pena'],
    featured: true,
    tag: 'Mais pedido',
  },
  {
    icon: <IconVirus size={30} color="#1E3A6F"/>,
    title: 'Remoção de Vírus e Lentidão',
    desc: 'Removemos ameaças, limpamos o sistema e corrigimos configurações que deixam o computador vulnerável ou lento.',
    items: ['Limpeza profunda de vírus e ameaças', 'Otimização completa do sistema', 'Instalação de proteção adequada', 'Orientação para evitar recorrência'],
  },
  {
    icon: <IconCloud size={30} color="#1E3A6F"/>,
    title: 'Formatação e Windows',
    desc: 'Reinstalação limpa do Windows com backup, drivers corretos e programas essenciais para voltar a trabalhar rápido.',
    items: ['Backup dos seus arquivos antes', 'Windows original atualizado', 'Drivers e programas essenciais', 'Office, navegador e antivírus instalados'],
  },
  {
    icon: <IconHDD size={30} color="#1E3A6F"/>,
    title: 'Backup e Recuperação',
    desc: 'Protegemos fotos, documentos e arquivos de trabalho com backup, recuperação e rotina preventiva.',
    items: ['Backup em HD externo ou nuvem', 'Recuperação de arquivos apagados', 'Recuperação de HD com defeito', 'Configuração de backup automático'],
  },
  {
    icon: <IconPrinter size={30} color="#1E3A6F"/>,
    title: 'Impressoras, Programas e Wi-Fi',
    desc: 'Configuramos impressora, Office, programas de trabalho e rede Wi-Fi para funcionar do jeito certo no dia a dia.',
    items: ['Instalação de impressoras e scanners', 'Office, navegadores, antivírus', 'Configuração de e-mail, rede e Wi-Fi', 'Programas específicos do seu trabalho'],
  },
  {
    icon: <IconHeadset size={30} color="#1E3A6F"/>,
    title: 'Suporte Remoto',
    desc: 'Acesso remoto seguro para ajustes rápidos, instalação de programas, e-mail, impressora e dúvidas operacionais.',
    items: ['Atendimento pelo computador à distância', 'Rápido e seguro', 'Ótimo pra quem mora longe', 'Você acompanha tudo pela tela'],
  },
  {
    icon: <IconBuilding size={30} color="#1E3A6F"/>,
    title: 'TI para Pequenos Negócios',
    desc: 'Rotina técnica para comércio e escritório: computadores, rede, backup e suporte para evitar parada no atendimento.',
    items: ['Manutenção mensal preventiva', 'Configuração de rede e internet', 'Backup automático da empresa', 'Suporte prioritário quando precisar'],
  },
];

function Services() {
  return (
    <section style={servicesStyles.section} id="servicos">
      <div className="container">
        <div style={servicesStyles.header}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot"></span>
            O que fazemos
          </div>
          <h2 className="t-h2" style={{ marginBottom: 14 }}>
            Tudo o que seu computador precisa,<br/>em um só lugar
          </h2>
          <p className="t-lead">
            Computador lento, notebook travando, vírus, formatação, upgrade, Wi-Fi ou impressora: a PiterTech diagnostica, corrige e orienta em Maricá-RJ.
          </p>
        </div>
        <div className="services-grid" style={servicesStyles.grid}>
          {services.map((s, i) => {
            const featured = s.featured;
            return (
              <div key={i} className="svc-card" style={{ ...servicesStyles.card, ...(featured ? servicesStyles.cardFeatured : {}) }}>
                {s.tag && <span style={servicesStyles.tag}>{s.tag}</span>}
                <div style={{ ...servicesStyles.iconBox, ...(featured ? servicesStyles.iconBoxFeatured : {}) }}>
                  {s.icon}
                </div>
                <div className="t-h4" style={{ color: featured ? 'white' : 'var(--navy-800)' }}>{s.title}</div>
                <div className="t-small" style={{ color: featured ? 'rgba(255,255,255,.8)' : 'var(--silver-700)' }}>{s.desc}</div>
                <div style={servicesStyles.list}>
                  {s.items.map((it, j) => (
                    <div key={j} style={{ ...servicesStyles.listItem, ...(featured ? servicesStyles.listItemFeatured : {}) }}>
                      <IconCheck size={16} color={featured ? '#6EE7A8' : '#1FA971'} />
                      <span>{it}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href={waLink()} target="_blank" rel="noopener" className="svc-cta" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            background: 'var(--whatsapp)', color: 'white',
            padding: '15px 24px', borderRadius: 14, fontWeight: 700, fontSize: 15.5,
            boxShadow: '0 10px 24px rgba(37,211,102,.4)',
            transition: 'transform .2s ease, box-shadow .2s ease',
            maxWidth: '100%', textAlign: 'center', minHeight: 52,
          }}>
            <IconWhatsApp size={22} color="white"/>
            Não encontrou seu problema? Fale conosco
          </a>
        </div>
      </div>
      <style>{`
        .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
        .svc-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,211,102,.5); }

      `}</style>
    </section>
  );
}

Object.assign(window, { Services });