import type { Metadata } from "next";
import Link from "next/link";
import {
  FaLeaf,
  FaTree,
  FaRecycle,
  FaTint,
  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: "Environmental Awareness Programs",
  description:
    "Rajvi Social Welfare Trust promotes environmental awareness through cleanliness drives, plantation activities, water conservation awareness and sustainable community living initiatives.",
  keywords: [
    "Environmental Awareness NGO",
    "Environment NGO India",
    "Plantation Drive NGO",
    "Cleanliness Awareness",
    "Sustainable Community Living",
    "Rajvi Social Welfare Trust",
  ],
  alternates: {
    canonical: "/environmental-awareness",
  },
};

const initiatives = [
  "Plantation and greenery awareness",
  "Cleanliness and hygiene drives",
  "Water conservation awareness",
  "Plastic reduction campaigns",
  "Community sustainability education",
  "Environmental responsibility programs",
];

export default function EnvironmentalAwarenessPage() {
  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">
            Environmental Awareness
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Promoting Sustainability, Cleanliness & Environmental Responsibility
          </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 encourages communities to protect the
            environment through awareness campaigns, cleanliness drives,
            plantation activities and sustainable living practices.
          </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 Environmental Mission
            </span>

            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl">
              Creating Cleaner, Greener and More Responsible Communities
            </h2>

            <p className="mt-5 leading-8 text-slate-600">
              Environmental awareness is essential for building healthy and
              sustainable communities. Our initiatives help people understand
              the importance of cleanliness, plantation, water conservation,
              waste reduction and responsible use of natural resources.
            </p>

            <p className="mt-4 leading-8 text-slate-600">
              Through volunteer participation and community awareness, Rajvi
              Social Welfare Trust promotes practical steps that every person
              can take to protect the environment.
            </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 Green Initiatives
              <FaArrowRight className="text-xs" />
            </Link>
          </div>

          <div className="grid gap-5 sm:grid-cols-2">
            {[
              { icon: FaTree, title: "Plantation Drives" },
              { icon: FaRecycle, title: "Waste Awareness" },
              { icon: FaTint, title: "Water Conservation" },
              { icon: FaLeaf, title: "Sustainable Living" },
            ].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 communities to adopt responsible and sustainable
                    practices for a healthier environment.
                  </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 Promote
            </span>

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

            <p className="mt-4 text-slate-600">
              Our awareness programs inspire people to protect nature, reduce
              waste and build cleaner 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 />
    </>
  );
}