Fußzeile für Firmenbuchungen

<footer class="bg-stone-100 dark:bg-stone-900 text-stone-700 dark:text-stone-300 py-12 md:py-16">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
      <!-- Company Info / Logo -->
      <div class="flex flex-col items-start">
        <a href="#" class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <span class="text-amber-600 dark:text-amber-400">Book</span>Corp
        </a>
        <p class="text-sm mb-4 leading-relaxed max-w-xs">Your trusted partner for seamless bookings and reservations. Excellence in every appointment.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-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.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06-.02-.09-.036l-2.126-1.643-.092-.073-.016.035c-.443.916-1.077 1.636-1.897 2.164a7.994 7.994 0 01-.845.41c-.24.088-.476.162-.714.22h-.032c-.08-.009-.16-.017-.238-.024l-.168-.005a.75.75 0 01-.132-.016 10.022 10.022 0 01-1.74-1.218c-.894-.78-1.558-1.765-1.92-2.883-.178-.54-.287-1.11-.32-1.696-.016-.277-.023-.556-.023-.836 0-3.328 2.672-6 6-6h2v-2h-3C6.672 5 4 7.672 4 10.999c0 .28.007.559.023.836.033.586.142 1.156.32 1.696.363 1.117 1.027 2.102 1.92 2.883 1.01 1.008 2.247 1.624 3.6 1.838.08.012.16.026.24.037.03.004.06.006.09.006v.05zM22 12c0-3.328-2.672-6-6-6h-2v2h3c2.203 0 4 1.797 4 4 0 .28-.007.559-.023.836-.033.586-.142 1.156-.32 1.696-.363 1.117-1.027 2.102-1.92 2.883-1.01 1.008-2.247 1.624-3.6 1.838-.08.012-.16.026-.24.037-.03.004-.06.006-.09.006v.05z" fill="currentColor" />
              <path d="M12 9a3 3 0 100 6 3 3 0 000-6z" fill="currentColor" />
              <path d="M12 11a1 1 110-2 1 1 0 000 2z" fill="currentColor" />
              <circle cx="12" cy="12" r="3" opacity="0" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M.057 1.7L.023 1.644l.01-.01c.148-.12.296-.24.444-.36l.01-.008L.5.5C.42-.5.5-.5.42-.5.42-.5.25.5-.5.5c-.75 0 1.25-.5 1.25-.5.2-.2.2-.2-.2-.2C1.72.1-.22-.2-.22-.2.02-.2-.22-.2.2-.2Z" fill="none"/>
              <path d="M19.5 0h-15C2.239 0 0 2.239 0 4.999v14.002C0 21.761 2.239 24 4.5 24h15c2.761 0 5-2.239 5-4.999V4.999C24 2.239 21.761 0 19.5 0zm-4.053 2.164c.731.066 1.34.195 1.776.326.438.132.898.396 1.35.792.45.396.792.898 1.032 1.488.24.59.396 1.296.486 2.088.09.792.108 1.692.054 2.652-.054.96-.216 1.956-.486 2.94-.27.984-.666 1.836-1.188 2.556-.522.72-1.188 1.278-1.998 1.68-.81.402-1.692.684-2.61.846-1.22.216-2.592.29-4.104.22-.648-.027-1.314-.09-2.022-.189-.708-.099-1.395-.234-2.034-.396-.639-.162-1.224-.396-1.728-.693-.504-.297-.936-.666-1.296-1.107-.36-.441-.6-1-.72-1.68-.12-.68-.198-1.476-.234-2.388-.036-.912-.009-1.872.081-2.88.09-.96.252-1.896.486-2.796.234-.9.567-1.71.999-2.43.432-.72 1.008-1.278 1.728-1.68.72-.402 1.548-.684 2.484-.846 1.08-.18 2.304-.252 3.672-.216.702.018 1.413.081 2.115.195.702.114 1.377.261 2.016.486zm-.05-.008z" fill="currentColor"/>
            </svg>
            <span class="sr-only">LinkedIn</span>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About Us</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Services</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Pricing</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">FAQ</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Blog</a>
        </nav>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Support Center</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Developer API</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Terms of Service</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Privacy Policy</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Cookie Policy</a>
        </nav>
      </div>

      <!-- Contact Info / Newsletter -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2 mb-6">
          <p>123 Booking Ave, Suite 400</p>
          <p>Business City, BC 90210</p>
          <p class="mt-2"><a href="tel:+1234567890" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">+1 (234) 567-890</a></p>
          <p><a href="mailto:[email protected]" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">[email protected]</a></p>
        </address>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Newsletter</h3>
        <form class="flex flex-col sm:flex-row gap-2">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required
            class="w-full flex-auto rounded-md border border-stone-300 dark:border-stone-700 bg-white/50 dark:bg-stone-800 px-3.5 py-2 text-stone-800 dark:text-stone-200 shadow-sm placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400 sm:text-sm sm:leading-6"
            placeholder="Enter your email">
          <button type="submit"
            class="flex-none rounded-md bg-amber-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <div class="border-t border-stone-300 dark:border-stone-700 pt-8 mt-8 text-center text-sm">
      <p>&copy; <span id="current-year"></span> BookCorp. All rights reserved.</p>
    </div>
  </div>
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>