import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Home",
  description: "Home — Blog",
  openGraph: {
    title: "Home",
    description: "Home — Blog",
  },
}

export default function Page() {
  return (
  <div className="min-w-0 min-h-screen bg-white">
    <section className="w-full py-12 px-6 text-center border-b border-gray-100">
      <h1 className="text-4xl font-bold text-4xl font-bold text-gray-900 mb-2">The Daily Dispatch</h1>
      <p className="text-base text-lg text-gray-500">Insights on design, technology, and building great products.</p>
    </section>
    <div className="min-w-0 max-w-6xl mx-auto px-6 py-12">
      <div className="mb-12 rounded-2xl overflow-hidden border border-gray-200 hover:shadow-xl transition">
        <img src="https://www.inbuild.io/images/featured-post.svg" alt="Featured blog post cover" className="max-w-full h-auto rounded-md object-cover w-full h-72 object-cover bg-gray-200" />
        <div className="min-w-0 p-8">
          <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current inline-block bg-blue-100 text-blue-700 text-xs font-semibold px-3 py-1 rounded-full mb-3">Featured</span>
          <h2 className="text-3xl font-bold text-2xl font-bold text-gray-900 mb-3">The Future of Design Systems in 2026</h2>
          <p className="text-base text-gray-600 mb-4">How modern design systems are evolving to bridge the gap between design and development, enabling teams to ship consistent and accessible products at unprecedented speed.</p>
          <a href="#" className="text-blue-600 font-semibold hover:text-blue-700">Read More</a>
        </div>
      </div>
      <div className="grid min-w-0 grid grid-cols-3 gap-8">
        <div className="rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition">
          <img src="https://www.inbuild.io/images/post-1.svg" alt="Blog post about accessibility" className="max-w-full h-auto rounded-md object-cover w-full h-48 object-cover bg-gray-100" />
          <div className="min-w-0 p-5">
            <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Accessibility Beyond Compliance</h3>
            <p className="text-base text-gray-600 text-sm">Moving past checklists to build truly inclusive digital experiences that work for everyone.</p>
          </div>
        </div>
        <div className="rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition">
          <img src="https://www.inbuild.io/images/post-2.svg" alt="Blog post about performance" className="max-w-full h-auto rounded-md object-cover w-full h-48 object-cover bg-gray-100" />
          <div className="min-w-0 p-5">
            <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Performance Budgets That Actually Work</h3>
            <p className="text-base text-gray-600 text-sm">A practical guide to setting and enforcing performance budgets across your development workflow.</p>
          </div>
        </div>
        <div className="rounded-xl overflow-hidden border border-gray-200 hover:shadow-lg transition">
          <img src="https://www.inbuild.io/images/post-3.svg" alt="Blog post about CSS architecture" className="max-w-full h-auto rounded-md object-cover w-full h-48 object-cover bg-gray-100" />
          <div className="min-w-0 p-5">
            <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Modern CSS Architecture Patterns</h3>
            <p className="text-base text-gray-600 text-sm">Exploring scalable CSS strategies using layers, container queries, and modern layout techniques.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  )
}