import type { Metadata } from 'next'
import { getPostBySlug, getAllPosts } from '@/lib/posts'
import { notFound } from 'next/navigation'
import ReactMarkdown from 'react-markdown'
import Link from 'next/link'

export async function generateStaticParams() {
  return getAllPosts().map(p => ({ slug: p.slug }))
}

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = getPostBySlug(params.slug)
  if (!post) return {}
  return { title: post.title, description: post.excerpt }
}

export default function BlogPost({ params }: { params: { slug: string } }) {
  const post = getPostBySlug(params.slug)
  if (!post) notFound()
  return (
    <>
      <section style={{ background: 'var(--dark-bg)', padding: '3.5rem 1.5rem 2.5rem' }}>
        <div style={{ maxWidth: 700, margin: '0 auto' }}>
          <Link href="/blog" style={{ fontSize: 12, color: 'var(--gold)', textDecoration: 'none', display: 'inline-block', marginBottom: 16 }}>← Back to Blog</Link>
          <div style={{ fontSize: 11, color: 'var(--dark-muted)', marginBottom: 10 }}>{post.date}</div>
          <h1 style={{ fontSize: 'clamp(1.4rem,3.5vw,2rem)', color: 'var(--cta-heading)', lineHeight: 1.3 }}>{post.title}</h1>
        </div>
      </section>
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-bg)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 700, margin: '0 auto' }}>
          <div style={{ fontSize: '0.875rem', lineHeight: 1.85, color: 'var(--body)' }}>
            <ReactMarkdown>{post.content}</ReactMarkdown>
          </div>
          <div style={{ marginTop: '3rem', paddingTop: '1.5rem', borderTop: '0.5px solid var(--border)', textAlign: 'center' }}>
            <p style={{ fontSize: 13, color: 'var(--body)', marginBottom: 12 }}>Ready to plan your storeroom?</p>
            <Link href="/quotation" className="btn-gold">Get a Free Quotation →</Link>
          </div>
        </div>
      </section>
    </>
  )
}