---
import BaseLayout from '../layouts/BaseLayout.astro';
import RolesMorph from '../components/islands/RolesMorph';
import Reveal from '../components/islands/Reveal';
import RackModule from '../components/islands/RackModule';
import SplitReveal from '../components/islands/SplitReveal';
import Waveform from '../components/islands/Waveform';
import BootSequence from '../components/islands/BootSequence';
import { Icon } from '@iconify-icon/react';
import { loadAll } from '../lib/content';

const { profile, skills, interests, site } = await loadAll();
---

<BaseLayout>
  <BootSequence client:load />

  <!-- HERO -->
  <section class="relative min-h-[calc(100vh-4rem)] flex items-center overflow-hidden">
    <!-- Stickers décoratifs (très discrets) -->
    <div
      class="absolute top-24 right-6 md:right-12 z-20 flex items-center gap-2 sticker text-[color:var(--color-red)]"
    >
      <span class="led led-red animate-led-red"></span>
      LIVE · 174 BPM
    </div>
    <div
      class="absolute bottom-20 left-6 md:left-12 z-20 sticker text-[color:var(--color-cyan)]"
      style="transform: rotate(2deg)"
    >
      Nantes FR · 2019 → now
    </div>

    <div class="container mx-auto px-4 relative z-10">
      <div class="max-w-3xl">
        <p
          class="font-mono text-xs uppercase tracking-[0.3em] text-[color:var(--color-cyan)] mb-4 flex items-center gap-2"
        >
          <span class="led led-cyan"></span>
          &gt; frequency: 174 bpm · hardtek
        </p>

        <h1 class="stencil text-6xl md:text-8xl lg:text-9xl leading-[0.9] mb-6 uppercase">
          <SplitReveal
            text="Johan"
            as="span"
            className="block text-[color:var(--color-text)]"
            delay={0.1}
            client:load
          />
          <SplitReveal
            text="Leroy"
            as="span"
            className="block text-[color:var(--color-acid)] glow-text-acid"
            delay={0.45}
            client:load
          />
        </h1>

        <div
          class="font-display text-2xl md:text-4xl mb-8 min-h-[2.5rem] flex items-center gap-2"
        >
          <span class="text-[color:var(--color-text-dim)]">[</span>
          <RolesMorph roles={profile.hero.roles} client:load />
          <span class="text-[color:var(--color-text-dim)]">]</span>
        </div>

        <p
          class="font-mono text-sm uppercase tracking-[0.25em] text-[color:var(--color-magenta)] mb-6 italic"
        >
          // code propre, sono sale
        </p>

        <p class="text-lg text-[color:var(--color-text-muted)] mb-10 max-w-2xl">
          {profile.bio}
        </p>

        <div class="flex flex-wrap gap-4">
          {
            profile.hero.cta.map((btn) => (
              <a
                href={btn.href}
                target={btn.external ? '_blank' : undefined}
                rel={btn.external ? 'noopener noreferrer' : undefined}
                class:list={[btn.variant === 'primary' ? 'btn-primary' : 'btn-ghost']}
              >
                {btn.label}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-4 h-4"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M17 8l4 4m0 0l-4 4m4-4H3"
                  />
                </svg>
              </a>
            ))
          }
        </div>
      </div>
    </div>

    <!-- Waveform en bas du hero -->
    <div class="absolute bottom-0 inset-x-0 h-20 flex items-end pointer-events-none opacity-60">
      <Waveform bars={80} color="var(--color-cyan)" className="w-full h-full" client:visible />
    </div>

    <!-- Scroll indicator -->
    <div
      class="absolute bottom-24 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 text-[color:var(--color-text-dim)] font-mono text-[10px]"
    >
      <span class="uppercase tracking-widest">scroll</span>
      <div class="w-px h-10 bg-gradient-to-b from-[color:var(--color-cyan)] to-transparent"></div>
    </div>
  </section>

  <!-- SOUND SYSTEM RACK — Primary -->
  <section id="skills" class="py-24 relative">
    <div class="container mx-auto px-4">
      <Reveal client:visible>
        <div class="mb-10 flex flex-wrap items-end justify-between gap-4">
          <div>
            <p class="font-mono text-xs uppercase tracking-[0.3em] text-[color:var(--color-magenta)] mb-2">
              // ch.01 — main rack
            </p>
            <h2 class="stencil text-4xl md:text-5xl uppercase leading-none">
              Technologies <span class="text-[color:var(--color-cyan)] glow-text-cyan">maîtrisées</span>
            </h2>
          </div>
          <div class="flex items-center gap-2 font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-text-dim)]">
            <span class="led led-cyan animate-pulse"></span>
            system online · 174 bpm
          </div>
        </div>
      </Reveal>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr">
        {
          skills.primary.map((cat, i) => (
            <Reveal delay={i * 0.06} className="h-full" client:visible>
              <RackModule
                label={cat.label}
                items={cat.items}
                accent="cyan"
                bpm={174}
                index={i}
                client:visible
              />
            </Reveal>
          ))
        }
      </div>

      <Reveal client:visible>
        <div class="mt-16 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-acid)] mb-2">
              // ch.02 — side rack
            </p>
            <h2 class="stencil text-3xl md:text-4xl uppercase leading-none">
              Autres technologies <span class="text-[color:var(--color-magenta)] glow-text-magenta">manipulées</span>
            </h2>
          </div>
          <div class="flex items-center gap-2 font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-text-dim)]">
            <span class="led led-acid animate-pulse"></span>
            patch bank · 140 bpm
          </div>
        </div>
      </Reveal>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr">
        {
          skills.secondary.map((cat, i) => (
            <Reveal delay={i * 0.06} className="h-full" client:visible>
              <RackModule
                label={cat.label}
                items={cat.items}
                accent="magenta"
                bpm={140}
                index={skills.primary.length + i}
                client:visible
              />
            </Reveal>
          ))
        }
      </div>
    </div>
  </section>

  <!-- OFF DECKS (interests) -->
  <section class="py-24 relative">
    <div class="container mx-auto px-4">
      <Reveal client:visible>
        <div class="mb-10 flex flex-wrap items-end justify-between gap-4">
          <div>
            <p class="font-mono text-xs uppercase tracking-[0.3em] text-[color:var(--color-acid)] mb-2">
              // ch.03 — off decks
            </p>
            <h2 class="stencil text-4xl md:text-5xl uppercase leading-none">
              Centres d'<span class="text-[color:var(--color-magenta)] glow-text-magenta">intérêt</span>
            </h2>
          </div>
        </div>
      </Reveal>

      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 auto-rows-fr">
        {
          interests.items.map((interest, i) => {
            const color =
              interest.color === 'cyan'
                ? 'var(--color-cyan)'
                : interest.color === 'magenta'
                  ? 'var(--color-magenta)'
                  : interest.color === 'violet'
                    ? 'var(--color-violet)'
                    : 'var(--color-ice)';
            return (
              <Reveal delay={i * 0.1} className="h-full" client:visible>
                <div
                  class="card-neon h-full flex flex-col items-center justify-center text-center hover:-translate-y-2 transition-transform"
                  style={`border-color: ${color}40`}
                >
                  <div
                    class="w-12 h-12 mb-3 flex items-center justify-center rounded-full"
                    style={`background: ${color}15; color: ${color}; box-shadow: 0 0 20px ${color}40`}
                  >
                    <Icon icon={interest.icon} width="24" height="24" />
                  </div>
                  <p class="font-display text-sm uppercase tracking-wider">{interest.label}</p>
                </div>
              </Reveal>
            );
          })
        }
      </div>
    </div>
  </section>
</BaseLayout>
