import type { Metadata } from 'next'
import { getAllPosts } from '@/lib/posts'
import BlogList from '@/components/BlogList'
export const metadata: Metadata = { title: 'Blog', description: 'Storage tips, BTO guides, and advice for HDB homeowners from L-Shaped Rack Singapore.' }
export default function Blog() {
  const posts = getAllPosts()
  return (
    <>
      <section style={{ background: 'var(--dark-bg)', padding: '3.5rem 1.5rem 2.5rem' }}>
        <div style={{ maxWidth: 700, margin: '0 auto', textAlign: 'center' }}>
          <div className="eyebrow">Blog</div>
          <h1 style={{ fontSize: 'clamp(1.6rem,3.5vw,2.4rem)', color: 'var(--cta-heading)', marginBottom: '0.75rem' }}>Storage Tips & BTO Guides</h1>
          <p style={{ fontSize: '0.9rem', color: 'var(--dark-muted)', lineHeight: 1.72 }}>Practical advice for new HDB homeowners on getting the most out of every square foot.</p>
        </div>
      </section>
      <section style={{ padding: '3rem 1.5rem', background: 'var(--section-bg)', borderTop: '0.5px solid var(--border)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <BlogList posts={posts} />
        </div>
      </section>
    </>
  )
}