{% extends 'base/base.html' %}
{% load static %}

{% block extra_css %}
<style>
    :root {
        --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --card-shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        --transition-speed: 0.3s;
        --border-radius: 12px;
    }
    
    /* Test Page Layout */
    .test-section {
        margin-bottom: 4rem;
        padding: 3rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .test-section:last-child {
        border-bottom: none;
        margin-bottom: 2rem;
    }
    
    .section-header {
        margin-bottom: 2.5rem;
        text-align: center;
    }
    
    .section-header h2 {
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--color-primary);
    }
    
    .section-header p {
        color: var(--color-gray-600);
        max-width: 700px;
        margin: 0 auto 2rem;
    }
    
    /* Base Card Styles */
    .card {
        --card-padding: 1.5rem;
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        /* height: 100%; removed to prevent stretching */
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: var(--border-radius);
        box-shadow: var(--card-shadow);
        transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Prevent columns from stretching cards */
    .row.g-4 > [class^="col-"], .row.g-4 > [class*=" col-"] {
        display: block !important;
        height: auto !important;
    }
    
    .card:hover {
        transform: translateY(-8px);
        box-shadow: var(--card-shadow-hover) !important;
        border-color: rgba(26, 54, 93, 0.1);
    }
    
    /* Card Image Container */
    .card-img-container {
        position: relative;
        height: 200px;
        overflow: hidden;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
    
    .card-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .card:hover .card-img-container img {
        transform: scale(1.03);
    }
    
    /* Card Badges */
    .card-badge {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 2;
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 50px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .badge-new {
        background-color: var(--color-success);
        color: white;
    }
    
    .badge-discount {
        background-color: var(--color-danger);
        color: white;
    }
    
    /* Card Body */
    .card-body {
        padding: var(--card-padding);
    }
    
    .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--color-dark);
    }
    
    .card-text {
        color: var(--color-gray-600);
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }
    
    /* Card Footer */
    .card-footer {
        padding: 0.75rem var(--card-padding);
        background-color: rgba(0, 0, 0, 0.02);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    /* Price Styles */
    .price {
        font-weight: 700;
        color: var(--color-primary);
        font-size: 1.25rem;
        margin-bottom: 0;
    }
    
    .price small {
        font-size: 0.8em;
        color: var(--color-gray-600);
        font-weight: 500;
    }
    
    /* Favorite Button */
    .favorite-btn {
        --btn-size: 38px;
        width: var(--btn-size);
        height: var(--btn-size);
        min-width: var(--btn-size);
        min-height: var(--btn-size);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 0.75rem;
        padding: 0;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        color: #6c757d;
        cursor: pointer;
    }
    
    .favorite-btn:hover, 
    .favorite-btn:focus-visible {
        background-color: #fff;
        transform: scale(1.12);
        color: #dc3545;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .favorite-btn:active {
        transform: scale(0.98);
    }
    
    .favorite-btn i {
        font-size: 1.1rem;
        transition: all 0.2s ease;
    }
    
    .favorite-btn.active {
        color: #dc3545;
    }
    
    /* Rating Styles */
    .rating {
        display: inline-flex;
        align-items: center;
        font-size: 0.85rem;
        color: var(--color-warning);
        margin-bottom: 0.5rem;
    }
    
    .rating i {
        margin-right: 0.1rem;
    }
    
    .review-count {
        margin-left: 0.5rem;
        color: var(--color-gray-600);
        font-size: 0.8rem;
    }
    
    /* Category Label */
    .category-label {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-primary);
        background-color: rgba(26, 54, 93, 0.08);
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        margin-bottom: 0.75rem;
    }
    
    /* Card Hover Effects */
    .card-hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .card-hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Card Variations */
    .card-horizontal {
        flex-direction: row;
    }
    
    .card-horizontal .card-img-container {
        width: 40%;
        height: auto;
        border-radius: var(--border-radius) 0 0 var(--border-radius);
    }
    
    .card-horizontal .card-body {
        width: 60%;
    }
    
    /* Responsive Adjustments */
    @media (max-width: 767.98px) {
        .card-horizontal {
            flex-direction: column;
        }
        
        .card-horizontal .card-img-container,
        .card-horizontal .card-body {
            width: 100%;
        }
        
        .card-horizontal .card-img-container {
            border-radius: var(--border-radius) var(--border-radius) 0 0;
            height: 180px;
        }
    }
    
    /* Remove duplicate .favorite-btn styles as they're already defined above */
    .favorite-btn i {
        font-size: 1.1rem;
    }
    
    /* Color variables */
    :root {
        --bs-primary: #1a365d;
        --bs-primary-rgb: 26, 54, 93;
        --bs-secondary: #ff6b35;
        --bs-secondary-rgb: 255, 107, 53;
        --bs-light: #f8f9fa;
        --bs-gray-100: #f8f9fa;
        --bs-gray-200: #e9ecef;
        --bs-gray-300: #dee2e6;
        --bs-gray-700: #495057;
        --bs-dark: #212529;
        
        --bs-navbar-color: rgba(255, 255, 255, 0.95);
        --bs-navbar-hover-color: #fff;
        --bs-navbar-active-color: #fff;
        
        --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --card-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.12);
    }
    
    /* Button and badge styles */
    .btn-primary, 
    .badge.bg-primary {
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-bg: #122a4a;
        --bs-btn-hover-border-color: #0f233f;
        --bs-btn-active-bg: #0f233f;
        --bs-btn-active-border-color: #0c1d35;
        font-weight: 500;
        letter-spacing: 0.3px;
    }
    
    .badge {
        padding: 0.4em 0.75em;
        font-weight: 500;
        border-radius: 6px;
    }
    
    /* Navigation bar styles */
    .navbar {
        --bs-navbar-color: var(--bs-white);
        --bs-navbar-hover-color: var(--bs-white);
        --bs-navbar-active-color: var(--bs-white);
        --bs-navbar-disabled-color: rgba(255, 255, 255, 0.6);
        --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.3);
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        background-color: var(--bs-primary) !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        padding: 0.75rem 0;
    }
    
    .navbar .navbar-brand {
        font-weight: 700;
        font-size: 1.5rem;
    }
    
    .navbar .nav-link {
        font-weight: 500;
        padding: 0.5rem 1rem !important;
        margin: 0 0.25rem;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    
    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    .navbar .nav-link.active {
        background-color: rgba(255, 255, 255, 0.15);
        font-weight: 600;
    }
    
    .navbar .nav-link {
        color: var(--bs-navbar-color);
        font-weight: 500;
        padding: 0.5rem 1rem;
        transition: color 0.2s ease-in-out;
    }
    
    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
        color: var(--bs-navbar-hover-color);
    }
    
    .navbar .nav-link.active {
        color: var(--bs-navbar-active-color);
        font-weight: 600;
        position: relative;
    }
    
    .navbar .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 1rem;
        right: 1rem;
        height: 2px;
        background-color: var(--bs-navbar-active-color);
    }
    
    /* Card image styles */
    .card-img-top {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .card:hover .card-img-top {
        transform: scale(1.08);
    }
    
    /* Card body styles */
    .card-body {
        padding: 1.5rem;
    }
    
    .card-title {
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: var(--bs-dark);
    }
    
    .card-text {
        color: var(--bs-gray-700);
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* Price styling */
    .price {
        font-weight: 700;
        color: var(--bs-primary);
        font-size: 1.25rem;
        line-height: 1.2;
    }
    
    .price-unit {
        display: block;
        font-size: 0.8rem;
        color: var(--bs-gray-600);
        font-weight: 400;
    }
    
    /* --- Card Stretch Fix for Test Page --- */
    .card { display: block !important; height: auto !important; min-height: 0 !important; }
    .card-body { flex: unset !important; }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold">Card Components Preview</h1>
        <p class="lead text-muted">Test and preview all card components in one place</p>
    </div>
    
    <!-- Equipment Cards Section -->
    <section class="test-section">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="h4 fw-bold mb-0">Equipment Cards</h2>
            <span class="badge bg-primary">{{ equipment_list|length }} Examples</span>
        </div>
        
        <div class="row g-4 align-items-start">
            {% for equipment in equipment_list %}
            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-4">
                <div class="card bg-white">
                    {% with image_url=equipment.image|default:'' %}
                    <div class="card-img-container position-relative bg-light" style="height: 180px;">
                        <img src="{{ image_url }}" 
                             class="card-img-top" style="height: 180px; object-fit: cover; width: 100%;" 
                             alt="{{ equipment.name }}"
                             onerror="this.onerror=null; this.src=this.getAttribute('data-fallback')"
                             data-fallback="{% static 'images/placeholder.jpg' %}">
                        
                        <!-- Status Badge - Top Left -->
                        <span class="position-absolute top-0 start-0 m-2 badge bg-primary">
                            <i class="fas fa-store me-1"></i> Platform
                        </span>
                        
                        <!-- Availability Badge - Top Right -->
                        <span class="position-absolute top-0 end-0 m-2 badge bg-success">
                            <i class="fas fa-check-circle me-1"></i> Available
                        </span>
                        
                        <!-- Favorite Button - Bottom Right -->
                        <button class="position-absolute bottom-0 end-0 favorite-btn"
                                data-bs-toggle="tooltip" 
                                data-bs-placement="left" 
                                title="Add to favorites"
                                aria-label="Add to favorites">
                            <i class="far fa-heart text-danger" style="font-size: 1.1em;"></i>
                        </button>
                    </div>
                    {% endwith %}
                    
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title mb-1">
                                <a href="#" class="text-dark text-decoration-none">
                                    {{ equipment.name }}
                                </a>
                            </h5>
                            <div class="price">
                                Ksh {{ equipment.daily_rate|floatformat:0 }}
                                <span class="price-unit">per day</span>
                            </div>
                        </div>
                        
                        <p class="card-text text-muted small mb-2">
                            {{ equipment.brand }} {{ equipment.model }}
                        </p>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                {% include 'shared/partials/rating.html' with rating=equipment.average_rating count=equipment.review_count show_count=True %}
                            </div>
                            <span class="badge bg-light text-dark border border-1 border-light-subtle">
                                <i class="fas fa-{{ equipment.category.icon|default:'camera' }} me-1"></i>
                                {{ equipment.category }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>

    <!-- Service Cards Section -->
    <section class="test-section">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="h4 fw-bold mb-0">Service Cards</h2>
            <span class="badge bg-primary">{{ services|length }} Examples</span>
        </div>
        
        <div class="row g-4 align-items-start">
            {% for service in services %}
            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-4">
                <div class="card bg-white">
                    <div class="card-img-container position-relative bg-light" style="height: 180px;">
                        <img src="{{ service.image }}" 
                             class="card-img-top" style="height: 180px; object-fit: cover; width: 100%;" 
                             alt="{{ service.title }}"
                             onerror="this.onerror=null; this.src=this.getAttribute('data-fallback')"
                             data-fallback="{% static 'images/placeholder.jpg' %}">
                        
                        <!-- Platform Badge - Top Left -->
                        <span class="position-absolute top-0 start-0 m-2 badge bg-primary">
                            <i class="fas fa-store me-1"></i> Platform
                        </span>
                        
                        <!-- Favorite Button - Bottom Right -->
                        <button class="position-absolute bottom-0 end-0 favorite-btn"
                                data-bs-toggle="tooltip" 
                                data-bs-placement="left" 
                                title="Add to favorites"
                                aria-label="Add to favorites">
                            <i class="far fa-heart text-danger" style="font-size: 1.1em;"></i>
                        </button>
                    </div>
                    
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title mb-1">
                                <a href="#" class="text-dark text-decoration-none">
                                    {{ service.title }}
                                </a>
                            </h5>
                            <div class="text-primary fw-bold text-nowrap">
                                <div>Ksh {{ service.price|floatformat:0 }}</div>
                                <div class="text-muted small">/{{ service.pricing_unit }}</div>
                            </div>
                        </div>
                        
                        <p class="card-text text-muted small mb-2">
                            {{ service.short_description }}
                        </p>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                {% include 'shared/partials/rating.html' with rating=service.average_rating count=service.review_count show_count=True %}
                            </div>
                            <span class="badge bg-light text-dark">
                                <i class="fas fa-map-marker-alt me-1"></i>
                                {{ service.location }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-transparent border-top-0 pt-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <img src="{% static 'images/avatar-placeholder.png' %}" 
                                     class="rounded-circle me-2" 
                                     width="24" 
                                     height="24" 
                                     alt="Provider"
                                     onerror="this.onerror=null; this.src=this.getAttribute('data-fallback')"
                                     data-fallback="{% static 'images/placeholder.jpg' %}">
                                <small class="text-muted">By {{ service.provider.get_full_name }}</small>
                            </div>
                            <a href="#" class="btn btn-sm btn-outline-primary">View Details</a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>

    <!-- Dashboard Cards Section -->
    <section class="test-section">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="h4 fw-bold mb-0">Dashboard Cards</h2>
            <span class="badge bg-primary">3 Styles</span>
        </div>
        
        <div class="row g-4 align-items-start">
            <!-- Stat Card -->
            <div class="col-12 col-md-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="p-3 rounded-3 bg-primary bg-opacity-10 text-primary">
                                <i class="fas fa-camera fa-2x"></i>
                            </div>
                            <span class="badge bg-success bg-opacity-10 text-success">+12.5%</span>
                        </div>
                        <h3 class="mb-1">1,248</h3>
                        <p class="text-muted mb-0">Total Equipment</p>
                        <div class="mt-3">
                            <a href="#" class="text-primary text-decoration-none small fw-medium">
                                View all <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Action Card -->
            <div class="col-12 col-md-4">
                <div class="card border-0 bg-primary text-white h-100">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <h5 class="card-title text-white mb-1">Ready to List?</h5>
                                <p class="small mb-0 opacity-75">Earn money with your equipment</p>
                            </div>
                            <div class="d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2);">
                                <i class="fas fa-plus" style="font-size: 0.875rem;"></i>
                            </div>
                        </div>
                        <button class="btn btn-light btn-sm w-100 mt-3">
                            List Equipment
                        </button>
                    </div>
                </div>
            </div>

            <!-- Notification Card -->
            <div class="col-12 col-md-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="p-2 rounded-circle bg-warning bg-opacity-10 text-warning me-3">
                                <i class="fas fa-bell"></i>
                            </div>
                            <h5 class="mb-0">New Requests</h5>
                            <span class="badge bg-primary ms-auto">3</span>
                        </div>
                        <div class="list-group list-group-flush">
                            <div class="list-group-item border-0 px-0 py-2">
                                <div class="d-flex align-items-center">
                                    <img src="{% static 'images/avatar-placeholder.png' %}" 
                                         class="rounded-circle me-2" 
                                         width="32" 
                                         height="32" 
                                         alt="User"
                                         onerror="this.onerror=null; this.src=this.getAttribute('data-fallback')"
                                         data-fallback="{% static 'images/placeholder.jpg' %}">
                                    <div class="flex-grow-1">
                                        <h6 class="mb-0 small">John D. requested Canon 5D</h6>
                                        <small class="text-muted">2 hours ago</small>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">View</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    /* Home Page Cards Section */
    <section class="test-section py-5 bg-white">
        <div class="d-flex justify-content-between align-items-center mb-5">
            <h2 class="h4 fw-bold mb-0">Featured Equipment</h2>
            <a href="#" class="btn btn-outline-primary btn-sm">View All</a>
        </div>
        
        <style>
            .featured-equipment {
                position: relative;
                border-radius: 16px;
                overflow: hidden;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                height: 100%;
                background: white;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            }
            
            .featured-equipment:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            }
            
            .featured-img-container {
                height: 200px;
                position: relative;
                overflow: hidden;
            }
            
            .featured-img-container img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.5s ease;
            }
            
            .featured-equipment:hover .featured-img-container img {
                transform: scale(1.05);
            }
            
            .featured-badge {
                position: absolute;
                top: 15px;
                left: 15px;
                background: rgba(255, 255, 255, 0.95);
                color: #2d3748;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.8rem;
                font-weight: 600;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                z-index: 2;
            }
            
            .featured-content {
                padding: 1.5rem;
            }
            
            .featured-category {
                display: inline-block;
                color: #4a5568;
                font-size: 0.85rem;
                margin-bottom: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            
            .featured-title {
                font-size: 1.25rem;
                font-weight: 700;
                color: #1a202c;
                margin-bottom: 0.75rem;
                line-height: 1.3;
            }
            
            .featured-desc {
                color: #4a5568;
                font-size: 0.95rem;
                margin-bottom: 1.25rem;
                line-height: 1.6;
            }
            
            .featured-meta {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-top: 1rem;
                border-top: 1px solid #edf2f7;
            }
            
            .featured-price {
                font-size: 1.25rem;
                font-weight: 700;
                color: #2b6cb0;
            }
            
            .featured-price-original {
                display: block;
                font-size: 0.85rem;
                color: #a0aec0;
                text-decoration: line-through;
                margin-top: 2px;
            }
            
            .featured-rating {
                display: inline-flex;
                align-items: center;
                background: #f7fafc;
                padding: 0.35rem 0.75rem;
                border-radius: 20px;
                font-size: 0.85rem;
                color: #4a5568;
            }
            
            .featured-rating i {
                color: #f6ad55;
                margin-right: 4px;
                font-size: 0.9em;
            }
            
            .featured-cta {
                margin-top: 1.25rem;
            }
            
            .home-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
            }
            
            .card-img-container {
                height: 180px;
                overflow: hidden;
                position: relative;
            }
            
            .card-img-container img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease;
            }
            
            .home-card:hover .card-img-container img {
                transform: scale(1.05);
            }
            
            .card-body {
                padding: 1.25rem;
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            
            .card-title {
                font-size: 1.05rem;
                font-weight: 600;
                margin-bottom: 0.5rem;
                color: #2d3748;
            }
            
            .card-category {
                font-size: 0.8rem;
                color: #718096;
                margin-bottom: 0.5rem;
            }
            
            .card-price {
                margin-top: auto;
                padding-top: 0.75rem;
                border-top: 1px solid #edf2f7;
            }
            
            .price-amount {
                font-size: 1.1rem;
                font-weight: 700;
                color: #2b6cb0;
            }
            
            .price-original {
                font-size: 0.8rem;
                color: #a0aec0;
                text-decoration: line-through;
                margin-left: 0.5rem;
            }
            
            .price-period {
                font-size: 0.8rem;
                color: #718096;
                display: block;
                margin-top: 0.25rem;
            }
            
            .favorite-btn-home {
                position: absolute;
                top: 0.75rem;
                left: 0.75rem;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.9);
                border: 1px solid #e2e8f0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #e53e3e;
                transition: all 0.2s ease;
                z-index: 2;
            }
            
            .favorite-btn-home:hover, 
            .favorite-btn-home.active {
                background: #fff5f5;
                color: #e53e3e;
                transform: scale(1.1);
            }
            
            .favorite-btn-home i {
                font-size: 1rem;
            }
            
            .discount-badge {
                position: absolute;
                top: 0.75rem;
                right: 0.75rem;
                background: #e53e3e;
                color: white;
                padding: 0.25rem 0.5rem;
                border-radius: 4px;
                font-size: 0.75rem;
                font-weight: 600;
                z-index: 2;
            }
            
            .rating-badge {
                display: inline-flex;
                align-items: center;
                background: #f7fafc;
                padding: 0.25rem 0.5rem;
                border-radius: 4px;
                font-size: 0.8rem;
                color: #4a5568;
                margin-bottom: 0.5rem;
            }
            
            .rating-badge i {
                color: #f6ad55;
                margin-right: 0.25rem;
                font-size: 0.8rem;
            }
        </style>
        
        <div class="text-center mb-5">
            <h2 class="display-5 fw-bold mb-3">Premium Equipment for Your Next Project</h2>
            <p class="lead text-muted mx-auto" style="max-width: 700px;">Rent professional-grade equipment at affordable rates. Perfect for photographers, videographers, and content creators.</p>
        </div>
        
        <div class="row g-4 align-items-start">
            <!-- Featured Camera 1 -->
            <div class="col-12 col-md-6 col-lg-4">
                <div class="featured-equipment h-100">
                    <div class="featured-img-container">
                        <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                             alt="Canon EOS R5">
                        <span class="featured-badge">Most Popular</span>
                    </div>
                    
                    <div class="featured-content">
                        <span class="featured-category">Mirrorless Camera</span>
                        <h3 class="featured-title">Canon EOS R5</h3>
                        <p class="featured-desc">Professional full-frame mirrorless camera with 45MP sensor, 8K video, and advanced autofocus system. Perfect for high-end photography and videography.</p>
                        
                        <div class="featured-meta">
                            <div>
                                <span class="featured-price">Ksh 8,500 <span class="text-muted">/day</span></span>
                                <span class="featured-price-original">Ksh 10,000</span>
                            </div>
                            <span class="featured-rating">
                                <i class="fas fa-star"></i> 4.8
                            </span>
                        </div>
                        
                        <div class="featured-cta">
                            <button class="btn btn-primary w-100">Rent Now</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Featured Camera 2 -->
            <div class="col-12 col-md-6 col-lg-4">
                <div class="featured-equipment h-100">
                    <div class="featured-img-container">
                        <img src="https://images.unsplash.com/photo-1566669437685-186028cd0f30?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                             alt="Sony A7 IV">
                        <span class="featured-badge">New Arrival</span>
                    </div>
                    
                    <div class="featured-content">
                        <span class="featured-category">Full Frame Mirrorless</span>
                        <h3 class="featured-title">Sony A7 IV</h3>
                        <p class="featured-desc">33MP full-frame mirrorless camera with 10fps shooting, 4K 60p video, and real-time tracking. Ideal for both photography and filmmaking.</p>
                        
                        <div class="featured-meta">
                            <div>
                                <span class="featured-price">Ksh 9,500 <span class="text-muted">/day</span></span>
                            </div>
                            <span class="featured-rating">
                                <i class="fas fa-star"></i> 4.9
                            </span>
                        </div>
                        
                        <div class="featured-cta">
                            <button class="btn btn-primary w-100">Rent Now</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Featured Camera 3 -->
            <div class="col-12 col-md-6 col-lg-4">
                <div class="featured-equipment h-100">
                    <div class="featured-img-container">
                        <img src="https://images.unsplash.com/photo-1510127033411-de571ea85fdb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                             alt="Nikon Z7 II">
                        <span class="featured-badge">Special Offer</span>
                    </div>
                    
                    <div class="featured-content">
                        <span class="featured-category">Full Frame Mirrorless</span>
                        <h3 class="featured-title">Nikon Z7 II</h3>
                        <p class="featured-desc">45.7MP full-frame mirrorless camera with dual processors, 4K UHD video, and in-body image stabilization. Perfect for landscape and portrait photography.</p>
                        
                        <div class="featured-meta">
                            <div>
                                <span class="featured-price">Ksh 7,800 <span class="text-muted">/day</span></span>
                            </div>
                            <span class="featured-rating">
                                <i class="fas fa-star"></i> 4.7
                            </span>
                        </div>
                        
                        <div class="featured-cta">
                            <button class="btn btn-primary w-100">Rent Now</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- CTA Section -->
            <div class="col-12 text-center mt-5">
                <div class="p-5 bg-light rounded-3">
                    <h3 class="fw-bold mb-3">Need Something Specific?</h3>
                    <p class="text-muted mb-4">Browse our full catalog of professional photography and videography equipment.</p>
                    <button class="btn btn-primary btn-lg">View All Equipment</button>
                </div>
            </div>

            <!-- Service Card with Blur -->
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card">
                    <div class="position-relative">
                        <!-- Background Image with Blur -->
                        <div class="position-absolute w-100 h-100" style="background: url('https://images.unsplash.com/photo-1566669437685-186028cd0f30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80') center/cover; filter: blur(3px);">
                        </div>
                        
                        <!-- Semi-transparent Overlay -->
                        <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(26, 54, 93, 0.7);">
                        </div>
                        
                        <!-- Content -->
                        <div class="position-relative h-100 p-4">
                            <div class="mt-auto">
                                <div class="mb-3">
                                    <img src="{% static 'images/avatar-placeholder.png' %}" 
                                         class="rounded-circle border border-white border-2 me-2" 
                                         width="40" 
                                         height="40" 
                                         alt="Photographer"
                                         onerror="this.onerror=null; this.src=this.getAttribute('data-fallback')"
                                         data-fallback="{% static 'images/placeholder.jpg' %}">
                                    <div>
                                        <div class="text-white fw-medium">John D.</div>
                                        <div class="text-white-50 small">Professional Photographer</div>
                                    </div>
                                </div>
                                
                                <h3 class="h4 text-white mb-2">Photography Services</h3>
                                <p class="text-white-75 mb-4">Professional photography for all your special moments</p>
                                
                                <div class="justify-content-between align-items-center">
                                    <div>
                                        <span class="h5 text-white mb-0">Ksh 5,000</span>
                                        <div class="text-white-50 small">per session</div>
                                    </div>
                                    <button class="btn btn-outline-light">Book Now</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Category Card -->
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card">
                    <div class="position-relative">
                        <!-- Background Image -->
                        <img src="https://images.unsplash.com/photo-1510127033411-de571ea85fdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
                             class="w-100 object-fit-cover" 
                             alt="Lighting Equipment" style="height: 200px;">
                        
                        <!-- Gradient Overlay -->
                        <div class="position-absolute top-0 start-0 w-100 h-100" 
                             style="background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);">
                        </div>
                        
                        <!-- Content -->
                        <div class="position-absolute bottom-0 start-0 w-100 p-4 text-center">
                            <div class="icon-wrapper bg-primary bg-opacity-25 text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" 
                                 style="width: 60px; height: 60px; margin: 0 auto;">
                                <i class="fas fa-lightbulb fa-lg"></i>
                            </div>
                            <h3 class="h4 text-white mb-1">Lighting</h3>
                            <p class="text-white-75 mb-3">24 items available</p>
                            <a href="#" class="btn btn-sm btn-outline-light">Browse Collection</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CTA Card -->
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card w-100 bg-primary text-white">
                    <div class="position-relative p-4" style="min-height: 200px;">
                        <!-- Decorative Elements -->
                        <div class="position-absolute" style="top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.1);"></div>
                        
                        <!-- Content -->
                        <div class="position-relative text-center w-100">
                            <div class="icon-wrapper bg-white bg-opacity-20 text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-4" 
                                 style="width: 80px; height: 80px; margin: 0 auto;">
                                <i class="fas fa-camera fa-2x"></i>
                            </div>
                            <h3 class="h4 mb-3">Start Renting</h3>
                            <p class="mb-4">Join thousands of creators who trust PRACA for their equipment needs</p>
                            <button class="btn btn-light btn-lg w-100">Get Started</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Initialize tooltips -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
{% endblock %}