---
import type { Profile } from '../content/schemas';
import Waveform from './islands/Waveform';

interface Props {
  profile: Profile;
}
const { profile } = Astro.props;
const year = new Date().getFullYear();
---

<footer class="relative mt-24 border-t border-[color:var(--color-border)] bg-[color:var(--color-surface)]">
  <!-- Waveform séparateur -->
  <div class="absolute -top-10 inset-x-0 h-10 flex items-end opacity-40 pointer-events-none">
    <Waveform bars={120} color="var(--color-magenta)" className="w-full h-full" client:visible />
  </div>

  <div class="container mx-auto px-4 py-16">
    <div class="grid grid-cols-1 md:grid-cols-[2fr_1fr_1fr] gap-10 mb-12">
      <div>
        <div class="flex items-center gap-3 mb-4">
          <span
            class="stencil text-3xl leading-none tracking-wider flex items-baseline gap-0.5"
          >
            <span class="text-[color:var(--color-cyan)] glow-text-cyan">J</span>
            <span class="text-[color:var(--color-acid)] glow-text-acid">L</span>
            <span class="text-[color:var(--color-magenta)] glow-text-magenta text-sm">•</span>
          </span>
          {
            profile.available && (
              <span class="inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-[0.2em] text-[color:var(--color-text-muted)]">
                <span class="led led-green animate-led-green" />
                on air
              </span>
            )
          }
        </div>
        <p class="text-sm text-[color:var(--color-text-muted)] max-w-md mb-4">
          {profile.tagline}
        </p>
        <p class="font-mono text-[10px] uppercase tracking-[0.25em] text-[color:var(--color-magenta)]">
          // code propre, sono sale
        </p>
      </div>

      <div>
        <h3 class="stencil uppercase tracking-[0.25em] text-xs text-[color:var(--color-cyan)] mb-4">
          navigate
        </h3>
        <ul class="space-y-2 text-sm font-mono">
          <li>
            <a href="/" class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] transition">
              &gt; home
            </a>
          </li>
          <li>
            <a href="/projets" class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] transition">
              &gt; projets
            </a>
          </li>
          <li>
            <a href="/experience" class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] transition">
              &gt; experience
            </a>
          </li>
          <li>
            <a href="/formations" class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] transition">
              &gt; formations
            </a>
          </li>
        </ul>
      </div>

      <div>
        <h3 class="stencil uppercase tracking-[0.25em] text-xs text-[color:var(--color-acid)] mb-4">
          open mic
        </h3>
        <ul class="space-y-2 text-sm font-mono">
          {
            profile.socials.email && (
              <li>
                <a
                  href={`mailto:${profile.socials.email}`}
                  class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-acid)] transition break-all"
                >
                  &gt; {profile.socials.email}
                </a>
              </li>
            )
          }
          {
            profile.socials.github && (
              <li>
                <a
                  href={profile.socials.github}
                  target="_blank"
                  rel="noopener"
                  class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-acid)] transition"
                >
                  &gt; github ↗
                </a>
              </li>
            )
          }
          {
            profile.socials.gitea && (
              <li>
                <a
                  href={profile.socials.gitea}
                  target="_blank"
                  rel="noopener"
                  class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-acid)] transition"
                >
                  &gt; gitea ↗
                </a>
              </li>
            )
          }
          {
            profile.socials.linkedin && (
              <li>
                <a
                  href={profile.socials.linkedin}
                  target="_blank"
                  rel="noopener"
                  class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-acid)] transition"
                >
                  &gt; linkedin ↗
                </a>
              </li>
            )
          }
          {
            profile.socials.website && (
              <li>
                <a
                  href={profile.socials.website}
                  target="_blank"
                  rel="noopener"
                  class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-acid)] transition"
                >
                  &gt; portfolio ↗
                </a>
              </li>
            )
          }
        </ul>
      </div>
    </div>

    <div
      class="pt-6 border-t border-[color:var(--color-border)] flex flex-col md:flex-row justify-between items-center gap-2 text-[10px] text-[color:var(--color-text-dim)] font-mono uppercase tracking-widest"
    >
      <span>© {year} johan leroy · all rights reserved</span>
      <span>
        <span class="text-[color:var(--color-cyan)]">&lt;/&gt;</span> built with astro · dark mode only
      </span>
    </div>
  </div>
</footer>
