import { notFound } from 'next/navigation'
import { PageIntro, Shell } from '@/components/site'
import { getService, getSiteContent } from '@/lib/site-content'

export default async function ServicePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const [content, service] = await Promise.all([getSiteContent(), getService(slug)])
  if (!service) notFound()
  const requestUrl = content.settings.links.serviceRequest ? `${content.settings.links.serviceRequest}?service=${encodeURIComponent(service.slug)}` : ''
  return <Shell settings={content.settings}>
    <PageIntro eyebrow="Services" title="" text="" />
    <article className="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-[1fr_.8fr] lg:px-8 lg:py-28">
      <div><p className="eyebrow">{service.category}</p><h1 className="mt-6 font-display text-5xl leading-tight tracking-tight sm:text-7xl">{service.name}</h1><p className="mt-7 text-xl leading-8 text-[var(--ink-soft)]">{service.description || service.label}</p>{service.priceLabel && <p className="mt-5 font-bold text-[var(--teal)]">{service.priceLabel}</p>}{requestUrl && <a href={requestUrl} className="mt-8 inline-flex rounded-full bg-gradient-to-r from-[var(--teal)] to-[var(--navy)] px-7 py-3.5 text-sm font-bold text-white shadow-md transition hover:-translate-y-1 hover:shadow-xl">Request service</a>}</div>
      <div>{service.image && <img src={service.image} alt="" className="aspect-[4/3] w-full rounded-[2rem] object-cover" />}{service.instructions && <p className="mt-6 whitespace-pre-line leading-7 text-[var(--ink-soft)]">{service.instructions}</p>}</div>
    </article>
  </Shell>
}