{% load content_snippets static %}

<!-- Trust Indicators -->
<section class="bg-light py-4 border-bottom">
    <div class="container">
        <div class="row g-3 g-md-4 justify-content-center">
            <div class="col-6 col-md-3 col-lg-auto">
                <div class="d-flex flex-column flex-md-row align-items-center text-center text-md-start gap-3 p-3 rounded-3 h-100" style="background: rgba(26, 54, 93, 0.02);">
                    <div class="icon-wrapper d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 50px; background: rgba(26, 54, 93, 0.08);">
                        <i class="fas fa-shield-alt text-primary" style="font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-bold" style="color: #1a365d;">Secure Payments</h6>
                        <small class="text-muted">100% secure transactions</small>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3 col-lg-auto">
                <div class="d-flex flex-column flex-md-row align-items-center text-center text-md-start gap-3 p-3 rounded-3 h-100" style="background: rgba(26, 54, 93, 0.02);">
                    <div class="icon-wrapper d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 50px; background: rgba(40, 167, 69, 0.1);">
                        <i class="fas fa-check-circle text-success" style="font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-bold" style="color: #1a365d;">Verified Equipment</h6>
                        <small class="text-muted">Quality checked</small>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3 col-lg-auto">
                <div class="d-flex flex-column flex-md-row align-items-center text-center text-md-start gap-3 p-3 rounded-3 h-100" style="background: rgba(26, 54, 93, 0.02);">
                    <div class="icon-wrapper d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 50px; background: rgba(13, 110, 253, 0.1);">
                        <i class="fas fa-headset text-primary" style="font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-bold" style="color: #1a365d;">24/7 Support</h6>
                        <small class="text-muted">Always here to help</small>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3 col-lg-auto">
                <div class="d-flex flex-column flex-md-row align-items-center text-center text-md-start gap-3 p-3 rounded-3 h-100" style="background: rgba(26, 54, 93, 0.02);">
                    <div class="icon-wrapper d-flex align-items-center justify-content-center rounded-circle" style="width: 50px; height: 50px; background: rgba(255, 193, 7, 0.15);">
                        <i class="fas fa-star text-warning" style="font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-bold" style="color: #1a365d;">Trusted Community</h6>
                        <small class="text-muted">1000+ happy creators</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Main Footer -->
<footer class="bg-dark text-white py-5">
    <div class="container py-4 py-lg-5">
        <div class="row g-5">
            <!-- Company Info -->
            <div class="col-lg-4">
                <div class="mb-4 text-white-50">
                    {% if site_settings.logo %}
                        <img src="{{ site_settings.logo.url }}" alt="{{ site_settings.site_name|default:'PRACA' }}" class="mb-4" style="max-height: 40px;">
                    {% else %}
                        <img src="{% static 'images/logo/mainlogo.png' %}" alt="{{ site_settings.site_name|default:'PRACA' }}" class="mb-4" style="max-height: 40px;">
                    {% endif %}
                    
                    {% if site_settings.footer_about %}
                        <p class="text-white-75 mb-4">{{ site_settings.footer_about|safe }}</p>
                    {% else %}
                        <p class="text-white-75 mb-4">Empowering content creators with professional equipment and services. Quality gear, flexible rentals, exceptional support for all your creative needs.</p>
                    {% endif %}
                    
                    <div class="social-links d-flex gap-3">
                        {% if site_settings.facebook_url %}
                            <a href="{{ site_settings.facebook_url }}" target="_blank" rel="noopener noreferrer" class="text-white-50 hover-text-white" aria-label="Facebook">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                        {% endif %}
                        {% if site_settings.twitter_url %}
                            <a href="{{ site_settings.twitter_url }}" target="_blank" rel="noopener noreferrer" class="text-white-50 hover-text-white" aria-label="Twitter">
                                <i class="fab fa-twitter"></i>
                            </a>
                        {% endif %}
                        {% if site_settings.instagram_url %}
                            <a href="{{ site_settings.instagram_url }}" target="_blank" rel="noopener noreferrer" class="text-white-50 hover-text-white" aria-label="Instagram">
                                <i class="fab fa-instagram"></i>
                            </a>
                        {% endif %}
                        {% if site_settings.linkedin_url %}
                            <a href="{{ site_settings.linkedin_url }}" target="_blank" rel="noopener noreferrer" class="text-white-50 hover-text-white" aria-label="LinkedIn">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        {% endif %}
                        {% if site_settings.youtube_url %}
                            <a href="{{ site_settings.youtube_url }}" target="_blank" rel="noopener noreferrer" class="text-white-50 hover-text-white" aria-label="YouTube">
                                <i class="fab fa-youtube"></i>
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Quick Links -->
            <div class="col-6 col-md-4 col-lg-2">
                <h5 class="h6 mb-4 text-uppercase fw-bold" style="letter-spacing: 0.5px;">Quick Links</h5>
                <ul class="list-unstyled footer-links">
                    <li class="mb-2"><a href="{% url 'equipment:home' %}" class="text-white-50 hover-text-white text-decoration-none d-block py-1">Home</a></li>
                    <li class="mb-2"><a href="{% url 'equipment:list' %}" class="text-white-50 hover-text-white text-decoration-none d-block py-1">Browse Equipment</a></li>
                    <li class="mb-2"><a href="{% url 'equipment:about' %}" class="text-white-50 hover-text-white text-decoration-none d-block py-1">About Us</a></li>
                    <li class="mb-2"><a href="{% url 'equipment:how_it_works' %}" class="text-white-50 hover-text-white text-decoration-none d-block py-1">How It Works</a></li>
                    <li class="mb-2">
                        <a href="{% url 'contact:contact' %}" class="text-white-50 hover-text-white text-decoration-none d-block py-1">
                            Contact Us
                        </a>
                    </li>
                    <li class="mb-2">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#contactModal" class="text-white-50 hover-text-white text-decoration-none d-block py-1">
                            Quick Contact
                        </a>
                    </li>
                </ul>
            </div>
            
            <!-- Categories -->
            <div class="col-6 col-md-4 col-lg-2">
                <h5 class="h6 mb-4 text-uppercase fw-bold" style="letter-spacing: 0.5px;">Categories</h5>
                <ul class="list-unstyled footer-links">
                    {% for category in equipment_categories|slice:":5" %}
                        <li class="mb-2">
                            <a href="{% url 'equipment:category_detail' category.slug %}" 
                               class="text-white-50 hover-text-white text-decoration-none d-block py-1">
                                {{ category.name }}
                            </a>
                        </li>
                    {% empty %}
                        <li class="mb-2 text-white-50">No categories available</li>
                    {% endfor %}
                </ul>
            </div>
            
            <!-- Newsletter -->
            <div class="col-md-4 col-lg-4">
                <h5 class="h6 mb-4 text-uppercase fw-bold" style="letter-spacing: 0.5px;">Newsletter</h5>
                <p class="text-white-50 mb-4">Subscribe to get updates on new gear, special offers, and creative tips.</p>
                
                <form class="mb-4">
                    <div class="input-group">
                        <input type="email" class="form-control bg-dark text-white border-secondary" placeholder="Your email address" aria-label="Your email address" required>
                        <button class="btn btn-primary px-4" type="submit">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                    <div class="form-text text-white-50 mt-2 small">We'll never share your email. Unsubscribe anytime.</div>
                </form>
                
                <!-- Contact Info -->
                <div class="mt-4 pt-3 border-top border-secondary">
                    <h6 class="h6 mb-3 text-uppercase fw-bold" style="letter-spacing: 0.5px;">Contact Us</h6>
                    <ul class="list-unstyled text-white-50">
                        {% if site_settings.contact_email %}
                            <li class="mb-2 d-flex align-items-center">
                                <i class="fas fa-envelope me-2" style="width: 20px;"></i>
                                <a href="mailto:{{ site_settings.contact_email }}" class="text-white-50 hover-text-white text-decoration-none">{{ site_settings.contact_email }}</a>
                            </li>
                        {% endif %}
                        {% if site_settings.contact_phone %}
                            <li class="mb-2 d-flex align-items-center">
                                <i class="fas fa-phone-alt me-2" style="width: 20px;"></i>
                                <a href="tel:{{ site_settings.contact_phone }}" class="text-white-50 hover-text-white text-decoration-none">{{ site_settings.contact_phone }}</a>
                            </li>
                        {% endif %}
                        {% if site_settings.contact_address %}
                            <li class="mb-2 d-flex align-items-start">
                                <i class="fas fa-map-marker-alt me-2 mt-1" style="width: 20px;"></i>
                                <span>{{ site_settings.contact_address|linebreaksbr }}</span>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Copyright -->
        <div class="border-top border-secondary pt-4 mt-5">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                    <p class="mb-0 text-white-50 small">
                        &copy; {% now "Y" %} 
                        {% if site_settings.site_name %}{{ site_settings.site_name }}{% else %}PRACA{% endif %}. 
                        {% if site_settings.footer_copyright %}
                            {{ site_settings.footer_copyright|safe }}
                        {% else %}
                            All rights reserved.
                        {% endif %}
                    </p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item">
                            <a href="#" class="text-white-50 hover-text-white text-decoration-none small" data-bs-toggle="modal" data-bs-target="#privacyModal">
                                Privacy Policy
                            </a>
                        </li>
                        <li class="list-inline-item mx-2">•</li>
                        <li class="list-inline-item">
                            <a href="#" class="text-white-50 hover-text-white text-decoration-none small" data-bs-toggle="modal" data-bs-target="#termsModal">
                                Terms of Service
                            </a>
                        </li>
                        <li class="list-inline-item mx-2">•</li>
                        <li class="list-inline-item">
                            <a href="#" class="text-white-50 hover-text-white text-decoration-none small" data-bs-toggle="modal" data-bs-target="#cookiesModal">
                                Cookie Policy
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Contact Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0">
            <div class="modal-header border-0 pb-0">
                <div class="w-100 text-center position-relative">
                    <h5 class="modal-title fs-4 fw-bold" id="contactModalLabel" style="color: #1a365d;">Get In Touch</h5>
                    <p class="text-muted small mb-0">We'd love to hear from you</p>
                </div>
                <button type="button" class="btn-close position-absolute" style="top: 1.5rem; right: 1.5rem;" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-4 pb-4 pt-0">
                <form id="contactForm" class="needs-validation" novalidate>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="contactName" class="form-label small fw-bold text-muted">Your Name <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="fas fa-user text-muted"></i></span>
                                <input type="text" class="form-control ps-2" id="contactName" placeholder="John Doe" required>
                                <div class="invalid-feedback">
                                    Please enter your name
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="contactEmail" class="form-label small fw-bold text-muted">Email Address <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="fas fa-envelope text-muted"></i></span>
                                <input type="email" class="form-control ps-2" id="contactEmail" placeholder="you@example.com" required>
                                <div class="invalid-feedback">
                                    Please enter a valid email address
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="contactSubject" class="form-label small fw-bold text-muted">Subject <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="fas fa-tag text-muted"></i></span>
                                <select class="form-select ps-2" id="contactSubject" required>
                                    <option value="" selected disabled>Select a subject</option>
                                    <option value="General Inquiry">General Inquiry</option>
                                    <option value="Equipment Rental">Equipment Rental</option>
                                    <option value="Technical Support">Technical Support</option>
                                    <option value="Partnership">Partnership</option>
                                    <option value="Other">Other</option>
                                </select>
                                <div class="invalid-feedback">
                                    Please select a subject
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <label for="contactMessage" class="form-label small fw-bold text-muted">Your Message <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text bg-light align-items-start pt-2 border-end-0">
                                    <i class="fas fa-pen text-muted mt-1"></i>
                                </span>
                                <textarea class="form-control ps-2" id="contactMessage" rows="4" placeholder="How can we help you?" required></textarea>
                                <div class="invalid-feedback">
                                    Please enter your message
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="privacyCheck" required>
                                <label class="form-check-label small text-muted" for="privacyCheck">
                                    I agree to the <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#privacyModal">Privacy Policy</a> and <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#termsModal">Terms of Service</a>
                                </label>
                                <div class="invalid-feedback">
                                    You must agree before submitting
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <button type="submit" class="btn btn-primary w-100 py-2 fw-bold">
                                <i class="fas fa-paper-plane me-2"></i>Send Message
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Success Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="contactSuccessToast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-check-circle me-2"></i> Your message has been sent successfully!
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

<!-- Error Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="contactErrorToast" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-exclamation-circle me-2"></i> Oops! Something went wrong. Please try again.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

<!-- Add this script at the bottom of your file, before the closing body tag -->
<script>
// Enable Bootstrap form validation
(function () {
  'use strict'
  
  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')
  
  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        } else {
          event.preventDefault()
          // Here you would typically send the form data to your server
          // For demonstration, we'll just show a success message
          var successToast = new bootstrap.Toast(document.getElementById('contactSuccessToast'))
          successToast.show()
          // Reset form
          form.reset()
          form.classList.remove('was-validated')
          // Close modal after 2 seconds
          setTimeout(function() {
            var modal = bootstrap.Modal.getInstance(document.getElementById('contactModal'))
            modal.hide()
          }, 2000)
        }
        
        form.classList.add('was-validated')
      }, false)
    })
})()
</script>