import {
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Input,
  Label,
} from "@cronus-ui/ui";

const tocItems = [
  { id: "hierarchy", label: "Hierarchy beats whitespace", active: true },
  { id: "grid", label: "A grid that earns its keep", active: false },
  { id: "tokens", label: "Density tokens", active: false },
  { id: "results", label: "What changed for customers", active: false },
] as const;

function tocLinkClass(active: boolean) {
  return active
    ? "border-s-2 border-primary py-1 ps-3 text-sm font-medium text-primary-strong"
    : "border-s-2 border-transparent py-1 ps-3 text-sm text-fg-secondary transition-colors hover:text-fg";
}

export function BlogPostSidebarBlock() {
  return (
    <div className="mx-auto grid w-full max-w-5xl gap-10 lg:grid-cols-[minmax(0,1fr)_18rem]">
      <article aria-label="Blog post" className="flex 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>
        </header>

        <div className="flex flex-col gap-5">
          <p className="leading-7 text-fg-secondary">
            Nobody asked us to remove information from the dashboard — they asked us to make it
            easier to scan. That distinction inverted how we thought about layout for the better
            part of a year.
          </p>
          <h2 id="hierarchy" className="pt-2 font-display text-2xl font-semibold text-fg">
            Hierarchy beats whitespace
          </h2>
          <p className="leading-7 text-fg-secondary">
            Our first prototypes doubled every margin and tested terribly. 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>
          <h2 id="grid" className="pt-2 font-display text-2xl font-semibold text-fg">
            A grid that earns its keep
          </h2>
          <p className="leading-7 text-fg-secondary">
            Cards no longer hoard fixed slots. Each widget declares a minimum footprint and a
            preferred one, and the layout engine negotiates the rest — no more half-empty rows
            below the fold.
          </p>
          <h2 id="tokens" className="pt-2 font-display text-2xl font-semibold text-fg">
            Density tokens
          </h2>
          <p className="leading-7 text-fg-secondary">
            A single{" "}
            <code className="rounded-md bg-surface-inset px-1.5 py-0.5 font-mono text-sm text-fg">
              data-density
            </code>{" "}
            attribute cascades through every component, retuning spacing, type scale, and row
            height together.
          </p>
          <h2 id="results" 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, and tickets about the
            export button dropped to zero. The pattern library ships in Aurora 2.4 — free on
            every plan.
          </p>
        </div>
      </article>

      <aside className="flex flex-col gap-6 lg:sticky lg:top-6 lg:self-start">
        <Card className="gap-4 shadow-xs">
          <CardHeader>
            <CardTitle className="text-sm font-medium uppercase tracking-wide text-fg-tertiary">
              On this page
            </CardTitle>
          </CardHeader>
          <CardContent>
            <nav aria-label="Table of contents" className="flex flex-col gap-1">
              {tocItems.map((item) => (
                <a key={item.id} href={`#${item.id}`} className={tocLinkClass(item.active)}>
                  {item.label}
                </a>
              ))}
            </nav>
          </CardContent>
        </Card>

        <Card className="gap-4 shadow-xs">
          <CardHeader>
            <CardTitle className="font-display text-base">Get the next essay</CardTitle>
            <CardDescription>One long-form piece a month, straight to your inbox.</CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div className="flex items-center gap-3">
              <Avatar className="size-9">
                <AvatarFallback className="bg-surface-overlay text-xs 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>
            <Label htmlFor="post-newsletter-email" className="sr-only">
              Email address
            </Label>
            <Input
              id="post-newsletter-email"
              type="email"
              placeholder="you@company.com"
              autoComplete="email"
            />
            <Button variant="primary" className="w-full">
              Subscribe
            </Button>
            <p className="text-xs text-fg-tertiary">One email a month. Unsubscribe anytime.</p>
          </CardContent>
        </Card>
      </aside>
    </div>
  );
}