Featured grid

import {
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Card,
} from "@cronus-ui/ui";
import { ArrowRight } from "lucide-react";

interface BlogPost {
  id: string;
  category: string;
  title: string;
  excerpt: string;
  author: string;
  initials: string;
  mark: string;
  date: string;
  readTime: string;
  art: string;
}

const featuredPost: BlogPost = {
  id: "density",
  category: "Engineering",
  title: "Designing for density: how we rebuilt the Aurora dashboard grid",
  excerpt:
    "Eighteen months of customer sessions taught us that power users don't want less on screen — they want better hierarchy. This is the system that got us there.",
  author: "Amara Okafor",
  initials: "AO",
  mark: "Aa",
  date: "Jul 10, 2026",
  readTime: "12 min read",
  art: "from-primary/40 via-info/20 to-transparent",
};

const gridPosts: BlogPost[] = [
  {
    id: "tokens",
    category: "Design systems",
    title: "A practical guide to design tokens at scale",
    excerpt: "Naming, aliasing, and the governance that keeps forty squads on one palette.",
    author: "Priya Natarajan",
    initials: "PN",
    mark: "Tk",
    date: "Jul 8, 2026",
    readTime: "9 min read",
    art: "from-info/40 via-primary/15 to-transparent",
  },
  {
    id: "dark-mode",
    category: "Engineering",
    title: "Shipping dark mode without shipping regressions",
    excerpt: "Semantic tokens, visual tests, and a two-week bake kept 214 screens honest.",
    author: "Marcus Chen",
    initials: "MC",
    mark: "Dk",
    date: "Jul 2, 2026",
    readTime: "7 min read",
    art: "from-success/35 via-info/20 to-transparent",
  },
  {
    id: "northwind",
    category: "Customer stories",
    title: "How Northwind cut onboarding time by 40%",
    excerpt: "The retail analytics team replaced four internal tools with one workspace.",
    author: "Elena Fischer",
    initials: "EF",
    mark: "Nw",
    date: "Jun 26, 2026",
    readTime: "6 min read",
    art: "from-warning/35 via-primary/15 to-transparent",
  },
  {
    id: "tables",
    category: "Accessibility",
    title: "The anatomy of an accessible data table",
    excerpt: "Focus order, header scopes, and the screen-reader script we test each release.",
    author: "Sofia Ramos",
    initials: "SR",
    mark: "Ax",
    date: "Jun 19, 2026",
    readTime: "11 min read",
    art: "from-primary/35 via-success/20 to-transparent",
  },
  {
    id: "release",
    category: "Product",
    title: "Aurora 2.4: workflows, webhooks, and a faster editor",
    excerpt: "Automations graduate from beta, plus a rebuilt canvas that renders 3× faster.",
    author: "Daniel Osei",
    initials: "DO",
    mark: "2.4",
    date: "Jun 12, 2026",
    readTime: "5 min read",
    art: "from-info/35 via-warning/15 to-transparent",
  },
  {
    id: "pricing",
    category: "Growth",
    title: "Pricing experiments we ran so you don't have to",
    excerpt: "A year of experiments on trials, seats, and annual switches — with raw numbers.",
    author: "Hannah Blake",
    initials: "HB",
    mark: "Pr",
    date: "Jun 5, 2026",
    readTime: "8 min read",
    art: "from-success/30 via-primary/20 to-transparent",
  },
];

export function BlogGridBlock() {
  return (
    <section aria-label="Blog" className="mx-auto flex w-full max-w-6xl flex-col gap-8">
      <header className="flex flex-wrap items-end justify-between gap-4">
        <div className="flex max-w-xl flex-col gap-2">
          <p className="text-sm font-medium uppercase tracking-widest text-fg-tertiary">
            Aurora Journal
          </p>
          <h2 className="font-display text-3xl font-semibold tracking-tight text-fg">
            Latest from the journal
          </h2>
          <p className="text-fg-secondary">
            Essays on design systems, engineering, and the craft of calm software.
          </p>
        </div>
        <Button variant="outline">
          View all posts
          <ArrowRight className="size-4" aria-hidden="true" />
        </Button>
      </header>

      <Card className="gap-0 overflow-hidden py-0 shadow-lg">
        <a href="#featured-post" className="grid lg:grid-cols-[1.1fr_1fr]">
          <div
            className={`relative flex min-h-56 items-center justify-center bg-gradient-to-br ${featuredPost.art}`}
          >
            <span
              aria-hidden="true"
              className="font-display text-8xl font-semibold text-fg-muted"
            >
              {featuredPost.mark}
            </span>
            <div className="absolute start-4 top-4">
              <Badge variant="primary">Featured</Badge>
            </div>
          </div>
          <div className="flex flex-col gap-4 p-6 sm:p-8">
            <Badge variant="secondary" className="w-fit">
              {featuredPost.category}
            </Badge>
            <h3 className="font-display text-2xl font-semibold leading-snug text-fg">
              {featuredPost.title}
            </h3>
            <p className="text-sm leading-6 text-fg-secondary">{featuredPost.excerpt}</p>
            <div className="mt-auto flex items-center gap-3 pt-2">
              <Avatar className="size-9">
                <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
                  {featuredPost.initials}
                </AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                <span className="text-sm font-medium text-fg">{featuredPost.author}</span>
                <span className="text-xs text-fg-tertiary">
                  {featuredPost.date} · {featuredPost.readTime}
                </span>
              </div>
            </div>
          </div>
        </a>
      </Card>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {gridPosts.map((post) => (
          <Card key={post.id} className="gap-0 overflow-hidden py-0 shadow-xs">
            <a href="#blog-post" className="flex h-full flex-col">
              <div
                className={`flex aspect-[16/9] items-center justify-center bg-gradient-to-br ${post.art}`}
              >
                <span
                  aria-hidden="true"
                  className="font-display text-5xl font-semibold text-fg-muted"
                >
                  {post.mark}
                </span>
              </div>
              <div className="flex flex-1 flex-col gap-3 p-5">
                <Badge variant="secondary" className="w-fit">
                  {post.category}
                </Badge>
                <h3 className="font-display text-base font-semibold leading-snug text-fg">
                  {post.title}
                </h3>
                <p className="text-sm leading-6 text-fg-secondary">{post.excerpt}</p>
                <div className="mt-auto flex items-center gap-2.5 pt-2">
                  <Avatar className="size-7">
                    <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
                      {post.initials}
                    </AvatarFallback>
                  </Avatar>
                  <span className="text-xs text-fg-tertiary">
                    {post.author} · {post.date} · {post.readTime}
                  </span>
                </div>
              </div>
            </a>
          </Card>
        ))}
      </div>
    </section>
  );
}