{% extends 'client/base.html' %}
{% load static %}
{% load thumbnail %}
{% block title %}AquaGuardian{% endblock %}
{% block content %}

<div class="container-fluid p-0">
    <!-- Hero Section -->
    <section class="hero d-flex flex-column justify-content-center align-items-center text-center"
        style="height: 100vh;">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="{% static 'images/carousel1.jpg' %}" alt="First slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Save Every Drop</h5>
                        <p>Small changes in daily habits can make a huge difference. Start saving water today.</p>
                    </div>

                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="{% static 'images/carousel2.jpg' %}" alt="Second slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Fix the Leaks</h5>
                        <p>A dripping tap wastes more water than you think. Fix leaks to save precious resources.</p>
                    </div>

                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="{% static 'images/carousel3.jpg' %}" alt="Third slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Conserve Water, Conserve Life</h5>
                        <p>Water is essential for life. Protect our planet by using water wisely and sustainably.</p>
                    </div>

                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div
            class="hero-text-overlay position-absolute w-100 h-100 d-flex flex-column justify-content-center align-items-center">
            <h1 class="display-3 mb-4">Save Water, Secure the Future</h1>
            <p class="lead mb-4">Join us in making a difference by conserving water and protecting our planet.</p>
            <a href="{% url 'survey:survey_form' %}" class="btn btn-primary btn-lg">Take the Survey Now</a>
        </div>
    </section>



    <!-- Statistics Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">Why It Matters</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <h3 class="display-6 text-primary mb-3">20L</h3>
                            <p class="text-muted mb-0">Water wasted daily by a single dripping tap</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <h3 class="display-6 text-primary mb-3">2.2B</h3>
                            <p class="text-muted mb-0">People lack access to safe drinking water</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <h3 class="display-6 text-primary mb-3">2025</h3>
                            <p class="text-muted mb-0">Year when half the world faces water stress</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tips Section -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Water Saving Tips</h2>
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="text-primary mb-3">
                                <i class="bi bi-tools fs-2"></i>
                            </div>
                            <h3 class="h4">Fix Leaks</h3>
                            <p class="text-muted">Regularly check and fix leaks in faucets, pipes, and toilets to
                                prevent water waste.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="text-primary mb-3">
                                <i class="bi bi-clock fs-2"></i>
                            </div>
                            <h3 class="h4">Time Your Showers</h3>
                            <p class="text-muted">Keep showers under 5 minutes to save up to 1,000 gallons monthly.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="text-primary mb-3">
                                <i class="bi bi-gear fs-2"></i>
                            </div>
                            <h3 class="h4">Upgrade Appliances</h3>
                            <p class="text-muted">Install water-efficient fixtures and appliances to reduce consumption.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Progress Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">Your Impact</h2>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="text-center mb-4">Monthly Water Savings</h3>
                            <div class="progress" style="height: 25px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                    style="width: 65%">
                                    65% of Target
                                </div>
                            </div>
                            <p class="text-center text-muted mt-3">You've saved 1,300 liters this month!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Leaderboard Section -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Top Water Savers</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <i class="bi bi-trophy-fill text-warning fs-1"></i>
                            </div>
                            <h3 class="h4">John Doe</h3>
                            <p class="text-muted mb-0">Saved 2,000 liters</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <i class="bi bi-trophy text-secondary fs-1"></i>
                            </div>
                            <h3 class="h4">Jane Smith</h3>
                            <p class="text-muted mb-0">Saved 1,500 liters</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <i class="bi bi-trophy text-danger fs-1"></i>
                            </div>
                            <h3 class="h4">Emily Johnson</h3>
                            <p class="text-muted mb-0">Saved 1,200 liters</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock %}

{% block modal %}
{% include 'account/modal/loginModal.html' %}
{% include 'account/modal/registerModal.html' %}
{% endblock %}