import Link from "next/link";
import { notFound } from "next/navigation";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import JsonLd from "@/components/JsonLd";
import { articleBySlug, seoArticles } from "@/lib/articles";
import { breadcrumbJson } from "@/lib/seo";
import { site, whatsappUrl } from "@/lib/site";

export function generateStaticParams(){return seoArticles.map(a=>({slug:a.slug}))}
export async function generateMetadata({params}:{params:Promise<{slug:string}>}){const {slug}=await params;const a=articleBySlug(slug);if(!a)return{};return{title:`${a.title} | Al Jannah`,description:a.excerpt,keywords:[a.focusKeyword,...a.supportingKeywords],alternates:{canonical:`/artikel/${a.slug}`},robots:{index:true,follow:true},openGraph:{title:a.title,description:a.excerpt,type:"article",url:`${site.url}/artikel/${a.slug}`}}}
export default async function Page({params}:{params:Promise<{slug:string}>}){const {slug}=await params;const a=articleBySlug(slug);if(!a)notFound();const article=a!;const path=`/artikel/${article.slug}`;const related=seoArticles.filter(x=>x.slug!==article.slug&&(x.category===article.category||x.supportingKeywords.some(k=>article.supportingKeywords.includes(k)))).slice(0,4);const schema={"@context":"https://schema.org","@type":"Article",headline:article.title,description:article.excerpt,mainEntityOfPage:`${site.url}${path}`,author:{"@type":"Organization",name:site.name},publisher:{"@type":"Organization",name:site.name},about:article.focusKeyword};const crumbs=breadcrumbJson([{name:"Beranda",url:"/"},{name:"Artikel",url:"/artikel"},{name:article.title,url:path}]);return <><JsonLd data={schema}/><JsonLd data={crumbs}/><Header/><main className="section"><div className="container content-grid"><article className="article"><div className="breadcrumbs"><Link href="/">Beranda</Link> / <Link href="/artikel">Artikel</Link> / {article.category}</div><span className="eyebrow">{article.category}</span><h1>{article.title}</h1><p className="lead">{article.excerpt}</p>{article.sections.map(s=><section key={s.heading}><h2>{s.heading}</h2>{s.paragraphs.map((p,i)=><p key={i}>{p}</p>)}{s.bullets&&<ul>{s.bullets.map(b=><li key={b}>{b}</li>)}</ul>}</section>)}<div className="cta-box"><h2>Butuh informasi langsung dari Al Jannah?</h2><p>Hubungi WhatsApp {site.whatsappDisplay}, telepon {site.phone}, atau email {site.email}. Untuk pertanyaan donasi, selalu cocokkan rekening dengan halaman resmi.</p><a className="btn" href={whatsappUrl()} target="_blank" rel="noreferrer">Hubungi Al Jannah</a></div></article><aside><div className="sidebox"><h3>Focus Keyword</h3><p>{article.focusKeyword}</p><div className="pill-list">{article.supportingKeywords.map(k=><span className="pill" key={k}>{k}</span>)}</div></div><div className="sidebox"><h3>Artikel Terkait</h3>{related.length?related.map(r=><p key={r.slug}><Link className="link" href={`/artikel/${r.slug}`}>{r.title}</Link></p>):<p><Link className="link" href="/artikel">Lihat semua artikel</Link></p>}</div><div className="sidebox"><h3>Donasi Resmi</h3><p>BRI 136901000387306<br/>a.n. Yayasan Al Jannah Semarang</p><p>BSI 7036542211<br/>a.n. PA AL JANNAH</p><Link className="link" href="/donasi">Halaman donasi →</Link></div></aside></div></main><Footer/></>}
