import { Link } from "react-router-dom";
import { Clock } from "lucide-react";
import { blogPosts } from "@/lib/data";

const BlogSection = () => {
  return (
    <section className="py-20 lg:py-28 bg-[#1a1a1a]">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-14">
          <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-3">
            From Our Kitchen
          </p>
          <h2 className="font-playfair text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">
            BBQ Tips & Recipes
          </h2>
          <div className="w-20 h-1 bg-[#d35400] mx-auto rounded-full" />
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {blogPosts.map((post) => (
            <Link
              key={post.id}
              to={`/blog/${post.slug}`}
              className="group bg-[#2b2b2b] border border-[#444] rounded-lg overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_12px_40px_rgba(211,84,0,0.15)] hover:border-[#d35400]/50"
            >
              <div className="aspect-[16/10] overflow-hidden">
                <img
                  src={post.image}
                  alt={post.title}
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                  loading="lazy"
                />
              </div>
              <div className="p-5">
                <div className="flex items-center gap-3 mb-2">
                  <span className="font-oswald text-xs text-[#d35400] uppercase tracking-widest">
                    {post.category}
                  </span>
                  <span className="inline-flex items-center gap-1 font-inter text-xs text-[#888]">
                    <Clock className="w-3 h-3" />
                    {post.readTime}
                  </span>
                </div>
                <h3 className="font-playfair text-lg font-bold text-white mb-2 leading-tight group-hover:text-[#d35400] transition-colors">
                  {post.title}
                </h3>
                <p className="font-inter text-sm text-[#888] leading-relaxed line-clamp-2">
                  {post.excerpt}
                </p>
                <span className="font-oswald inline-block mt-3 text-xs text-[#d35400] uppercase tracking-widest group-hover:text-[#e67e22] transition-colors">
                  Read More →
                </span>
              </div>
            </Link>
          ))}
        </div>

        <div className="text-center mt-10">
          <Link
            to="/blog"
            className="font-oswald inline-flex items-center gap-2 border-2 border-[#d35400] text-[#d35400] hover:bg-[#d35400] hover:text-white text-base font-semibold uppercase tracking-wider px-8 py-3 rounded transition-all duration-300 !bg-transparent hover:!bg-[#d35400]"
          >
            View All Articles
          </Link>
        </div>
      </div>
    </section>
  );
};

export default BlogSection;