import Image from "next/image";
import { ChevronRight } from "lucide-react";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";

const blogPosts = [
  {
    id: 1,
    image: "/images/img14.webp",
    category: "Tips & Trick",
    title: "BEHIND THE HELMET: LIFE AS A FIREFIGHTER",
    author: "John Doe",
    date: "July 24, 2025",
  },
  {
    id: 2,
    image: "/images/img15.webp",
    category: "Insight",
    title: "FIREFIGHTING EQUIPMENT: TOOLS OF THE TRADE",
    author: "John Doe",
    date: "July 24, 2025",
  },
  {
    id: 3,
    image: "/images/img16.webp",
    category: "News",
    title: "FIREFIGHTER TRAINING TAKES TO BECOME A HERO",
    author: "John Doe",
    date: "July 24, 2025",
  },
];

export function Blog() {
  return (
    <section className="bg-[#1f1f1f] py-45">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-12 text-center">
          <div className="mb-4 flex items-center justify-center gap-2">
            <DotAnimatsiya />
            <span className="text-sm font-semibold tracking-wider text-white uppercase">
              Blog & Articles
            </span>
          </div>
          <h2
            className="bg-linear-to-br from-white via-white to-black
  text-transparent bg-clip-text text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
          >
            LATEST BLOG & NEWS
          </h2>
        </div>

        {/* Blog Cards Grid */}
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-sm:place-items-center">
          {blogPosts.map((post) => (
            <article key={post.id} className="group">
              {/* Image Container */}
              <div className="relative mb-6 aspect-4/2 md:aspect-4/3 overflow-hidden rounded-lg">
                <Image
                  src={post.image || "/placeholder.svg"}
                  alt={post.title}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-105"
                />
                {/* Category Badge */}
                <div className="absolute bottom-4 left-4">
                  <span className="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white">
                    {post.category}
                  </span>
                </div>
              </div>

              {/* Content */}
              <div>
                <h3 className="mb-3 text-lg font-bold leading-tight tracking-wide text-white uppercase md:text-xl">
                  {post.title}
                </h3>
                <p className="mb-4 text-sm text-gray-400">
                  <span className="text-gray-500">by </span>
                  <span className="text-white">{post.author}</span>
                  <span className="mx-2 text-gray-500">•</span>
                  <span className="text-gray-400">{post.date}</span>
                </p>
                <a
                  href="#"
                  className="inline-flex items-center gap-1 text-sm font-semibold tracking-wider text-red-600 uppercase transition-colors hover:text-red-500"
                >
                  Read More
                  <ChevronRight className="h-4 w-4" />
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}