import React from 'react';

interface ContentBlock {
  title: string;
  description: string;
  image: string;
  link?: string;
  background?: string;
  reverse?: boolean;
}

const contentBlocks: ContentBlock[] = [
  {
    title: 'Transmite en vivo o graba podcasts con invitados remotos',
    description: 'Los invitados pueden unirse fácilmente desde su navegador o teléfono en unos pocos clics. No necesitan crear una cuenta ni descargar nada.',
    image: '/images/features/guests.png',
    link: '/features/guests',
    reverse: false
  },
  {
    title: 'Grabaciones con calidad de estudio, independientemente de tu conexión',
    description: '¿Te cansaste de que tus podcasts queden arruinados con Zoom y Skype? AvanzaCast graba localmente en la computadora de cada invitado para obtener pistas de audio y video perfectas.',
    image: '/images/features/recording.png',
    link: '/features/recording',
    background: 'bg-pink-50',
    reverse: true
  },
  {
    title: 'Transmite a YouTube, Facebook, LinkedIn y más',
    description: 'Transmite simultáneamente a múltiples destinos. Alcanza a tu audiencia dondequiera que estén, todo desde un solo lugar.',
    image: '/images/features/multistream.png',
    link: '/features/multistream',
    reverse: false
  },
  {
    title: 'Personaliza con tu marca',
    description: 'Añade tu logo, fondos personalizados y overlays para crear transmisiones profesionales que reflejen tu marca.',
    image: '/images/features/branding.png',
    link: '/features/branding',
    background: 'bg-purple-50',
    reverse: true
  }
];

const NewContentDetailsSection: React.FC = () => {
  return (
    <section className="py-12">
      {contentBlocks.map((block, index) => (
        <div 
          key={index} 
          className={`py-20 ${block.background || ''}`}
        >
          <div className="max-w-[1280px] mx-auto px-5">
            <div className={`grid lg:grid-cols-2 gap-12 items-center ${block.reverse ? 'lg:grid-flow-dense' : ''}`}>
              {/* Contenido de texto */}
              <div className={block.reverse ? 'lg:col-start-2' : ''}>
                <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
                  {block.title}
                </h2>
                <p className="text-lg text-gray-600 mb-8 leading-relaxed">
                  {block.description}
                </p>
                {block.link && (
                  <a 
                    href={block.link}
                    className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium text-lg group"
                  >
                    Saber más
                    <svg 
                      width="20" 
                      height="20" 
                      viewBox="0 0 24 24" 
                      fill="none" 
                      stroke="currentColor" 
                      strokeWidth="2"
                      className="group-hover:translate-x-1 transition-transform"
                    >
                      <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                  </a>
                )}
              </div>

              {/* Imagen */}
              <div className={block.reverse ? 'lg:col-start-1 lg:row-start-1' : ''}>
                <div className="relative rounded-2xl overflow-hidden shadow-2xl">
                  <img 
                    src={block.image} 
                    alt={block.title}
                    className="w-full h-auto"
                    onError={(e) => {
                      e.currentTarget.src = 'https://via.placeholder.com/600x400?text=' + encodeURIComponent(block.title);
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </section>
  );
};

export default NewContentDetailsSection;
