<!DOCTYPE html>
<html lang="<%= lang %>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Terms of Service & Privacy Policy - <%= botName %></title>
    <meta name="description" content="Terms of Service and Privacy Policy for <%= botName %> Discord Bot">
    <link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preload" href="/Fonts/symbols_skyquake.ttf" as="font" type="font/ttf" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Tailwind CSS -->
    <link rel="stylesheet" href="/css/output.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" media="print" onload="this.media='all'">

    <style>
        @font-face {
            font-family: 'skyquakesymbols';
            src: url('/Fonts/symbols_skyquake.ttf') format('truetype');
            font-display: swap;
        }

        body {
            background: #1b1b1b;
            min-height: 100vh;
        }

        .gradient-text {
            background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .text-accent {
            color: #F5F5DC;
        }

        .text-muted {
            color: #90EE90;
        }

        .btn-primary {
            background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
            box-shadow: 0 4px 20px rgba(245, 245, 220, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
            color: #1E1E1E;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-primary:hover {
            box-shadow: 0 8px 25px rgba(245, 245, 220, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
            transform: translateY(-2px);
        }

        .terms-card {
            background: linear-gradient(135deg, rgba(62, 78, 62, 0.2) 0%, rgba(44, 44, 44, 0.2) 100%);
            border: 1px solid rgba(245, 245, 220, 0.08);
            backdrop-filter: blur(12px);
        }

        .terms-section h2 {
            color: #F5F5DC;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(144, 238, 144, 0.2);
        }

        .terms-section h3 {
            color: #90EE90;
            font-size: 1.1rem;
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }

        .terms-section p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.7;
            margin-bottom: 1rem;
        }

        .terms-section ul {
            list-style: none;
            padding: 0;
            margin-bottom: 1.5rem;
        }

        .terms-section li {
            color: rgba(255, 255, 255, 0.8);
            padding: 0.5rem 0 0.5rem 1.5rem;
            position: relative;
            line-height: 1.6;
        }

        .terms-section li::before {
            content: "•";
            color: #90EE90;
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        .terms-section li strong {
            color: #F5F5DC;
        }
    </style>
</head>
<body class="text-white antialiased">
    <%- include('partials/nav', { activePage: 'terms' }) %>

    <!-- Header -->
    <section class="pt-32 pb-12 lg:pt-40 lg:pb-16">
        <div class="max-w-[1400px] mx-auto px-6 lg:px-8">
            <div class="text-center mb-8">
                <h1 class="text-4xl lg:text-5xl font-bold mb-4 text-accent"><%= t('terms.pageTitle') %></h1>
                <p class="text-lg text-muted"><%= t('terms.lastUpdated') %></p>
            </div>
        </div>
    </section>

    <!-- Content -->
    <section class="pb-20">
        <div class="max-w-[900px] mx-auto px-6 lg:px-8">
            <div class="terms-card rounded-xl p-8 mb-8">
                <div class="terms-section">
                    <h2><i class="fas fa-file-contract mr-2"></i><%= t('terms.termsOfService') %></h2>

                    <p><%= t('terms.byUsing') %> <%= botName %><%= t('terms.youAgree') %></p>

                    <ul>
                        <li><strong><%= t('terms.useResponsibly') %></strong> – <%= t('terms.useResponsiblyDesc') %></li>
                        <li><strong><%= t('terms.noFunnyBusiness') %></strong> – <%= t('terms.noFunnyBusinessDesc') %></li>
                        <li><strong><%= t('terms.statsAsIs') %></strong> – <%= t('terms.statsAsIsDesc') %></li>
                        <li><strong><%= t('terms.uptimeNotGuaranteed') %></strong> – <%= t('terms.uptimeNotGuaranteedDesc') %></li>
                        <li><strong><%= t('terms.weCanBanYou') %></strong> – <%= t('terms.weCanBanYouDesc') %></li>
                    </ul>
                </div>
            </div>

            <div class="terms-card rounded-xl p-8 mb-8">
                <div class="terms-section">
                    <h2><i class="fas fa-crown mr-2"></i><%= t('terms.premiumTitle') %></h2>

                    <h3><%= t('terms.premiumWhatYouGet') %></h3>
                    <p><%= t('terms.premiumWhatYouGetDesc') %></p>
                    <ul>
                        <li><%= t('terms.premiumFeature1') %></li>
                        <li><%= t('terms.premiumFeature2') %></li>
                        <li><%= t('terms.premiumFeature3') %></li>
                        <li><%= t('terms.premiumFeature4') %></li>
                        <li><%= t('terms.premiumFeature5') %></li>
                    </ul>

                    <h3><%= t('terms.premiumBilling') %></h3>
                    <p><%= t('terms.premiumBillingDesc') %></p>

                    <h3><%= t('terms.premiumCancellation') %></h3>
                    <p><%= t('terms.premiumCancellationDesc') %></p>

                    <h3><%= t('terms.premiumRefunds') %></h3>
                    <p><%= t('terms.premiumRefundsDesc') %></p>

                    <h3><%= t('terms.premiumPriceChanges') %></h3>
                    <p><%= t('terms.premiumPriceChangesDesc') %></p>

                    <h3><%= t('terms.premiumTermination') %></h3>
                    <p><%= t('terms.premiumTerminationDesc') %></p>
                </div>
            </div>

            <div class="terms-card rounded-xl p-8 mb-8">
                <div class="terms-section">
                    <h2><i class="fas fa-server mr-2"></i><%= t('terms.serviceAvailabilityTitle') %></h2>

                    <h3><%= t('terms.serviceNoWarranty') %></h3>
                    <p><%= t('terms.serviceNoWarrantyDesc') %></p>

                    <h3><%= t('terms.serviceLiability') %></h3>
                    <p><%= t('terms.serviceLiabilityDesc') %></p>

                    <h3><%= t('terms.serviceCredits') %></h3>
                    <p><%= t('terms.serviceCreditsDesc') %></p>

                    <h3><%= t('terms.serviceForceM') %></h3>
                    <p><%= t('terms.serviceForceMDesc') %></p>
                </div>
            </div>

            <div class="terms-card rounded-xl p-8 mb-8">
                <div class="terms-section">
                    <h2><i class="fas fa-shield-alt mr-2"></i><%= t('terms.privacyPolicy') %></h2>

                    <h3><%= t('terms.infoWeCollect') %></h3>
                    <p><%= botName %> <%= t('terms.collectsFollowing') %></p>
                    <ul>
                        <li><strong><%= t('terms.discordUserIds') %></strong> <%= t('terms.discordUserIdsDesc') %></li>
                        <li><strong><%= t('terms.squadronIds') %></strong> <%= t('terms.squadronIdsDesc') %></li>
                        <li><strong><%= t('terms.battleData') %></strong> <%= t('terms.battleDataDesc') %></li>
                        <li><strong><%= t('terms.commandUsage') %></strong> <%= t('terms.commandUsageDesc') %></li>
                    </ul>

                    <h3><%= t('terms.howWeUse') %></h3>
                    <p><%= t('terms.usedExclusively') %></p>
                    <ul>
                        <li><%= t('terms.trackingPerformance') %></li>
                        <li><%= t('terms.providingHistorical') %></li>
                        <li><%= t('terms.improvingBot') %></li>
                        <li><%= t('terms.troubleshootingIssues') %></li>
                    </ul>

                    <h3><%= t('terms.dataStorage') %></h3>
                    <p><%= t('terms.dataStoredSecurely') %></p>
                    <ul>
                        <li><%= t('terms.encryptedServers') %></li>
                        <li><%= t('terms.limitedAccess') %></li>
                        <li><%= t('terms.regularBackups') %></li>
                    </ul>

                    <h3><%= t('terms.dataSharing') %></h3>
                    <p><%= t('terms.weDoNot') %></p>
                    <ul>
                        <li><%= t('terms.sellData') %></li>
                        <li><%= t('terms.shareData') %></li>
                        <li><%= t('terms.useForAds') %></li>
                        <li><%= t('terms.transferData') %></li>
                    </ul>

                    <h3><%= t('terms.dataRetention') %></h3>
                    <p><%= t('terms.dataRetentionDesc') %></p>

                    <h3><%= t('terms.discordIntegration') %></h3>
                    <p><%= t('terms.discordIntegrationDesc') %></p>

                    <h3><%= t('terms.ageRestrictions') %></h3>
                    <p><%= t('terms.ageRestrictionsDesc') %></p>

                    <h3><%= t('terms.changesToPolicy') %></h3>
                    <p><%= t('terms.changesToPolicyDesc') %></p>
                </div>
            </div>

            <div class="terms-card rounded-xl p-8 mb-8">
                <div class="terms-section">
                    <h2><i class="fas fa-exclamation-triangle mr-2"></i><%= t('terms.disclaimer') %></h2>
                    <p><%= botName %> <%= t('terms.warThunderDisclaimer') %></p>
                    <p><%= t('terms.acknowledgement') %> <%= botName %><%= t('terms.acknowledgementEnd') %></p>
                </div>
            </div>

            <div class="text-center">
                <a href="/" class="btn-primary px-8 py-4 rounded-xl text-base font-bold inline-flex items-center">
                    <i class="fas fa-home mr-3"></i>
                    <%= t('common.backToHome') %>
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <%- include('partials/footer') %>

    <script>
        window.__lang = '<%= lang %>';
        window.__i18n = <%- localeJson %>;
        window.__t = function(key) {
            var parts = key.split('.'), obj = window.__i18n;
            for (var i = 0; i < parts.length; i++) { obj = obj && obj[parts[i]]; }
            return obj !== undefined ? obj : key;
        };
        window.switchLanguage = function(lang) {
            var next = lang || (document.documentElement.lang === 'en' ? 'ru' : 'en');
            if (next === document.documentElement.lang) return;
            document.cookie = 'lang=' + next + ';path=/;max-age=31536000;SameSite=Lax';
            window.location.reload();
        };
    </script>
    <script src="/js/main.js?v=3"></script>
    <script src="/js/api-client.js"></script>
    <script>
    </script>

</body>
</html>
