import React, { useState, useRef } from 'react';

const features = [
  { 
    id: 1, 
    name: 'Grabación', 
    icon: '🎙️',
    description: 'Graba con calidad de estudio'
  },
  { 
    id: 2, 
    name: 'Multistream', 
    icon: '📡',
    description: 'Transmite a múltiples plataformas'
  },
  { 
    id: 3, 
    name: 'Invitados', 
    icon: '👥',
    description: 'Invita fácilmente a colaboradores'
  },
  { 
    id: 4, 
    name: 'Marca', 
    icon: '🎨',
    description: 'Personaliza con tu branding'
  },
  { 
    id: 5, 
    name: 'Chat en Vivo', 
    icon: '💬',
    description: 'Interactúa con tu audiencia'
  },
  { 
    id: 6, 
    name: 'Pantalla Compartida', 
    icon: '🖥️',
    description: 'Comparte tu pantalla fácilmente'
  },
  { 
    id: 7, 
    name: 'Analytics', 
    icon: '📊',
    description: 'Analiza tu rendimiento'
  },
];

const NewFeaturesGrid: React.FC = () => {
  const scrollRef = useRef<HTMLDivElement>(null);

  const scroll = (direction: 'left' | 'right') => {
    if (scrollRef.current) {
      const scrollAmount = 300;
      scrollRef.current.scrollBy({
        left: direction === 'left' ? -scrollAmount : scrollAmount,
        behavior: 'smooth'
      });
    }
  };

  const handleFeatureClick = (featureName: string) => {
    window.location.href = `/auth/register?feature=${encodeURIComponent(featureName)}`;
  };

  return (
    <section className="py-24 bg-white">
      <div className="max-w-[1280px] mx-auto px-5">
        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
            Todo lo que necesitas para transmitir
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Herramientas profesionales al alcance de un clic
          </p>
        </div>

        {/* Carrusel de características */}
        <div className="relative">
          {/* Flecha izquierda */}
          <button
            onClick={() => scroll('left')}
            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white border-2 border-gray-200 rounded-full p-3 hover:bg-gray-50 hover:scale-105 transition-all shadow-lg hidden md:block"
            aria-label="Anterior"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>

          {/* Grid de características */}
          <div
            ref={scrollRef}
            className="flex gap-6 overflow-x-auto scrollbar-hide scroll-smooth pb-4"
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          >
            {features.map((feature) => (
              <div
                key={feature.id}
                onClick={() => handleFeatureClick(feature.name)}
                className="flex-none w-64 bg-white border-2 border-gray-200 rounded-2xl p-8 hover:-translate-y-2 hover:shadow-2xl transition-all cursor-pointer group"
              >
                <div className="text-5xl mb-4 group-hover:scale-110 transition-transform">
                  {feature.icon}
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-2">
                  {feature.name}
                </h3>
                <p className="text-sm text-gray-600">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>

          {/* Flecha derecha */}
          <button
            onClick={() => scroll('right')}
            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white border-2 border-gray-200 rounded-full p-3 hover:bg-gray-50 hover:scale-105 transition-all shadow-lg hidden md:block"
            aria-label="Siguiente"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
};

export default NewFeaturesGrid;
