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

{% block title %}About Us{% endblock %}

{% block content %}
<!-- Hero Section with Background -->
<div class="jumbotron text-center my-5 hero-section">
    <h1 class="display-4 fw-bold animated fadeInDown">About Us</h1>
    <p class="lead animated fadeIn">Learn more about SPOT, the Smart Parking Organisation Tool</p>
</div>

<!-- About Content -->
<div class="container my-5">
    <div class="row">
        <div class="col-md-4">
            <div class="card glassmorphism-form">
                <div class="card-body text-center">
                    <h5 class="card-title fw-bold">Our Mission</h5>
                    <p class="card-text">To improve parking efficiency and convenience through modern technology.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card glassmorphism-form">
                <div class="card-body text-center">
                    <h5 class="card-title fw-bold">Our Vision</h5>
                    <p class="card-text">To be the leading provider of smart parking solutions worldwide.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card glassmorphism-form">
                <div class="card-body text-center">
                    <h5 class="card-title fw-bold">Our Values</h5>
                    <p class="card-text">Innovation, Customer Satisfaction, and Sustainability.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Features Section -->
<section class="features-section">
    <div class="container text-center">
        <h2 class="section-title">Why Choose SPOT?</h2>
        <p class="section-subtitle">Experience the future of smart parking with our cutting-edge solutions.</p>
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <h4>Smart Parking Finder</h4>
                    <p>Locate available parking spots in real-time with intelligent tracking.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h4>Seamless App Experience</h4>
                    <p>Control parking, make reservations, and receive alerts from your phone.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h4>Secure & Cashless Payments</h4>
                    <p>Make hassle-free transactions with encrypted digital payments.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Custom Styling -->
<style>
    /* Hide scrollbar */
    ::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }

    body {
        overflow-y: auto; /* Allow scrolling but hide scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
        background: linear-gradient(135deg, #c1c3d4, #23177d);
        color: #EAEAEA;
        font-family: 'Poppins', sans-serif;
    }

    /* Hero Section */
    .hero-section {
        background: linear-gradient(to right, rgba(204, 130, 247, 0.8), rgba(0, 82, 204, 0.8)), 
                    url('{% static "images/about_bg.jpg" %}');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 5rem 2rem;
        border-radius: 10px;
    }

    /* Section Titles */
    .section-title {
        font-size: 2rem;
        font-weight: bold;
        color: #FFD700;
    }

    .section-subtitle {
        font-size: 1.2rem;
        color: #EAEAEA;
        margin-bottom: 2rem;
    }

    /* Frosted Glass Effect */
    .glassmorphism-form {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
        transition: 0.3s ease-in-out;
    }

    .glassmorphism-form:hover {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    }

    /* Features Section */
    .features-section {
        padding: 5rem 2rem;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        text-align: center;
        backdrop-filter: blur(10px);
    }

    .feature-card {
        background: rgba(255, 255, 255, 0.1);
        padding: 20px;
        border-radius: 10px;
        color: white;
        text-align: center;
        transition: 0.3s ease-in-out;
    }

    .feature-card:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }

    .feature-icon {
        font-size: 40px;
        margin-bottom: 15px;
        color: #FFD700;
    }

</style>

{% endblock %}