---
import BaseLayout from '../layouts/BaseLayout.astro'
import { SITE } from '../data/site'
import { releases, releaseUrl, RELEASES_URL } from '../data/releases'

const title = `what's new in openclaude — release highlights | openclaude`
const description = `Highlights from every openclaude release: buddy companions, GPT-5.6 support, new providers, background sessions, and more. Currently at v${SITE.version}.`

const jsonLd = [
  {
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    name: `what's new in openclaude`,
    url: `${SITE.url}/changelog/`,
    description,
    isPartOf: { '@type': 'WebSite', name: SITE.name, url: SITE.url },
  },
  {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'openclaude', item: SITE.url },
      { '@type': 'ListItem', position: 2, name: 'changelog', item: `${SITE.url}/changelog/` },
    ],
  },
]
---

<BaseLayout title={title} description={description} jsonLd={jsonLd}>
  <section class="hero grid-bg" aria-labelledby="changelog-heading">
    <div class="container hero-inner">
      <p class="pill"><span class="dot" aria-hidden="true"></span>currently v{SITE.version}</p>
      <h1 id="changelog-heading" class="text-hero">what's new.</h1>
      <p class="hero-sub">
        a quick summary of each release.
        full notes live on <a href={RELEASES_URL} rel="noopener">github releases</a>.
      </p>
    </div>
  </section>

  <section class="section" aria-label="release history">
    <div class="container">
      <ol class="timeline">
        {releases.map(r => (
          <li class="release">
            <div class="release-meta">
              <a class="release-ver" href={releaseUrl(r.version)} rel="noopener">v{r.version}</a>
              <time datetime={r.date}>{r.date}</time>
            </div>
            <div class="release-body">
              <h2>{r.theme}</h2>
              <ul>
                {r.highlights.map(h => <li>{h}</li>)}
              </ul>
            </div>
          </li>
        ))}
      </ol>
      <p class="text-body-dim older">
        looking for something older? the complete history is in the
        <a href={`${SITE.github}/blob/main/CHANGELOG.md`} rel="noopener"> changelog on github</a>.
      </p>
    </div>
  </section>
</BaseLayout>

<style>
  .hero {
    padding: calc(var(--nav-h) + clamp(3.5rem, 10vh, 6rem)) 0 clamp(3rem, 8vh, 5rem);
  }
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
  }
  .hero-sub {
    max-width: 34rem;
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    line-height: 1.7;
  }
  .hero-sub a { color: var(--accent); }

  .timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 46rem;
  }
  .release {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--line);
  }
  .release:first-child { padding-top: 0; }
  @media (max-width: 40rem) {
    .release { grid-template-columns: 1fr; gap: 0.5rem; }
  }
  .release-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .release-ver {
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
  }
  .release-meta time { color: var(--faint); font-size: 0.72rem; letter-spacing: 0.04em; }
  .release-body h2 {
    margin: 0 0 0.75rem;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .release-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .release-body li {
    position: relative;
    padding: 0.25rem 0 0.25rem 1.1rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.65;
  }
  .release-body li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 0.5rem;
    top: 0.72rem;
  }
  .older { margin-top: 2rem; font-size: 0.8rem; }
  .older a { color: var(--accent); }
</style>
