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

export default async function NewsArticlePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const [content, article] = await Promise.all([getSiteContent(), getNewsArticle(slug)])
  if (!article) notFound()
  return <Shell settings={content.settings}>
    <div className="news-theme">
      <PageIntro eyebrow="News" title="" text="" tone="red" />
      <article className="mx-auto max-w-6xl px-5 py-16 lg:px-8 lg:py-24">
        <Link href="/news" className="inline-flex items-center gap-2 rounded-full border border-[var(--news-red-line)] bg-[var(--news-red-soft)] px-4 py-2 text-sm font-bold text-[var(--news-red)] transition hover:-translate-x-1" aria-label="Back to all news"><ArrowLeft size={16} /> Back to news</Link>
        <div className="mt-10 grid gap-10 lg:grid-cols-[minmax(0,1fr)_15rem] lg:items-end">
          <div>
            <div className="flex flex-wrap items-center gap-3 text-xs font-bold text-[var(--news-red)]"><span>{article.category}</span><span className="text-[var(--ink-soft)]">{article.date}</span>{article.isNew && <span className="news-pulse rounded-full bg-[var(--news-red)] px-3 py-1 text-white">New</span>}</div>
            <h1 className="mt-6 max-w-4xl font-display text-5xl leading-tight tracking-tight sm:text-7xl">{article.title}</h1>
            <p className="mt-6 max-w-3xl text-xl leading-8 text-[var(--ink-soft)]">{article.summary}</p>
          </div>
          <aside className="border-l-2 border-[var(--news-red)] pl-5 text-sm text-[var(--ink-soft)]"><p className="eyebrow text-[var(--news-red)]">Field note</p><p className="mt-3 font-semibold text-[var(--navy)]">{article.author || 'RG Fish Farming team'}</p><p className="mt-1">Published {article.date}</p></aside>
        </div>
        {article.image && <div className="media-zoom mt-12 rounded-[2rem] bg-[var(--news-red-soft)]"><img src={article.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(--news-red)] pl-6 text-lg leading-8 text-[var(--ink-soft)]">{article.body}</p>
      </article>
    </div>
  </Shell>
}