import Link from "next/link";
import { PageSchema } from "../../components/page-schema";
import { SiteFooter } from "../../components/site-footer";
import { SiteHeader } from "../../components/site-header";
import { siteInfo } from "../../data/site";

export const metadata = {
  title: "Blog",
  description: "Insights on financial control, audit readiness, and ledger automation.",
  keywords: siteInfo.keywords
};

const posts = [
  {
    title: "Why 'Audit-Ready' Matters More Than Ever",
    excerpt:
      "As regulatory scrutiny increases, the ability to produce a clean, traceable ledger is becoming a competitive advantage.",
    date: "Oct 24, 2023",
    readTime: "5 min read",
    slug: "audit-ready-matters"
  },
  {
    title: "The Hidden Cost of Spreadsheet Chaos",
    excerpt:
      "Manual reconciliation isn't just slow—it's a liability. Here's how to move to a system of record.",
    date: "Oct 12, 2023",
    readTime: "4 min read",
    slug: "spreadsheet-chaos"
  },
  {
    title: "Automating the Month-End Close",
    excerpt:
      "How to use rules and categories to reduce your close time from days to hours.",
    date: "Sep 28, 2023",
    readTime: "6 min read",
    slug: "automating-month-end"
  }
];

export default function BlogPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "LedgerOne Blog",
      description: "Insights on financial control, audit readiness, and ledger automation.",
      url: `${siteInfo.url}/blog`
    },
    {
      "@context": "https://schema.org",
      "@type": "Blog",
      blogPost: posts.map((post) => ({
        "@type": "BlogPosting",
        headline: post.title,
        description: post.excerpt,
        datePublished: post.date,
        url: `${siteInfo.url}/blog/${post.slug}`
      }))
    }
  ];

  return (
    <div className="min-h-screen bg-background font-sans text-foreground flex flex-col">
      <SiteHeader />

      <main className="flex-1 pt-32 pb-24 relative overflow-hidden">
        <div className="absolute inset-0 mesh-gradient -z-10 opacity-40" />

        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16 animate-slide-up">
            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
              Insights for modern finance teams.
            </h1>
            <p className="mt-6 text-lg text-muted-foreground">
              Best practices for financial control, audit readiness, and automation.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {posts.map((post) => (
              <Link key={post.slug} href={`/blog/${post.slug}`} className="group">
                <div className="glass-panel h-full rounded-2xl p-8 shadow-sm transition-all hover:shadow-md hover:-translate-y-1">
                  <div className="flex items-center gap-3 text-xs text-muted-foreground mb-4">
                    <time dateTime={post.date}>{post.date}</time>
                    <span>•</span>
                    <span>{post.readTime}</span>
                  </div>
                  <h3 className="text-xl font-bold text-foreground group-hover:text-primary transition-colors mb-3">
                    {post.title}
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">
                    {post.excerpt}
                  </p>
                  <div className="mt-6 flex items-center text-primary font-medium text-sm">
                    Read article
                    <svg className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </main>

      <SiteFooter />
      <PageSchema schema={schema} />
    </div>
  );
}