import Link from 'next/link';

export default function BlogSection() {
  const articles = [
    {
      category: "Recommended",
      title: "Virtual US Bank Account Is Now Live.",
      image: "https://ext.same-assets.com/3278459369/4125488480.png",
      link: "/blog/virtual-us-bank-account-is-now-live"
    },
    {
      category: "Investment",
      title: "Why Diversification Is More Important Than Ever in 2025",
      image: "https://ext.same-assets.com/3278459369/3026840381.jpeg",
      link: "/blog/why-diversification-is-more-important-than-ever-in-2025"
    },
    {
      category: "Stories",
      title: "From a Few Cents to Thousands: How Linda Turned Referrals Into a Side Hustle That Pays for International Trips",
      image: "https://ext.same-assets.com/3278459369/3865607377.jpeg",
      link: "/blog/how-linda-turned-referrals-into-a-side-hustle-that-pays-for-international-trips"
    }
  ];

  return (
    <section className="bg-gray-50 py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-tomato font-bold text-rise-dark mb-6">
            Get smarter about your money.
          </h2>
          <p className="text-lg text-gray-600 font-work max-w-2xl mx-auto">
            The latest news, market insight and everything you need to know about managing your money.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto mb-12">
          {articles.map((article) => (
            <Link
              key={article.link}
              href={article.link}
              className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow group"
            >
              <div className="aspect-video overflow-hidden">
                <img
                  src={article.image}
                  alt={article.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                />
              </div>
              <div className="p-6 space-y-3">
                <span className="inline-block bg-gray-100 text-gray-600 text-xs font-work font-medium px-3 py-1 rounded-full">
                  {article.category}
                </span>
                <h3 className="text-lg font-tomato font-bold text-rise-dark leading-tight group-hover:text-rise-teal transition-colors">
                  {article.title}
                </h3>
              </div>
            </Link>
          ))}
        </div>

        <div className="text-center">
          <Link
            href="/blog"
            className="inline-block bg-rise-teal text-white px-8 py-4 rounded-lg hover:bg-foreground transition-colors font-work text-base font-medium"
          >
            Read the blog
          </Link>
        </div>
      </div>
    </section>
  );
}
