---
import Layout from "../../layouts/Layout.astro";
import Diagram from "../../components/Diagram.astro";
import { getCollection, render } from "astro:content";
import type { GetStaticPaths } from "astro";

export const getStaticPaths = (async () => {
  const projects = await getCollection("projects");
  return projects.map((entry) => ({ params: { slug: entry.id }, props: { entry } }));
}) satisfies GetStaticPaths;

const { entry } = Astro.props;
const p = entry.data;
const { Content } = await render(entry);
---

<Layout title={p.title} path={`/projects/${entry.id}/`} description={p.summary}>
  <article class="case">
    <div class="container case__inner">
      <a class="case__back mono" href="/projects/">← All projects</a>

      <header class="case__head" data-reveal>
        <p class="eyebrow">Case study</p>
        <h1 class="case__title">{p.title}</h1>
        <p class="case__outcome">{p.outcome}</p>

        <p class="case__meta mono">
          <span>{p.role}</span><span class="case__sep">·</span><span>{p.period}</span>
        </p>

        <ul class="case__stack">
          {p.stack.map((s) => <li class="tag">{s}</li>)}
        </ul>

        {p.links && (
          <p class="case__links">
            {p.links.map((l) => (
              <a class="btn" href={l.href} rel="noopener noreferrer">{l.label} →</a>
            ))}
          </p>
        )}
      </header>

      {p.diagram && <Diagram name={p.diagram} />}

      <div class="prose case__body" data-reveal>
        <Content />
      </div>
    </div>
  </article>
</Layout>

<style>
  .case__inner {
    max-width: 52rem;
    padding-block: var(--space-7);
  }
  .case__back {
    display: inline-block;
    font-size: var(--step--1);
    color: var(--text-dim);
    margin-bottom: var(--space-6);
  }
  .case__back:hover {
    color: var(--accent);
    text-decoration: none;
  }
  .case__title {
    margin-top: var(--space-3);
    font-size: var(--step-4);
  }
  .case__outcome {
    margin-top: var(--space-4);
    font-size: var(--step-1);
    color: var(--text);
    border-left: 3px solid var(--accent);
    padding-left: var(--space-4);
    max-width: 60ch;
  }
  .case__meta {
    margin-top: var(--space-5);
    font-size: 0.78rem;
    color: var(--text-faint);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .case__sep {
    opacity: 0.6;
  }
  .case__stack {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .case__links {
    margin-top: var(--space-5);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .case__body {
    margin-top: var(--space-7);
  }
</style>
