import type { Metadata } from 'next'
import Link from 'next/link'
import { ArrowLeft } from 'lucide-react'
import { Footer } from '@/components/layout/Footer'

export const metadata: Metadata = {
  title: 'Blog — Website Monitoring Tips & Updates',
  description:
    'Guides, tutorials, and product updates from the SiteChangeMonitor team. Learn how to monitor websites effectively and reduce false alerts.',
  alternates: { canonical: '/blog' },
  openGraph: {
    title: 'Blog — Website Monitoring Tips & Updates',
    description:
      'Guides, tutorials, and product updates from the SiteChangeMonitor team.',
    url: '/blog',
  },
}

export default function BlogPage() {
    return (
        <div className="min-h-screen bg-background flex flex-col">
            <div className="flex-1 py-24 px-6">
                <div className="mx-auto max-w-5xl space-y-12">
                    <div className="space-y-4">
                        <Link href="/" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors">
                            <ArrowLeft className="mr-2 h-4 w-4" />
                            Back to Home
                        </Link>
                        <h1 className="text-4xl md:text-5xl font-bold font-display text-foreground">Blog</h1>
                        <p className="text-xl text-muted-foreground max-w-2xl">
                            Latest updates, guides, and insights from the SiteChangeMonitor team.
                        </p>
                    </div>

                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {/* Placeholder for empty state */}
                        <div className="col-span-full py-12 text-center border rounded-2xl border-dashed border-border bg-secondary/5">
                            <p className="text-muted-foreground">No posts published yet. Stay tuned!</p>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    )
}