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

{% block title %}Privacy Policy - Adtlas{% endblock %}

{% block meta_description %}Adtlas Privacy Policy - Learn how we collect, use, and protect your personal information. Your privacy and data security are our top priorities.{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- Header -->
    <div class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Privacy Policy</h1>
        <p class="text-xl text-gray-600">Your privacy and data security are our top priorities</p>
        <p class="text-sm text-gray-500 mt-4">Last updated: {{ "now"|date:"F d, Y" }}</p>
    </div>

    <!-- Introduction -->
    <div class="bg-blue-50 rounded-lg p-8 mb-8">
        <h2 class="text-2xl font-bold text-blue-900 mb-4">Introduction</h2>
        <p class="text-gray-700 leading-relaxed">
            At Adtlas, we are committed to protecting your privacy and ensuring the security of your personal information. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our platform, website, and services. By using Adtlas, you consent to the practices described in this Privacy Policy.
        </p>
    </div>

    <!-- Table of Contents -->
    <div class="bg-gray-50 rounded-lg p-6 mb-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Table of Contents</h2>
        <ul class="space-y-2 text-blue-600">
            <li><a href="#information-collection" class="hover:underline">1. Information We Collect</a></li>
            <li><a href="#information-use" class="hover:underline">2. How We Use Your Information</a></li>
            <li><a href="#information-sharing" class="hover:underline">3. Information Sharing and Disclosure</a></li>
            <li><a href="#data-security" class="hover:underline">4. Data Security</a></li>
            <li><a href="#data-retention" class="hover:underline">5. Data Retention</a></li>
            <li><a href="#your-rights" class="hover:underline">6. Your Rights and Choices</a></li>
            <li><a href="#cookies" class="hover:underline">7. Cookies and Tracking Technologies</a></li>
            <li><a href="#third-party" class="hover:underline">8. Third-Party Services</a></li>
            <li><a href="#international" class="hover:underline">9. International Data Transfers</a></li>
            <li><a href="#children" class="hover:underline">10. Children's Privacy</a></li>
            <li><a href="#changes" class="hover:underline">11. Changes to This Policy</a></li>
            <li><a href="#contact" class="hover:underline">12. Contact Us</a></li>
        </ul>
    </div>

    <!-- Content Sections -->
    <div class="space-y-8">
        <!-- Information Collection -->
        <section id="information-collection" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">1. Information We Collect</h2>
            
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-3">Personal Information</h3>
                    <p class="text-gray-700 mb-3">We may collect the following personal information:</p>
                    <ul class="list-disc list-inside text-gray-700 space-y-1 ml-4">
                        <li>Name, email address, and contact information</li>
                        <li>Account credentials and authentication information</li>
                        <li>Profile information and preferences</li>
                        <li>Payment and billing information</li>
                        <li>Communication history and support interactions</li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-3">Usage Information</h3>
                    <p class="text-gray-700 mb-3">We automatically collect information about how you use our services:</p>
                    <ul class="list-disc list-inside text-gray-700 space-y-1 ml-4">
                        <li>Device information (IP address, browser type, operating system)</li>
                        <li>Usage patterns and feature interactions</li>
                        <li>Log files and analytics data</li>
                        <li>Performance and error information</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Information Use -->
        <section id="information-use" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">2. How We Use Your Information</h2>
            
            <p class="text-gray-700 mb-4">We use your information for the following purposes:</p>
            <div class="grid md:grid-cols-2 gap-6">
                <div class="space-y-3">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-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 class="text-gray-700">Provide and maintain our services</span>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-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 class="text-gray-700">Process transactions and payments</span>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-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 class="text-gray-700">Provide customer support</span>
                    </div>
                </div>
                <div class="space-y-3">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-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 class="text-gray-700">Improve our services and features</span>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-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 class="text-gray-700">Send important notifications</span>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-green-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 class="text-gray-700">Comply with legal obligations</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Data Security -->
        <section id="data-security" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">4. Data Security</h2>
            
            <p class="text-gray-700 mb-6">We implement industry-standard security measures to protect your information:</p>
            
            <div class="grid md:grid-cols-3 gap-6">
                <div class="text-center p-4 bg-blue-50 rounded-lg">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                    </div>
                    <h3 class="font-semibold text-gray-900 mb-2">Encryption</h3>
                    <p class="text-sm text-gray-600">Data encrypted in transit and at rest using industry-standard protocols</p>
                </div>
                <div class="text-center p-4 bg-green-50 rounded-lg">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <svg class="w-6 h-6 text-green-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="font-semibold text-gray-900 mb-2">Access Control</h3>
                    <p class="text-sm text-gray-600">Strict access controls and authentication mechanisms</p>
                </div>
                <div class="text-center p-4 bg-purple-50 rounded-lg">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <svg class="w-6 h-6 text-purple-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="font-semibold text-gray-900 mb-2">Monitoring</h3>
                    <p class="text-sm text-gray-600">Continuous monitoring and threat detection systems</p>
                </div>
            </div>
        </section>

        <!-- Your Rights -->
        <section id="your-rights" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">6. Your Rights and Choices</h2>
            
            <p class="text-gray-700 mb-6">You have the following rights regarding your personal information:</p>
            
            <div class="space-y-4">
                <div class="border-l-4 border-blue-500 pl-4">
                    <h3 class="font-semibold text-gray-900 mb-2">Access and Portability</h3>
                    <p class="text-gray-700 text-sm">Request access to your personal data and receive a copy in a portable format.</p>
                </div>
                <div class="border-l-4 border-green-500 pl-4">
                    <h3 class="font-semibold text-gray-900 mb-2">Correction and Updates</h3>
                    <p class="text-gray-700 text-sm">Update or correct inaccurate personal information in your account.</p>
                </div>
                <div class="border-l-4 border-yellow-500 pl-4">
                    <h3 class="font-semibold text-gray-900 mb-2">Deletion</h3>
                    <p class="text-gray-700 text-sm">Request deletion of your personal data, subject to legal and contractual obligations.</p>
                </div>
                <div class="border-l-4 border-red-500 pl-4">
                    <h3 class="font-semibold text-gray-900 mb-2">Opt-out</h3>
                    <p class="text-gray-700 text-sm">Opt-out of marketing communications and certain data processing activities.</p>
                </div>
            </div>
        </section>

        <!-- Contact Information -->
        <section id="contact" class="bg-blue-600 text-white rounded-lg p-8">
            <h2 class="text-2xl font-bold mb-6">12. Contact Us</h2>
            
            <p class="mb-6">If you have any questions about this Privacy Policy or our data practices, please contact us:</p>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <h3 class="font-semibold mb-2">Email</h3>
                    <p class="text-blue-100">privacy@adtlas.com</p>
                </div>
                <div>
                    <h3 class="font-semibold mb-2">Mailing Address</h3>
                    <p class="text-blue-100">
                        Adtlas Privacy Team<br>
                        123 Tech Street<br>
                        San Francisco, CA 94105<br>
                        United States
                    </p>
                </div>
            </div>
            
            <div class="mt-6 pt-6 border-t border-blue-500">
                <p class="text-sm text-blue-100">
                    For immediate assistance with privacy-related concerns, please use our <a href="{% url 'core:contact' %}" class="text-white hover:underline">contact form</a> or call our support line.
                </p>
            </div>
        </section>
    </div>
</div>
{% endblock %}