/*
  page.tsx
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, CalendarDays, Clock, PenTool } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Reveal } from "@/components/reveal";
import { SectionHeading } from "@/components/section-heading";
import { getBlogPosts } from "@/lib/blog";

export const metadata: Metadata = {
  title: "Blog — Essays on AI & Economics",
  description:
    "Essays by Simon-Pierre Boucher on the economics of artificial intelligence: the collapsing cost of intelligence, the ownership of AI-generated wealth, and the data limits of the singularity.",
};

export default function BlogPage() {
  const posts = getBlogPosts();

  return (
    <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6">
      <Reveal>
        <SectionHeading
          as="h1"
          eyebrow="Writing"
          title="Blog"
          icon={PenTool}
          description="Essays on the economics of artificial intelligence — intelligence as an industrial input, the ownership of machine-generated wealth, and the informational limits of recursive self-improvement."
        />
      </Reveal>

      <div className="mt-10 space-y-6">
        {posts.map((post, i) => (
          <Reveal key={post.slug} delay={i * 0.08}>
            <Link href={`/blog/${post.slug}`} className="group block">
              <Card className="relative overflow-hidden hover:-translate-y-1 hover:border-primary/25 hover:shadow-[var(--shadow-lift)]">
                <span
                  aria-hidden="true"
                  className="pointer-events-none absolute inset-y-6 left-0 w-1 rounded-r-full bg-gradient-to-b from-primary/70 to-primary/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                />
                <CardHeader className="gap-3">
                  <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs font-medium text-muted-foreground">
                    <span className="inline-flex items-center gap-1.5">
                      <CalendarDays
                        className="h-3.5 w-3.5 text-primary/70"
                        aria-hidden="true"
                      />
                      {post.dateLabel}
                    </span>
                    <span className="inline-flex items-center gap-1.5">
                      <Clock
                        className="h-3.5 w-3.5 text-primary/70"
                        aria-hidden="true"
                      />
                      {post.readingMinutes} min read
                    </span>
                    <span className="flex flex-wrap gap-1.5">
                      {post.tags.map((tag) => (
                        <Badge key={tag} variant="outline">
                          {tag}
                        </Badge>
                      ))}
                    </span>
                  </div>
                  <h2 className="font-display text-xl font-bold leading-snug tracking-tight transition-colors group-hover:text-primary sm:text-2xl">
                    {post.title}
                  </h2>
                </CardHeader>
                <CardContent className="flex flex-col gap-5">
                  <p className="max-w-3xl text-sm leading-relaxed text-muted-foreground">
                    {post.excerpt}
                  </p>
                  <div className="flex items-center justify-between gap-4">
                    <span className="inline-flex items-center gap-2 text-xs text-muted-foreground">
                      <Image
                        src="/profile/simon-pierre-boucher.jpeg"
                        alt=""
                        aria-hidden="true"
                        width={48}
                        height={48}
                        className="h-6 w-6 rounded-full object-cover object-top ring-1 ring-border/60"
                      />
                      Simon-Pierre Boucher
                    </span>
                    <span className="inline-flex items-center gap-1 text-sm font-medium text-primary">
                      Read essay
                      <ArrowRight
                        className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
                        aria-hidden="true"
                      />
                    </span>
                  </div>
                </CardContent>
              </Card>
            </Link>
          </Reveal>
        ))}
      </div>
    </div>
  );
}