import Link from "next/link";
import Image from "next/image";
import { ArrowRight } from "lucide-react";

type Post = {
  slug: string;
  category?: string;
  title: string;
  excerpt: string;
  readingTime: string;
  date: string;
  imageSeed: string;
  alt: string;
};

const POSTS: Post[] = [
  {
    slug: "sao-luu-trong-van-han",
    category: "Tử vi",
    title: "Sao Lưu Trong Vận Hạn: Thiên Mã, Lộc Tồn, Kình Đà",
    excerpt: "Cách luận đoán vận hạn dựa trên ba sao chủ về di chuyển, tài lộc và biến động.",
    readingTime: "5 phút đọc",
    date: "28/05/2026",
    imageSeed: "tuvi-stars",
    alt: "Sao Lưu",
  },
  {
    slug: "van-xuong-van-khuc",
    title: "Văn Xương Văn Khúc: Học Tập Và Thi Cử Trong Tử Vi",
    excerpt: "Bộ song tinh quan trọng cho người làm khoa cử, ý nghĩa và cách phát huy.",
    readingTime: "7 phút đọc",
    date: "26/05/2026",
    imageSeed: "tuvi-vankhuc",
    alt: "Văn Xương",
  },
  {
    slug: "vo-chinh-dieu-tai-cung-menh",
    title: "Vô Chính Diệu Tại Cung Mệnh: Luận Giải Chi Tiết",
    excerpt: "Khi cung Mệnh không có chính tinh, cách an sao và đoán vận theo trường phái cổ.",
    readingTime: "9 phút đọc",
    date: "22/05/2026",
    imageSeed: "tuvi-vochinhdieu",
    alt: "Vô Chính Diệu",
  },
  {
    slug: "vu-khuc-tai-cung-tai-bach",
    title: "Vũ Khúc Tại Cung Tài Bạch: Ý Nghĩa Và Cách Luận",
    excerpt: "Sao Vũ Khúc — sao tài chính chủ yếu, khi tọa cung Tài Bạch.",
    readingTime: "6 phút đọc",
    date: "20/05/2026",
    imageSeed: "tuvi-vukhuc",
    alt: "Vũ Khúc",
  },
];

export function BlogStrip() {
  return (
    <section className="bg-bg-elevated/30 border-stroke-subtle border-y py-16 lg:py-24">
      <div className="max-w-container mx-auto px-4 lg:px-6">
        <div className="mb-10 flex flex-wrap items-end justify-between gap-4">
          <div>
            <h2 className="font-display text-3xl font-semibold lg:text-5xl">
              Blog Tử Vi & Mệnh Học
            </h2>
            <p className="text-ink-secondary mt-2">
              Lý thuyết, sao tử vi, ngũ hành — viết bởi chuyên gia.
            </p>
          </div>
          <Link
            href="/blog"
            className="text-brand-gold hover:text-brand-gold-soft flex items-center gap-1.5 text-sm"
          >
            Xem tất cả bài viết <ArrowRight className="h-4 w-4" aria-hidden="true" />
          </Link>
        </div>

        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4 lg:gap-6">
          {POSTS.map((post) => (
            <article key={post.slug} className="group">
              <Link href={`/blog/${post.slug}`} className="block">
                <div className="bg-bg-overlay border-stroke-subtle relative mb-4 aspect-[4/3] overflow-hidden rounded-xl border">
                  <Image
                    src={`https://picsum.photos/seed/${post.imageSeed}/600/450`}
                    alt={post.alt}
                    fill
                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
                    className="object-cover transition-transform group-hover:scale-[1.03]"
                    unoptimized
                  />
                  {post.category ? (
                    <div className="bg-bg-base/80 text-brand-gold-soft absolute top-3 left-3 rounded-full px-2 py-0.5 text-[10px] tracking-wider uppercase backdrop-blur">
                      {post.category}
                    </div>
                  ) : null}
                </div>
                <h3 className="font-display group-hover:text-brand-gold text-lg leading-snug font-semibold transition-colors">
                  {post.title}
                </h3>
                <p className="text-ink-secondary mt-2 line-clamp-2 text-sm">{post.excerpt}</p>
                <div className="text-ink-muted mt-3 flex items-center gap-3 text-xs">
                  <span>{post.readingTime}</span>
                  <span aria-hidden="true">·</span>
                  <span>{post.date}</span>
                </div>
              </Link>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}