import { getPosts } from '@/lib/posts'
import { PostList } from '@/components/blog/PostList'

export default async function HomePage() {
  const posts = await getPosts()

  return (
    <main className="mx-auto max-w-5xl px-6 py-10 sm:py-14">
      <header className="editorial-hero mb-14 rounded-[2rem] border border-border px-6 py-12 shadow-card sm:px-10 sm:py-16">
        <div className="relative z-10 max-w-3xl">
          <p className="mb-4 font-mono text-xs uppercase tracking-[0.28em] text-ink-soft">
            Minimal static journal
          </p>
          <h1 className="heading-xl mb-5 max-w-2xl text-ink sm:text-5xl">
            Quiet notes on design, code, and the web.
          </h1>
          <p className="max-w-2xl text-base leading-7 text-ink-soft sm:text-lg">
            A small, fast blog for thoughtful essays, implementation notes, and experiments in readable interfaces.
          </p>
        </div>
      </header>

      <section aria-labelledby="latest-heading" className="space-y-7">
        <div className="flex flex-col gap-2 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="mb-2 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Latest</p>
            <h2 id="latest-heading" className="heading-lg m-0 text-ink">
              Recent writing
            </h2>
          </div>
          <p className="max-w-md text-sm leading-6 text-ink-soft">
            Fresh posts appear here as soon as they are published.
          </p>
        </div>

        {posts.length > 0 ? (
          <PostList posts={posts} />
        ) : (
          <div className="empty-state">
            <p className="font-mono text-xs uppercase tracking-[0.22em] text-ink-soft">No posts yet</p>
            <h3 className="heading-sm m-0 text-ink">The notebook is ready.</h3>
            <p className="m-0 max-w-xl text-sm leading-6 text-ink-soft">
              Add your first MDX post and it will show up here with the same polished card treatment.
            </p>
          </div>
        )}
      </section>
    </main>
  )
}