import type { Metadata } from "next";

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

export const metadata: Metadata = {
  title: "Success Stories | Rajvi Social Welfare Trust",
  description:
    "Read inspiring success stories and community impact initiatives by Rajvi Social Welfare Trust across education, healthcare awareness, women empowerment, youth development and social welfare programs.",
  keywords: [
    "NGO Success Stories",
    "Rajvi Social Welfare Trust Success Stories",
    "Community Impact Stories",
    "Women Empowerment Success Story",
    "Education Support Success Story",
    "Social Welfare NGO India",
  ],
  alternates: {
    canonical: "/success-stories",
  },
};

const stories = [
  {
    title: "Creating Educational Opportunities for Young Learners",
    slug: "/success-stories/education-opportunities",
    image: "/stories/s1.webp",
    tag: "Education Support",
    description:
      "Through awareness and support initiatives, students gained motivation and access to learning opportunities.",
  },
  {
    title: "Healthcare Awareness Reaching Rural Communities",
    slug: "/success-stories/healthcare-awareness-rural-communities",
    image: "/stories/s2.webp",
    tag: "Healthcare Awareness",
    description:
      "Community awareness programs helped families understand preventive healthcare and healthy practices.",
  },
  {
    title: "Women Empowerment Through Community Participation",
    slug: "/success-stories/women-empowerment-community-participation",
    image: "/stories/s3.webp",
    tag: "Women Empowerment",
    description:
      "Awareness initiatives encouraged women to participate actively in community development activities.",
  },
  {
    title: "Youth Development Through Leadership Programs",
    slug: "/success-stories/youth-development-leadership-programs",
    image: "/stories/s4.webp",
    tag: "Youth Development",
    description:
      "Young individuals developed leadership skills and social responsibility through engagement programs.",
  },
  {
    title: "Environmental Awareness Creating Cleaner Communities",
    slug: "/success-stories/environmental-awareness-cleaner-communities",
    image: "/stories/s5.webp",
    tag: "Environmental Awareness",
    description:
      "Cleanliness and awareness campaigns inspired communities to adopt sustainable practices.",
  },
  {
    title: "Community Welfare Initiatives Bringing Positive Change",
    slug: "/success-stories/community-welfare-positive-change",
    image: "/stories/s6.webp",
    tag: "Community Welfare",
    description:
      "Grassroots welfare initiatives strengthened community participation and social support systems.",
  },
];

export default function SuccessStoriesPage() {
  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-xs font-bold uppercase tracking-widest text-[var(--accent)]">
            Success Stories
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Real Stories of Hope, Progress & Community Impact
          </h1>

          <p className="mx-auto mt-6 max-w-3xl text-base leading-8 text-slate-300 sm:text-lg">
            Discover inspiring stories that reflect the positive impact of
            Rajvi Social Welfare Trust’s initiatives in education, healthcare,
            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="mx-auto max-w-3xl text-center">
            <span className="inline-flex rounded-full bg-amber-50 px-4 py-2 text-xs font-bold uppercase tracking-widest text-amber-600">
              Community Impact
            </span>

            <h2 className="mt-4 text-3xl font-extrabold text-slate-950 sm:text-4xl">
              Stories That Inspire Change
            </h2>

            <p className="mt-4 text-slate-600">
              Every initiative contributes toward building stronger, healthier
              and more empowered communities across India.
            </p>
          </div>

          <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {stories.map((story) => (
              <StoryCard
                key={story.slug}
                title={story.title}
                slug={story.slug}
                image={story.image}
                tag={story.tag}
                description={story.description}
              />
            ))}
          </div>
        </div>
      </section>

      <section className="bg-section-light py-14 sm:py-16 lg:py-24">
        <div className="mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
          <h2 className="text-3xl font-extrabold text-slate-950 sm:text-4xl">
            Every Contribution Creates Lasting Impact
          </h2>

          <p className="mt-6 text-lg leading-8 text-slate-600">
            Behind every success story is a collective effort from volunteers,
            supporters, donors and community members who believe in positive
            social change. Together, we continue working towards a stronger and
            more inclusive future.
          </p>
        </div>
      </section>

      <CTA />
    </>
  );
}