PricingSection.js

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

const PLANS = [
  {
    name: "Nebula",
    tag: "STARTER",
    tagColor: "green",
    desc: "Perfeito para sites pessoais e landing pages",
    monthly: 9.9,
    yearly: 99.0,
    popular: false,
    features: [
      "512 MB RAM",
      "5 GB SSD NVMe",
      "1 Website",
      "SSL Grátis",
      "Proteção DDoS",
    ],
  },
  {
    name: "Quantum",
    tag: "POPULAR",
    tagColor: "cyan",
    desc: "Ideal para negócios e e-commerces",
    monthly: 29.9,
    yearly: 299.0,
    popular: true,
    features: [
      "2 GB RAM DDR5",
      "40 GB NVMe",
      "5 Websites",
      "Backup Diário",
      "2 vCPUs",
      "Email Profissional",
      "Suporte Prioritário",
    ],
  },
  {
    name: "Hyperion",
    tag: "PRO",
    tagColor: "purple",
    desc: "Para projetos de alta performance",
    monthly: 99.9,
    yearly: 999.0,
    popular: false,
    features: [
      "8 GB RAM DDR5",
      "160 GB NVMe",
      "Sites Ilimitados",
      "4 vCPUs Dedicados",
      "IP Dedicado",
      "Suporte 24/7 VIP",
      "Backup Off-site",
    ],
  },
]

export default function PricingSection() {
  const [yearly, setYearly] = useState(false)

  return (
    <section id="precos" className={styles.section}>
      <div className="container">
        <h2 className="section-title">Planos & Preços</h2>
        <p className="section-subtitle">
          Infraestrutura premium com preços acessíveis. Economize até 17% no plano anual.
        </p>

        <div className={styles.toggle}>
          <span
            className={`${styles.toggleLabel} ${!yearly ? styles.active : ""}`}
            onClick={() => setYearly(false)}
          >
            Mensal
          </span>
          <button
            className={`${styles.toggleSwitch} ${yearly ? styles.toggleOn : ""}`}
            onClick={() => setYearly(!yearly)}
            role="switch"
            aria-checked={yearly}
          >
            <span className={styles.toggleThumb} />
          </button>
          <span
            className={`${styles.toggleLabel} ${yearly ? styles.active : ""}`}
            onClick={() => setYearly(true)}
          >
            Anual
            <span className={styles.saveBadge}>Economize 17%</span>
          </span>
        </div>
      </div>

      <div className={styles.grid}>
        {PLANS.map((plan, i) => (
          <motion.div
            key={plan.name}
            className={`glass-card hud-corners ${styles.card} ${plan.popular ? styles.featured : ""}`}
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.15, duration: 0.6 }}
          >
            {plan.popular && <div className={styles.featuredBadge}>MAIS POPULAR</div>}
            <span className={`tag ${plan.tagColor}`} style={{ marginBottom: 16 }}>
              {plan.tag}
            </span>
            <div className={styles.planName}>{plan.name}</div>
            <div className={styles.planDesc}>{plan.desc}</div>

            <div className={styles.price}>
              <span className={styles.currency}>R$</span>
              <motion.span
                key={yearly ? "yearly" : "monthly"}
                className={styles.value}
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.2 }}
              >
                {yearly
                  ? Math.floor(plan.yearly / 12)
                  : Math.floor(plan.monthly)}
              </motion.span>
              <span className={styles.period}>
                ,{yearly ? String(plan.yearly % 12).padStart(2, "0") : String(plan.monthly).split(".")[1]}/mês
              </span>
            </div>

            {yearly && (
              <div className={styles.yearlyNote}>
                R${plan.yearly.toFixed(0)} cobrado anualmente
              </div>
            )}

            <ul className={styles.features}>
              {plan.features.map((f) => (
                <li key={f}>
                  <svg className="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M5 13l4 4L19 7" />
                  </svg>
                  {f}
                </li>
              ))}
            </ul>

            <a
              href="#"
              className={`btn ${plan.popular ? "btn-primary" : "btn-ghost"} ${styles.btn}`}
            >
              Escolher Plano
            </a>
          </motion.div>
        ))}
      </div>
    </section>
  )
}