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

{% block title %}{{ project.title }} - Réalisations ECOLUX BTP{% endblock %}

{% block content %}

<!-- Navigation -->
{% include "ecolux_styles.html" %}
<!-- Navigation -->
{% include "nav.html" %}

<!-- Project Header -->
<article class="project-detail">
    <header class="project-header">
        <div class="project-hero">
            {% if project.main_image %}
                <img src="{{ project.main_image.url }}" alt="{{ project.title }}">
            {% else %}
                <img src="{% static 'assets/img/bg2.jpg' %}" alt="{{ project.title }}">
            {% endif %}
            <div class="project-hero-overlay">
                <div class="container">
                    <div class="project-breadcrumb">
                        <a href="{% url 'app:home' %}">Accueil</a>
                        <span>/</span>
                        <a href="{% url 'app:projects_list' %}">Réalisations</a>
                        {% if project.category %}
                        <span>/</span>
                        {% if project.category.get_absolute_url %}
                            <a href="{{ project.category.get_absolute_url }}">{{ project.category.name }}</a>
                        {% else %}
                            <span>{{ project.category.name }}</span>
                        {% endif %}
                        {% endif %}
                        <span>/</span>
                        <span>{{ project.title }}</span>
                    </div>
                    
                    <div class="project-info">
                        <div class="project-badges">
                            <span class="project-status {{ project.status|lower }}">
                                {{ project.get_status_display }}
                            </span>
                            {% if project.category %}
                            <span class="project-category">
                                {{ project.category.name }}
                            </span>
                            {% endif %}
                        </div>
                        
                        <h1 class="project-title">{{ project.title }}</h1>
                        
                        <div class="project-meta">
                            <div class="meta-item">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                    <circle cx="12" cy="10" r="3"></circle>
                                </svg>
                                {{ project.location }}
                            </div>
                            {% if project.completed_date %}
                            <div class="meta-item">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                </svg>
                                {{ project.completed_date|date:"F Y" }}
                            </div>
                            {% endif %}
                            <div class="meta-item">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                                {{ project.views_count }} vue{{ project.views_count|pluralize }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Project Content -->
    <div class="project-content">
        <div class="container">
            <div class="project-layout">
                <!-- Main Content -->
                <main class="project-main">
                    <!-- Project Stats -->
                    <div class="project-stats-grid">
                        {% if project.surface_built %}
                        <div class="stat-card">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                                    <line x1="8" y1="21" x2="16" y2="21"></line>
                                    <line x1="12" y1="17" x2="12" y2="21"></line>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value">{{ project.surface_built }} m²</div>
                                <div class="stat-label">Surface construite</div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if project.surface_land %}
                        <div class="stat-card">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value">{{ project.surface_land }} m²</div>
                                <div class="stat-label">Surface terrain</div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if project.floors_count %}
                        <div class="stat-card">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M3 21V8l9-5 9 5v13H3z"></path>
                                    <path d="M9 21v-6h6v6"></path>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value">{{ project.floors_count }}</div>
                                <div class="stat-label">Niveaux</div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if project.rooms_count %}
                        <div class="stat-card">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value">{{ project.rooms_count }}</div>
                                <div class="stat-label">Pièces</div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if project.duration_months %}
                        <div class="stat-card">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <polyline points="12,6 12,12 16,14"></polyline>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value">{{ project.duration_months }} mois</div>
                                <div class="stat-label">Durée des travaux</div>
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if project.budget_formatted %}
                        <div class="stat-card">
                            <div class="stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="12" y1="1" x2="12" y2="23"></line>
                                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                                </svg>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value">{{ project.budget_formatted }} FCFA</div>
                                <div class="stat-label">Budget</div>
                            </div>
                        </div>
                        {% endif %}
                    </div>

                    <!-- Project Description -->
                    <div class="project-description">
                        <h2>À propos de ce projet</h2>
                        <div class="description-content">
                            {{ project.description|safe }}
                        </div>
                    </div>

                    <!-- Project Gallery -->
                    {% if project_images %}
                    <div class="project-gallery">
                        <h2>Galerie photos</h2>
                        <div class="gallery-grid" id="projectGallery">
                            {% for image in project_images %}
                            {% if image.image %}
                            <div class="gallery-item" onclick="openLightbox({{ forloop.counter0 }})">
                                <img src="{{ image.image.url }}" alt="{{ image.title|default:project.title }}">
                                {% if image.title %}
                                <div class="gallery-caption">{{ image.title }}</div>
                                {% endif %}
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- Project Videos -->
                    {% if project_videos %}
                    <div class="project-videos">
                        <h2>Vidéos du projet</h2>
                        <div class="videos-grid">
                            {% for video in project_videos %}
                            <div class="video-item">
                                {% if video.video_type == 'UPLOAD' and video.video_file %}
                                <video controls poster="{% if video.thumbnail %}{{ video.thumbnail.url }}{% endif %}">
                                    {% if video.video_file %}
                                        <source src="{{ video.video_file.url }}" type="video/mp4">
                                    {% endif %}
                                    Votre navigateur ne supporte pas la lecture vidéo.
                                </video>
                                {% elif video.get_embed_url %}
                                <div class="video-embed">
                                    <iframe src="{{ video.get_embed_url }}" 
                                            frameborder="0" 
                                            allowfullscreen></iframe>
                                </div>
                                {% endif %}
                                {% if video.title %}
                                <div class="video-info">
                                    <h4>{{ video.title }}</h4>
                                    {% if video.description %}
                                    <p>{{ video.description }}</p>
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </main>

                <!-- Sidebar -->
                <aside class="project-sidebar">
                    <!-- Contact CTA -->
                    <div class="sidebar-widget contact-cta">
                        <h3 style="color: #333;">Intéressé par un projet similaire ?</h3>
                        <p style="color: #666;">Contactez-nous pour discuter de votre projet et obtenir un devis personnalisé.</p>
                        <div class="cta-buttons">
                            <a href="/#contact" class="btn-primary">Nous contacter</a>
                            <a href="{% url 'app:simulation' %}" class="btn-outline">Faire une estimation</a>
                        </div>
                    </div>

                    <!-- Project Details -->
                    <div class="sidebar-widget project-details">
                        <h3>Détails du projet</h3>
                        <div class="details-list">
                            {% if project.client_name %}
                            <div class="detail-item">
                                <span class="detail-label">Client</span>
                                <span class="detail-value">{{ project.client_name }}</span>
                            </div>
                            {% endif %}
                            {% if project.start_date %}
                            <div class="detail-item">
                                <span class="detail-label">Date de début</span>
                                <span class="detail-value">{{ project.start_date|date:"F Y" }}</span>
                            </div>
                            {% endif %}
                            {% if project.completed_date %}
                            <div class="detail-item">
                                <span class="detail-label">Date de livraison</span>
                                <span class="detail-value">{{ project.completed_date|date:"F Y" }}</span>
                            </div>
                            {% endif %}
                            <div class="detail-item">
                                <span class="detail-label">Statut</span>
                                <span class="detail-value status-{{ project.status|lower }}">{{ project.get_status_display }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Share -->
                    <div class="sidebar-widget share-widget">
                        <h3>Partager ce projet</h3>
                        <div class="share-buttons">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}" 
                               target="_blank" class="share-btn facebook">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </a>
                            <a href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri }}&text={{ project.title }}" 
                               target="_blank" class="share-btn twitter">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                                </svg>
                            </a>
                            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ request.build_absolute_uri }}" 
                               target="_blank" class="share-btn linkedin">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                                </svg>
                            </a>
                            <a href="https://wa.me/?text={{ project.title }} - {{ request.build_absolute_uri }}" 
                               target="_blank" class="share-btn whatsapp">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</article>

<!-- Related Projects -->
{% if related_projects %}
<section class="related-projects">
    <div class="container">
        <h2>Projets similaires</h2>
        <div class="related-grid">
            {% for related_project in related_projects %}
            <article class="related-card">
                <div class="related-image">
                    {% if related_project.main_image %}
                        <img src="{{ related_project.main_image.url }}" alt="{{ related_project.title }}">
                    {% else %}
                        <img src="{% static 'assets/img/bg2.jpg' %}" alt="{{ related_project.title }}">
                    {% endif %}
                    <div class="related-overlay">
                        <a href="{{ related_project.get_absolute_url }}" class="view-project">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="related-content">
                    <h3><a href="{{ related_project.get_absolute_url }}">{{ related_project.title }}</a></h3>
                    <p class="related-location">{{ related_project.location }}</p>
                    <p class="related-description">{{ related_project.short_description|truncatewords:10 }}</p>
                </div>
            </article>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Lightbox for Gallery -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
    <div class="lightbox-content">
        <span class="close" onclick="closeLightbox()">&times;</span>
        <img id="lightbox-img" src="" alt="">
        <div class="lightbox-nav">
            <button class="prev" onclick="changeImage(-1)">❮</button>
            <button class="next" onclick="changeImage(1)">❯</button>
        </div>
        <div class="lightbox-caption" id="lightbox-caption"></div>
    </div>
</div>

<!-- Footer -->
 {% include "partials/footer.html" %}

<style>
/* Project Detail Styles */
.project-detail {
    margin-top: 80px;
}

.project-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
}

.project-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 3rem 0 2rem;
}

.project-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.project-breadcrumb a {
    color: white;
    text-decoration: none;
}

.project-breadcrumb span {
    opacity: 0.6;
}

.project-badges {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.project-status {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
}

.project-status.completed {
    background: #10B981;
}

.project-status.in_progress {
    background: #F59E0B;
}

.project-status.planning {
    background: #6366F1;
}

.project-status.on_hold {
    background: #EF4444;
}

.project-category {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
}

.project-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.project-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    opacity: 0.9;
}

.project-content {
    padding: 4rem 0;
}

.project-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
}

.project-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: hsl(var(--card));
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: hsl(var(--primary) / 0.1);
    border-radius: 50%;
    color: hsl(var(--primary));
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.stat-label {
    font-size: 0.9rem;
    color: hsl(var(--foreground) / 0.6);
}

.project-description {
    margin-bottom: 3rem;
}

.project-description h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: hsl(var(--foreground));
}

.description-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: hsl(var(--foreground) / 0.8);
}

.project-gallery {
    margin-bottom: 3rem;
}

.project-gallery h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: hsl(var(--foreground));
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 1rem;
    font-size: 0.9rem;
}

.project-videos {
    margin-bottom: 3rem;
}

.project-videos h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: hsl(var(--foreground));
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.video-item {
    background: hsl(var(--card));
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.video-item video,
.video-embed iframe {
    width: 100%;
    height: 250px;
}

.video-info {
    padding: 1.5rem;
}

.video-info h4 {
    margin-bottom: 0.5rem;
    color: hsl(var(--foreground));
}

.video-info p {
    color: hsl(var(--foreground) / 0.8);
    font-size: 0.9rem;
}

/* Sidebar */
.project-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-widget {
    background: hsl(var(--card));
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.sidebar-widget h3 {
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
    font-size: 1.25rem;
}

.contact-cta {
    text-align: center;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    color: white;
}

.contact-cta h3 {
    color: white;
}

.contact-cta p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.details-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid hsl(var(--border));
}

.detail-label {
    font-size: 0.9rem;
    color: hsl(var(--foreground) / 0.6);
}

.detail-value {
    font-weight: 500;
    color: hsl(var(--foreground));
}

.detail-value.status-completed {
    color: #10B981;
}

.detail-value.status-in_progress {
    color: #F59E0B;
}

.detail-value.status-planning {
    color: #6366F1;
}

.detail-value.status-on_hold {
    color: #EF4444;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

.share-btn.facebook {
    background: #1877F2;
}

.share-btn.twitter {
    background: #1DA1F2;
}

.share-btn.linkedin {
    background: #0A66C2;
}

.share-btn.whatsapp {
    background: #25D366;
}

.share-btn:hover {
    transform: translateY(-2px);
}

/* Related Projects */
.related-projects {
    background: hsl(var(--muted));
    padding: 4rem 0;
}

.related-projects h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
    color: hsl(var(--foreground));
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.related-card {
    background: hsl(var(--card));
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.related-card:hover {
    transform: translateY(-5px);
}

.related-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.related-card:hover .related-overlay {
    opacity: 1;
}

.view-project {
    color: white;
    text-decoration: none;
    padding: 1rem;
    border: 2px solid white;
    border-radius: 50%;
    transition: var(--transition);
}

.view-project:hover {
    background: white;
    color: hsl(var(--primary));
}

.related-content {
    padding: 1.5rem;
}

.related-content h3 {
    margin-bottom: 0.5rem;
}

.related-content h3 a {
    text-decoration: none;
    color: hsl(var(--foreground));
    font-size: 1.1rem;
}

.related-content h3 a:hover {
    color: hsl(var(--primary));
}

.related-location {
    font-size: 0.9rem;
    color: hsl(var(--foreground) / 0.6);
    margin-bottom: 0.5rem;
}

.related-description {
    font-size: 0.9rem;
    color: hsl(var(--foreground) / 0.8);
    line-height: 1.5;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    margin: 5% auto;
    text-align: center;
}

.lightbox img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
}

.lightbox-nav button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 1rem;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.lightbox-nav button:hover {
    background: rgba(255, 255, 255, 0.4);
}

.lightbox-caption {
    color: white;
    margin-top: 1rem;
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .project-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .project-title {
        font-size: 2rem;
    }
    
    .project-meta {
        flex-direction: column;
        gap: 1rem;
    }
    
    .project-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .videos-grid {
        grid-template-columns: 1fr;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
    
    .lightbox-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .lightbox-nav {
        padding: 0 1rem;
    }
}
</style>

<script>
let currentImageIndex = 0;
const galleryImages = [
    {% for image in project_images %}
    {% if image.image %}
    {
        src: "{{ image.image.url }}",
        caption: "{{ image.title|default:project.title }}"
    }{% if not forloop.last %},{% endif %}
    {% endif %}
    {% endfor %}
];

function openLightbox(index) {
    currentImageIndex = index;
    const lightbox = document.getElementById('lightbox');
    const img = document.getElementById('lightbox-img');
    const caption = document.getElementById('lightbox-caption');
    
    img.src = galleryImages[index].src;
    caption.textContent = galleryImages[index].caption;
    lightbox.style.display = 'block';
    
    // Prevent body scroll
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    document.getElementById('lightbox').style.display = 'none';
    document.body.style.overflow = 'auto';
}

function changeImage(direction) {
    currentImageIndex += direction;
    
    if (currentImageIndex >= galleryImages.length) {
        currentImageIndex = 0;
    } else if (currentImageIndex < 0) {
        currentImageIndex = galleryImages.length - 1;
    }
    
    const img = document.getElementById('lightbox-img');
    const caption = document.getElementById('lightbox-caption');
    
    img.src = galleryImages[currentImageIndex].src;
    caption.textContent = galleryImages[currentImageIndex].caption;
}

// Keyboard navigation
document.addEventListener('keydown', function(e) {
    const lightbox = document.getElementById('lightbox');
    if (lightbox.style.display === 'block') {
        if (e.key === 'Escape') {
            closeLightbox();
        } else if (e.key === 'ArrowLeft') {
            changeImage(-1);
        } else if (e.key === 'ArrowRight') {
            changeImage(1);
        }
    }
});
</script>
{% endblock %}