'use client';

const plans = [
  {
    name: 'Free',
    price: '0',
    description: 'Perfecto para comenzar a transmitir',
    popular: false,
    features: [
      { text: '2 destinos de streaming simultáneos', included: true },
      { text: '720p HD calidad de video', included: true },
      { text: '20 horas de grabación/mes', included: true },
      { text: '1 invitado remoto', included: true },
      { text: 'Marca de agua AvanzaCast', included: true },
      { text: 'Chat básico', included: true },
      { text: 'Overlays personalizados', included: false },
      { text: 'Analytics avanzados', included: false },
      { text: 'Soporte prioritario', included: false },
    ],
  },
  {
    name: 'Pro',
    price: '29',
    description: 'Para creadores de contenido serios',
    popular: true,
    features: [
      { text: '10 destinos de streaming simultáneos', included: true },
      { text: '1080p Full HD calidad', included: true },
      { text: 'Grabación ilimitada en la nube', included: true },
      { text: 'Hasta 6 invitados remotos', included: true },
      { text: 'Sin marca de agua', included: true },
      { text: 'Chat unificado con moderación IA', included: true },
      { text: 'Overlays y branding personalizado', included: true },
      { text: 'Analytics detallados', included: true },
      { text: 'Soporte por email', included: true },
    ],
  },
  {
    name: 'Business',
    price: '99',
    description: 'Para equipos y empresas',
    popular: false,
    features: [
      { text: 'Streaming ilimitado a todas las plataformas', included: true },
      { text: '4K Ultra HD calidad', included: true },
      { text: 'Almacenamiento y grabación ilimitados', included: true },
      { text: 'Hasta 10 invitados + moderador', included: true },
      { text: 'White-label completo', included: true },
      { text: 'Chat con CRM integrado', included: true },
      { text: 'Suite completa de branding', included: true },
      { text: 'Analytics empresariales + API', included: true },
      { text: 'Soporte 24/7 + Account Manager', included: true },
      { text: 'Multi-usuario (hasta 5 cuentas)', included: true },
      { text: 'Transcoding dedicado', included: true },
    ],
  },
];

export default function PricingSection() {
  return (
    <section className="py-20 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <span className="inline-flex items-center gap-2 text-purple-600 dark:text-purple-400 font-semibold mb-4">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
            </svg>
            Planes y Precios
          </span>
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            Elige el Plan Perfecto para Ti
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            Sin contratos. Cancela cuando quieras. Actualiza o cambia de plan en cualquier momento.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">
          {plans.map((plan, index) => (
            <div
              key={plan.name}
              className={`relative rounded-3xl ${
                plan.popular
                  ? 'bg-gradient-to-br from-purple-600 to-blue-600 shadow-2xl shadow-purple-500/50 transform scale-105'
                  : 'bg-white dark:bg-gray-800 shadow-xl'
              } overflow-hidden transition-all duration-300 hover:transform hover:scale-105`}
            >
              {plan.popular && (
                <div className="absolute top-0 right-0 bg-yellow-400 text-gray-900 px-4 py-1 text-sm font-bold rounded-bl-xl">
                  MÁS POPULAR
                </div>
              )}

              <div className={`p-8 ${plan.popular ? 'text-white' : 'text-gray-900 dark:text-white'}`}>
                <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
                <p className={`text-sm mb-6 ${plan.popular ? 'text-purple-100' : 'text-gray-600 dark:text-gray-400'}`}>
                  {plan.description}
                </p>
                <div className="mb-6">
                  <span className="text-5xl font-bold">${plan.price}</span>
                  <span className={`text-lg ${plan.popular ? 'text-purple-100' : 'text-gray-600 dark:text-gray-400'}`}>
                    /mes
                  </span>
                </div>

                <button
                  className={`w-full py-4 px-6 rounded-xl font-bold text-lg transition-all duration-300 ${
                    plan.popular
                      ? 'bg-white text-purple-600 hover:bg-gray-100 shadow-lg'
                      : 'bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 shadow-md hover:shadow-xl'
                  }`}
                >
                  {plan.name === 'Free' ? 'Comenzar Gratis' : 'Iniciar Prueba de 14 Días'}
                </button>

                <div className="mt-8 space-y-4">
                  <p className={`text-sm font-semibold ${plan.popular ? 'text-purple-100' : 'text-gray-700 dark:text-gray-300'}`}>
                    Características incluidas:
                  </p>
                  <ul className="space-y-3">
                    {plan.features.map((feature, i) => (
                      <li key={i} className="flex items-start gap-3">
                        {feature.included ? (
                          <svg
                            className={`w-6 h-6 flex-shrink-0 ${
                              plan.popular ? 'text-green-300' : 'text-green-500'
                            }`}
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                              d="M5 13l4 4L19 7"
                            />
                          </svg>
                        ) : (
                          <svg
                            className={`w-6 h-6 flex-shrink-0 ${
                              plan.popular ? 'text-purple-300' : 'text-gray-400'
                            }`}
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                              d="M6 18L18 6M6 6l12 12"
                            />
                          </svg>
                        )}
                        <span
                          className={`text-sm ${
                            feature.included
                              ? plan.popular
                                ? 'text-white'
                                : 'text-gray-700 dark:text-gray-300'
                              : plan.popular
                              ? 'text-purple-200'
                              : 'text-gray-500 dark:text-gray-500'
                          }`}
                        >
                          {feature.text}
                        </span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Additional Info */}
        <div className="mt-16 text-center">
          <p className="text-gray-600 dark:text-gray-400 mb-6">
            ¿Necesitas un plan personalizado para tu empresa?{' '}
            <a href="#" className="text-purple-600 dark:text-purple-400 font-semibold hover:underline">
              Contáctanos para Enterprise
            </a>
          </p>
          <div className="flex flex-wrap justify-center gap-8 text-sm text-gray-600 dark:text-gray-400">
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              Sin tarjeta de crédito
            </div>
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              Cancela en cualquier momento
            </div>
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              14 días de prueba gratis
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
