import type { Metadata } from "next";
import Link from "next/link";
import {
  FaFemale,
  FaUsers,
  FaHandsHelping,
  FaBalanceScale,
  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: "Women Empowerment Programs",
  description:
    "Rajvi Social Welfare Trust promotes women empowerment through awareness programs, skill development, leadership initiatives and community participation activities.",
  keywords: [
    "Women Empowerment NGO",
    "Women Welfare Programs",
    "Women Development NGO India",
    "Women Awareness Programs",
    "Rajvi Social Welfare Trust",
    "Women Leadership Programs",
  ],
  alternates: {
    canonical: "/women-empowerment",
  },
};

const initiatives = [
  "Women awareness programs",
  "Leadership development initiatives",
  "Skill development opportunities",
  "Community participation activities",
  "Social awareness campaigns",
  "Self-confidence building programs",
];

export default function WomenEmpowermentPage() {
  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">
            Women Empowerment
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Empowering Women for a Stronger & More Inclusive Society
          </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 towards creating awareness,
            confidence and opportunities that encourage women to actively
            participate in social, educational and community development.
          </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 Mission
            </span>

            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl">
              Supporting Women Through Awareness, Leadership & Participation
            </h2>

            <p className="mt-5 leading-8 text-slate-600">
              Women play a vital role in building strong families and thriving
              communities. Through awareness campaigns, educational initiatives
              and community engagement programs, we encourage women to become
              confident, informed and active contributors to society.
            </p>

            <p className="mt-4 leading-8 text-slate-600">
              Our efforts focus on promoting dignity, equal opportunities,
              self-confidence and participation in social development.
            </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 Our Mission
              <FaArrowRight className="text-xs" />
            </Link>
          </div>

          <div className="grid gap-5 sm:grid-cols-2">
            {[
              { icon: FaFemale, title: "Women Awareness" },
              { icon: FaUsers, title: "Community Participation" },
              { icon: FaHandsHelping, title: "Skill Development" },
              { icon: FaBalanceScale, title: "Equal Opportunities" },
            ].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">
                    Encouraging women to become empowered, informed and active
                    participants in community development.
                  </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">
              Key Initiatives
            </span>

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

            <p className="mt-4 text-slate-600">
              Our programs are designed to inspire confidence, awareness,
              leadership and meaningful participation.
            </p>
          </div>

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