---
// src/components/Services.astro
---

<section id="services" class="py-24 bg-brand-lightBg dark:bg-brand-primary relative overflow-hidden">
  <!-- Ambient background glow -->
  <div class="absolute -top-40 -left-40 w-96 h-96 bg-brand-cyan/10 rounded-full blur-[100px] pointer-events-none"></div>
  <div class="absolute -bottom-40 -right-40 w-96 h-96 bg-brand-magenta/10 rounded-full blur-[100px] pointer-events-none"></div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-xs font-bold tracking-widest text-brand-cyan uppercase mb-3">Unsere Leistungen</h2>
      <h3 class="text-4xl md:text-5xl font-bold text-brand-primary dark:text-white">
        Maßgeschneiderte Lösungen für digitale Exzellenz
      </h3>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
        Wir begleiten Ihren Betrieb Schritt für Schritt zur perfekten Website für mehr Kunden und Anfragen.
      </p>
    </div>

    <!-- Flip Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      
      <!-- Card 1: Firmenwebseiten -->
      <div class="w-full h-80 group perspective cursor-pointer">
        <div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
          <!-- Front -->
          <div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
            <div>
              <div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
                <!-- Home/Website Icon -->
                <svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
                </svg>
              </div>
              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Firmenwebseiten</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Individuelle Homepages als digitale Visitenkarte für Ihr Unternehmen, optimiert für alle mobilen Endgeräte.
              </p>
            </div>
            <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
              Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
            </span>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-cyan/90 to-brand-primary text-white border border-brand-cyan/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
            <div>
              <h4 class="text-xl font-bold mb-4">Firmenwebseiten</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Responsive Webdesign (Mobile First)</li>
                <li class="flex items-center gap-2">✓ Extrem schnelle Ladezeiten</li>
                <li class="flex items-center gap-2">✓ DSGVO-konform (Cookie-Consent etc.)</li>
                <li class="flex items-center gap-2">✓ Modernste Web-Tech (Astro & Tailwind)</li>
              </ul>
            </div>
            <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
              Beratung anfordern
            </a>
          </div>
        </div>
      </div>

      <!-- Card 2: Landingpages -->
      <div class="w-full h-80 group perspective cursor-pointer">
        <div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
          <!-- Front -->
          <div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
            <div>
              <div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
                <!-- Cursor Icon -->
                <svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 7.827 5.176-3.243.681.381 2.29z"></path>
                </svg>
              </div>
              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Landingpages</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Zielgerichtete Webseiten für Google- oder Social-Media-Kampagnen zur effektiven Neukundengewinnung.
              </p>
            </div>
            <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
              Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
            </span>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-purple-900 to-brand-primary text-white border border-brand-magenta/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
            <div>
              <h4 class="text-xl font-bold mb-4">Landingpages</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Conversion-Rate Optimierung (CRO)</li>
                <li class="flex items-center gap-2">✓ Klare Handlungsaufforderungen (CTA)</li>
                <li class="flex items-center gap-2">✓ A/B Testings & Web-Analysen</li>
                <li class="flex items-center gap-2">✓ Schnelles Laden für geringe Absprünge</li>
              </ul>
            </div>
            <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
              Projekt anfragen
            </a>
          </div>
        </div>
      </div>

      <!-- Card 3: Onlineshops -->
      <div class="w-full h-80 group perspective cursor-pointer">
        <div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
          <!-- Front -->
          <div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
            <div>
              <div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
                <!-- ShoppingBag Icon -->
                <svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
                </svg>
              </div>
              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Onlineshops</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Einfache, performante E-Commerce-Lösungen für Händler, um Produkte online erfolgreich zu vermarkten.
              </p>
            </div>
            <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
              Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
            </span>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-magenta/90 to-brand-primary text-white border border-brand-magenta/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
            <div>
              <h4 class="text-xl font-bold mb-4">Onlineshops</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Einfache Produkt- & Bestellpflege</li>
                <li class="flex items-center gap-2">✓ PayPal, Stripe & Klarna Integration</li>
                <li class="flex items-center gap-2">✓ Skalierbare E-Commerce-Systeme</li>
                <li class="flex items-center gap-2">✓ Optimierter Checkout-Prozess</li>
              </ul>
            </div>
            <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
              Sicherheit prüfen
            </a>
          </div>
        </div>
      </div>

      <!-- Card 4: Wartung & Support -->
      <div class="w-full h-80 group perspective cursor-pointer">
        <div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
          <!-- Front -->
          <div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
            <div>
              <div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
                <!-- Wrench/Screwdriver Icon -->
                <svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.31-.374.711-.6 1.154-.63M11.42 15.17a3 3 0 11-4.088-4.088M12.73 8.21l-.504-.504a1.5 1.5 0 112.122-2.122l.504.504m-2.122 2.122A2.99 2.99 0 0012 8.25m0 0a3.01 3.01 0 01-1.127-.224l-3.23-3.23a1.5 1.5 0 10-2.122 2.122l3.23 3.23C8.63 10.3 8.6 10.65 8.77 11"></path>
                </svg>
              </div>
              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Wartung & Support</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Wir kümmern uns um Updates, Backups, Sicherheit und inhaltliche Anpassungen Ihrer Website.
              </p>
            </div>
            <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
              Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
            </span>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-primary/95 to-purple-950 text-white border border-brand-cyan/20 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
            <div>
              <h4 class="text-xl font-bold mb-4">Wartung & Support</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Regelmäßige System- & Plugin-Updates</li>
                <li class="flex items-center gap-2">✓ Tägliche Sicherheits-Backups</li>
                <li class="flex items-center gap-2">✓ Schutz vor Spam & Hackerangriffen</li>
                <li class="flex items-center gap-2">✓ Schnelle inhaltliche Änderungen</li>
              </ul>
            </div>
            <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
              Support anfragen
            </a>
          </div>
        </div>
      </div>

      <!-- Card 5: Lokale SEO & Google -->
      <div class="w-full h-80 group perspective cursor-pointer">
        <div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
          <!-- Front -->
          <div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
            <div>
              <div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
                <!-- MapPin/Magnifying Glass Icon -->
                <svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"></path>
                </svg>
              </div>
              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">Lokale SEO & Google</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Verbessern Sie Ihre Sichtbarkeit bei lokalen Google-Suchanfragen für mehr Anfragen aus Ihrer Region.
              </p>
            </div>
            <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
              Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
            </span>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-cyan/90 to-purple-950 text-white border border-brand-cyan/30 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
            <div>
              <h4 class="text-xl font-bold mb-4">Lokale SEO</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Google My Business Optimierung</li>
                <li class="flex items-center gap-2">✓ Keyword-Recherche für Ihre Nische</li>
                <li class="flex items-center gap-2">✓ OnPage & OffPage Optimierung</li>
                <li class="flex items-center gap-2">✓ Ladezeiten-Optimierung (Web Vitals)</li>
              </ul>
            </div>
            <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-magenta hover:text-white transition-colors duration-300">
              Termin buchen
            </a>
          </div>
        </div>
      </div>

      <!-- Card 6: UI/UX Webdesign -->
      <div class="w-full h-80 group perspective cursor-pointer">
        <div class="relative w-full h-full duration-700 preserve-3d group-hover:rotate-y-180">
          <!-- Front -->
          <div class="absolute inset-0 backface-hidden bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-2xl flex flex-col justify-between p-8 transition-colors duration-300 shadow-md">
            <div>
              <div class="w-14 h-14 rounded-xl bg-brand-cyan/10 flex items-center justify-center text-brand-cyan mb-6">
                <!-- Swatch/Color Icon -->
                <svg class="w-8 h-8 stroke-anim" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.076-3.077a2.25 2.25 0 00-3.182-3.182L13.1 7.27a15.996 15.996 0 00-4.648 4.764m3.122 3.122l-1.22 4.88m0 0a3 3 0 00-5.78 1.128c0 .285.023.57.067.85"></path>
                </svg>
              </div>
              <h4 class="text-xl font-bold text-brand-primary dark:text-white mb-2">UI/UX Webdesign</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Individuelle Design-Entwürfe, die auf Ihre Markenidentität abgestimmt sind und Besucher begeistern.
              </p>
            </div>
            <span class="text-xs font-semibold text-brand-cyan group-hover:text-brand-magenta transition-colors flex items-center gap-1">
              Mehr Details <span class="group-hover:translate-x-1 transition-transform">→</span>
            </span>
          </div>
          <!-- Back -->
          <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-brand-magenta/80 to-brand-primary text-white border border-brand-magenta/20 rounded-2xl flex flex-col justify-between p-8 shadow-2xl">
            <div>
              <h4 class="text-xl font-bold mb-4">Webdesign</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Einzigartige, moderne Designs</li>
                <li class="flex items-center gap-2">✓ Abgestimmtes Farb- & Schriftkonzept</li>
                <li class="flex items-center gap-2">✓ Intuitive Benutzerführung (UI/UX)</li>
                <li class="flex items-center gap-2">✓ Erstellung von Figma-Prototypen</li>
              </ul>
            </div>
            <a href="#contact" class="inline-flex items-center justify-center py-2 px-4 bg-white text-brand-primary font-semibold rounded-lg text-xs hover:bg-brand-cyan hover:text-brand-primary transition-colors duration-300">
              Potenziale besprechen
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
  /* 3D Flip Card Styles */
  .perspective {
    perspective: 1000px;
  }
  .preserve-3d {
    transform-style: preserve-3d;
  }
  .backface-hidden {
    backface-visibility: hidden;
  }
  .rotate-y-180 {
    transform: rotateY(180deg);
  }

  /* Stroke-to-fill and stroke animations */
  .stroke-anim path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.5s ease-in-out, fill 0.5s ease-out;
  }

  .group:hover .stroke-anim path {
    stroke-dashoffset: 0;
  }
</style>

<script>
  // Dynamically set stroke-dasharray based on path length on load
  document.addEventListener('DOMContentLoaded', () => {
    const svgPaths = document.querySelectorAll('.stroke-anim path');
    svgPaths.forEach((path) => {
      const pathEl = path as SVGPathElement;
      const length = pathEl.getTotalLength();
      pathEl.style.strokeDasharray = `${length}`;
      pathEl.style.strokeDashoffset = `${length}`;
    });
  });
</script>