import React from 'react'

export default function FeatureHighlights() {
  return (
    <section className="bg-gray-50 py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* First Feature */}
        <div className="grid lg:grid-cols-2 gap-16 items-center mb-20">
          <div>
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">
              Transmite en vivo o graba podcasts con invitados remotos
            </h2>
            <p className="text-xl text-gray-600 leading-relaxed">
              Los invitados pueden unirse fácilmente desde su navegador o teléfono en unos pocos clics.
              No hace falta descargar ningún software.
            </p>
            <div className="mt-8">
              <button className="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-8 py-4 rounded-xl font-bold text-lg transition-all duration-200 transform hover:scale-105 hover:shadow-xl active:scale-95 shadow-lg">
                Invitar colaboradores
              </button>
            </div>
          </div>
          <div className="bg-pink-100 rounded-3xl p-8">
            <div className="bg-white rounded-2xl p-6 shadow-lg">
              <div className="flex items-center space-x-4 mb-4">
                <div className="w-20 h-16 bg-gray-300 rounded flex items-center justify-center">
                  <span className="text-xs font-medium">James</span>
                </div>
                <div className="w-20 h-16 bg-gray-300 rounded flex items-center justify-center">
                  <span className="text-xs font-medium">Helena</span>
                </div>
              </div>
              <div className="bg-purple-600 rounded-lg p-4 text-center">
                <div className="text-white text-lg font-semibold">Melanie Dyann Howe</div>
                <div className="text-purple-200 text-sm">Anfitriona</div>
              </div>
            </div>
          </div>
        </div>

        {/* Second Feature */}
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div className="order-2 lg:order-1">
            <div className="bg-gradient-to-r from-purple-600 to-blue-600 rounded-3xl p-8 text-white">
              <div className="flex items-center justify-between mb-4">
                <span className="text-sm opacity-80">Zoom</span>
                <span className="text-sm font-semibold">AvanzaCast</span>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-black/20 rounded-lg aspect-video flex items-center justify-center">
                  <span className="text-xs">📹 Video Feed 1</span>
                </div>
                <div className="bg-black/20 rounded-lg aspect-video flex items-center justify-center">
                  <span className="text-xs">📹 Video Feed 2</span>
                </div>
              </div>
              <div className="mt-4 text-center">
                <div className="inline-flex items-center bg-green-500 text-white px-3 py-1 rounded-full text-xs">
                  <div className="w-2 h-2 bg-white rounded-full mr-2"></div>
                  Grabando en HD
                </div>
              </div>
            </div>
          </div>
          <div className="order-1 lg:order-2">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">
              Grabaciones con calidad de estudio, independientemente de tu conexión
            </h2>
            <p className="text-xl text-gray-600 leading-relaxed mb-8">
              ¿Te cansaste de que tus podcasts queden arruinados con Zoom y Skype? Con las grabaciones locales,
              se graba un archivo de video separado de cada invitado directamente en su computadora, sin importar
              qué tan mala sea su conexión a internet.
            </p>
            <div className="space-y-4">
              <div className="flex items-center space-x-3">
                <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                  <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                </div>
                <span className="text-gray-600">Grabación local en cada dispositivo</span>
              </div>
              <div className="flex items-center space-x-3">
                <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                  <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                </div>
                <span className="text-gray-600">Calidad 4K independiente de la conexión</span>
              </div>
              <div className="flex items-center space-x-3">
                <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                  <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                </div>
                <span className="text-gray-600">Sincronización automática</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
