ServicesSection.js

'use client'
import { motion } from "framer-motion"
import styles from "./ServicesSection.module.css"

const SERVICES = [
  {
    icon: "⚡",
    color: "var(--cyan)",
    tag: "mais popular",
    title: "Cloud VPS Neural",
    desc: "Servidores virtuais com processamento neural adaptativo. Recursos escaláveis automaticamente baseados na demanda do seu projeto.",
    features: ["1-16 vCPUs com boost automático", "1-32 GB RAM DDR5 ECC", "NVMe Enterprise com RAID 10", "Rede de 10 Gbps dedicada"],
    large: true,
  },
  {
    icon: "🌐",
    color: "var(--green)",
    tag: "essencial",
    title: "Hospedagem Web",
    desc: "Hospedagem compartilhada com painel intuitivo, SSL grátis, e deploy automático via Git.",
    features: ["SSL Let's Encrypt grátis", "cPanel / HestiaCP", "99.98% de uptime"],
    large: false,
  },
  {
    icon: "🎮",
    color: "var(--purple)",
    tag: "gaming",
    title: "Servidores de Jogos",
    desc: "Minecraft, FiveM, CS2 e mais. Hardware dedicado com proteção anti-DDoS e latência ultra-baixa.",
    features: ["Anti-DDoS Enterprise", "Painel de controle web", "Mods e plugins 1-clique"],
    large: false,
  },
  {
    icon: "🏢",
    color: "var(--pink)",
    tag: "business",
    title: "Revenda White-Label",
    desc: "Crie sua própria empresa de hosting. Marca própria, DNS personalizado, painel administrativo completo.",
    features: ["Sua marca, seu painel", "DNS whitelabel", "Faturamento integrado"],
    large: false,
  },
  {
    icon: "🔥",
    color: "var(--orange)",
    tag: "enterprise",
    title: "Dedicados",
    desc: "Hardware exclusivo para projetos de alta performance. Acesso root total, SLA premium.",
    features: ["Hardware 100% dedicado", "SLA 99.99% garantido", "Rede privada 10 Gbps"],
    large: false,
  },
]

export default function ServicesSection() {
  return (
    <section id="servicos" className={styles.section}>
      <div className="container">
        <h2 className="section-title">Tecnologias do Futuro</h2>
        <p className="section-subtitle">
          Infraestrutura projetada para a era pós-quantum. Cada serviço é construído com tecnologia de 2150.
        </p>
      </div>

      <div className={styles.grid}>
        {SERVICES.map((s, i) => (
          <motion.div
            key={s.title}
            className={`glass-card hud-corners ${styles.card} ${s.large ? styles.large : ""}`}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.1, duration: 0.5 }}
          >
            <div
              className={styles.glow}
              style={{ background: s.color, top: "-40px", right: "-40px" }}
            />
            <div className={styles.icon} style={{ background: `${s.color}22`, color: s.color }}>
              {s.icon}
            </div>
            <span className={`tag ${s.tag === "mais popular" ? "" : s.tag === "essencial" ? "green" : s.tag === "gaming" ? "purple" : s.tag === "business" ? "pink" : ""}`}>
              {s.tag}
            </span>
            <h3 className={styles.title}>{s.title}</h3>
            <p className={styles.desc}>{s.desc}</p>

            <ul className={styles.features}>
              {s.features.map((f) => (
                <li key={f}>{f}</li>
              ))}
            </ul>
          </motion.div>
        ))}
      </div>
    </section>
  )
}