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

{% block content %}
<meta charset="UTF-8">

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
      AOS.init();
  });
</script>


<!-- Embedded CSS for Enhanced Homepage V7 (Clean Rectangle) -->
<style>
/*
==============================================
   SAIDALYA 2025 - Enhanced Homepage Styles
==============================================
*/

/* --- 1. Root Variables & Global Styles --- */
:root {
    --primary-color: #0A1B3F; /* Deep Navy Blue */
    --secondary-color: #1A3A6B; /* Rich Blue */
    --accent-gold: #6D4A7D; /* Vibrant Gold/Yellow */
    --accent-blue: #1A3A6B; /* Bright Blue */
    --light-bg: #F8F9FA; /* Off-White/Light Gray */
    --white: #FFFFFF;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --gradient-primary: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
    --gradient-accent: linear-gradient(145deg, var(--accent-gold), #ad2f79);
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--primary-color);
}

/* --- 2. Reusable Components & Utilities --- */
.section-padding {
    padding: 80px 0;
}

.section-header {
    margin-bottom: 60px;
    text-align: center;
}

.section-header .section-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.section-header .section-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
}

.section-header .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
    margin: 15px auto 0;
}

.btn-gold {
    background: var(--gradient-accent);
    color: var(--white);
    border: none;
    padding: 14px 35px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(233, 180, 76, 0.4);
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(233, 180, 76, 0.5);
    color: var(--white);
}

.btn-outline-light {
    border: 2px solid var(--white);
    color: var(--white);
    border-radius: 50px;
    padding: 12px 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: var(--white);
    color: var(--primary-color);
}

.card-feature {
    background: var(--white);
    border-radius: 15px;
    padding: 2.5rem;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
}

.card-feature:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card-feature .feature-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.8rem;
    margin: 0 auto 1.5rem;
}

/* --- 3. Section Specific Styling --- */

/* Hero Section */
.hero-section {
    position: relative;
    height: 75vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    overflow: hidden;
}

.hero-video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

#hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(186, 203, 240, 0.75);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 1rem;
}

.hero-content .highlight {
    color: var(--accent-gold);
}

.hero-content p.lead {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.countdown-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 1rem;
    min-width: 90px;
    backdrop-filter: blur(5px);
}

.countdown-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
}

.countdown-label {
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* About & Stats Section */
#about {
    background-color: var(--light-bg);
}

/* Rectangle card design (border removed) */
.about-text-card {
    background: var(--white);
    border-radius: 15px;
    padding: 3rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.07);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent-blue);
}
.stats-label {
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 500;
}

/* Venue Section */
.venue-section {
    background: var(--gradient-primary);
}
.venue-section h2, .venue-section p, .venue-section h4 {
    color: var(--white);
}
.venue-section img {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* News Section */
#news .news-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    height: 100%;
}
#news .news-card:hover {
    transform: translateY(-5px);
}
#news .news-card img {
    height: 200px;
    object-fit: cover;
}
#news .news-card .card-body {
    padding: 1.5rem;
}
#news .news-card .card-title {
    font-size: 1.2rem;
    font-weight: 600;
}
#news .news-card .card-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Moment SAIDALYA Section */
#moments {
    background: var(--light-bg);
}
.moment-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    aspect-ratio: 4 / 3; /* Using aspect ratio for responsive sizing */
}
.moment-card:hover {
    transform: scale(1.05);
}
.moment-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.moment-card:hover img {
    transform: scale(1.1);
}
.moment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
}

/* CTA Section */
.cta-section {
    background: var(--gradient-primary);
    color: var(--white);
}
.cta-section h2 {
    color: var(--white);
    font-size: 2.5rem;
}

/* --- 4. Responsive Design --- */
@media (max-width: 991px) {
    .hero-content h1 { font-size: 3.5rem; }
    .hero-content p.lead { font-size: 1.1rem; }
    .section-header .section-title { font-size: 2.2rem; }
    .about-text-card { padding: 2.5rem; margin-bottom: 2.5rem; }
}

@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }
    .countdown { gap: 0.5rem; flex-wrap: wrap;}
    .countdown-item { min-width: 70px; padding: 0.5rem; }
    .countdown-number { font-size: 1.8rem; }
    .stats-item { margin-bottom: 2rem; }
    .section-padding { padding: 60px 0; }
    .moment-card { aspect-ratio: 3 / 2; } /* Adjust aspect ratio for smaller screens if needed */
    .about-text-card { padding: 2rem; }
}

.hero-content .highlight {
    color: #ad2f79; /* This was changed from var(--accent-gold) */
}
</style>

<!-- Hero Section -->
<section class="hero-section" id="home">
    <div class="hero-video-wrapper">
        <video playsinline autoplay muted loop id="hero-video">
            <source src="{% static 'videos/saidalyavideo.mp4' %}" type="video/mp4">
            Votre navigateur ne supporte pas les vidéos HTML5.
        </video>
    </div>
    <div class="hero-content" data-aos="fade-up">
        <div class="container">
            <h1 class="text-uppercase" style="color: #1A3A6B;">SAIDALYA <span class="highlight">2025</span></h1>
            <p class="lead fw-light">
                La 9ᵉ Édition du Salon International de la Pharmacie, de la Parapharmacie et du Bien-être.<br>Le rendez-vous incontournable des professionnels de la santé.
            </p>
            <h4 class="fw-normal mb-4">13, 14 & 15 novembre 2025 | Hôtel Marriott, Constantine</h4>

            <div class="countdown" data-aos="fade-up" data-aos-delay="200">
                <div class="countdown-item"><div class="countdown-number" id="days">0</div><div class="countdown-label">Jours</div></div>
                <div class="countdown-item"><div class="countdown-number" id="hours">0</div><div class="countdown-label">Heures</div></div>
                <div class="countdown-item"><div class="countdown-number" id="minutes">0</div><div class="countdown-label">Minutes</div></div>
                <div class="countdown-item"><div class="countdown-number" id="seconds">0</div><div class="countdown-label">Secondes</div></div>
            </div>

            <div data-aos="fade-up" data-aos-delay="400">
                <a href="{% url 'visitor_registration' %}" class="btn btn-gold btn-lg mx-2 my-2">
                    <i class="fas fa-user-plus me-2"></i>Inscription Visiteur
                </a>
                <a href="{% url 'why_exhibit' %}" class="btn btn-outline-light btn-lg mx-2 my-2" style="background-color: #1A3A6B;">
                    <i class="fas fa-store me-2" ></i>Inscription Exposant
                </a>
            </div>
        </div>
    </div>
</section>

<!-- About & Stats Section -->
<section class="section-padding" id="about">
    <div class="container">
        <div class="row align-items-center g-5">
            <!-- Column width 8 for a rectangle shape -->
            <div class="col-lg-8" data-aos="fade-right">
                <div class="about-text-card">
                    <h2 class="section-title text-start mb-4" style="font-size: 2.5rem;"><span style="color: #1A3A6B;">SAIDALYA <span style="color: #ad2f79;">2025,</span> </span> <br>le carrefour de la Pharmacie,<br>de la Parapharmacie et du Bien-être.</h2>
                    <p>La 9ᵉ édition de SAIDALYA, Salon International de la Pharmacie, de la Parapharmacie et du Bien-être, se tiendra les 13, 14 et 15 novembre 2025 à l’hôtel Marriott de Constantine.</p>
                    <p>Dans un cadre prestigieux et propice aux affaires, SAIDALYA offre une expérience unique qui conjugue rencontres professionnelles, partage d’expertises et opportunités de partenariats stratégiques.</p>
                    <p>Événement de référence à portée internationale, le salon réunit chaque année les acteurs majeurs de la chaîne de valeur santé : industriels, distributeurs, pharmaciens d’officine et hospitaliers, professionnels de santé, prestataires de services, institutions publiques et privées, startups innovantes ainsi que les investisseurs et acteurs du financement.</p>
                    <p>Plus qu’un simple salon, SAIDALYA s’impose comme la plateforme internationale qui accompagne la dynamique de croissance du marché Pharmaceutique, Parapharmaceutique et Bien-être, en favorisant la mise en relation, l’innovation et le développement économique.</p>
                </div>
            </div>

            <!-- Column width 4 -->
            <div class="col-lg-4" data-aos="fade-left">
                <div class="row text-center">
                    <div class="col-6 mb-4">
                        <h3 class="stats-number" data-target="6000">0+</h3>
                        <p class="stats-label">Visiteurs attendus</p>
                    </div>
                    <div class="col-6 mb-4">
                        <h3 class="stats-number" data-target="100">0+</h3>
                        <p class="stats-label">Exposants</p>
                    </div>
                    <div class="col-6 mb-4 mb-md-0">
                        <h3 class="stats-number" data-target="25">0+</h3>
                        <p class="stats-label">Communications</p>
                    </div>
                    <div class="col-6">
                        <h3 class="stats-number" data-target="200">0+</h3>
                        <p class="stats-label">Rencontres B2B</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Program Section -->
<section class="section-padding" id="program" style="background-color: var(--white);">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Un Programme Riche et Dynamique</h2>
            <p class="section-subtitle">Conférences, ateliers et événements de networking conçus pour inspirer et connecter les professionnels de la Pharmacie, de la Parapharmacie et du Bien-être.</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100"><div class="card-feature"><div class="feature-icon"><i class="fas fa-handshake"></i></div><h4>Jour 1 : </h4><p class="text-muted">Sera publié prochainement</p></div></div>
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100"><div class="card-feature"><div class="feature-icon"><i class="fas fa-handshake"></i></div><h4>Jour 2 : </h4><p class="text-muted">Sera publié prochainement</p></div></div>
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200"><div class="card-feature"><div class="feature-icon"><i class="fas fa-trophy"></i></div><h4>Jour 3 : </h4><p class="text-muted">Sera publié prochainement</p></div></div>
        </div>
    </div>
</section>

<!-- Venue Section -->
<section class="section-padding venue-section" id="venue">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6" data-aos="fade-right">
                <img src="{% static 'images/Marriott.jpeg' %}" alt="Hôtel Marriott Constantine" class="img-fluid">
            </div>
            <div class="col-lg-6" data-aos="fade-left">
                <h4 class="text-uppercase" style="color: var(--accent-gold);">UN CADRE D'EXCEPTION</h4>
                <h2 class="section-title text-start mb-3" style="font-size: 2.5rem;">Hôtel Marriott - Constantine</h2>
                <p>SAIDALYA vous accueille au sein du prestigieux hôtel Marriott de Constantine, symbole d’excellence et de raffinement, offrant un cadre idéal pour des rencontres professionnelles de haut niveau, des échanges fructueux et la création d’opportunités d’affaires uniques.</p>
                <a href="https://www.google.com/maps/dir/?api=1&destination=Constantine+Marriott+Hotel,+Constantine,+Algeria" target="_blank" class="btn btn-outline-light mt-3">
                <i class="fas fa-map-marker-alt me-2"></i>Voir sur la carte
                </a>
            </div>
        </div>
    </div>
</section>

<!-- News Section -->
<section class="section-padding" id="news" style="background-color: var(--light-bg);">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Dernières Actualités</h2>
            <p class="section-subtitle">Restez informé des dernières nouvelles du salon et des tendances du secteur.</p>
        </div>
        <div class="row g-4">
            <!-- News Item 1 -->
            <div class="col-lg-4" data-aos="zoom-in">
                <div class="card news-card">
                    <img src="{% static 'images/debat.jpeg' %}" class="card-img-top" alt="News 1">
                    <div class="card-body">
                        <h5 class="card-title">SAIDALYA 2025 : L'innovation au cœur des débats</h5>
                        <p class="card-text text-muted">SAIDALYA 2025 met à l’honneur l’innovation avec un espace dédié aux startups e-santé et aux solutions basées sur l’IA. Suivi intelligent, gestion des données et recherche par l'IA : Des technologies qui ouvrent de nouvelles perspectives de développement pour l’ensemble du secteur.</p>
                    </div>
                </div>
            </div>
            <!-- News Item 2 -->
            <div class="col-lg-4" data-aos="zoom-in" data-aos-delay="100">
                <div class="card news-card">
                    <img src="{% static 'images/hero-bg.jpg' %}" class="card-img-top" alt="News 2">
                    <div class="card-body">
                        <h5 class="card-title">Ouverture des inscriptions pour les exposants</h5>
                        <p class="card-text text-muted">Les espaces d’exposition sont désormais ouverts à la réservation, offrant aux exposants l’opportunité de présenter leurs produits, services et innovations au cœur de SAIDALYA 2025, dans un environnement privilégié propice aux rencontres et aux affaires.</p>
                        <a href="{% url 'why_exhibit' %}" class="btn btn-link px-0">Réserver un stand <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>
            <!-- News Item 3 -->
            <div class="col-lg-4" data-aos="zoom-in" data-aos-delay="200">
                <div class="card news-card">
                    <img src="{% static 'images/Africa-01.jpg' %}" class="card-img-top" alt="News 3">
                    <div class="card-body">
                        <h5 class="card-title">Focus sur SAIDALYA Export: Le pont vers un continent</h5>
                        <p class="card-text text-muted">Une journée spéciale sera dédiée à l’export au sein de SAIDALYA, offrant aux entreprises une occasion privilégiée de découvrir de nouvelles opportunités internationales, de renforcer leurs partenariats et d’explorer des perspectives de développement vers de nouveaux marchés. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Moment SAIDALYA Section -->
<section class="section-padding" id="moments" style="background-color: var(--light-bg);">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Éditions Passées</h2>
        </div>
    </div>
    <div class="container-fluid px-lg-5"> <!-- Wider container for the gallery -->
        <div class="row g-4">
            <!-- First Row -->
            <div class="col-lg-3 col-md-6" data-aos="zoom-in">
                <div class="moment-card">
                    <img src="{% static 'images/day1-event.jpg' %}" alt="Moment 1" class="img-fluid">
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="100">
                <div class="moment-card">
                    <img src="{% static 'images/day2-event.jpg' %}" alt="Moment 2" class="img-fluid">
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="200">
                <div class="moment-card">
                    <img src="{% static 'images/day3-event.jpg' %}" alt="Moment 3" class="img-fluid">
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="300">
                <div class="moment-card">
                    <img src="{% static 'images/saidalya.jpeg' %}" alt="Moment 4" class="img-fluid">
                </div>
            </div>
        </div>
        
        <div class="text-center mt-5">
            <a href="{% url 'past_editions_gallery' %}" class="btn btn-gold">Voir plus</a>
        </div>
    </div>
</section>

<!-- Final CTA Section -->
<!-- Final CTA Section -->
<section class="section-padding cta-section text-center" id="cta">
    <div class="container" data-aos="fade-up">
        <h2 class="fw-bold mb-3">Rejoignez l'Événement Phare de la Santé en Algérie</h2>
        <p class="lead mb-5">Ne manquez pas cette opportunité unique de développer votre activité et de façonner l'avenir de la santé.</p>
        <a href="{% url 'visitor_registration' %}" class="btn btn-gold btn-lg">
            <i class="fas fa-user-plus me-2"></i>Inscrivez-vous maintenant
        </a>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize AOS (Animate on Scroll)
    AOS.init({
        duration: 800,
        once: true,
        easing: 'ease-in-out-cubic'
    });

    // Countdown Timer
    const countDownDate = new Date("Nov 13, 2025 09:00:00").getTime();
    const countdownFunction = setInterval(function() {
        const now = new Date().getTime();
        const distance = countDownDate - now;

        if (distance < 0) {
            clearInterval(countdownFunction);
            document.querySelector(".countdown").innerHTML = "<h4 class='w-100'>L'événement est en cours !</h4>";
            return;
        }

        const days = String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, '0');
        const hours = String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
        const minutes = String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
        const seconds = String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0');

        document.getElementById("days").innerText = days;
        document.getElementById("hours").innerText = hours;
        document.getElementById("minutes").innerText = minutes;
        document.getElementById("seconds").innerText = seconds;

    }, 1000);

    // Animated Stats Counter
    function animateCounters() {
        const counters = document.querySelectorAll('.stats-number');
        const animationDuration = 2000;

        counters.forEach(counter => {
            const target = +counter.getAttribute('data-target');
            const hasPlusSign = counter.innerText.includes('+');
            let startTime = null;

            const step = (timestamp) => {
                if (!startTime) startTime = timestamp;
                const progress = Math.min((timestamp - startTime) / animationDuration, 1);
                const currentNumber = Math.floor(progress * target);

                counter.innerText = currentNumber + (hasPlusSign ? '+' : '');

                if (progress < 1) {
                    requestAnimationFrame(step);
                } else {
                    counter.innerText = target + (hasPlusSign ? '+' : '');
                }
            };
            requestAnimationFrame(step);
        });
    }

    // Intersection Observer to trigger counter animation
    const statsSection = document.querySelector('#about');
    let hasAnimated = false;
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting && !hasAnimated) {
                hasAnimated = true;
                animateCounters();
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.3 });

    if (statsSection) {
        observer.observe(statsSection);
    }
});
</script>

{% endblock %}