import Link from "next/link";
import {
  FaArrowRight,
  FaBookOpen,
  FaHeartbeat,
  FaFemale,
  FaUsers,
  FaLeaf,
  FaHandsHelping,
} from "react-icons/fa";
import { programs } from "@/data/programs";

const icons = [
  FaBookOpen,
  FaHeartbeat,
  FaFemale,
  FaUsers,
  FaLeaf,
  FaHandsHelping,
];

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

      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl text-center">
          <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">
            Our Initiatives
          </span>

          <h2 className="mt-4 text-3xl font-extrabold leading-tight text-slate-950 sm:text-4xl lg:text-5xl">
            Social Welfare Programs Creating Real Community Impact
          </h2>

          <p className="mt-4 text-sm leading-7 text-slate-600 sm:text-base sm:leading-8">
            Our programs are designed to support people at the grassroots level
            and build stronger, healthier and more aware communities across
            India.
          </p>
        </div>

        <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
          {programs.map((program, index) => {
            const Icon = icons[index] || FaHandsHelping;

            return (
              <Link
                key={program.slug}
                href={program.slug}
                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-14 w-14 items-center justify-center rounded-2xl bg-amber-100 text-xl text-amber-600 transition group-hover:bg-[var(--accent)] group-hover:text-black">
                  <Icon />
                </div>

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

                <p className="mt-3 flex-grow text-sm leading-7 text-slate-600 sm:text-base">
                  {program.description}
                </p>

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