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

export function Blog() {
  const t = useTranslations();
  const blogPosts = [
    {
      id: 1,
      image: "/images/img14.webp",
      category: "Tips & Trick",
      title: t("home.blog.articles.article1"),
      author: "John Doe",
      date: "July 24, 2025",
    },
    {
      id: 2,
      image: "/images/img15.webp",
      category: "Insight",
      title: t("home.blog.articles.article2"),
      author: "John Doe",
      date: "July 24, 2025",
    },
    {
      id: 3,
      image: "/images/img16.webp",
      category: "News",
      title: t("home.blog.articles.article3"),
      author: "John Doe",
      date: "July 24, 2025",
    },
  ];

  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">
              {t("home.blog.title")}
            </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"
          >
            {t("home.blog.subtitle")}
          </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"
                >
                  {t("home.blog.readMore")}
                  <ChevronRight className="h-4 w-4" />
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}