import type { Metadata } from "next";
import Link from "next/link";
import {
  FaGraduationCap,
  FaBookOpen,
  FaChalkboardTeacher,
  FaUsers,
  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: "Education Support Programs",
  description:
    "Rajvi Social Welfare Trust promotes education support initiatives that help children, youth and communities access learning opportunities, awareness and skill development programs.",
  keywords: [
    "Education Support NGO",
    "Education Programs India",
    "Child Education Support",
    "NGO for Education",
    "Student Support Programs",
    "Rajvi Social Welfare Trust",
  ],
  alternates: {
    canonical: "/education-support",
  },
};

const initiatives = [
  "Educational awareness programs",
  "Student support initiatives",
  "Learning resource assistance",
  "Skill development workshops",
  "Career guidance sessions",
  "Community education drives",
];

export default function EducationSupportPage() {
  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">
            Education Support
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Empowering Communities Through Education & Learning
          </h1>

          <p className="mx-auto mt-6 max-w-3xl text-sm leading-7 text-slate-300 sm:text-lg sm:leading-8">
            Education is one of the most powerful tools for social change.
            Rajvi Social Welfare Trust works to promote learning, awareness,
            skill development and educational opportunities for children,
            youth and communities across India.
          </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 Educational Mission
            </span>

            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl">
              Building Brighter Futures Through Knowledge
            </h2>

            <p className="mt-5 leading-8 text-slate-600">
              Rajvi Social Welfare Trust believes that education creates
              opportunities, confidence and long-term growth. Through
              educational support activities and awareness programs, we help
              individuals gain knowledge and improve their future prospects.
            </p>

            <p className="mt-4 leading-8 text-slate-600">
              Our efforts focus on encouraging learning, supporting students
              and promoting educational awareness within communities.
            </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"
            >
              Become a Volunteer
              <FaArrowRight className="text-xs" />
            </Link>
          </div>

          <div className="grid gap-5 sm:grid-cols-2">
            {[
              {
                icon: FaGraduationCap,
                title: "Student Support",
              },
              {
                icon: FaBookOpen,
                title: "Learning Resources",
              },
              {
                icon: FaChalkboardTeacher,
                title: "Educational Awareness",
              },
              {
                icon: FaUsers,
                title: "Community Learning",
              },
            ].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">
                    Promoting educational opportunities and lifelong learning
                    through community-focused 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 Support
            </span>

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

            <p className="mt-4 text-slate-600">
              Our initiatives focus on awareness, guidance and educational
              support for individuals and communities.
            </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 />
    </>
  );
}