import type { Metadata } from "next";
import {
  FaHandHoldingHeart,
  FaShieldAlt,
  FaUsers,
  FaGraduationCap,
  FaHeartbeat,
  FaLeaf,
} from "react-icons/fa";

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

export const metadata: Metadata = {
  title: "Donate Now | Support Social Welfare Initiatives",
  description:
    "Support Rajvi Social Welfare Trust through donations and help empower communities through education, healthcare awareness, women empowerment, youth development and community welfare programs.",
  keywords: [
    "Donate NGO India",
    "Support Social Welfare",
    "Donate to NGO",
    "Rajvi Social Welfare Trust Donation",
    "Charity Donation India",
    "Education Support Donation",
    "Community Welfare Donation",
  ],
  alternates: {
    canonical: "/donate-now",
  },
};

const donationCauses = [
  {
    icon: FaGraduationCap,
    title: "Education Support",
    description: "Helping children and youth access learning opportunities and educational resources.",
  },
  {
    icon: FaHeartbeat,
    title: "Healthcare Awareness",
    description: "Supporting awareness campaigns and community health initiatives.",
  },
  {
    icon: FaUsers,
    title: "Women Empowerment",
    description: "Creating opportunities for women through awareness and development programs.",
  },
  {
    icon: FaLeaf,
    title: "Community Welfare",
    description: "Supporting grassroots initiatives that improve lives and strengthen communities.",
  },
];

export default function DonateNowPage() {
  return (
    <>
      {/* Hero Section */}
      <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">
            Support Our Mission
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Every Donation Creates Hope & Positive Change
          </h1>

          <p className="mx-auto mt-6 max-w-3xl text-sm leading-7 text-slate-300 sm:text-lg sm:leading-8">
            Your contribution helps Rajvi Social Welfare Trust continue its
            efforts in education support, healthcare awareness, women
            empowerment, youth development and community welfare initiatives.
          </p>
        </div>
      </section>

      <Breadcrumb />

      {/* Donation Impact */}
      <section className="bg-white 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">
              Where Your Support Helps
            </span>
            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl lg:text-5xl">
              Making Community Impact Through Donations
            </h2>
          </div>

          <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {donationCauses.map((item) => {
              const Icon = item.icon;
              return (
                <div key={item.title} className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-lg">
                  <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--accent)] text-xl 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">{item.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Donation Form and Info Section */}
      <section className="bg-section-light py-14 sm:py-16 lg:py-24">
        <div className="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-12 lg:px-8">
          
          {/* Form Left Side */}
          <div className="lg:col-span-7">
            <DonationForm />
          </div>

          {/* Info Right Side */}
          <div className="lg:col-span-5">
            <div className="rounded-3xl bg-slate-950 p-6 text-white shadow-xl sm:p-8">
              <span className="inline-flex rounded-full bg-white/10 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-[var(--accent)]">
                Why Donate?
              </span>
              <h2 className="mt-4 text-3xl font-extrabold">Your Support Matters</h2>
              <p className="mt-4 text-sm leading-7 text-slate-300">
                Every contribution, regardless of size, helps us reach more people through welfare initiatives and awareness programs.
              </p>

              <div className="mt-8 space-y-5">
                <div className="flex gap-4">
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--accent)] text-black">
                    <FaHandHoldingHeart />
                  </div>
                  <div>
                    <h3 className="font-bold">Direct Community Impact</h3>
                    <p className="mt-1 text-sm text-slate-300">Help support programs that improve lives.</p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--accent)] text-black">
                    <FaUsers />
                  </div>
                  <div>
                    <h3 className="font-bold">Support Families</h3>
                    <p className="mt-1 text-sm text-slate-300">Strengthen communities through social welfare.</p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--accent)] text-black">
                    <FaShieldAlt />
                  </div>
                  <div>
                    <h3 className="font-bold">Responsible Utilization</h3>
                    <p className="mt-1 text-sm text-slate-300">Donations are directed toward charitable activities.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTA />
    </>
  );
}