import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import { SectionHeading } from "@/components/shared/SectionHeading";

const blogPosts = [
  {
    title: "How to Build a Custom AI Model for Your Business",
    image: "/images/tenext/portrait-confident-man.jpg",
    category: "AI Technology",
    date: "March 15, 2025",
    link: "/blog/custom-ai-model",
  },
  {
    title: "The Future of Machine Learning in Enterprise",
    image: "/images/tenext/Group-18301.jpg",
    category: "Machine Learning",
    date: "April 2, 2025",
    link: "/blog/machine-learning-enterprise",
  },
  {
    title: "Ethics in AI: What You Need to Know",
    image:
      "/images/tenext/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png",
    category: "AI Ethics",
    date: "April 10, 2025",
    link: "/blog/ethics-in-ai",
  },
];

export function BlogSection() {
  return (
    <section className="bg-[#F8F9FA] px-[20px] py-[80px] md:py-[120px]">
      <div className="mx-auto max-w-[1260px]">
        <div className="mb-[60px] flex flex-col items-center text-center">
          <SectionHeading
            tag="blog"
            title="Exploring the world of artificial intelligence with tenext blogging"
            titleClassName="max-w-[800px] text-tenext-dark"
          />
        </div>

        <div className="grid grid-cols-1 gap-[30px] md:grid-cols-2 lg:grid-cols-3">
          {blogPosts.map((post, index) => (
            <div
              key={index}
              className="group flex flex-col overflow-hidden rounded-[25px] border border-tenext-card-border bg-white transition-shadow duration-300 hover:shadow-xl"
            >
              <div className="relative h-[250px] w-full overflow-hidden">
                <img
                  src={post.image}
                  alt={post.title}
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
                <div className="absolute left-[20px] top-[20px] rounded-full bg-white px-[15px] py-[5px] text-[12px] font-bold tracking-wide text-tenext-dark uppercase font-[var(--font-sora)]">
                  {post.category}
                </div>
              </div>
              <div className="flex flex-col p-[30px]">
                <div className="mb-[15px] text-[14px] text-tenext-text-muted">
                  {post.date}
                </div>
                <h4 className="mb-[20px] text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)] transition-colors group-hover:text-tenext-accent-teal">
                  <Link href={post.link}>{post.title}</Link>
                </h4>
                <div className="mt-auto">
                  <Link
                    href={post.link}
                    className="inline-flex items-center gap-[10px] text-[15px] font-bold text-tenext-dark font-[var(--font-sora)] hover:text-tenext-accent-teal"
                  >
                    Read more
                    <ArrowUpRight className="h-[18px] w-[18px]" />
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}