import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import Script from "next/script";
import { notFound } from "next/navigation";
import {
  FaArrowLeft,
  FaCalendarAlt,
  FaUsers,
  FaHeart,
} from "react-icons/fa";

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

const SITE_URL = "https://www.rajvisocialwelfare.org";

const stories = [
  {
    title: "Creating Educational Opportunities for Young Learners",
    slug: "education-opportunities",
    image: "/stories/s1.webp",
    category: "Education Support",
    excerpt:
      "Through awareness and support initiatives, students gained motivation and access to learning opportunities.",
    content:
      "Rajvi Social Welfare Trust continues to promote education awareness and learning opportunities for children and youth. Through community engagement and educational support activities, many students have been encouraged to continue their studies and pursue a brighter future.",
  },
  {
    title: "Healthcare Awareness Reaching Rural Communities",
    slug: "healthcare-awareness-rural-communities",
    image: "/stories/s2.webp",
    category: "Healthcare Awareness",
    excerpt:
      "Community awareness programs helped families understand preventive healthcare and healthy practices.",
    content:
      "Healthcare awareness initiatives helped communities understand the importance of hygiene, preventive healthcare and healthy living. These programs empowered families with practical information to improve their wellbeing.",
  },
  {
    title: "Women Empowerment Through Community Participation",
    slug: "women-empowerment-community-participation",
    image: "/stories/s3.webp",
    category: "Women Empowerment",
    excerpt:
      "Awareness initiatives encouraged women to participate actively in community development activities.",
    content:
      "Women empowerment programs created awareness and encouraged greater participation in community development activities. These efforts supported confidence building, leadership and social engagement.",
  },
  {
    title: "Youth Development Through Leadership Programs",
    slug: "youth-development-leadership-programs",
    image: "/stories/s4.webp",
    category: "Youth Development",
    excerpt:
      "Young individuals developed leadership skills and social responsibility through engagement programs.",
    content:
      "Youth-focused activities helped participants improve leadership qualities, teamwork and social responsibility. These initiatives encouraged active participation in community welfare efforts.",
  },
  {
    title: "Environmental Awareness Creating Cleaner Communities",
    slug: "environmental-awareness-cleaner-communities",
    image: "/stories/s5.webp",
    category: "Environmental Awareness",
    excerpt:
      "Cleanliness and awareness campaigns inspired communities to adopt sustainable practices.",
    content:
      "Environmental awareness campaigns promoted cleanliness, sustainability and responsible use of natural resources. Community participation played a key role in creating a positive environmental impact.",
  },
  {
    title: "Community Welfare Initiatives Bringing Positive Change",
    slug: "community-welfare-positive-change",
    image: "/stories/s6.webp",
    category: "Community Welfare",
    excerpt:
      "Grassroots welfare initiatives strengthened community participation and social support systems.",
    content:
      "Community welfare initiatives supported local development and strengthened community participation. These efforts helped create awareness, collaboration and positive social change.",
  },
];

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

export function generateStaticParams() {
  return stories.map((story) => ({
    slug: story.slug,
  }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const story = stories.find((item) => item.slug === slug);

  if (!story) {
    return {
      title: "Story Not Found",
      robots: {
        index: false,
        follow: false,
      },
    };
  }

  return {
    title: story.title,
    description: story.excerpt,
    alternates: {
      canonical: `/success-stories/${story.slug}`,
    },
    openGraph: {
      title: story.title,
      description: story.excerpt,
      url: `${SITE_URL}/success-stories/${story.slug}`,
      type: "article",
      images: [
        {
          url: story.image,
          width: 1200,
          height: 630,
          alt: story.title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: story.title,
      description: story.excerpt,
      images: [story.image],
    },
  };
}

export default async function StoryDetailsPage({ params }: Props) {
  const { slug } = await params;
  const story = stories.find((item) => item.slug === slug);

  if (!story) {
    notFound();
  }

  const articleSchema = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: story.title,
    description: story.excerpt,
    image: `${SITE_URL}${story.image}`,
    author: {
      "@type": "Organization",
      name: "Rajvi Social Welfare Trust",
      url: SITE_URL,
    },
    publisher: {
      "@type": "Organization",
      name: "Rajvi Social Welfare Trust",
      logo: {
        "@type": "ImageObject",
        url: `${SITE_URL}/logo.webp`,
      },
    },
    mainEntityOfPage: `${SITE_URL}/success-stories/${story.slug}`,
    datePublished: "2026-06-14",
    dateModified: "2026-06-14",
  };

  return (
    <>
      <Script
        id={`story-schema-${story.slug}`}
        type="application/ld+json"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(articleSchema),
        }}
      />

      <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-5xl 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)]">
            {story.category}
          </span>

          <h1 className="mt-6 text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            {story.title}
          </h1>

          <div className="mt-6 flex flex-wrap items-center justify-center gap-5 text-sm text-slate-300">
            <span className="flex items-center gap-2">
              <FaCalendarAlt className="text-[var(--accent)]" />
              Success Story
            </span>

            <span className="flex items-center gap-2">
              <FaUsers className="text-[var(--accent)]" />
              Community Impact
            </span>
          </div>
        </div>
      </section>

      <Breadcrumb />

      <section className="bg-white py-14 sm:py-16 lg:py-24">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div className="overflow-hidden rounded-3xl shadow-sm">
            <div className="relative h-[260px] sm:h-[400px] lg:h-[520px]">
              <Image
                src={story.image}
                alt={story.title}
                fill
                priority
                sizes="(max-width: 768px) 100vw, 1024px"
                className="object-cover"
              />
            </div>
          </div>

          <div className="mt-10">
            <div className="inline-flex items-center gap-2 rounded-full bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-700">
              <FaHeart />
              Community Impact Story
            </div>

            <h2 className="mt-6 text-3xl font-extrabold text-slate-950">
              Story Overview
            </h2>

            <p className="mt-5 text-lg leading-8 text-slate-600">
              {story.excerpt}
            </p>

            <div className="mt-8 rounded-3xl bg-slate-50 p-6 sm:p-8">
              <h3 className="text-2xl font-bold text-slate-950">
                Making a Difference
              </h3>

              <p className="mt-4 leading-8 text-slate-600">
                {story.content}
              </p>

              <p className="mt-4 leading-8 text-slate-600">
                Rajvi Social Welfare Trust remains committed to creating
                meaningful social impact through education support, healthcare
                awareness, women empowerment, youth development, environmental
                sustainability and community welfare initiatives.
              </p>
            </div>

            <div className="mt-10 rounded-3xl border border-amber-200 bg-amber-50 p-6 sm:p-8">
              <h3 className="text-2xl font-bold text-slate-950">
                Be Part of the Change
              </h3>

              <p className="mt-4 leading-8 text-slate-700">
                Together, we can create stronger communities and empower more
                people through collective action, volunteering and social
                support.
              </p>

              <div className="mt-6 flex flex-col gap-4 sm:flex-row">
                <Link
                  href="/volunteers"
                  className="rounded-xl bg-[var(--accent)] px-6 py-4 text-center text-sm font-bold text-black"
                >
                  Become a Volunteer
                </Link>

                <Link
                  href="/donate-now"
                  className="rounded-xl bg-slate-950 px-6 py-4 text-center text-sm font-bold text-white"
                >
                  Donate Now
                </Link>
              </div>
            </div>

            <div className="mt-10">
              <Link
                href="/success-stories"
                className="inline-flex items-center gap-2 text-sm font-bold text-amber-600"
              >
                <FaArrowLeft />
                Back to Success Stories
              </Link>
            </div>
          </div>
        </div>
      </section>

      <CTA />
    </>
  );
}