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

const experiences = await loadContent('experiences');

const firstYear = 2018;
const currentYear = new Date().getFullYear();
const yearsTotal = currentYear - firstYear;
---

<BaseLayout title="Expérience" description="Mon parcours pro en setlist DJ">
  <section class="py-24 min-h-screen">
    <div class="container mx-auto px-4">
      <Reveal client:load>
        <div class="mb-12">
          <div class="flex flex-wrap items-end justify-between gap-4 mb-4">
            <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-red animate-led-red"></span>
                // setlist.current
              </p>
              <h1 class="stencil text-4xl sm:text-5xl md:text-7xl uppercase leading-none">
                Mon <span class="text-[color:var(--color-magenta)] glow-text-magenta">expérience</span>
              </h1>
            </div>
            <div class="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-text-dim)] space-y-1">
              <div>[tracks: {experiences.items.length}]</div>
              <div>[duration: {yearsTotal}y]</div>
              <div>[status: <span class="text-[color:var(--color-acid)]">on air</span>]</div>
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal className="max-w-5xl mx-auto" client:visible>
        <Setlist items={experiences.items} client:load />
      </Reveal>

      {
        (experiences.skills.technical.length > 0 || experiences.skills.soft.length > 0) && (
          <div class="max-w-5xl mx-auto mt-24">
            <Reveal client:visible>
              <div class="mb-8 flex flex-wrap items-end justify-between gap-4">
                <div>
                  <p class="font-mono text-xs uppercase tracking-[0.3em] text-[color:var(--color-cyan)] mb-2">
                    // patch bay
                  </p>
                  <h2 class="stencil text-2xl sm:text-3xl md:text-4xl uppercase leading-none">
                    Compétences <span class="text-[color:var(--color-cyan)] glow-text-cyan">pros</span>
                  </h2>
                </div>
              </div>
            </Reveal>
            <Reveal client:visible>
              <PatchBay
                technical={experiences.skills.technical}
                soft={experiences.skills.soft}
                client:load
              />
            </Reveal>
          </div>
        )
      }
    </div>
  </section>
</BaseLayout>
