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

{% block title %}Terms of Service - Adtlas{% endblock %}

{% block meta_description %}Adtlas Terms of Service - Read our terms and conditions for using the Adtlas platform. Understand your rights and responsibilities as a user.{% 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">Terms of Service</h1>
        <p class="text-xl text-gray-600">Your agreement with Adtlas</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">Welcome to Adtlas</h2>
        <p class="text-gray-700 leading-relaxed mb-4">
            These Terms of Service ("Terms") govern your use of the Adtlas platform, website, and services (collectively, the "Service"). By accessing or using our Service, you agree to be bound by these Terms. If you do not agree to these Terms, please do not use our Service.
        </p>
        <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 rounded">
            <p class="text-yellow-800 font-medium">Important: Please read these Terms carefully before using our Service.</p>
        </div>
    </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="#acceptance" class="hover:underline">1. Acceptance of Terms</a></li>
            <li><a href="#description" class="hover:underline">2. Description of Service</a></li>
            <li><a href="#user-accounts" class="hover:underline">3. User Accounts</a></li>
            <li><a href="#acceptable-use" class="hover:underline">4. Acceptable Use Policy</a></li>
            <li><a href="#content" class="hover:underline">5. User Content</a></li>
            <li><a href="#intellectual-property" class="hover:underline">6. Intellectual Property</a></li>
            <li><a href="#payment" class="hover:underline">7. Payment and Billing</a></li>
            <li><a href="#termination" class="hover:underline">8. Termination</a></li>
            <li><a href="#disclaimers" class="hover:underline">9. Disclaimers</a></li>
            <li><a href="#limitation" class="hover:underline">10. Limitation of Liability</a></li>
            <li><a href="#indemnification" class="hover:underline">11. Indemnification</a></li>
            <li><a href="#governing-law" class="hover:underline">12. Governing Law</a></li>
            <li><a href="#changes" class="hover:underline">13. Changes to Terms</a></li>
            <li><a href="#contact" class="hover:underline">14. Contact Information</a></li>
        </ul>
    </div>

    <!-- Content Sections -->
    <div class="space-y-8">
        <!-- Acceptance of Terms -->
        <section id="acceptance" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">1. Acceptance of Terms</h2>
            
            <p class="text-gray-700 mb-4">
                By accessing or using the Adtlas Service, you acknowledge that you have read, understood, and agree to be bound by these Terms and our Privacy Policy. These Terms constitute a legally binding agreement between you and Adtlas.
            </p>
            
            <div class="bg-blue-50 p-4 rounded-lg">
                <h3 class="font-semibold text-blue-900 mb-2">Eligibility</h3>
                <p class="text-blue-800 text-sm">
                    You must be at least 18 years old or the age of majority in your jurisdiction to use our Service. By using our Service, you represent and warrant that you meet these age requirements.
                </p>
            </div>
        </section>

        <!-- Description of Service -->
        <section id="description" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">2. Description of Service</h2>
            
            <p class="text-gray-700 mb-6">
                Adtlas provides a comprehensive platform for data analytics, visualization, and business intelligence. Our Service includes:
            </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">Data analytics and processing tools</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">Interactive dashboards and reports</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">Data visualization capabilities</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">Collaboration and sharing 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">API access and integrations</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">Customer support and documentation</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- User Accounts -->
        <section id="user-accounts" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">3. User Accounts</h2>
            
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-3">Account Registration</h3>
                    <p class="text-gray-700 mb-3">
                        To access certain features of our Service, you must create an account. You agree to provide accurate, current, and complete information during registration and to update such information to keep it accurate, current, and complete.
                    </p>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 mb-3">Account Security</h3>
                    <p class="text-gray-700 mb-3">
                        You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account. You agree to notify us immediately of any unauthorized use of your account.
                    </p>
                </div>
            </div>
        </section>

        <!-- Acceptable Use Policy -->
        <section id="acceptable-use" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">4. Acceptable Use Policy</h2>
            
            <p class="text-gray-700 mb-6">You agree not to use the Service to:</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-red-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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Violate any applicable laws or regulations</span>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Infringe on intellectual property rights</span>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Transmit harmful or malicious code</span>
                    </div>
                </div>
                <div class="space-y-3">
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Attempt unauthorized access to systems</span>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Interfere with Service operation</span>
                    </div>
                    <div class="flex items-start">
                        <svg class="w-5 h-5 text-red-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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-gray-700">Use the Service for competitive analysis</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Payment and Billing -->
        <section id="payment" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">7. Payment and Billing</h2>
            
            <div class="space-y-6">
                <div class="bg-green-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-green-900 mb-2">Subscription Plans</h3>
                    <p class="text-green-800 text-sm">
                        Our Service is offered through various subscription plans. By subscribing, you agree to pay the applicable fees and charges.
                    </p>
                </div>
                
                <div class="bg-yellow-50 p-4 rounded-lg">
                    <h3 class="font-semibold text-yellow-900 mb-2">Billing and Refunds</h3>
                    <p class="text-yellow-800 text-sm">
                        Subscription fees are billed in advance and are non-refundable except as required by law or as specified in our refund policy.
                    </p>
                </div>
            </div>
        </section>

        <!-- Limitation of Liability -->
        <section id="limitation" class="bg-white rounded-lg shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">10. Limitation of Liability</h2>
            
            <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
                <p class="text-red-800 font-medium mb-2">Important Legal Notice</p>
                <p class="text-red-700 text-sm">
                    TO THE MAXIMUM EXTENT PERMITTED BY LAW, ADTLAS SHALL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS OR REVENUES, WHETHER INCURRED DIRECTLY OR INDIRECTLY, OR ANY LOSS OF DATA, USE, GOODWILL, OR OTHER INTANGIBLE LOSSES.
                </p>
            </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">14. Contact Information</h2>
            
            <p class="mb-6">If you have any questions about these Terms of Service, 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">legal@adtlas.com</p>
                </div>
                <div>
                    <h3 class="font-semibold mb-2">Mailing Address</h3>
                    <p class="text-blue-100">
                        Adtlas Legal Department<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 general inquiries, please visit our <a href="{% url 'core:contact' %}" class="text-white hover:underline">contact page</a> or reach out to our support team.
                </p>
            </div>
        </section>
    </div>
</div>
{% endblock %}