import { Link } from "react-router-dom";
import { Clock, Calendar } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { blogPosts } from "@/lib/data";

const Blog = () => {
  return (
    <div className="min-h-screen bg-[#1a1a1a]">
      <Header />

      <div className="pt-20 lg:pt-24">
        <section className="py-12 bg-[#222] border-b border-[#333]">
          <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
            <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-2">
              Knowledge Base
            </p>
            <h1 className="font-playfair text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-3">
              BBQ Tips & Recipes
            </h1>
            <p className="font-inter text-[#b0b0b0] text-base max-w-2xl">
              Expert guides, recipes, and tips to elevate your outdoor cooking game. From beginner basics to competition-level techniques.
            </p>
          </div>
        </section>

        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-16">
          {/* Featured Article */}
          <Link
            to={`/blog/${blogPosts[0].slug}`}
            className="group block bg-[#2b2b2b] border border-[#444] rounded-lg overflow-hidden mb-12 hover:border-[#d35400]/50 transition-all"
          >
            <div className="grid grid-cols-1 lg:grid-cols-2">
              <div className="aspect-[16/10] lg:aspect-auto overflow-hidden">
                <img
                  src={blogPosts[0].image}
                  alt={blogPosts[0].title}
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                />
              </div>
              <div className="p-6 sm:p-8 lg:p-10 flex flex-col justify-center">
                <span className="font-oswald text-xs text-[#d35400] uppercase tracking-widest mb-2">
                  {blogPosts[0].category} — Featured
                </span>
                <h2 className="font-playfair text-2xl sm:text-3xl font-bold text-white mb-3 group-hover:text-[#d35400] transition-colors leading-tight">
                  {blogPosts[0].title}
                </h2>
                <p className="font-inter text-[#888] text-base leading-relaxed mb-4">
                  {blogPosts[0].excerpt}
                </p>
                <div className="flex items-center gap-4">
                  <span className="inline-flex items-center gap-1.5 font-inter text-sm text-[#888]">
                    <Calendar className="w-4 h-4" />
                    {blogPosts[0].date}
                  </span>
                  <span className="inline-flex items-center gap-1.5 font-inter text-sm text-[#888]">
                    <Clock className="w-4 h-4" />
                    {blogPosts[0].readTime}
                  </span>
                </div>
              </div>
            </div>
          </Link>

          {/* All Articles */}
          <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 hover:border-[#d35400]/50 hover:-translate-y-1 transition-all duration-500"
              >
                <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">
                  <span className="font-oswald text-xs text-[#d35400] uppercase tracking-widest">
                    {post.category}
                  </span>
                  <h3 className="font-playfair text-lg font-bold text-white mt-1 mb-2 leading-tight group-hover:text-[#d35400] transition-colors">
                    {post.title}
                  </h3>
                  <p className="font-inter text-sm text-[#888] leading-relaxed mb-3 line-clamp-2">
                    {post.excerpt}
                  </p>
                  <div className="flex items-center gap-3">
                    <span className="font-inter text-xs text-[#666]">{post.date}</span>
                    <span className="font-inter text-xs text-[#666]">·</span>
                    <span className="font-inter text-xs text-[#666]">{post.readTime}</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default Blog;