import { notFound } from "next/navigation";
import Container from "@/components/ui/Container";
import Hero from "@/components/sections/Hero";
import CTASection from "@/components/sections/CTASection";
import { getCareServices, getCareServiceBySlug, getSiteSettings } from "@/lib/api";

export const revalidate = 300;

export async function generateStaticParams() {
  const services = await getCareServices();
  return services.map((s) => ({ slug: s.slug }));
}

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const service = await getCareServiceBySlug(params.slug);
  return { title: service ? `${service.title} | LarCare Services` : "LarCare Services" };
}

export default async function ServiceDetailPage({ params }: { params: { slug: string } }) {
  const [service, site] = await Promise.all([
    getCareServiceBySlug(params.slug),
    getSiteSettings()
  ]);

  if (!service) notFound();

  return (
    <>
      <Hero title={service.title} description={service.shortDescription} imageUrl={service.heroImage} />

      <section className="py-16">
        <Container className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          <div
            className="lg:col-span-2 prose-larcare"
            dangerouslySetInnerHTML={{ __html: service.bodyHtml }}
          />
          <aside className="rounded-xl2 bg-neutral-100 border border-neutral-200 p-8 h-fit">
            <h3 className="font-display text-lg text-neutral-900 mb-4">What's included</h3>
            <ul className="flex flex-col gap-3">
              {service.highlights.map((h) => (
                <li key={h} className="flex items-start gap-2 text-sm text-neutral-600">
                  <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-accent-500 shrink-0" />
                  {h}
                </li>
              ))}
            </ul>
          </aside>
        </Container>
      </section>

      <CTASection phone={site.phone} />
    </>
  );
}
