{% extends 'layouts/base.html' %}

{% block title %}About Adtlas - Advanced TV Advertising Solutions{% endblock %}

{% block meta_description %}Discover how Adtlas revolutionizes TV advertising through AI-powered content recognition, real-time data analytics, and precision targeting solutions.{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Hero Section -->
    <div class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">About Adtlas</h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">Revolutionizing TV advertising through AI and data analytics.</p>
    </div>

    <!-- Mission Section -->
    <div class="grid md:grid-cols-2 gap-12 mb-16">
        <div>
            <h2 class="text-3xl font-bold text-gray-900 mb-6">Our Mission</h2>
            <p class="text-gray-700 mb-4">Adtlas was founded with the vision of transforming traditional TV advertising through cutting-edge technology. We recognized the gap between linear TV broadcasting and digital advertising capabilities, and set out to bridge this divide with AI-powered solutions.</p>
            <p class="text-gray-700">Our platform combines advanced content recognition, real-time analytics, and precision targeting to help advertisers maximize their reach and revenue while providing broadcasters with powerful monetization tools.</p>
        </div>
        <div class="bg-blue-50 p-8 rounded-lg">
            <h3 class="text-2xl font-semibold text-blue-900 mb-4">Our Technology</h3>
            <ul class="space-y-3 text-gray-700">
                <li class="flex items-start">
                    <svg class="w-5 h-5 text-blue-600 mt-1 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                    <span>AI-powered automatic content recognition</span>
                </li>
                <li class="flex items-start">
                    <svg class="w-5 h-5 text-blue-600 mt-1 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                    <span>Real-time viewership analytics</span>
                </li>
                <li class="flex items-start">
                    <svg class="w-5 h-5 text-blue-600 mt-1 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                    <span>VAST-compatible ad serving</span>
                </li>
                <li class="flex items-start">
                    <svg class="w-5 h-5 text-blue-600 mt-1 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                    <span>Programmatic advertising automation</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- Features Section -->
    <div class="mb-16">
        <h2 class="text-3xl font-bold text-gray-900 text-center mb-12">Core Features</h2>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="text-center p-6 bg-white rounded-lg shadow-md">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Security First</h3>
                <p class="text-gray-600">Built-in security features including CSRF protection, SQL injection prevention, and secure authentication systems.</p>
            </div>
            <div class="text-center p-6 bg-white rounded-lg shadow-md">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">High Performance</h3>
                <p class="text-gray-600">Optimized for speed with efficient database queries, caching strategies, and minimal resource usage.</p>
            </div>
            <div class="text-center p-6 bg-white rounded-lg shadow-md">
                <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Modular Design</h3>
                <p class="text-gray-600">Clean, modular architecture that makes it easy to extend, customize, and maintain your applications.</p>
            </div>
        </div>
    </div>

    <!-- Technology Stack -->
    <div class="bg-gray-50 rounded-lg p-8 mb-16">
        <h2 class="text-3xl font-bold text-gray-900 text-center mb-8">Technology Stack</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="text-center">
                <div class="bg-white p-4 rounded-lg shadow-sm mb-2">
                    <h4 class="font-semibold text-gray-900">Backend</h4>
                </div>
                <ul class="text-sm text-gray-600 space-y-1">
                    <li>Django 5.2+</li>
                    <li>Django REST Framework</li>
                    <li>PostgreSQL/SQLite</li>
                    <li>Redis Caching</li>
                </ul>
            </div>
            <div class="text-center">
                <div class="bg-white p-4 rounded-lg shadow-sm mb-2">
                    <h4 class="font-semibold text-gray-900">Frontend</h4>
                </div>
                <ul class="text-sm text-gray-600 space-y-1">
                    <li>Tailwind CSS</li>
                    <li>Alpine.js</li>
                    <li>Modern JavaScript</li>
                    <li>Responsive Design</li>
                </ul>
            </div>
            <div class="text-center">
                <div class="bg-white p-4 rounded-lg shadow-sm mb-2">
                    <h4 class="font-semibold text-gray-900">DevOps</h4>
                </div>
                <ul class="text-sm text-gray-600 space-y-1">
                    <li>Docker Support</li>
                    <li>CI/CD Ready</li>
                    <li>Environment Management</li>
                    <li>Logging & Monitoring</li>
                </ul>
            </div>
            <div class="text-center">
                <div class="bg-white p-4 rounded-lg shadow-sm mb-2">
                    <h4 class="font-semibold text-gray-900">Testing</h4>
                </div>
                <ul class="text-sm text-gray-600 space-y-1">
                    <li>Unit Testing</li>
                    <li>Integration Testing</li>
                    <li>Code Coverage</li>
                    <li>Quality Assurance</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="text-center bg-blue-600 text-white rounded-lg p-8">
        <h2 class="text-3xl font-bold mb-4">Ready to Get Started?</h2>
        <p class="text-xl mb-6">Join thousands of developers who trust Adtlas for their web applications.</p>
        <div class="space-x-4">
            <a href="{% url 'accounts:register' %}" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-200">Get Started</a>
            <a href="{% url 'core:contact' %}" class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition duration-200">Contact Us</a>
        </div>
    </div>
</div>
{% endblock %}