---
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';
import { homeAnchor } from '@i18n/slugMap';
import { getProjectCards } from '@lib/content';
import SectionLabel from '@components/ui/SectionLabel.astro';
import Chip from '@components/ui/Chip.astro';
import FramedImage from '@components/ui/FramedImage.astro';

interface Props {
  locale: Locale;
  number?: string;
  heading?: string;
  header?: boolean; // false on the standalone projects index (it has its own H1)
}
const { locale, number = '02', heading, header = true } = Astro.props;
const d = useDict(locale);
const projects = getProjectCards(locale);
const caseStudies = projects.filter((p) => p.template === 'case-study');
const capabilities = projects.filter((p) => p.template === 'capability');
---

<section
  id={homeAnchor('projects', locale)}
  class:list={['mx-auto max-w-[--content-max] px-6', header && 'pt-24']}
  data-reveal
>
  {
    header && (
      <>
        <SectionLabel number={number} text={d.home.projectsLabel} />
        <h2 class="mt-4 text-h2">{heading ?? d.home.projectsHeading}</h2>
      </>
    )
  }

  <div class="mt-8 grid gap-6 lg:grid-cols-2">
    {
      caseStudies.map((p) => (
        <a
          href={p.path}
          class="group block overflow-hidden rounded-md border border-line bg-surface-1 transition-colors duration-[--dur-standard] hover:border-line-strong"
          aria-label={`${p.name} — ${d.project.readCaseStudy}`}
        >
          <div class="relative overflow-hidden">
            {p.heroMedia && (
              <div class="transition-transform duration-[--dur-standard] group-hover:-translate-y-1">
                <FramedImage media={p.heroMedia} noZoom class="rounded-none border-0" />
              </div>
            )}
            <div class="absolute right-4 top-4">
              <Chip kind="status" status={p.status} label={d.project.status[p.status]} />
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-h3 font-semibold text-ink">{p.name}</h3>
            <p class="mt-2 max-w-prose text-body text-ink-muted">{p.cardTeaser}</p>
            <ul class="mt-4 flex flex-wrap gap-2">
              {p.stack.slice(0, 5).map((s) => (
                <li>
                  <Chip kind="stack" label={s.name} />
                </li>
              ))}
            </ul>
            <p class="mt-5 inline-flex items-center gap-2 text-body text-accent">
              {d.project.readCaseStudy}
              <span class="transition-transform duration-[--dur-quick] group-hover:translate-x-1">→</span>
            </p>
          </div>
        </a>
      ))
    }
  </div>

  {
    capabilities.map((p) => (
      <a
        href={p.path}
        class="group mt-6 flex flex-col items-start gap-4 rounded-md border border-line bg-surface-1 p-6 transition-colors duration-[--dur-standard] hover:border-line-strong sm:flex-row sm:items-center"
      >
        <span class="grid h-12 w-12 shrink-0 place-items-center rounded-sm border border-accent/40 text-accent" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5" />
            <rect x="3" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5" />
            <rect x="14" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.5" />
            <path d="M13.5 6.5H18a2 2 0 0 1 2 2V11" stroke="currentColor" stroke-width="1.5" />
          </svg>
        </span>
        <div class="flex-1">
          <h3 class="text-h4 font-semibold text-ink">{p.name}</h3>
          <p class="mt-1 text-small text-ink-muted">{p.cardTeaser}</p>
        </div>
        <span class="inline-flex items-center gap-2 text-body text-accent">
          {d.project.explore}
          <span class="transition-transform duration-[--dur-quick] group-hover:translate-x-1">→</span>
        </span>
      </a>
    ))
  }
</section>
