import { notFound } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft } from 'lucide-react'
import { PageIntro, Shell } from '@/components/site'
import { getProject, getSiteContent } from '@/lib/site-content'

export default async function ProjectPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const [content, project] = await Promise.all([getSiteContent(), getProject(slug)])
  if (!project) notFound()
  return <Shell settings={content.settings}>
    <PageIntro eyebrow="Projects" title="" text="" />
    <article className="mx-auto max-w-6xl px-5 py-16 lg:px-8 lg:py-24">
      <Link href="/projects" className="inline-flex items-center gap-2 rounded-full border border-[var(--line)] bg-white px-4 py-2 text-sm font-bold text-[var(--teal)] transition hover:-translate-x-1" aria-label="Back to all projects"><ArrowLeft size={16} /> Back to projects</Link>
      <div className="mt-10 grid gap-10 lg:grid-cols-[minmax(0,1fr)_15rem] lg:items-end">
        <div>
          <p className="eyebrow">{project.category}</p>
          <h1 className="mt-6 max-w-4xl font-display text-5xl leading-tight tracking-tight sm:text-7xl">{project.title}</h1>
          {project.location && <p className="mt-5 text-sm font-bold text-[var(--teal)]">{project.location}</p>}
        </div>
        <aside className="border-l-2 border-[var(--teal)] pl-5 text-sm text-[var(--ink-soft)]"><p className="eyebrow">Project story</p><p className="mt-3 font-semibold text-[var(--navy)]">A closer look at the work</p></aside>
      </div>
      {project.image && <div className="media-zoom mt-12 rounded-[2rem] bg-[var(--mist)]"><img src={project.image} alt="" className="aspect-[16/9] w-full object-cover" /></div>}
      <p className="mt-12 max-w-3xl whitespace-pre-line border-l-4 border-[var(--teal)] pl-6 text-lg leading-8 text-[var(--ink-soft)]">{project.body}</p>
      {project.gallery.length > 0 && <div className="mt-14 grid gap-5 sm:grid-cols-2">{project.gallery.map((item) => <div key={item.image} className="media-zoom rounded-3xl bg-[var(--mist)]"><img src={item.image} alt={item.alt} className="aspect-[4/3] w-full object-cover" /></div>)}</div>}
    </article>
  </Shell>
}