---
// src/components/Hero.astro
import { FaArrowRight } from 'react-icons/fa';
---

<section id="hero" class="relative flex h-screen items-center justify-center overflow-hidden bg-brand-primary">
  
  <!-- Background Video with image fallback -->
  <div class="absolute inset-0 w-full h-full z-0 overflow-hidden">
    <!-- Parallax scrolling wrapper -->
    <div id="hero-bg" class="absolute inset-0 w-full h-full transition-transform duration-75 ease-out scale-110">
      <video 
        autoplay 
        loop 
        muted 
        playsinline 
        class="w-full h-full object-cover object-center filter brightness-[0.4]"
        poster="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=80"
      >
        <source src="https://cdn.pixabay.com/video/2019/04/16/22909-331666687_large.mp4" type="video/mp4" />
        <!-- Fallback if video fails -->
        <div class="w-full h-full bg-cover bg-center" style="background-image:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=80')"></div>
      </video>
    </div>
  </div>

  <!-- Ambient Glow -->
  <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-cyan/20 rounded-full blur-[120px] pointer-events-none animate-pulse"></div>
  <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-brand-magenta/15 rounded-full blur-[120px] pointer-events-none animate-pulse" style="animation-delay: 2s;"></div>

  <!-- Glassmorphism overlay for extra futuristic depth -->
  <div class="absolute inset-0 bg-brand-primary/40 backdrop-blur-[2px] z-0"></div>

  <!-- Content -->
  <div id="hero-content" class="relative z-10 text-center px-4 max-w-4xl transition-transform duration-75 ease-out">
    
    <!-- Neon badge -->
    <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-brand-cyan/30 bg-brand-cyan/5 text-brand-cyan text-xs font-semibold uppercase tracking-widest mb-6 animate-bounce">
      <span class="w-2 h-2 rounded-full bg-brand-cyan animate-ping"></span>
      Webdesign & Entwicklung
    </div>

    <!-- Title with cyan/magenta highlights -->
    <h1 class="text-5xl md:text-8xl font-extrabold text-white mb-6 tracking-tight drop-shadow-[0_5px_15px_rgba(0,0,0,0.8)] uppercase">
      N&D <span class="bg-gradient-to-r from-brand-cyan via-purple-500 to-brand-magenta bg-clip-text text-transparent drop-shadow-none">i-t SOLUTIONS</span>
    </h1>

    <p class="text-lg md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto font-light drop-shadow-md">
      Moderne, schnelle und bezahlbare Websites für Kleinbetriebe, Handwerker & KMU.
    </p>

    <!-- Glowing CTA Button -->
    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
      <a href="#services"
         class="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-full shadow-[0_0_20px_rgba(0,229,255,0.4)] hover:shadow-[0_0_35px_rgba(255,0,255,0.6)] hover:scale-105 active:scale-95 transform transition-all duration-300">
        Mehr erfahren 
        <FaArrowRight class="w-4 h-4 text-brand-primary group-hover:translate-x-1.5 transition-transform duration-300" />
      </a>
      
      <a href="#contact"
         class="inline-flex items-center gap-2 px-8 py-4 border border-white/20 hover:border-brand-cyan/50 bg-white/5 hover:bg-white/10 text-white font-medium rounded-full backdrop-blur-sm transition-all duration-300">
        Kontakt aufnehmen
      </a>
    </div>
  </div>

  <!-- Scroll Down Indicator -->
  <a href="#services" class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce z-10 p-2 text-white hover:text-brand-cyan transition-colors" aria-label="Scroll to services">
    <svg class="w-8 h-8 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M19 9l-7 7-7-7"/>
    </svg>
  </a>
</section>

<script>
  const bg = document.getElementById('hero-bg');
  const content = document.getElementById('hero-content');

  // Parallax Scroll Effect
  window.addEventListener('scroll', () => {
    const scroll = window.scrollY;
    if (scroll < window.innerHeight) {
      if (bg) bg.style.transform = `translateY(${scroll * 0.3}px) scale(1.1)`;
      if (content) {
        content.style.transform = `translateY(${scroll * 0.15}px)`;
        content.style.opacity = (1 - scroll / (window.innerHeight * 0.8)).toString();
      }
    }
  });
</script>