---
import BaseLayout from '../layouts/BaseLayout.astro';
import Reveal from '../components/islands/Reveal';
import Crate from '../components/islands/Crate';
import { loadContent } from '../lib/content';

const projects = await loadContent('projects');
const featured = projects.items.filter((p) => p.featured);
const others = projects.items.filter((p) => !p.featured);
---

<BaseLayout title="Projets" description="Sélection de mes projets — le crate">
  <section class="pt-16 pb-8 relative">
    <div class="container mx-auto px-4">
      <Reveal client:load>
        <div class="flex flex-wrap items-end justify-between gap-4 mb-2">
          <div>
            <p
              class="font-mono text-xs uppercase tracking-[0.3em] text-[color:var(--color-magenta)] mb-2 flex items-center gap-2"
            >
              <span class="led led-cyan"></span>
              // crate v1.0 · digging
            </p>
            <h1 class="stencil text-4xl sm:text-5xl md:text-7xl uppercase leading-none">
              Mes <span class="text-[color:var(--color-cyan)] glow-text-cyan">projets</span>
            </h1>
          </div>
          <div class="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-text-dim)]">
            {featured.length + others.length} skeuds · {featured.length} featured
          </div>
        </div>
      </Reveal>
      <p class="text-[color:var(--color-text-muted)] max-w-xl font-mono text-sm mt-4">
        <span class="text-[color:var(--color-cyan)]">&gt;</span> une sélection de réalisations —
        live, archivées, privées. Scroll pour feuilleter le bac.
      </p>
    </div>
  </section>

  {
    featured.length > 0 && (
      <section class="relative">
        <div class="container mx-auto px-4 py-6">
          <Reveal client:visible>
            <h2 class="stencil text-xl uppercase tracking-wider text-[color:var(--color-acid)] glow-text-acid">
              ★ Featured
            </h2>
          </Reveal>
        </div>
        <Crate projects={featured} client:load />
      </section>
    )
  }

  {
    others.length > 0 && (
      <section class="relative">
        <div class="container mx-auto px-4 py-6">
          <Reveal client:visible>
            <h2 class="stencil text-xl uppercase tracking-wider text-[color:var(--color-text-muted)]">
              Autres skeuds
            </h2>
          </Reveal>
        </div>
        <Crate projects={others} client:load />
      </section>
    )
  }
</BaseLayout>