import type { Metadata } from "next";
import Link from "next/link";
import {
  FaHandsHelping,
  FaUsers,
  FaHeart,
  FaCheckCircle,
  FaArrowRight,
} from "react-icons/fa";

import Breadcrumb from "@/components/common/Breadcrumb";
import CTA from "@/components/common/CTA";
import FAQ from "@/components/common/FAQ";

export const metadata: Metadata = {
  title: "Community Welfare Programs",
  description:
    "Rajvi Social Welfare Trust supports underserved families through community welfare programs, relief activities, awareness drives and grassroots social support initiatives across India.",
  keywords: [
    "Community Welfare NGO",
    "Community Welfare Programs",
    "Social Welfare Trust India",
    "NGO for Community Development",
    "Grassroots Welfare Initiatives",
    "Rajvi Social Welfare Trust",
  ],
  alternates: {
    canonical: "/community-welfare",
  },
};

const services = [
  "Support for underserved families",
  "Community awareness campaigns",
  "Relief and welfare initiatives",
  "Volunteer-led local support",
  "Social development activities",
  "Grassroots welfare outreach",
];

export default function CommunityWelfarePage() {
  return (
    <>
      <section className="relative overflow-hidden bg-slate-950 pb-20 pt-32 text-white sm:pt-36 lg:pt-40">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(251,191,36,0.15),transparent_40%)]" />

        <div className="relative z-10 mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
          <span className="inline-flex rounded-full bg-white/10 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-[var(--accent)] sm:text-xs">
            Community Welfare
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Supporting Communities Through Grassroots Welfare Initiatives
          </h1>

          <p className="mx-auto mt-6 max-w-3xl text-sm leading-7 text-slate-300 sm:text-lg sm:leading-8">
            Rajvi Social Welfare Trust works to support underserved families,
            vulnerable communities and people in need through welfare programs,
            awareness drives and volunteer-led social support.
          </p>
        </div>
      </section>

      <Breadcrumb />

      <section className="bg-white py-14 sm:py-16 lg:py-24">
        <div className="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
          <div>
            <span className="inline-flex rounded-full bg-amber-50 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-amber-600">
              Our Welfare Approach
            </span>

            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl">
              Building Dignity, Hope and Social Support
            </h2>

            <p className="mt-5 leading-8 text-slate-600">
              Community welfare is at the heart of Rajvi Social Welfare Trust.
              Our initiatives focus on helping families and communities access
              support, awareness and opportunities needed for a better life.
            </p>

            <p className="mt-4 leading-8 text-slate-600">
              Through volunteers, donors and local participation, we aim to
              create meaningful welfare impact at the grassroots level.
            </p>

            <Link
              href="/volunteers"
              className="mt-8 inline-flex items-center gap-2 rounded-xl bg-[var(--accent)] px-6 py-4 text-sm font-bold text-black"
            >
              Join as Volunteer
              <FaArrowRight className="text-xs" />
            </Link>
          </div>

          <div className="grid gap-5 sm:grid-cols-2">
            {[
              { icon: FaHandsHelping, title: "Welfare Support" },
              { icon: FaUsers, title: "Community Outreach" },
              { icon: FaHeart, title: "Relief Activities" },
              { icon: FaCheckCircle, title: "Awareness Drives" },
            ].map((item) => {
              const Icon = item.icon;

              return (
                <div
                  key={item.title}
                  className="rounded-3xl border border-slate-200 bg-slate-50 p-6"
                >
                  <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent)] text-black">
                    <Icon />
                  </div>

                  <h3 className="text-xl font-bold text-slate-950">
                    {item.title}
                  </h3>

                  <p className="mt-3 text-sm leading-7 text-slate-600">
                    Supporting communities with awareness, dignity and
                    practical welfare initiatives.
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="bg-section-light py-14 sm:py-16 lg:py-24">
        <div className="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">
              What We Do
            </span>

            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl">
              Community Welfare Activities
            </h2>
          </div>

          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {services.map((item) => (
              <div
                key={item}
                className="flex items-start gap-3 rounded-2xl bg-white p-5 shadow-sm"
              >
                <FaCheckCircle className="mt-1 shrink-0 text-emerald-500" />
                <span className="text-sm font-semibold text-slate-700">
                  {item}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FAQ />
      <CTA />
    </>
  );
}