Industrial_Charity_Footer

<footer class="bg-gray-200 dark:bg-gray-900 border-t-4 border-amber-600 dark:border-amber-500 py-12 px-4 sm:px-6 lg:px-8 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-16">

    <!-- Brand/Mission Statement -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center mb-4">
        <img src="https://picsum.photos/40/40?grayscale" alt="Charity Logo" class="h-10 w-10 mr-3 rounded-full border-2 border-amber-600 dark:border-amber-500 shadow-md">
        <span class="text-2xl font-bold uppercase text-amber-800 dark:text-amber-500 tracking-wide">HopeForge</span>
      </a>
      <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-4">
        Forging a brighter future, one community at a time. We empower, we build, we hope.
      </p>
      <div class="flex space-x-4">
        <a href="#" aria-label="Facebook" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors 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.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-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.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.354 5.383c-.633.313-1.317.525-2.03.626.729-.436 1.282-1.125 1.545-1.944-.683.406-1.432.706-2.22.864C16.924 4.41 15.902 4 14.802 4c-1.921 0-3.483 1.562-3.483 3.484 0 .272.03.535.084.79C7.15 6.742 4.14 5.23 2.067 2.923c-.279.479-.439 1.036-.439 1.637 0 1.205.613 2.28 1.554 2.909-.569-.017-1.104-.173-1.57-.433v.044c0 1.688 1.202 3.092 2.79 3.415-.292.08-.6.124-.91.124-.223 0-.44-.02-.656-.063.442 1.385 1.724 2.395 3.242 2.423-1.192.934-2.69 1.488-4.324 1.488-.28 0-.555-.016-.826-.048C3.125 18.067 5.106 19 7.202 19c6.685 0 10.334-5.536 10.334-10.334 0-.158-.003-.314-.01-.469A7.472 7.472 0 0 0 20.354 5.383Z"/>
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 4c2.716 0 3.056.012 4.12.06c1.065.048 1.79.213 2.417.464a4.984 4.984 0 0 1 1.772 1.153c.697.697 1.153 1.772 1.153 2.417.251.627.416 1.352.464 2.417.048 1.064.06 1.404.06 4.12 0 2.716-.012 3.056-.06 4.12-.048 1.065-.213 1.79-.464 2.417a4.984 4.984 0 0 1-1.153 1.772c-.697.697-1.772 1.153-2.417 1.153-.627.251-1.352.416-2.417.464-1.064.048-1.404.06-4.12.06S8.944 22 7.88 21.94c-1.065-.048-1.79-.213-2.417-.464a4.984 4.984 0 0 1-1.772-1.153c-.697-.697-1.153-1.772-1.153-2.417-.251-.627-.416-1.352-.464-2.417-.048-1.064-.06-1.404-.06-4.12s.012-3.056.06-4.12c.048-1.065.213-1.79.464-2.417a4.984 4.984 0 0 1 1.153-1.772C4.47 4.697 5.545 4.241 6.19 3.99c.627-.251 1.352-.416 2.417-.464C9.404 3.932 9.744 3.92 12 3.92ZM12 2A10 10 0 1 0 12 22A10 10 0 0 0 12 2Zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm6.5-3.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2ZM8 19V9h4v10H8Zm-2-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm2.5-7A2.5 2.5 0 0 0 8 6.5C8 5.12 9.12 4 10.5 4h10c.83 0 1.5.67 1.5 1.5V19h-4V11a2.5 2.5 0 0 0-2.5-2.5c-1.38 0-2.5 1.12-2.5 2.5v8H8Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Quick Links -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Quick Links</h3>
      <ul class="space-y-3">
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Our Mission</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">What We Do</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Success Stories</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Volunteer</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Partnerships</a></li>
      </ul>
    </div>

    <!-- Contact Information -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Contact Info</h3>
      <address class="not-italic space-y-3 text-sm text-gray-700 dark:text-gray-300">
        <p class="flex items-start">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 0112 20c-3.473 0-6.417-2.07-7.857-5.003L2 14v-2c0-.552.448-1 1-1h1.586L6.5 9h-2.586A1.5 1.5 0 003 10.5v1.5a1 1 0 01-1 1H.5c-.276 0-.5.224-.5.5v1A.5.5 0 00.5 14h1.996C3.04 17.587 7.03 20 12 20c2.518 0 4.887-.96 6.812-2.71C20.575 15.69 22 13.921 22 12c0-1.854-.627-3.568-1.688-4.912C19.261 5.92 17.5 4 15 4c-.167 0-.329.01-.491.028A8 8 0 0012 4c-4.418 0-8 3.582-8 8s3.582 8 8 8c.706 0 1.4-.07 2.07-.203"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 11a.5.5 0 01-1 0v-.5a.5.5 0 011 0V11zM12 15a.5.5 0 01-1 0v-.5a.5.5 0 011 0V15z"/></svg>
          <span class="flex-1">123 Industrial Way, <br>Retroville, RV 54321</span>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM3 11a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zM3 17a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path></svg>
          <a href="mailto:[email protected]" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">[email protected]</a>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5.753c0 .894.498 1.696 1.282 2.122l8 4.57c.502.287 1.05.428 1.603.428s1.101-.141 1.603-.428l8-4.57C23.502 7.449 24 6.647 24 5.753V5a.5.5 0 00-.5-.5h-23A.5.5 0 000 5v.753zM21 11.5L12 16.5 3 11.5v6.247c0 .894.502 1.696 1.284 2.123l.716.41V21h16v-1.72l.716-.41c.782-.427 1.284-1.229 1.284-2.123V11.5z"></path></svg>

          <a href="tel:+1 (555) 123-4567" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">+1 (555) 123-4567</a>
        </p>
        <p>
          <a href="#" class="inline-flex items-center text-sm font-semibold text-amber-700 hover:text-amber-600 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 group mt-2">
            Get Directions
            <svg class="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.5 12h-11m0 0l-4 4m4-4l-4-4"></path></svg>
          </a>
        </p>
      </address>
    </div>

    <!-- Newsletter Signup -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Stay Connected</h3>
      <p class="mb-4 text-gray-700 dark:text-gray-300 text-sm">
        Join our newsletter for impactful updates and ways to contribute.
      </p>
      <form class="flex flex-col sm:flex-row gap-2">
        <input type="email" placeholder="Your Email Address" aria-label="Your Email Address" class="flex-grow min-w-0 px-4 py-2 bg-gray-100 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-600 dark:focus:ring-amber-500 transition-all duration-200">
        <button type="submit" class="px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold rounded-md shadow-md transition-colors duration-200 flex-shrink-0">
          Subscribe
        </button>
      </form>
      <p class="mt-4 text-xs text-gray-500 dark:text-gray-400">
        We respect your privacy. No spam, ever.
      </p>
    </div>

  </div>

  <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center text-sm text-gray-600 dark:text-gray-400">
    <p>&copy; <span id="current-year"></span> HopeForge Charity. All rights reserved. Built with purpose.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Sitemap</a>
    </div>
  </div>

  <!-- Simple script for current year (No JS requirement for Tailwind, but good for dynamic year) -->
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>