{% extends 'base/base.html' %}
{% load static %}
{% load humanize %}
{% load mathfilters %}
{% load equipment_filters %}
{% load equipment_tags %}
{% load i18n %}
{% load content_snippets %}

{% block title %}{% if site_settings.site_name %}{{ site_settings.site_name }}{% else %}PRACA Equipment Rental{% endif %}{% endblock %}

{% block extra_head %}
    <!-- Meta Tags -->
    <meta name="description" content="{% if site_settings.meta_description %}{{ site_settings.meta_description }}{% else %}Rent professional film and photography equipment in Kenya. Cameras, lighting, audio gear and more from trusted local suppliers.{% endif %}">
    <meta name="keywords" content="{% if site_settings.meta_keywords %}{{ site_settings.meta_keywords }}{% else %}equipment rental, film gear, camera rental, photography equipment, Kenya{% endif %}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Preconnect to external domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Preload critical CSS -->
    <link rel="preload" as="style" href="{% static 'css/home.min.css' %}">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="{% static 'css/home.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/equipment_list.min.css' %}">
    
    <!-- Inline critical CSS -->
    <style>
        /* Base styles for the page */
        :root {
            --diagonal-pattern: url('{% static 'images/patterns/diagonal-pattern.svg' %}');
            --light-pattern: url('{% static 'images/patterns/light-pattern.svg' %}');
        }
        
        .bg-diagonal-pattern {
            background-image: var(--diagonal-pattern);
            background-repeat: repeat;
        }
        
        .bg-light-pattern {
            background: var(--light-pattern);
            background-repeat: repeat;
        }
        
        .border-white-10 {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }
        
        .text-white-75 {
            color: rgba(255, 255, 255, 0.75) !important;
        }
        
        .text-white-50 {
            color: rgba(255, 255, 255, 0.5) !important;
        }
        
        .hover-lift {
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        
        .hover-lift:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
        }
        
        /* Animation for the step cards */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .floating-badge {
            right: 20px;
            bottom: 20px;
        }
        
        .equipment-hero {
            position: relative;
            background-color: #0a192f; /* Fallback color */
            overflow: hidden;
            min-height: calc(100vh - 200px); /* Reduced height to prevent overlap */
            margin-top: -72px; /* Pull up to remove header gap */
            padding: 72px 0 60px; /* Reduced bottom padding */
            box-sizing: border-box;
            display: flex;
            align-items: center;
            z-index: 1; /* Ensure the container creates a stacking context */
        }
        
        .equipment-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('{% static "images/hero/video-camera-rig.jpg" %}');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            z-index: -2; /* Behind everything */
            animation: 
                zoomInOut 30s infinite alternate,
                subtleMove 20s infinite alternate;
            opacity: 1;
            filter: brightness(0.9);
        }
        
        .equipment-hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(26, 54, 93, 0.4); /* Subtle overlay for better text contrast */
            z-index: -1; /* Above background but below content */
        }
        
        @keyframes zoomInOut {
            0% { transform: scaleX(-1) scale(1); }
            100% { transform: scaleX(-1) scale(1.05); }
        }
        
        @keyframes subtleMove {
            0% { 
                background-position: 50% 50%;
                transform: scale(1);
            }
            25% { 
                background-position: 55% 52%;
            }
            50% { 
                background-position: 45% 48%;
            }
            75% { 
                background-position: 52% 55%;
            }
            100% { 
                background-position: 50% 50%;
                transform: scale(1.05);
            }
        }
        
        .hero-content {
            position: relative;
            z-index: 2; /* Above both background and overlay */
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            text-align: center;
            color: white;
        }
        
        /* Ensure all interactive elements are above overlay */
        .hero-content * {
            position: relative;
            z-index: 3; /* Above the content container */
        }
        
        .hero-badge {
            display: inline-block;
            background: rgba(255, 107, 53, 0.2);
            color: #ff6b35;
            padding: 0.5rem 1.2rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0); }
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .hero-subtitle {
            font-size: 1.4rem;
            font-weight: 400;
            line-height: 1.6;
            margin-bottom: 2.5rem;
            opacity: 0.9;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .search-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-top: 2rem;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .search-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .quick-categories {
            margin-top: 2.5rem;
        }
        
        .quick-categories .btn {
            margin: 0.25rem;
            padding: 0.5rem 1.25rem;
            border-radius: 50px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .quick-categories .btn:hover {
            background: var(--color-secondary);
            color: white;
            transform: translateY(-2px);
        }
        
        .trust-badges {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 3rem;
            opacity: 0.9;
        }
        
        .trust-badge {
            display: flex;
            align-items: center;
            font-size: 0.9rem;
        }
        
        .trust-badge i {
            color: #ff6b35;
            margin-right: 0.5rem;
            font-size: 1.2rem;
        }
        
        .stats-section {
            padding: 4rem 0;
            background-color: #f8f9fa;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
        }

        .counter {
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 0.5rem;
            display: block;
        }

        .bg-primary-light {
            background-color: rgba(26, 54, 93, 0.1);
        }

        .bg-success-light {
            background-color: rgba(40, 167, 69, 0.1);
        }

        .bg-warning-light {
            background-color: rgba(255, 193, 7, 0.1);
        }

        .bg-danger-light {
            background-color: rgba(220, 53, 69, 0.1);
        }
        
        /* Button hover effect */
        .btn-hover-scale {
            transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        }
        
        .btn-hover-scale:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(26, 54, 93, 0.25);
            background-color: #142a4a !important;
        }
        
        .btn-hover-scale:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(26, 54, 93, 0.2);
        }
        
        /* Equipment Grid Styles */
        .equipment-grid {
            padding: 4rem 0;
        }
        
        .equipment-card {
            border: none;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 2rem;
            height: 100%;
        }
        
        .equipment-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .equipment-img-container {
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .equipment-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .equipment-card:hover .equipment-img {
            transform: scale(1.05);
        }
        
        .equipment-category {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--color-secondary);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .equipment-price {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-primary);
        }
        
        .equipment-location {
            color: var(--color-text-light);
            font-size: 0.9rem;
        }
        
        .equipment-rating {
            color: #ffc107;
            margin-right: 0.5rem;
        }
        
        .btn-favorite {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            transition: all 0.3s ease;
        }
        
        .btn-favorite:hover, .btn-favorite.active {
            color: #dc3545;
            background: white;
        }
        
        .btn-favorite i {
            font-size: 1.1rem;
        }
        
        /* Smaller header */
        .main-header {
            padding: 0.5rem 0;
        }
        
        .navbar-brand img.logo-img {
            height: 40px;
            width: auto;
            transition: all 0.3s ease;
        }
        
        .navbar {
            padding: 0.25rem 0;
        }
        
        .nav-link {
            padding: 0.5rem 1rem;
            font-size: 0.95rem;
        }
        
        .btn-outline-primary, .btn-primary {
            padding: 0.25rem 0.75rem;
            font-size: 0.9rem;
        }
    </style>
{% endblock %}

{% block content %}
<!-- Skip to main content link (hidden until focused) -->
<a href="#featured-equipment" class="skip-to-content visually-hidden-focusable">Skip to main content</a>

<!-- Hero Section -->
<section class="py-5 py-lg-7 position-relative overflow-hidden" style="background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);" role="banner" aria-label="Hero section">
    <div class="container position-relative">
        <div class="row align-items-center">
            <div class="col-lg-6 py-4 py-lg-5">
                <span class="badge bg-white text-primary mb-3 px-3 py-2 rounded-pill fw-medium">
                    <i class="fas fa-star me-1"></i> {{ site_settings.tagline|default:"Kenya's #1 Equipment Rental Platform" }}
                </span>
                
                <h1 class="display-4 fw-bold text-white mb-4">
                    {{ site_settings.hero_title|default:"Professional Equipment Rental" }}
                    <span class="d-block text-secondary fs-5 mt-2">{{ site_settings.hero_subtitle|default:"For Creators & Professionals" }}</span>
                </h1>
                
                <p class="lead text-white-50 mb-4">
                    {{ site_settings.hero_description|default:"Access high-end cameras, lighting, audio gear, and more from trusted local suppliers. No membership fees. Ready when you are." }}
                </p>
                
                <div class="d-flex flex-column flex-sm-row gap-3 mb-4">
                    <a href="{{ site_settings.hero_cta_link|default:'/equipment/' }}" class="btn btn-primary btn-lg px-4">
                        <i class="fas fa-search me-2"></i> {{ site_settings.hero_cta_text|default:"Browse Equipment" }}
                    </a>
                    <a href="{% url 'equipment:list_equipment' %}" class="btn btn-outline-light btn-lg px-4">
                        <i class="fas fa-camera me-2"></i> List Your Gear
                    </a>
                </div>
                
                <div class="d-flex flex-wrap align-items-center gap-4 mt-4 pt-3 border-top border-white-10">
                    <div class="text-white-50">
                        <span class="visually-hidden">Rated 4.8 out of 5 stars</span>
                        <i class="fas fa-star text-warning"></i>
                        <i class="fas fa-star text-warning"></i>
                        <i class="fas fa-star text-warning"></i>
                        <i class="fas fa-star text-warning"></i>
                        <i class="fas fa-star-half-alt text-warning"></i>
                        <span class="ms-1">4.8/5</span>
                    </div>
                    <div class="text-white-50">
                        <i class="fas fa-users me-1"></i> 5000+ Happy Customers
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="position-relative">
                    <img src="{% static 'images/studio-recording-session.webp' %}" 
                         alt="Professional Studio Recording Session" 
                         class="img-fluid rounded-4 shadow-lg"
                         width="800"
                         height="600"
                         loading="eager"
                         fetchpriority="high"
                         decoding="async"
                         style="max-height: 450px; width: 100%; height: auto; object-fit: contain;">
                    <div class="position-absolute bottom-0 end-0 translate-middle-y me-4">
                        <div class="bg-white text-dark p-3 rounded-3 shadow-sm">
                            <div class="d-flex align-items-center">
                                <div class="bg-primary bg-opacity-10 p-2 rounded-circle me-2">
                                    <i class="fas fa-shield-alt text-primary"></i>
                                </div>
                                <div>
                                    <div class="fw-bold">Secure Booking</div>
                                    <small class="text-muted">100% Protection</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Decorative Elements (minimized to prevent overflow) -->
    <div class="position-absolute" style="bottom: 10%; left: 20%; width: 100px; height: 100px; background: radial-gradient(circle, rgba(0,180,216,0.1) 0%, rgba(0,180,216,0) 70%); border-radius: 50%; opacity: 0.5;"></div>
</section>

<!-- Featured Equipment -->
<section id="featured-equipment" class="py-6 py-lg-8 position-relative overflow-hidden bg-light" aria-labelledby="featured-equipment-heading">
    <!-- Decorative elements -->
    <div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 0; background: radial-gradient(circle at 10% 20%, rgba(26,54,93,0.03) 0%, rgba(255,255,255,0) 30%);" aria-hidden="true"></div>
    <div class="position-absolute bottom-0 end-0 w-100 h-100" style="z-index: 0; background: radial-gradient(circle at 90% 80%, rgba(255, 107, 53, 0.05) 0%, rgba(255,255,255,0) 30%);" aria-hidden="true"></div>
    
    <div class="container position-relative" style="z-index: 1;">
        <div class="text-center mb-6">
            <span class="badge mb-3 px-3 py-2 rounded-pill fw-medium" style="background-color: rgba(26, 54, 93, 0.1); color: #1a365d; border: 1px solid rgba(26, 54, 93, 0.15);">
                <i class="fas fa-star me-2" aria-hidden="true"></i> Featured Equipment
            </span>
            <h2 id="featured-equipment-heading" class="display-5 fw-bold mb-3" style="color: #1a365d;">Premium Equipment for Creatives</h2>
            <p class="lead text-muted mx-auto" style="max-width: 700px;">Handpicked selection of professional gear for filmmakers and photographers. Quality equipment for your creative vision.</p>
        </div>
        
        <div class="row g-4 g-lg-5 justify-content-center">
            {% for item in featured_equipment|slice:":3" %}
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|multiply:100 }}">
                <article class="card h-100 border-0 shadow-sm hover-lift transition-all position-relative overflow-hidden" 
                         style="border-radius: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease;"
                         role="article"
                         aria-labelledby="featured-equipment-{{ item.id }}-title">
                    <!-- Image with hover overlay -->
                    <div class="position-relative" style="height: 240px; overflow: hidden;">
                        {% with item|get_primary_image as equipment_image %}
                            {% if equipment_image and equipment_image.image %}
                                <img src="{{ equipment_image.image.url }}" 
                                     class="card-img-top w-100 h-100" 
                                     alt="{{ item.name }}"
                                     style="object-fit: cover; transition: transform 0.5s ease;"
                                     loading="lazy"
                                     decoding="async"
                                     data-placeholder="{% static 'images/placeholder.jpg' %}"
                                     onerror="handleImageError(this)">
                            {% else %}
                                <div class="bg-light d-flex align-items-center justify-content-center h-100">
                                    <i class="fas fa-camera text-muted fa-3x"></i>
                                </div>
                            {% endif %}
                        {% endwith %}
                        
                        <!-- Category and availability -->
                        <div class="position-absolute top-0 start-0 w-100 p-3 d-flex justify-content-between">
                            <span class="badge" style="background-color: rgba(26, 54, 93, 0.85); color: white; border: 1px solid rgba(255, 255, 255, 0.2);">
                                {{ item.category.name|default:'Equipment' }}
                            </span>
                            <span class="badge bg-success bg-opacity-90 text-white">
                                <i class="fas fa-check-circle me-1"></i> Available
                            </span>
                        </div>
                        
                        <!-- Quick View Button (shown on hover) -->
                        <div class="position-absolute top-50 start-50 translate-middle w-100 text-center" style="opacity: 0; transition: opacity 0.3s ease;">
                            <a href="{% url 'equipment:detail' item.slug %}" class="btn btn-primary btn-sm rounded-pill px-4 shadow-sm">
                                <i class="fas fa-eye me-1"></i> Quick View
                            </a>
                        </div>
                    </div>
                    
                    <!-- Card body -->
                    <div class="card-body p-4">
                        <div class="d-flex flex-column h-100">
                            <!-- Title and Price -->
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h3 id="featured-equipment-{{ item.id }}-title" class="card-title fw-bold h5 mb-0" style="color: #1a365d;">
                                    <a href="{% url 'equipment:detail' item.slug %}" class="text-decoration-none text-reset" style="transition: color 0.2s ease;">
                                        {{ item.name|truncatechars:30 }}
                                    </a>
                                </h3>
                                <div class="text-end">
                                    <div class="h5 fw-bold mb-0" style="color: #1a365d;">KSh {{ item.daily_rate|floatformat:0 }}</div>
                                    <small class="text-muted">per day</small>
                                </div>
                            </div>
                            
                            <!-- Make and Model -->
                            {% if item.equipment_model %}
                            <p class="text-muted small mb-3">
                                <i class="fas fa-tag me-1" style="color: #6c757d;"></i> 
                                {{ item.equipment_model.make.name }} {{ item.equipment_model.name }}
                            </p>
                            {% endif %}
                            
                            <!-- Description -->
                            {% if item.description %}
                            <div class="mb-3">
                                <p class="small text-muted mb-0" style="line-height: 1.5;">
                                    {{ item.description|truncatewords:20 }}
                                </p>
                            </div>
                            {% endif %}
                            
                            <!-- Features -->
                            <div class="mt-auto">
                                <div class="d-flex flex-wrap gap-2 mb-3">
                                    {% if item.min_rental_days %}
                                    <span class="badge bg-light text-dark border" style="font-weight: 500;">
                                        <i class="fas fa-calendar-alt me-1 text-primary"></i>
                                        Min {{ item.min_rental_days }} day{% if item.min_rental_days > 1 %}s{% endif %}
                                    </span>
                                    {% endif %}
                                    
                                    <span class="badge bg-light text-dark border" style="font-weight: 500;">
                                        <i class="fas fa-map-marker-alt me-1 text-primary"></i>
                                        {{ item.location|default:"Nairobi" }}
                                    </span>
                                    
                                    <span class="badge bg-light text-dark border" style="font-weight: 500;">
                                        <i class="fas fa-star text-warning me-1"></i>
                                        {{ item.average_rating|default:5.0|floatformat:1 }}
                                    </span>
                                </div>
                                
                                <!-- Action Buttons -->
                                <div class="d-grid gap-2">
                                    <a href="{% url 'equipment:detail' item.slug %}" 
                                       class="btn btn-primary btn-hover-scale" 
                                       style="background-color: #1a365d; border: none; border-radius: 8px; 
                                              padding: 0.65rem 1rem; font-weight: 500;
                                              transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(26, 54, 93, 0.1);">
                                        <i class="fas fa-eye me-2"></i> View Details
                                    </a>
                                    <button class="btn btn-outline-secondary btn-sm" 
                                            style="border-radius: 8px;"
                                            data-bs-toggle="tooltip" 
                                            data-bs-placement="top" 
                                            title="Add to favorites">
                                        <i class="far fa-heart"></i> Save
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Hover overlay -->
                    <!-- Removed overlay div that was blocking clicks -->
                </article>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <div class="bg-white rounded-3 p-5 shadow-sm">
                    <div class="d-inline-flex align-items-center justify-content-center mb-4" 
                         style="width: 80px; height: 80px; border-radius: 50%; background-color: rgba(26, 54, 93, 0.1);">
                        <i class="fas fa-box-open" style="font-size: 2rem; color: #1a365d;"></i>
                    </div>
                    <h3 class="h4 mb-3" style="color: #1a365d;">No Featured Equipment Available</h3>
                    <p class="text-muted mb-4">We're currently updating our featured selection. Please check back soon!</p>
                    <a href="{% url 'equipment:list' %}" class="btn btn-primary px-4">
                        <i class="fas fa-search me-2"></i>Browse All Equipment
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-6">
            <a href="{% url 'equipment:list' %}" class="btn btn-outline-primary btn-lg px-5 rounded-pill">
                Explore Full Catalog
                <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>

<!-- How It Works -->
<section id="how-it-works" class="py-5 py-lg-7 position-relative overflow-hidden" style="background: linear-gradient(135deg, #f8f9fa 0%, #f1f5f9 100%);" aria-labelledby="how-it-works-heading">
    <!-- Decorative elements -->
    <div class="position-absolute top-0 start-0 w-100 h-100 pattern-overlay"></div>
    <style>
        .pattern-overlay {
            z-index: 0;
            background-image: url('{% static "images/patterns/dot-pattern.svg" %}');
            background-repeat: repeat;
            opacity: 0.1;
            pointer-events: none;
        }
    </style>
    
    <div class="container position-relative" style="z-index: 1;">
        <div class="text-center mb-5">
            <span class="badge bg-primary bg-opacity-10 text-primary border-0 px-4 py-2 mb-3 rounded-pill fw-medium">
                <i class="fas fa-cogs me-2" aria-hidden="true"></i> How It Works
            </span>
            <h2 class="display-5 fw-bold mb-3 text-dark" id="how-it-works-heading">
                {{ site_settings.how_it_works_title|default:"Renting Equipment Made Simple" }}
            </h2>
            <p class="lead text-muted mb-5 mx-auto" style="max-width: 700px;">
                {{ site_settings.how_it_works_subtitle|default:"Get the equipment you need in just a few simple steps" }}
            </p>
        </div>

        {% with "home_how_it_works" as snippet_slug %}
            {% get_content_snippet snippet_slug as how_it_works %}
            {% if how_it_works %}
                {{ how_it_works.content|safe }}
            {% else %}
                <div class="row g-4">
                    <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                        <div class="card h-100 border-0 shadow-sm p-4 text-center bg-white rounded-3">
                            <div class="icon-box mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px; background: rgba(26, 54, 93, 0.05); border-radius: 50%;">
                                <i class="fas fa-search fa-2x text-primary"></i>
                            </div>
                            <h3 class="h5 mb-3 text-dark">1. Find Equipment</h3>
                            <p class="text-muted mb-0">Browse our extensive catalog of professional equipment from trusted suppliers.</p>
                        </div>
                    </div>
                    <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                        <div class="card h-100 border-0 shadow-sm p-4 text-center bg-white rounded-3">
                            <div class="icon-box mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px; background: rgba(26, 54, 93, 0.05); border-radius: 50%;">
                                <i class="fas fa-calendar-check fa-2x text-primary"></i>
                            </div>
                            <h3 class="h5 mb-3 text-dark">2. Book Online</h3>
                            <p class="text-muted mb-0">Select your rental dates and complete your booking with our secure payment system.</p>
                        </div>
                    </div>
                    <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                        <div class="card h-100 border-0 shadow-sm p-4 text-center bg-white rounded-3">
                            <div class="icon-box mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px; background: rgba(26, 54, 93, 0.05); border-radius: 50%;">
                                <i class="fas fa-tools fa-2x text-primary"></i>
                            </div>
                            <h3 class="h5 mb-3 text-dark">3. Get to Work</h3>
                            <p class="text-muted mb-0">Pick up the equipment or get it delivered to your location and start creating.</p>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endwith %}
        
        <div class="text-center mt-5">
            <a href="{% url 'equipment:list' %}" class="btn btn-primary btn-lg px-5">
                <i class="fas fa-play-circle me-2"></i> Get Started Now
            </a>
            <p class="text-muted mt-3 mb-0">No account required to browse our equipment</p>
        </div>
    </div>
</section>

<!-- Final CTA -->
<section id="get-started" class="py-5 bg-primary text-white" aria-labelledby="cta-heading">
    <div class="container py-5">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h2 id="cta-heading" class="h1 mb-4">Start Renting or Earning Today</h2>
                <p class="lead mb-5">Join Kenya's largest equipment rental marketplace and get access to the best gear or start earning from your equipment.</p>
                
                <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                    <a href="{% if user.is_authenticated %}{% url 'equipment:list' %}{% else %}{% url 'account_signup' %}?user_type=renter{% endif %}" 
                       class="btn btn-primary btn-lg px-4 py-3"
                       {% if not user.is_authenticated %}
                       aria-label="Sign up to find equipment for rent"
                       {% endif %}>
                        <i class="fas fa-search me-2" aria-hidden="true"></i> Find Equipment
                    </a>
                    
                    <a href="{% if user.is_authenticated %}{% url 'equipment:list_equipment' %}{% else %}{% url 'account_signup' %}?user_type=owner{% endif %}" 
                       class="btn btn-outline-primary btn-lg px-4 py-3"
                       {% if not user.is_authenticated %}
                       aria-label="Sign up to list your equipment for rent"
                       {% endif %}>
                        <i class="fas fa-camera me-2" aria-hidden="true"></i> List Your Gear
                    </a>
                </div>
                
                <div class="mt-4" role="region" aria-label="Benefits">
                    <div class="d-flex flex-wrap justify-content-center align-items-center gap-3" role="list">
                        <div class="d-flex align-items-center" role="listitem">
                            <i class="fas fa-check-circle me-2" aria-hidden="true"></i>
                            <span>No hidden fees</span>
                        </div>
                        <div class="d-flex align-items-center" role="listitem">
                            <i class="fas fa-check-circle me-2" aria-hidden="true"></i>
                            <span>Secure payments</span>
                        </div>
                        <div class="d-flex align-items-center" role="listitem">
                            <i class="fas fa-check-circle me-2" aria-hidden="true"></i>
                            <span>24/7 support</span>
                        </div>
                    </div>
                </div>
                
                {% if user.is_authenticated %}
                <p class="mt-4 mb-0">
                    <a href="{% url 'equipment:list' %}" class="text-white-75 text-decoration-underline">
                        Browse all equipment <span class="visually-hidden">available for rent</span>
                    </a>
                </p>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us Section -->
<section class="py-5 bg-light position-relative overflow-hidden">
    <div class="container py-5 position-relative">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right">
                <div class="mb-5">
                    <span class="badge bg-primary bg-opacity-10 text-primary mb-3 px-3 py-2 rounded-pill fw-medium">
                        <i class="fas fa-star me-1"></i> Why Choose Us
                    </span>
                    <h2 class="display-4 fw-bold mb-4" style="color: #1a365d;">
                        The Best Equipment Rental Experience
                    </h2>
                    <p class="lead text-muted mb-5">
                        Professional equipment rental made simple, reliable, and affordable for all your production needs.
                    </p>
                </div>
                
                <div class="row g-4">
                    <!-- Feature 1 -->
                    <div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
                        <div class="d-flex align-items-start">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-3 me-4" aria-hidden="true">
                                <i class="fas fa-check-circle fa-lg text-primary"></i>
                            </div>
                            <div>
                                <h3 class="h5 fw-bold mb-2">Premium Quality</h3>
                                <p class="text-muted mb-0">Top-tier, well-maintained equipment from trusted brands.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Feature 2 -->
                    <div class="col-md-6" data-aos="fade-up" data-aos-delay="150">
                        <div class="d-flex align-items-start">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-3 me-4" aria-hidden="true">
                                <i class="fas fa-shield-alt fa-lg text-primary"></i>
                            </div>
                            <div>
                                <h3 class="h5 fw-bold mb-2">Fully Insured</h3>
                                <p class="text-muted mb-0">Comprehensive coverage for complete peace of mind.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Feature 3 -->
                    <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="d-flex align-items-start">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-3 me-4" aria-hidden="true">
                                <i class="fas fa-truck fa-lg text-primary"></i>
                            </div>
                            <div>
                                <h3 class="h5 fw-bold mb-2">Fast Delivery</h3>
                                <p class="text-muted mb-0">On-time delivery across Nairobi and beyond.</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Feature 4 -->
                    <div class="col-md-6" data-aos="fade-up" data-aos-delay="250">
                        <div class="d-flex align-items-start">
                            <div class="bg-primary bg-opacity-10 p-3 rounded-3 me-4" aria-hidden="true">
                                <i class="fas fa-headset fa-lg text-primary"></i>
                            </div>
                            <div>
                                <h3 class="h5 fw-bold mb-2">24/7 Support</h3>
                                <p class="text-muted mb-0">Dedicated team ready to assist you anytime.</p>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                
        

    <!-- Decorative elements -->
    <div class="position-absolute top-0 start-0 w-100 h-100 z-1 bg-light-pattern" aria-hidden="true"></div>
</section>

<!-- Coming Soon Modal -->
<div class="modal fade" id="comingSoonModal" tabindex="-1" aria-labelledby="comingSoonModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="color: var(--color-primary);">Coming Soon</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center p-4">
                <div class="mb-4">
                    <i class="fas fa-tools fa-3x mb-3" style="color: var(--color-secondary);"></i>
                    <h4 style="color: var(--color-primary);">Under Construction</h4>
                    <p style="color: var(--color-text-light);">We're currently working on this feature. Please check back soon!</p>
                </div>
            </div>
            <div class="modal-footer justify-content-center border-0">
                <button type="button" class="btn" data-bs-dismiss="modal" style="background-color: var(--color-secondary); border-color: var(--color-secondary); color: white;">Got it!</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
    // Handle image loading errors
    document.addEventListener('DOMContentLoaded', function() {
        // Handle image errors
        document.querySelectorAll('.equipment-image').forEach(img => {
            img.addEventListener('error', function() {
                if (this.dataset.placeholder) {
                    this.src = this.dataset.placeholder;
                }
            });
        });

        // Initialize AOS
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true,
            mirror: false
        });
        
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Favorite button functionality
        document.querySelectorAll('.btn-favorite').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const equipmentId = this.getAttribute('data-equipment-id');
                const icon = this.querySelector('i');
                const isFavorite = this.classList.contains('active');
                
                // Toggle visual state
                this.classList.toggle('active');
                icon.classList.toggle('far');
                icon.classList.toggle('fas');
                
                // Here you would typically make an AJAX call to update the favorite status
                console.log(`Toggled favorite for equipment ${equipmentId}`);
                
                // Show feedback
                const toast = new bootstrap.Toast(document.getElementById('toast'));
                document.getElementById('toast-message').textContent = 
                    isFavorite ? 'Removed from favorites' : 'Added to favorites';
                toast.show();
            });
        });

        // Counter animation
        function animateCounter(counter) {
            const target = parseInt(counter.getAttribute('data-target'));
            const count = parseInt(counter.innerText);
            const increment = target / 50; // Adjust speed here
            
            if (count < target) {
                counter.innerText = Math.ceil(count + increment);
                setTimeout(() => animateCounter(counter), 20);
            } else {
                counter.innerText = target + '+';
            }
        }

        // Handle image loading errors
        function handleImageError(img) {
            const placeholder = img.getAttribute('data-placeholder');
            if (placeholder) {
                img.onerror = null;
                img.src = placeholder;
            }
        }

        // Initialize counter animation
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const counter = entry.target;
                    animateCounter(counter);
                    observer.unobserve(counter);
                }
            });
        }, {
            threshold: 0.5 // Trigger when 50% of the element is visible
        });

        // Observe all counter elements
        document.querySelectorAll('.counter').forEach(counter => {
            observer.observe(counter);
        });
    });
</script>
{% endblock %}