import React from 'react'

interface BlogPost {
  image: string
  color: string
  title: string
  author: string
  tag: string
}

const blogPosts: BlogPost[] = [
  {
    image: '📅',
    color: 'bg-red-500',
    title: 'Cómo programar una transmisión en vivo en YouTube',
    author: 'Kelsey Bentz',
    tag: 'YouTube'
  },
  {
    image: '🎙️',
    color: 'bg-blue-600',
    title: '7 formas de mejorar el audio de la transmisión en vivo',
    author: 'AvanzaCast',
    tag: 'Audio'
  },
  {
    image: '⏱️',
    color: 'bg-yellow-500',
    title: '¿Cuánto tiempo debe durar un podcast? Elegir la duración adecuada del episodio',
    author: 'AvanzaCast',
    tag: 'Podcast'
  },
  {
    image: '📺',
    color: 'bg-blue-700',
    title: 'Cómo realizar una transmisión en vivo de prueba sin ir en vivo | 3 formas fáciles',
    author: 'AvanzaCast',
    tag: 'Tutorial'
  }
]

export default function ContentSection() {
  return (
    <>
      {/* Content Header Section */}
      <section className="bg-gradient-to-r from-blue-600 via-purple-600 to-green-500 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl lg:text-4xl font-bold text-white mb-8">
            Transmite mejor, crece más rápido
          </h2>
          <p className="text-xl text-white/90 mb-8 max-w-4xl mx-auto">
            Descubre consejos de expertos, guías prácticas y acciones reales diseñadas para ayudarte a 
            crear contenido de alta calidad, involucrar a tu audiencia y aumentar tu presencia—una 
            transmisión a la vez.
          </p>
          <button className="text-blue-600 bg-white hover:bg-gray-50 px-6 py-3 rounded-lg font-medium transition-colors">
            Ver todas las publicaciones
          </button>
        </div>
      </section>

      {/* Blog Posts Grid */}
      <section className="bg-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {blogPosts.map((post, index) => (
              <article key={index} className="group cursor-pointer">
                <div className={`${post.color} rounded-2xl p-6 mb-4 text-center text-white relative overflow-hidden hover:scale-105 transition-transform`}>
                  <div className="text-6xl mb-4">{post.image}</div>
                  <div className="absolute bottom-4 left-4 right-4">
                    <p className="text-sm opacity-90">avanzacast.com/blog</p>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <span className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
                      {post.tag}
                    </span>
                  </div>
                  <p className="text-sm text-gray-500">
                    Escrito por <span className="text-blue-600 font-medium">{post.author}</span>
                  </p>
                  <h3 className="font-bold text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-3">
                    {post.title}
                  </h3>
                  <button className="text-blue-600 text-sm font-medium flex items-center hover:text-blue-800 transition-colors">
                    Leer más 
                    <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  )
}