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

import Breadcrumb from "@/components/common/Breadcrumb";
import CTA from "@/components/common/CTA";
import VolunteerForm from "@/components/forms/VolunteerForm";

export const metadata: Metadata = {
  title: "Become a Volunteer",
  description:
    "Join Rajvi Social Welfare Trust as a volunteer and support education, healthcare awareness, women empowerment, youth development, environmental awareness and community welfare programs.",
  keywords: [
    "Volunteer NGO India",
    "Become a Volunteer",
    "Rajvi Social Welfare Trust Volunteer",
    "NGO Volunteer Registration",
    "Social Welfare Volunteer",
    "Community Service Volunteer",
  ],
  alternates: {
    canonical: "/volunteers",
  },
};

const benefits = [
  "Contribute to meaningful social welfare initiatives",
  "Support education and healthcare awareness programs",
  "Participate in women empowerment and youth development activities",
  "Help communities through volunteer-led welfare campaigns",
  "Build leadership, teamwork and social responsibility",
  "Become part of a growing community of changemakers",
];

export default function VolunteersPage() {
  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">
            Join as Volunteer
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Become a Volunteer & Help Create Real Social Impact
          </h1>

          <p className="mx-auto mt-6 max-w-3xl text-sm leading-7 text-slate-300 sm:text-lg sm:leading-8">
            Join Rajvi Social Welfare Trust and contribute your time, skills and
            dedication towards education support, healthcare awareness, women
            empowerment, youth development, environmental awareness and community
            welfare initiatives.
          </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">
              Why Volunteer With Us
            </span>

            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl">
              Your Time Can Bring Hope to Many Lives
            </h2>

            <p className="mt-5 leading-8 text-slate-600">
              Volunteers are the strength of Rajvi Social Welfare Trust. Your
              support helps us reach more people, organize awareness programs,
              assist community initiatives and create positive change at the
              grassroots level.
            </p>

            <div className="mt-8 grid gap-5 sm:grid-cols-2">
              {[
                { icon: FaHandsHelping, title: "Serve Communities" },
                { icon: FaUsers, title: "Join Changemakers" },
                { icon: FaHeart, title: "Create Impact" },
                { icon: FaUserPlus, title: "Grow With Purpose" },
              ].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">
                      Help people, support welfare programs and become part of a
                      meaningful social mission.
                    </p>
                  </div>
                );
              })}
            </div>
          </div>

          <div>
            <VolunteerForm />
          </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">
              Volunteer Benefits
            </span>

            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl">
              Be a Part of Community Transformation
            </h2>

            <p className="mt-4 text-slate-600">
              Volunteering gives you the opportunity to serve society, learn new
              skills and contribute to real community development.
            </p>
          </div>

          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {benefits.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>

      <CTA />
    </>
  );
}