import { ImageWithFallback } from './figma/ImageWithFallback';
import { Button } from './ui/button';

interface ArticleCard {
  id: string;
  title: string;
  image: string;
}

const articles: ArticleCard[] = [
  {
    id: '1',
    title: 'Choosing a Travel Backpack: A Comprehensive Guide!',
    image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=500&h=400&fit=crop&q=80'
  },
  {
    id: '2',
    title: 'Bucket List Trip - 52 Places To Visit In Your Life...',
    image: 'https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=500&h=400&fit=crop&q=80'
  },
  {
    id: '3',
    title: 'The FREE Way to Travel: No Money, No Problems!',
    image: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=500&h=400&fit=crop&q=80'
  }
];

export function ArticlesSection() {
  return (
    <section className="py-20 bg-white">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-5xl font-bold text-gray-900 mb-6">
            Our latest articles about travel
          </h2>
          <p className="text-xl text-gray-400 font-light">
            Know the latest articles about travel
          </p>
        </div>

        {/* Articles Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto mb-16">
          {articles.map((article) => (
            <div
              key={article.id}
              className="relative group cursor-pointer overflow-hidden rounded-3xl h-[400px] shadow-md hover:shadow-2xl transition-all duration-300 hover:-translate-y-2"
            >
              <ImageWithFallback
                src={article.image}
                alt={article.title}
                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
              />
              {/* Gradient overlay */}
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
              
              {/* Article title */}
              <div className="absolute bottom-0 left-0 right-0 p-8">
                <h3 className="text-white text-xl font-semibold leading-tight drop-shadow-lg">
                  {article.title}
                </h3>
              </div>
            </div>
          ))}
        </div>

        {/* CTA Button */}
        <div className="text-center">
          <Button 
            className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-10 rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 h-14"
            size="lg"
          >
            Explore more
          </Button>
        </div>
      </div>
    </section>
  );
}