---
import { Image } from 'astro:assets';
import club from '../assets/hero-club.jpg';
import nizz from '../assets/nizz-cutout.png';
import { CONTACT, GENRES } from '../data/site';

// Laserstrahlen: Position in %, Start-/Endwinkel, Farbe, Startverzoegerung
const beams = [
  { x: 18, from: '-26deg', to: '-13deg', color: 'var(--color-laser-cyan)', delay: '0s' },
  { x: 32, from: '-12deg', to: '-3deg', color: 'var(--color-laser-magenta)', delay: '-2.6s' },
  { x: 47, from: '9deg', to: '19deg', color: 'var(--color-gold-400)', delay: '-5.1s' },
  { x: 61, from: '22deg', to: '11deg', color: 'var(--color-laser-violet)', delay: '-1.3s' },
  { x: 74, from: '31deg', to: '20deg', color: 'var(--color-laser-cyan)', delay: '-6.7s' },
];

const genreLine = GENRES.map((g) => g.name).join(' • ');
---

<section id="start" class="relative isolate min-h-svh overflow-hidden">
  {/* Ebene 1: Club-Ausschnitt des Original-Artworks, langsam driftend */}
  <div class="absolute inset-0 -z-30" aria-hidden="true">
    <Image
      src={club}
      alt=""
      widths={[640, 1024, 1600, 2000]}
      sizes="100vw"
      loading="eager"
      fetchpriority="high"
      class="h-full w-full animate-drift object-cover object-center opacity-60"
    />
  </div>

  {/* Ebene 2: animierte Laser */}
  <div class="absolute inset-x-0 top-0 -z-20 h-[125%] overflow-hidden" aria-hidden="true">
    {
      beams.map((b) => (
        <span
          class="absolute top-[-12%] h-full w-px origin-top animate-sweep blur-[1.5px] mix-blend-screen"
          style={`left:${b.x}%;--beam-from:${b.from};--beam-to:${b.to};animation-delay:${b.delay};background:linear-gradient(to bottom, ${b.color} 0%, ${b.color} 35%, transparent 100%);`}
        />
      ))
    }
  </div>

  {/* Ebene 3: Abdunkeln, damit die Typo sicher lesbar bleibt */}
  <div
    class="absolute inset-0 -z-10 bg-[radial-gradient(120%_85%_at_18%_35%,transparent_0%,--alpha(var(--color-ink-950)/72%)_70%),linear-gradient(to_bottom,--alpha(var(--color-ink-950)/85%)_0%,--alpha(var(--color-ink-950)/25%)_38%,var(--color-ink-950)_97%)]"
    aria-hidden="true"
  >
  </div>

  <div
    class="relative mx-auto flex min-h-svh max-w-7xl flex-col justify-center px-5 pt-28 pb-36 sm:px-8 lg:pb-32"
  >
    {/*
      Die Figur liegt bewusst absolut und nicht im Textfluss: als Grid-Spalte
      wuerde ihre Eigenhoehe (649x1919 px) die Zeile auf ueber 1200 px aufziehen
      und Ueberschrift samt Buttons unter die Falz druecken.
    */}
    <div
      class="pointer-events-none absolute top-0 right-[-8%] bottom-12 -z-5 flex w-[72%] items-end opacity-25 sm:right-0 sm:w-[52%] sm:opacity-35 lg:right-[4%] lg:bottom-14 lg:z-0 lg:w-auto lg:opacity-100"
      aria-hidden="true"
    >
      <div class="relative ml-auto w-full max-w-[26rem] lg:h-full lg:w-auto lg:max-w-none">
        <div
          class="absolute inset-x-[-30%] bottom-[6%] -z-10 aspect-square rounded-full bg-[radial-gradient(closest-side,--alpha(var(--color-gold-400)/22%),transparent)] blur-2xl"
        >
        </div>
        <Image
          src={nizz}
          alt=""
          widths={[420, 649]}
          sizes="(min-width: 1024px) 26rem, 60vw"
          loading="eager"
          class="h-auto w-full object-contain drop-shadow-[0_25px_45px_rgba(0,0,0,0.55)] [mask-image:linear-gradient(to_top,transparent_0%,black_7%)] lg:h-full lg:w-auto"
        />
      </div>
    </div>

    <div class="max-w-2xl lg:max-w-[54%]">
      <p
        class="mb-5 inline-flex items-center gap-2.5 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-[0.2em] text-white/70 uppercase backdrop-blur-sm"
      >
        <span class="relative flex h-1.5 w-1.5">
          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gold-400 opacity-75"></span>
          <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-gold-400"></span>
        </span>
        DJ &amp; Producer · Österreich
      </p>

      <h1
        class="bg-gradient-to-b from-white via-white to-gold-300 bg-clip-text font-display text-[clamp(3.75rem,13vw,10rem)] leading-[0.84] tracking-[-0.035em] text-transparent drop-shadow-[0_0_60px_rgba(240,191,88,0.18)]"
      >
        DJ&nbsp;NIZZ
      </h1>

      <p class="mt-6 text-sm font-semibold tracking-[0.28em] text-white/85 uppercase sm:text-base">
        {genreLine}
      </p>

      <p class="mt-6 max-w-lg text-balance-pretty text-base leading-relaxed text-white/65 sm:text-lg">
        Sets, die den Abend aufbauen statt ihn abzuspielen — von House über Techno bis Hardstyle.
      </p>

      <div class="mt-10 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
        <a
          href={`mailto:${CONTACT.email}?subject=Booking-Anfrage`}
          class="group inline-flex items-center justify-center gap-2 rounded-full bg-gold-400 px-7 py-4 font-semibold text-ink-950 transition duration-300 hover:bg-gold-300 hover:shadow-[0_0_36px_-6px] hover:shadow-gold-400/70"
        >
          Booking anfragen
          <svg viewBox="0 0 20 20" class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" fill="currentColor" aria-hidden="true">
            <path d="M10.5 3.5 17 10l-6.5 6.5-1.4-1.4 4.1-4.1H3v-2h10.2L9.1 4.9z" />
          </svg>
        </a>
        <a
          href="#about"
          class="inline-flex items-center justify-center rounded-full border border-white/20 px-7 py-4 font-semibold text-white/90 backdrop-blur-sm transition duration-300 hover:border-white/45 hover:bg-white/5"
        >
          Mehr über mich
        </a>
      </div>
    </div>
  </div>

  {/* Scroll-Hinweis */}
  <a
    href="#about"
    class="absolute bottom-20 left-1/2 z-10 hidden -translate-x-1/2 animate-cue text-white/50 transition-colors hover:text-white sm:block"
    aria-label="Weiter zu Über mich"
  >
    <svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
      <path d="M12 4v15m0 0-6-6m6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
  </a>

  {/* Genre-Laufband */}
  <div
    class="absolute inset-x-0 bottom-0 z-10 border-y border-white/10 bg-ink-950/60 py-3.5 backdrop-blur-md"
    aria-hidden="true"
  >
    <div class="flex w-max animate-marquee">
      {
        [0, 1].map(() => (
          <div class="flex shrink-0 items-center">
            {GENRES.map((g) => (
              <span class="flex items-center">
                <span class="px-6 font-display text-sm tracking-[0.18em] text-white/45 uppercase sm:text-base">
                  {g.name}
                </span>
                <span class="h-1 w-1 rounded-full bg-gold-400/70" />
              </span>
            ))}
          </div>
        ))
      }
    </div>
  </div>
</section>
