---
// 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">Was wir für Sie tun</h2>
      <h3 class="text-4xl md:text-5xl font-bold text-brand-primary dark:text-white">
        Alles, was Sie für Ihren Erfolg im Internet brauchen
      </h3>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
        Wir machen es Ihnen einfach. Vom ersten Entwurf bis zur fertigen Seite, die Ihnen neue Kunden bringt.
      </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">Digitale Visitenkarte</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Eine schicke Homepage, auf der alles Wichtige steht: Ihre Öffnungszeiten, Telefonnummer und Ihr Angebot. Läuft perfekt auf Handys.
              </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">Digitale Visitenkarte</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Sieht super aus auf jedem Handy</li>
                <li class="flex items-center gap-2">✓ Lädt blitzschnell ohne Warten</li>
                <li class="flex items-center gap-2">✓ Sicher vor Abmahnungen (DSGVO)</li>
                <li class="flex items-center gap-2">✓ Moderne und sichere Technik</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">
              Kostenlose 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">Kunden-Gewinnung</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Eine spezielle Seite, die nur ein Ziel hat: Dass neue Kunden Sie anrufen, Ihnen schreiben oder direkt vorbeikommen.
              </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">Kunden-Gewinnung</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Leicht verständlich für Besucher</li>
                <li class="flex items-center gap-2">✓ Telefonnummer direkt im Blick</li>
                <li class="flex items-center gap-2">✓ Zeigt Ihnen, wer Ihre Seite besucht</li>
                <li class="flex items-center gap-2">✓ Kunden springen nicht frustriert ab</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">
              Gespräch vereinbaren
            </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">Internet-Verkauf</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Verkaufen Sie Ihre Produkte, Speisen oder Gutscheine direkt online. Kinderleicht für Ihre Kunden zu bedienen.
              </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">Internet-Verkauf</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Produkte & Speisen leicht ändern</li>
                <li class="flex items-center gap-2">✓ Bezahlung per PayPal oder Karte</li>
                <li class="flex items-center gap-2">✓ Wächst mit Ihrem Laden mit</li>
                <li class="flex items-center gap-2">✓ Kinderleichte Bestellung</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">
              Shop anfragen
            </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">Technik & Pflege</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Sie wollen ein neues Bild zeigen oder die Öffnungszeiten ändern? Schreiben Sie uns einfach. Wir machen das für Sie.
              </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">Technik & Pflege</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Wir machen alle wichtigen Updates</li>
                <li class="flex items-center gap-2">✓ Tägliche automatische Datensicherung</li>
                <li class="flex items-center gap-2">✓ Schutz vor Internet-Angriffen</li>
                <li class="flex items-center gap-2">✓ Schnelle Änderungen per WhatsApp/E-Mail</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">
              Hilfe anfordern
            </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">Bei Google gefunden werden</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Wenn jemand in Ihrer Stadt nach Ihren Angeboten sucht, sorgen wir dafür, dass Sie ganz oben stehen.
              </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">Bei Google gefunden werden</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Google Maps Eintrag perfekt gepflegt</li>
                <li class="flex items-center gap-2">✓ Gefunden bei den richtigen Suchwörtern</li>
                <li class="flex items-center gap-2">✓ Ihre Seite wird für Google optimiert</li>
                <li class="flex items-center gap-2">✓ Schnelles Laden bringt bessere Plätze</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">
              Kostenloses Gespräch vereinbaren
            </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">Schönes Aussehen</h4>
              <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                Wir gestalten Ihre Webseite so, dass sie modern, einladend und genau passend zu Ihrem Geschäft aussieht.
              </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">Schönes Aussehen</h4>
              <ul class="space-y-2 text-sm text-gray-200">
                <li class="flex items-center gap-2">✓ Kein langweiliges Standard-Design</li>
                <li class="flex items-center gap-2">✓ Schöne Farben passend zu Ihrem Logo</li>
                <li class="flex items-center gap-2">✓ Kunden finden sofort, was sie suchen</li>
                <li class="flex items-center gap-2">✓ Sie sehen das Design vor dem Start</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">
              Design 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>