---
import Icon from './Icon.astro';
import { getChangelog, type ChangelogTag } from '../lib/changelog';

/**
 * ChangelogShowcase - a landing-page CHANGELOG section.
 *
 * A clean vertical timeline of the latest releases. Content is the same
 * build-time data that powers /changelog/ (the most recent merged pull
 * requests on warmbly/warmbly), so the section never drifts from the actual
 * product history. Self-contained, no props, no client JS.
 *
 * Category chips map the changelog tag vocabulary to a reader-friendly set:
 *   shipped -> New      (sky)
 *   changed -> Improved (emerald)
 *   fixed   -> Fixed    (amber)
 */

interface Release {
  date: string;
  category: 'New' | 'Improved' | 'Fixed';
  title: string;
  url: string;
  number: number;
  bullets: string[];
}

const categoryByTag: Record<ChangelogTag, Release['category']> = {
  shipped: 'New',
  changed: 'Improved',
  fixed: 'Fixed',
};

// The latest few entries, pulled at build time from the real merged PRs.
const releases: Release[] = (await getChangelog()).slice(0, 4).map((e) => ({
  date: e.date,
  category: categoryByTag[e.tag],
  title: e.title,
  url: e.url,
  number: e.number,
  bullets: e.bullets.length ? e.bullets : [e.body],
}));

const categoryStyle = (c: Release['category']) => {
  if (c === 'New') {
    return { chip: 'bg-sky-50 text-sky-700 ring-sky-100', dot: 'bg-sky-500', rail: 'bg-sky-500' };
  }
  if (c === 'Improved') {
    return { chip: 'bg-emerald-50 text-emerald-700 ring-emerald-100', dot: 'bg-emerald-500', rail: 'bg-emerald-500' };
  }
  return { chip: 'bg-amber-50 text-amber-700 ring-amber-100', dot: 'bg-amber-500', rail: 'bg-amber-500' };
};
---
<section class="bg-[color:var(--surface-2)] border-y border-[color:var(--border)] py-20 md:py-28">
  <div class="container-page">
    <!-- Header: eyebrow + heading + subcopy -->
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12 md:mb-16">
      <div class="max-w-2xl">
        <div class="flex items-center gap-2.5 mb-4">
          <span class="text-[11px] uppercase tracking-[0.18em] text-[color:var(--brand-strong)] font-mono">
            Changelog
          </span>
          <span class="w-1 h-1 rounded-full bg-[color:var(--border-strong)]"></span>
          <span class="inline-flex items-center gap-1.5 text-[11px] uppercase tracking-[0.14em] text-muted-foreground font-mono">
            <span class="relative inline-flex">
              <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
              <span class="absolute inset-0 rounded-full bg-emerald-500/40 animate-pulse-soft"></span>
            </span>
            Shipping continuously
          </span>
        </div>
        <h2 class="text-[28px] md:text-[40px] font-semibold tracking-[-0.025em] leading-[1.08] text-heading">
          The latest from Warmbly.
        </h2>
        <p class="mt-4 text-[15.5px] md:text-[16.5px] text-foreground/75 leading-relaxed">
          New features, behavioural changes, and fixes, in the order they reached production. Every entry is dated, tagged, and traceable to a commit.
        </p>
      </div>

      <a
        href="/changelog/"
        class="group shrink-0 inline-flex items-center gap-1.5 h-9 px-4 rounded-[10px] text-[12.5px] font-medium bg-white ring-1 ring-[color:var(--border)] text-foreground/80 hover:text-heading hover:ring-[color:var(--brand)]/40 hover:-translate-y-0.5 transition-all"
      >
        View full changelog
        <Icon name="arrowUpRight" size={13} class="text-muted-foreground group-hover:text-[color:var(--brand-strong)] transition-colors" />
      </a>
    </div>

    <!-- Vertical timeline of releases -->
    <ol class="relative">
      <!-- continuous rail -->
      <span aria-hidden="true" class="absolute left-[7px] top-2 bottom-2 w-px bg-[color:var(--border)] hidden sm:block"></span>

      {releases.map((r) => {
        const s = categoryStyle(r.category);
        return (
          <li class="relative sm:pl-10 mb-4 last:mb-0">
            <!-- timeline node -->
            <span aria-hidden="true" class="hidden sm:flex absolute left-0 top-6 w-[15px] h-[15px] items-center justify-center">
              <span class="w-[15px] h-[15px] rounded-full bg-white ring-1 ring-[color:var(--border)] flex items-center justify-center">
                <span class={`w-1.5 h-1.5 rounded-full ${s.dot}`}></span>
              </span>
            </span>

            <article class="relative bg-white ring-1 ring-[color:var(--border)] rounded-[12px] p-5 md:p-6 hover:ring-[color:var(--brand)]/40 hover:shadow-[0_18px_36px_-22px_rgba(2,132,199,0.3)] transition-all overflow-hidden">
              <!-- category accent rail -->
              <span aria-hidden="true" class={`absolute left-0 top-0 bottom-0 w-[3px] ${s.rail}`}></span>

              <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
                <span class="text-[11.5px] font-mono uppercase tracking-[0.14em] text-muted-foreground tabular-nums">
                  {r.date}
                </span>
                <a href={r.url} class="text-[11.5px] font-mono text-muted-foreground hover:text-[color:var(--brand-strong)] transition-colors tabular-nums">
                  #{r.number}
                </a>
                <span class={`ml-auto inline-flex items-center gap-1.5 h-5 px-2 rounded-full ring-1 text-[10px] font-semibold uppercase tracking-[0.1em] ${s.chip}`}>
                  <span class={`w-1 h-1 rounded-full ${s.dot}`}></span>
                  {r.category}
                </span>
              </div>

              <h3 class="mt-3 text-[16px] md:text-[17px] font-semibold text-heading tracking-[-0.015em] leading-[1.25]">
                {r.title}
              </h3>

              <ul class="mt-3 space-y-1.5">
                {r.bullets.map((b) => (
                  <li class="flex gap-2.5 text-[12.5px] text-foreground/70 leading-relaxed">
                    <span class={`mt-[7px] w-1 h-1 rounded-full shrink-0 ${s.dot}`}></span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </article>
          </li>
        );
      })}
    </ol>

    <!-- footer link -->
    <div class="mt-10 flex flex-wrap items-center gap-x-4 gap-y-2 text-[11.5px] font-mono text-muted-foreground sm:pl-10">
      <span>Older releases and the full history</span>
      <span class="w-1 h-1 rounded-full bg-[color:var(--border-strong)]"></span>
      <a href="/changelog/" class="text-[color:var(--brand-strong)] hover:text-[color:var(--brand)] transition-colors">
        Read the full changelog
      </a>
    </div>
  </div>
</section>
