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

{% block title %}About Us - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .hero-section {
        background: linear-gradient(135deg, var(--primary-color), #3b82f6);
        color: white;
        padding: 4rem 0;
        margin-top: -2rem;
    }
    
    .section-padding {
        padding: 4rem 0;
    }
    
    .team-member {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .team-avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin: 0 auto 1rem;
        background: linear-gradient(135deg, var(--primary-color), #3b82f6);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 3rem;
        font-weight: bold;
        transition: transform 0.3s ease;
    }
    
    .team-avatar:hover {
        transform: scale(1.05);
    }
    
    .timeline {
        position: relative;
        padding: 2rem 0;
    }
    
    .timeline::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--primary-color);
        transform: translateX(-50%);
    }
    
    .timeline-item {
        position: relative;
        margin-bottom: 3rem;
    }
    
    .timeline-content {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        position: relative;
        width: 45%;
    }
    
    .timeline-item:nth-child(odd) .timeline-content {
        margin-left: auto;
    }
    
    .timeline-item:nth-child(even) .timeline-content {
        margin-right: auto;
    }
    
    .timeline-marker {
        position: absolute;
        left: 50%;
        top: 2rem;
        width: 20px;
        height: 20px;
        background: var(--primary-color);
        border-radius: 50%;
        transform: translateX(-50%);
        border: 4px solid white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .value-card {
        text-align: center;
        padding: 2rem;
        height: 100%;
        transition: transform 0.3s ease;
    }
    
    .value-card:hover {
        transform: translateY(-5px);
    }
    
    .value-icon {
        font-size: 3rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
    }
    
    .stats-grid {
        background: var(--light-color);
        padding: 3rem 0;
    }
    
    .stat-item {
        text-align: center;
        padding: 1rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary-color);
        display: block;
    }
    
    .stat-label {
        color: var(--secondary-color);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    @media (max-width: 768px) {
        .timeline::before {
            left: 2rem;
        }
        
        .timeline-content {
            width: calc(100% - 4rem);
            margin-left: 4rem !important;
            margin-right: 0 !important;
        }
        
        .timeline-marker {
            left: 2rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold mb-3">About Adtlas</h1>
                <p class="lead">Revolutionizing TV advertising with advanced content recognition, programmatic solutions, and real-time analytics since 2020.</p>
            </div>
        </div>
    </div>
</section>

<!-- Mission Section -->
<section class="section-padding">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2 class="display-5 fw-bold mb-4">Our Mission</h2>
                <p class="lead mb-4">To transform TV advertising through cutting-edge technology, making programmatic TV accessible and effective for broadcasters and advertisers worldwide.</p>
                <p class="text-muted">We believe that TV advertising should be as precise and measurable as digital advertising. Our platform bridges the gap between traditional broadcast and modern programmatic advertising, delivering real-time insights and automated content recognition.</p>
            </div>
            <div class="col-lg-6">
                <div class="text-center">
                    <i class="fas fa-bullseye" style="font-size: 8rem; color: var(--primary-color); opacity: 0.1;"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Values Section -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="display-5 fw-bold mb-3">Our Values</h2>
                <p class="lead text-muted">The principles that guide everything we do.</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card value-card border-0 h-100">
                    <div class="card-body">
                        <div class="value-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <h4 class="card-title">Innovation</h4>
                        <p class="card-text text-muted">We continuously push the boundaries of TV advertising technology with cutting-edge content recognition and programmatic solutions.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card value-card border-0 h-100">
                    <div class="card-body">
                        <div class="value-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h4 class="card-title">Precision</h4>
                        <p class="card-text text-muted">We deliver precise audience targeting and real-time analytics to maximize your advertising ROI.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card value-card border-0 h-100">
                    <div class="card-body">
                        <div class="value-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h4 class="card-title">Partnership</h4>
                        <p class="card-text text-muted">We build strong partnerships with broadcasters, advertisers, and agencies to transform the TV advertising ecosystem.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card value-card border-0 h-100">
                    <div class="card-body">
                        <div class="value-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h4 class="card-title">Reliability</h4>
                        <p class="card-text text-muted">We provide reliable, 24/7 monitoring and reporting to ensure your campaigns run smoothly.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card value-card border-0 h-100">
                    <div class="card-body">
                        <div class="value-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h4 class="card-title">Transparency</h4>
                        <p class="card-text text-muted">We provide complete transparency in reporting, pricing, and campaign performance metrics.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card value-card border-0 h-100">
                    <div class="card-body">
                        <div class="value-icon">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h4 class="card-title">Growth</h4>
                        <p class="card-text text-muted">We're committed to continuous learning and helping our clients achieve their goals.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Timeline Section -->
<section class="section-padding">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="display-5 fw-bold mb-3">Our Journey</h2>
                <p class="lead text-muted">Key milestones in our company's evolution.</p>
            </div>
        </div>
        
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h4 class="fw-bold text-primary">2020 - Foundation</h4>
                    <p class="text-muted mb-0">Adtlas DAI was founded with a vision to make advanced data analytics accessible to everyone. Started with a small team of passionate data scientists and engineers.</p>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h4 class="fw-bold text-primary">2021 - First Product Launch</h4>
                    <p class="text-muted mb-0">Launched our first data analytics platform with basic AI capabilities. Gained our first 100 customers and processed over 1 million data points.</p>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h4 class="fw-bold text-primary">2022 - AI Integration</h4>
                    <p class="text-muted mb-0">Integrated advanced machine learning algorithms and launched our AI-powered insights feature. Expanded to serve enterprise clients.</p>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h4 class="fw-bold text-primary">2023 - Global Expansion</h4>
                    <p class="text-muted mb-0">Expanded internationally and reached 10,000+ active users. Introduced real-time collaboration features and mobile applications.</p>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h4 class="fw-bold text-primary">2024 - Innovation Continues</h4>
                    <p class="text-muted mb-0">Launched next-generation AI models and enhanced security features. Continuing to innovate and serve our growing community.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="stats-grid">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="stat-item">
                    <span class="stat-number">10K+</span>
                    <span class="stat-label">Active Users</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-item">
                    <span class="stat-number">50+</span>
                    <span class="stat-label">Countries</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-item">
                    <span class="stat-number">1B+</span>
                    <span class="stat-label">Data Points</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-item">
                    <span class="stat-number">99.9%</span>
                    <span class="stat-label">Uptime</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section class="section-padding">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="display-5 fw-bold mb-3">Meet Our Team</h2>
                <p class="lead text-muted">The talented individuals behind Adtlas DAI.</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-4">
                <div class="team-member">
                    <div class="team-avatar">AS</div>
                    <h4 class="fw-bold">Alex Smith</h4>
                    <p class="text-primary mb-2">CEO & Founder</p>
                    <p class="text-muted">Visionary leader with 15+ years in data science and AI. Previously led data teams at Fortune 500 companies.</p>
                    <div class="social-links">
                        <a href="#" class="text-muted me-2"><i class="fab fa-linkedin"></i></a>
                        <a href="#" class="text-muted me-2"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="team-member">
                    <div class="team-avatar">MJ</div>
                    <h4 class="fw-bold">Maria Johnson</h4>
                    <p class="text-primary mb-2">CTO</p>
                    <p class="text-muted">Technical expert specializing in scalable AI systems and cloud architecture. PhD in Computer Science from MIT.</p>
                    <div class="social-links">
                        <a href="#" class="text-muted me-2"><i class="fab fa-linkedin"></i></a>
                        <a href="#" class="text-muted me-2"><i class="fab fa-github"></i></a>
                        <a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="team-member">
                    <div class="team-avatar">RB</div>
                    <h4 class="fw-bold">Robert Brown</h4>
                    <p class="text-primary mb-2">Head of Product</p>
                    <p class="text-muted">Product strategist focused on user experience and innovation. Former product manager at leading tech companies.</p>
                    <div class="social-links">
                        <a href="#" class="text-muted me-2"><i class="fab fa-linkedin"></i></a>
                        <a href="#" class="text-muted me-2"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section-padding bg-primary text-white">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h2 class="display-5 fw-bold mb-3">Join Our Mission</h2>
                <p class="lead mb-4">Ready to transform your data into actionable insights? Let's work together to unlock the power of your data.</p>
                <div>
                    {% if not user.is_authenticated %}
                        <a href="{% url 'auth:register' %}" class="btn btn-light btn-lg me-3">
                            <i class="fas fa-rocket me-2"></i>Get Started
                        </a>
                    {% else %}
                        <a href="{% url 'core:dashboard' %}" class="btn btn-light btn-lg me-3">
                            <i class="fas fa-tachometer-alt me-2"></i>Go to Dashboard
                        </a>
                    {% endif %}
                    <a href="{% url 'core:contact' %}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-envelope me-2"></i>Contact Us
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    // Animate timeline items on scroll
    function animateTimeline() {
        const timelineItems = document.querySelectorAll('.timeline-item');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, { threshold: 0.1 });
        
        timelineItems.forEach(item => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(30px)';
            item.style.transition = 'all 0.6s ease';
            observer.observe(item);
        });
    }
    
    // Animate stats
    function animateStats() {
        const stats = document.querySelectorAll('.stat-number');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const target = entry.target;
                    const finalValue = target.textContent;
                    const isNumber = !isNaN(parseInt(finalValue));
                    
                    if (isNumber) {
                        const numericValue = parseInt(finalValue.replace(/[^0-9]/g, ''));
                        animateNumber(target, 0, numericValue, finalValue);
                    }
                    
                    observer.unobserve(target);
                }
            });
        });
        
        stats.forEach(stat => observer.observe(stat));
    }
    
    function animateNumber(element, start, end, originalText) {
        const duration = 2000;
        const startTime = performance.now();
        
        function update(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            const current = Math.floor(start + (end - start) * progress);
            
            if (originalText.includes('K')) {
                element.textContent = (current / 1000).toFixed(0) + 'K+';
            } else if (originalText.includes('B')) {
                element.textContent = (current / 1000000000).toFixed(1) + 'B+';
            } else if (originalText.includes('%')) {
                element.textContent = (current / 10).toFixed(1) + '%';
            } else {
                element.textContent = current + '+';
            }
            
            if (progress < 1) {
                requestAnimationFrame(update);
            } else {
                element.textContent = originalText;
            }
        }
        
        requestAnimationFrame(update);
    }
    
    // Initialize animations
    document.addEventListener('DOMContentLoaded', function() {
        animateTimeline();
        animateStats();
        
        // Add hover effects to team avatars
        const avatars = document.querySelectorAll('.team-avatar');
        avatars.forEach(avatar => {
            avatar.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.1) rotate(5deg)';
            });
            
            avatar.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1) rotate(0deg)';
            });
        });
    });
</script>
{% endblock %}