import Image from "next/image";
import { notFound } from "next/navigation";
import { useCases } from "@/data/useCases";
import Footer from "@/components/shared/Footer";
import Navbar from "@/components/shared/Navbar";
import MobileNavbar from "@/components/ui/mobile-navbar";
import CTA from "@/sections/CTA";
import HeroClient from "@/sections/HeroCase";

interface Props {
  params: Promise<{ slug: string }>; // ← Promise!
}

export default async function UseCaseDetail({ params }: Props) {
  const { slug } = await params;
  const item = useCases.find((c) => c.slug === slug);
  if (!item) notFound();

  return (
    <>
      <Navbar />
      <MobileNavbar />
      <HeroClient item={item} />
      <section className="tab:py-16 tab:px-6 mx-auto max-w-5xl sm:px-2.5 sm:py-8">
        <div className="space-y-12">
          <div>
            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
              Overview
            </h2>
            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
              {item.description}
            </p>
          </div>

          <div>
            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
              Challenge
            </h2>
            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
              {item.challenge}
            </p>
          </div>
          <Image
            src={item.image1}
            alt={`${item.title} use case`}
            width={600}
            height={480}
            className="mx-auto h-[480px] w-full rounded-xl object-cover"
          />

          <div>
            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
              Our Solution
            </h2>
            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
              {item.solution}
            </p>
          </div>

          <div>
            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
              Impact
            </h2>
            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
              {item.outcome}
            </p>
          </div>
          <Image
            src={item.image2}
            alt={`${item.title} use case`}
            width={600}
            height={480}
            className="mx-auto h-[480px] w-full rounded-xl object-cover"
          />
        </div>
      </section>
      <div className="tab:mb-0 sm:mb-10">
        <CTA />
      </div>
      <Footer />
    </>
  );
}