Editorial list

import {
  Avatar,
  AvatarFallback,
  Badge,
  Separator,
} 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 listPosts: 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",
  },
  {
    id: "tokens",
    category: "Design systems",
    title: "A practical guide to design tokens at scale",
    excerpt:
      "Naming is governance: aliases, semantic layers, and the review rules that let forty squads ship from one palette without collisions.",
    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: "tables",
    category: "Accessibility",
    title: "The anatomy of an accessible data table",
    excerpt:
      "Focus order, header scopes, and the screen-reader walkthrough we run on every release. Accessible tables are not harder — they are decided earlier.",
    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: "pricing",
    category: "Growth",
    title: "Pricing experiments we ran so you don't have to",
    excerpt:
      "Twelve months of experiments on trials, seat tiers, and annual switching — including the two tests that backfired and what they taught us.",
    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 BlogListBlock() {
  return (
    <section aria-label="Blog" className="mx-auto flex w-full max-w-3xl flex-col gap-10">
      <header className="flex flex-col items-center gap-3 text-center">
        <p className="text-sm font-medium uppercase tracking-widest text-fg-tertiary">
          The Aurora Journal
        </p>
        <h2 className="font-display text-4xl font-semibold tracking-tight text-fg">
          Notes on building calm software
        </h2>
        <p className="max-w-md text-fg-secondary">
          Long-form writing from the team — published monthly, no fluff, no filler.
        </p>
      </header>

      <div className="flex flex-col">
        {listPosts.map((post, index) => (
          <article key={post.id}>
            {index > 0 ? <Separator className="my-8" /> : null}
            <a href="#blog-post" className="group grid gap-5 sm:grid-cols-[auto_1fr]">
              <div
                className={`hidden size-28 items-center justify-center rounded-2xl bg-gradient-to-br sm:flex ${post.art}`}
              >
                <span
                  aria-hidden="true"
                  className="font-display text-3xl font-semibold text-fg-muted"
                >
                  {post.mark}
                </span>
              </div>
              <div className="flex flex-col gap-2.5">
                <div className="flex flex-wrap items-center gap-2 text-xs text-fg-tertiary">
                  <Badge variant="secondary">{post.category}</Badge>
                  <span>{post.date}</span>
                  <span aria-hidden="true">·</span>
                  <span>{post.readTime}</span>
                </div>
                <h3 className="font-display text-2xl font-semibold leading-snug text-fg transition-colors group-hover:text-primary-strong">
                  {post.title}
                </h3>
                <p className="leading-7 text-fg-secondary">{post.excerpt}</p>
                <div className="flex items-center justify-between pt-1">
                  <div className="flex items-center gap-2.5">
                    <Avatar className="size-7">
                      <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
                        {post.initials}
                      </AvatarFallback>
                    </Avatar>
                    <span className="text-sm text-fg-secondary">{post.author}</span>
                  </div>
                  <span className="inline-flex items-center gap-1 text-sm font-medium text-primary-strong">
                    Read article
                    <ArrowRight className="size-4" aria-hidden="true" />
                  </span>
                </div>
              </div>
            </a>
          </article>
        ))}
      </div>
    </section>
  );
}