import {
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Separator,
} from "@cronus-ui/ui";
import { Link2, Mail, Share2 } from "lucide-react";

export function BlogPostArticleBlock() {
  return (
    <article aria-label="Blog post" className="mx-auto flex w-full max-w-2xl flex-col gap-8">
      <header className="flex flex-col gap-5">
        <div className="flex flex-wrap items-center gap-2 text-xs text-fg-tertiary">
          <Badge variant="primary">Engineering</Badge>
          <span>Jul 10, 2026</span>
          <span aria-hidden="true">·</span>
          <span>12 min read</span>
        </div>
        <h1 className="font-display text-3xl font-semibold leading-tight tracking-tight text-fg sm:text-4xl">
          Designing for density: how we rebuilt the Aurora dashboard grid
        </h1>
        <p className="text-lg leading-8 text-fg-secondary">
          Power users never asked for less on screen — they asked for better hierarchy. This is
          the layout system that finally delivered both.
        </p>
        <div className="flex items-center gap-3">
          <Avatar className="size-10">
            <AvatarFallback className="bg-surface-overlay text-sm text-fg-secondary">
              AO
            </AvatarFallback>
          </Avatar>
          <div className="flex flex-col">
            <span className="text-sm font-medium text-fg">Amara Okafor</span>
            <span className="text-xs text-fg-tertiary">Co-founder &amp; CEO, Aurora</span>
          </div>
        </div>
      </header>

      <div
        aria-hidden="true"
        className="flex aspect-[2/1] items-center justify-center rounded-2xl bg-gradient-to-br from-primary/40 via-info/20 to-transparent"
      >
        <span className="font-display text-8xl font-semibold text-fg-muted">Aa</span>
      </div>

      <div className="flex flex-col gap-5">
        <p className="leading-7 text-fg-secondary">
          When we sat down with our hundred most active teams last spring, one theme kept
          surfacing: nobody asked us to remove information from the dashboard. They asked us to
          make it easier to scan. The distinction sounds subtle, but it inverted how we thought
          about layout for the better part of a year.
        </p>
        <h2 className="pt-2 font-display text-2xl font-semibold text-fg">
          Hierarchy beats whitespace
        </h2>
        <p className="leading-7 text-fg-secondary">
          Whitespace is a tool, not a goal. Our first prototypes doubled every margin and tested
          terribly — sessions got longer, not shorter. What moved the numbers was contrast
          between levels: one loud metric, a quiet supporting row, and gridlines that only appear
          when the eye needs a rail.
        </p>
        <blockquote className="border-s-2 border-primary ps-5 font-display text-xl italic leading-relaxed text-fg">
          “Density is not the enemy of clarity. Vagueness is.”
        </blockquote>
        <p className="leading-7 text-fg-secondary">
          The new grid leans on{" "}
          <code className="rounded-md bg-surface-inset px-1.5 py-0.5 font-mono text-sm text-fg">
            grid-auto-flow: dense
          </code>{" "}
          and a pair of density tokens, so every card negotiates space with its neighbors instead
          of hoarding a fixed slot.
        </p>
        <h2 className="pt-2 font-display text-2xl font-semibold text-fg">
          What changed for customers
        </h2>
        <p className="leading-7 text-fg-secondary">
          Median time-to-first-insight fell from 34 seconds to 19 across the beta cohort, and
          support tickets about the export button dropped to zero. The full pattern library ships
          in Aurora 2.4 — free on every plan.
        </p>
      </div>

      <Separator />

      <footer className="flex flex-wrap items-center justify-between gap-3">
        <span className="text-sm text-fg-secondary">Share this article</span>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon-sm">
            <Share2 aria-hidden="true" />
            <span className="sr-only">Share</span>
          </Button>
          <Button variant="outline" size="icon-sm">
            <Mail aria-hidden="true" />
            <span className="sr-only">Share by email</span>
          </Button>
          <Button variant="outline" size="icon-sm">
            <Link2 aria-hidden="true" />
            <span className="sr-only">Copy link</span>
          </Button>
        </div>
      </footer>
    </article>
  );
}