"use client";
import { FiCheck, FiZap, FiAward, FiBriefcase, FiDollarSign, FiClock, FiUsers, FiShield } from "react-icons/fi";
import { useTheme } from "../../context/ThemeContext";
import { Button } from "../ui/Button";
import { useRouter } from 'next/navigation';

const beneficios = [
  { icon: FiDollarSign, titulo: "0% de comisión", desc: "Tú te quedas el 100% de cada venta. Sin sorpresas." },
  { icon: FiClock,      titulo: "Pagos semanales", desc: "Recibe tus ganancias directo a tu cuenta cada semana." },
  { icon: FiUsers,      titulo: "Audiencia activa", desc: "Accede a miles de estudiantes listos para aprender." },
  { icon: FiShield,     titulo: "Sin contratos",   desc: "Cancela cuando quieras. Sin letra pequeña." },
];

const planes = [
  {
    id: "starter",
    icon: FiZap,
    nombre: "Starter",
    precio: "Gratis",
    subprecio: "para siempre",
    descripcion: "Ideal para comenzar a compartir tu conocimiento.",
    color: "text-slate-400",
    highlight: false,
    cta: "Comenzar gratis",
    features: [
      "Hasta 3 cursos publicados",
      "Herramientas básicas de edición",
      "Panel de estadísticas simple",
      "Soporte por email",
      "Certificados para estudiantes",
    ],
  },
  {
    id: "pro",
    icon: FiAward,
    nombre: "Pro",
    precio: "$49",
    subprecio: "/ mes",
    descripcion: "Para instructores que quieren crecer y monetizar.",
    color: "text-violet-400",
    highlight: true,
    cta: "Empezar con Pro",
    features: [
      "Cursos ilimitados",
      "Analytics avanzado y reportes",
      "Cupones y descuentos",
      "Página de instructor personalizada",
      "Soporte prioritario 24/7",
      "Acceso a comunidad privada",
    ],
  },
  {
    id: "business",
    icon: FiBriefcase,
    nombre: "Business",
    precio: "$89",
    subprecio: "/ mes",
    descripcion: "Para academias y equipos de contenido educativo.",
    color: "text-sky-400",
    highlight: false,
    cta: "Contactar ventas",
    features: [
      "Todo lo de Pro",
      "Múltiples instructores",
      "White-label y dominio propio",
      "Integraciones con tu CRM",
      "Gestor de cuenta dedicado",
      "Contrato personalizado",
    ],
  },
];

export const PlanesSection: React.FC = () => {
  const { isDark } = useTheme();
  const router = useRouter();

  return (
    <section className="py-20">
      <div className="text-center mb-14 space-y-3">
        <span className={`inline-block text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full border ${
          isDark ? "text-violet-400 bg-violet-500/10 border-violet-500/20" : "text-violet-600 bg-violet-50 border-violet-200"
        }`}>
          Para instructores
        </span>
        <h2 className={`text-2xl sm:text-3xl font-extrabold ${isDark ? "text-white" : "text-slate-900"}`}>
          Elige el plan que se adapta a ti
        </h2>
        <p className={`text-sm max-w-md mx-auto ${isDark ? "text-slate-400" : "text-slate-500"}`}>
          Comienza gratis y escala cuando estés listo. Sin contratos forzosos.
        </p>
      </div>

      {/* Beneficios */}
      <div className={`grid grid-cols-2 md:grid-cols-4 gap-4 mb-12 p-6 rounded-2xl border ${
        isDark ? "bg-slate-900/40 border-slate-800" : "bg-slate-50 border-slate-200"
      }`}>
        {beneficios.map(({ icon: Icon, titulo, desc }) => (
          <div key={titulo} className="flex items-start gap-3">
            <div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${
              isDark ? "bg-violet-500/15" : "bg-violet-100"
            }`}>
              <Icon className={`text-sm ${isDark ? "text-violet-400" : "text-violet-600"}`} />
            </div>
            <div>
              <p className={`text-sm font-bold ${isDark ? "text-white" : "text-slate-900"}`}>{titulo}</p>
              <p className={`text-xs leading-relaxed ${isDark ? "text-slate-400" : "text-slate-500"}`}>{desc}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-5 items-start">
        {planes.map((plan) => {
          const Icon = plan.icon;
          return (
            <div
              key={plan.id}
              className={`relative flex flex-col rounded-2xl border p-7 transition-all duration-200 ${
                plan.highlight
                  ? isDark
                    ? "bg-violet-950/60 border-violet-700/60 shadow-xl shadow-violet-900/30"
                    : "bg-violet-600 border-violet-500 shadow-xl shadow-violet-600/25"
                  : isDark
                    ? "bg-slate-900/60 border-slate-800 hover:border-slate-700"
                    : "bg-white border-slate-200 hover:border-slate-300 shadow-sm"
              }`}
            >
              {plan.highlight && (
                <span className={`absolute -top-3 left-1/2 -translate-x-1/2 text-[11px] font-black uppercase tracking-widest px-3 py-1 rounded-full ${
                  isDark ? "bg-violet-500 text-white" : "bg-white text-violet-700"
                }`}>
                  Más popular
                </span>
              )}

              <div className="mb-6">
                <div className={`w-10 h-10 rounded-xl flex items-center justify-center mb-4 ${
                  plan.highlight
                    ? isDark ? "bg-violet-500/20" : "bg-white/20"
                    : isDark ? "bg-slate-800" : "bg-slate-100"
                }`}>
                  <Icon className={`text-lg ${plan.highlight ? (isDark ? "text-violet-300" : "text-white") : plan.color}`} />
                </div>
                <h3 className={`text-lg font-bold mb-1 ${
                  plan.highlight ? (isDark ? "text-white" : "text-white") : isDark ? "text-white" : "text-slate-900"
                }`}>
                  {plan.nombre}
                </h3>
                <p className={`text-xs leading-relaxed ${
                  plan.highlight ? (isDark ? "text-violet-300" : "text-violet-100") : isDark ? "text-slate-400" : "text-slate-500"
                }`}>
                  {plan.descripcion}
                </p>
              </div>

              <div className="mb-7">
                <div className="flex items-baseline gap-1">
                  <span className={`text-4xl font-black ${
                    plan.highlight ? (isDark ? "text-white" : "text-white") : isDark ? "text-white" : "text-slate-900"
                  }`}>
                    {plan.precio}
                  </span>
                  <span className={`text-sm ${
                    plan.highlight ? (isDark ? "text-violet-300" : "text-violet-100") : isDark ? "text-slate-500" : "text-slate-400"
                  }`}>
                    {plan.subprecio}
                  </span>
                </div>
              </div>

              <ul className="space-y-3 mb-8 flex-1">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-start gap-2.5">
                    <FiCheck className={`text-sm mt-0.5 shrink-0 ${
                      plan.highlight ? (isDark ? "text-violet-400" : "text-white") : isDark ? "text-violet-400" : "text-violet-600"
                    }`} />
                    <span className={`text-sm ${
                      plan.highlight ? (isDark ? "text-slate-300" : "text-violet-50") : isDark ? "text-slate-300" : "text-slate-600"
                    }`}>
                      {f}
                    </span>
                  </li>
                ))}
              </ul>

              <Button
                variant={plan.highlight ? (isDark ? "violet" : "outline") : "outline"}
                size="md"
                onClick={() => router.push("/login")}
                className="w-full justify-center"
              >
                {plan.cta}
              </Button>
            </div>
          );
        })}
      </div>
    </section>
  );
};