Footer-Komponente - Buchung/Reservierung - Dark Mode Candy

<footer class="bg-gradient-to-r from-gray-900 to-black text-pink-200 py-12 dark:from-black dark:to-gray-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
      
      <!-- Company Info / Logo -->
      <div class="lg:col-span-2">
        <a href="#" class="flex items-center space-x-3 mb-4">
          <svg class="h-8 w-8 text-pink-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
          </svg>
          <span class="text-2xl font-extrabold text-pink-400 dark:text-pink-300">SweetBookings</span>
        </a>
        <p class="text-pink-300 text-sm leading-relaxed mb-6">
          Your premier destination for seamless reservations and unforgettable experiences. Book your sweet escape today!
        </p>
        <form class="mb-4">
          <label for="email-newsletter" class="block text-sm font-medium text-pink-300 mb-2">Stay Sweet, Get Updates!</label>
          <div class="flex rounded-lg shadow-sm overflow-hidden">
            <input type="email" id="email-newsletter" name="email" placeholder="Your email address" class="flex-1 min-w-0 px-4 py-2 rounded-l-lg border-none bg-gray-800 text-pink-100 placeholder-pink-400 focus:ring-2 focus:ring-mint-400 focus:border-transparent">
            <button type="submit" class="px-5 py-2 bg-mint-500 hover:bg-mint-600 text-gray-900 font-semibold rounded-r-lg transition duration-300">
              Subscribe
            </button>
          </div>
        </form>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Book Now</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Manage Booking</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Gift Vouchers</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Special Offers</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Destinations</a></li>
        </ul>
      </div>

      <!-- Support -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Help Center</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">FAQ</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Terms of Service</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Get in Touch</h3>
        <p class="text-pink-300 text-sm mb-3">
          <strong class="block">Address:</strong> 123 Candy Lane, Sweet City, SC 90210
        </p>
        <p class="text-pink-300 text-sm mb-3">
          <strong class="block">Phone:</strong> <a href="tel:+1234567890" class="hover:text-pink-500 transition duration-200">(123) 456-7890</a>
        </p>
        <p class="text-pink-300 text-sm mb-4">
          <strong class="block">Email:</strong> <a href="mailto:[email protected]" class="hover:text-pink-500 transition duration-200">[email protected]</a>
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.877V14.89H8.79V12h1.648V9.789c0-1.662.983-2.615 2.535-2.615 1.194 0 2.306.213 2.306.213V10.2H14.15c-.825 0-1.082.515-1.082 1.053V12h2.24l-.356 2.89H13.068V22H12C6.477 22 2 17.523 2 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.843.038 1.488.156 2.075.356.65.23 1.157.567 1.626 1.036.469.469.805.976 1.035 1.622.2.586.318 1.231.358 2.076.046 1.013.048 1.367.048 3.797s-.002 2.43-.048 3.797c-.04.843-.158 1.488-.358 2.075-.23 1.157-.567 1.157-1.036 1.626a4.904 4.904 0 01-1.622 1.035c-.586.2-1.23.318-2.076.358-1.013.045-1.367.048-3.797.048s-2.43-.002-3.797-.048c-.843-.04-1.488-.158-2.075-.358a4.904 4.904 0 01-1.626-1.036c-.469-.469-.805-.976-1.035-1.622-.2-.586-.317-1.23-.357-2.076-.046-1.013-.048-1.367-.048-3.797s.002-2.43.048-3.797c.04-.843.158-1.488.358-2.075a4.904 4.904 0 011.036-1.626c.469-.469.976-.805 1.622-1.035.586-.2 1.23-.317 2.076-.357C9.882 1.998 10.236 2 12.315 2zm0 2.15c-2.3 0-2.673.011-3.619.055-.783.036-1.202.166-1.485.276a2.022 2.022 0 00-.734.545 2.022 2.022 0 00-.546.733c-.11.283-.24.702-.276 1.485-.044.946-.055 1.319-.055 3.619s.011 2.673.055 3.619c.036.783.166 1.202.276 1.485a2.022 2.022 0 00.545.734 2.022 2.022 0 00.733.546c.283.11.702.24 1.485.276.946.044 1.319.055 3.619.055s2.673-.011 3.619-.055c.783-.036 1.202-.166 1.485-.276a2.022 2.022 0 00.734-.545 2.022 2.022 0 00.546-.733c.11-.283.24-.702.276-1.485.044-.946.055-1.319.055-3.619s-.011-2.673-.055-3.619c-.036-.783-.166-1.202-.276-1.485a2.022 2.022 0 00-.545-.734 2.022 2.022 0 00-.733-.546c-.283-.11-.702-.24-1.485-.276-.946-.044-1.319-.055-3.619-.055zM12.315 6.844v-1.161c0-.64-.52-.962-1.16-.962-.64 0-.962.52-.962 1.161v1.161h2.322zM12.315 17.16c-2.674 0-4.846-2.172-4.846-4.846s2.172-4.846 4.846-4.846 4.846 2.172 4.846 4.846-2.172 4.846-4.846 4.846zm0-8.528c-2.036 0-3.682 1.646-3.682 3.682s1.646 3.682 3.682 3.682 3.682-1.646 3.682-3.682-1.646-3.682-3.682-3.682zm4.32-.495c-.328 0-.594.266-.594.594s.266.594.594.594.594-.266.594-.594-.266-.594-.594-.594z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.35c4.76 0 7.8-3.95 7.8-7.8s-3.04-7.8-7.8-7.8c-4.3 0-7.8 3.5-7.8 7.8S3.99 20.35 8.29 20.35zm-2.88-4.22c.32.14.7.23 1.1.28.32.04.64.06.97.06.49 0 .97-.04 1.4-.11.45-.07.8-.16 1.13-.28v-2.31c-.3.08-.63.15-.98.2-.35.05-.7.08-1.07.08-.66 0-1.28-.15-1.84-.44-.57-.29-1.04-.69-1.42-1.2C3.51 9.49 3.32 8.76 3.32 7.96c0-.98.3-1.8.89-2.45.6-.66 1.4-.99 2.4-.99.3 0 .58.03.86.08.28.05.54.12.78.22l-2.07 2.07c-.12.12-.22.25-.3.4l-.1.17c-.32.55-.48 1.18-.48 1.88 0 .57.1.97.3 1.2.2.24.46.36.78.36.26 0 .5-.05.7-.15l.39-.17.39-.17c.5-.23.94-.56 1.32-.98.38-.42.66-.88.84-1.38.18-.5.27-.99.27-1.47 0-.58-.1-.97-.3-1.18-.2-.22-.45-.33-.76-.33-.16 0-.32.02-.48.05-.16.03-.3.08-.42.15l-1.05 1.05c-.12.12-.25.22-.4.3-.22.12-.4.18-.54.18-.2 0-.37-.03-.5-.09-.12-.06-.2-.14-.24-.24-.04-.1-.06-.18-.06-.24 0-.1.02-.18.06-.24.04-.06.1-.12.18-.18l.2-.2c.1-.1.18-.16.24-.18.06-.02.1-.02.12-.02.04 0 .08-.01.12-.01.04-.01.07-.01.09-.01l.24.01c.2.02.4.08.6.18.2.1.4.22.6.38.2.16.4.34.6.54.2.2.4.42.6.66.2.24.4.5.6.78.2.28.4.58.6.9.2.32.4.66.6 1.02.2.36.36.72.48 1.08.12.36.18.7.18 1.02-.01.99-.33 1.8-.95 2.43-.61.63-1.43 1-2.46 1-1.02 0-1.84-.37-2.46-1.11-.62-.74-.93-1.63-.93-2.67 0-.49.09-.96.26-1.4-.04 0-.08-.01-.12-.01-.04 0-.08 0-.12 0-.04 0-.08 0-.12.01-.04.01-.08.01-.12.02l-.24.02c-.2.02-.4.08-.6.18-.2.1-.4.22-.6.38-.2.16-.4.34-.6.54-.2.2-.4.42-.6.66-.2.24-.4.5-.6.78-.2.28-.4.58-.6.9-.2.32-.4.66-.6 1.02-.2.36-.36.72-.48 1.08-.12.36-.18.7-.18 1.02-.01.99-.33 1.8-.95 2.43-.61.63-1.43 1-2.46 1z"/>
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M16.98 0H7.02C4.332 0 2.181 2.15 2.181 4.838v14.324C2.181 21.85 4.332 24 7.02 24h9.96c2.688 0 4.838-2.15 4.838-4.838V4.838C21.818 2.15 19.668 0 16.98 0zm-4.998 17.5c-2.485 0-4.5-2.015-4.5-4.5s2.015-4.5 4.5-4.5 4.5 2.015 4.5 4.5c0 2.485-2.015 4.5-4.5 4.5zm5.5-12.72c-.655 0-1.189-.533-1.189-1.189s.534-1.189 1.189-1.189 1.189.533 1.189 1.189-.534 1.189-1.189 1.189z"/>
              <circle cx="12" cy="13" r="3.5"/>
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-12 border-t border-gray-800 pt-8 text-center">
      <p class="text-pink-300 text-sm">&copy; 2023 SweetBookings. All rights reserved. Designed with <span class="text-pink-500">♥</span> for sweet reservations.</p>
    </div>
  </div>
</footer>