import Link from "next/link";
import { FaArrowRight, FaBookOpen } from "react-icons/fa";

const blogs = [
  {
    title: "Why Education Support Is Important for Community Development",
    href: "/blogs/education-support-community-development",
    category: "Education",
    description:
      "Understand how education support helps children, families and communities build a stronger future.",
  },
  {
    title: "Role of Healthcare Awareness in Rural and Urban Communities",
    href: "/blogs/healthcare-awareness-community-health",
    category: "Healthcare",
    description:
      "Learn why healthcare awareness is important for preventive care and community wellbeing.",
  },
  {
    title: "How Women Empowerment Strengthens Families and Society",
    href: "/blogs/women-empowerment-social-change",
    category: "Women Empowerment",
    description:
      "Discover how empowering women creates long-term impact for families, youth and society.",
  },
];

export default function LatestBlogs() {
  return (
    <section className="relative overflow-hidden bg-section-light py-14 sm:py-16 lg:py-24">
      <div className="absolute left-0 top-0 h-72 w-72 rounded-full bg-amber-400/10 blur-3xl" />

      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
          <div className="max-w-3xl">
            <span className="inline-flex rounded-full bg-amber-50 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-amber-600 sm:text-xs">
              Latest NGO Blogs
            </span>

            <h2 className="mt-4 text-3xl font-extrabold leading-tight text-slate-950 sm:text-4xl lg:text-5xl">
              Insights on Social Welfare, Awareness & Community Impact
            </h2>

            <p className="mt-4 text-sm leading-7 text-slate-600 sm:text-base sm:leading-8">
              Read useful articles about education support, healthcare
              awareness, women empowerment, volunteering and grassroots social
              development.
            </p>
          </div>

          <Link
            href="/blogs"
            className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-slate-950 px-6 py-3 text-sm font-bold text-white transition hover:bg-slate-800 sm:w-auto"
          >
            View All Blogs
            <FaArrowRight className="text-xs" />
          </Link>
        </div>

        <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
          {blogs.map((blog) => (
            <Link
              key={blog.href}
              href={blog.href}
              className="group flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-5 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl sm:p-6 lg:p-7"
            >
              <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-100 text-amber-600 transition group-hover:bg-[var(--accent)] group-hover:text-black">
                <FaBookOpen />
              </div>

              <span className="mb-3 inline-flex w-fit rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-600">
                {blog.category}
              </span>

              <h3 className="text-lg font-extrabold leading-snug text-slate-950 sm:text-xl">
                {blog.title}
              </h3>

              <p className="mt-4 flex-grow text-sm leading-7 text-slate-600">
                {blog.description}
              </p>

              <div className="mt-6 inline-flex items-center gap-2 text-sm font-bold text-amber-600">
                Read Article
                <FaArrowRight className="text-xs transition group-hover:translate-x-1" />
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}