import type { Metadata } from "next";

import Breadcrumb from "@/components/common/Breadcrumb";
import CTA from "@/components/common/CTA";
import EventCard from "@/components/cards/EventCard";

export const metadata: Metadata = {
  title: "Events & Awareness Programs",
  description:
    "Explore events, awareness drives, community programs, volunteer activities and social welfare campaigns organized by Rajvi Social Welfare Trust.",
  keywords: [
    "Rajvi Social Welfare Trust Events",
    "NGO Events India",
    "Awareness Programs",
    "Community Welfare Events",
    "Volunteer Activities",
    "Social Welfare Campaigns",
  ],
  alternates: {
    canonical: "/events",
  },
};

const events = [
  {
    title: "Education Awareness Drive",
    slug: "/events/education-awareness-drive",
    description:
      "A community-focused education awareness program to encourage learning, guidance and student support.",
    image: "/events/1.webp",
    date: "Upcoming",
    location: "India",
    status: "Education Event",
  },
  {
    title: "Healthcare Awareness Camp",
    slug: "/events/healthcare-awareness-camp",
    description:
      "Healthcare awareness initiative focused on preventive care, hygiene, nutrition and community wellbeing.",
    image: "/events/2.webp",
    date: "Upcoming",
    location: "India",
    status: "Healthcare Event",
  },
  {
    title: "Women Empowerment Workshop",
    slug: "/events/women-empowerment-workshop",
    description:
      "A workshop designed to promote confidence, awareness, dignity and opportunities for women.",
    image: "/events/3.webp",
    date: "Upcoming",
    location: "India",
    status: "Empowerment Event",
  },
  {
    title: "Environmental Awareness Campaign",
    slug: "/events/environmental-awareness-campaign",
    description:
      "A community campaign encouraging cleanliness, plantation, waste reduction and sustainable living.",
    image: "/events/4.webp",
    date: "Upcoming",
    location: "India",
    status: "Green Event",
  },
  {
    title: "Youth Development Session",
    slug: "/events/youth-development-session",
    description:
      "Youth-focused session for leadership, awareness, responsibility and social participation.",
    image: "/events/6.webp",
    date: "Upcoming",
    location: "India",
    status: "Youth Event",
  },
  {
    title: "Community Welfare Outreach",
    slug: "/events/community-welfare-outreach",
    description:
      "Volunteer-led welfare outreach to support underserved families and grassroots communities.",
    image: "/events/5.webp",
    date: "Upcoming",
    location: "India",
    status: "Welfare Event",
  },
];

export default function EventsPage() {
  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">
            Events & Campaigns
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Community Events, Awareness Drives & Social Welfare Programs
          </h1>

          <p className="mx-auto mt-6 max-w-3xl text-sm leading-7 text-slate-300 sm:text-lg sm:leading-8">
            Explore upcoming and recent events organized by Rajvi Social Welfare
            Trust to promote education, healthcare awareness, women empowerment,
            youth development, environmental awareness and community welfare.
          </p>
        </div>
      </section>

      <Breadcrumb />

      <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="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {events.map((event) => (
              <EventCard
                key={event.slug}
                title={event.title}
                slug={event.slug}
                description={event.description}
                image={event.image}
                date={event.date}
                location={event.location}
                status={event.status}
              />
            ))}
          </div>
        </div>
      </section>

      <CTA />
    </>
  );
}