{% extends "base.html" %}
{% set _cms_title = get_page_content(page_id, 'title', g.lang_code) %}
{% set _cms_desc = get_page_content(page_id, 'description', g.lang_code) %}
{% set _cms_heading = get_page_content(page_id, 'page_heading', g.lang_code) %}
{% set _cms_page_desc = get_page_content(page_id, 'page_description', g.lang_code) %}
{% set _cms_page_body = get_page_content(page_id, 'page_body', g.lang_code) %}
{% set _cms_head_html = get_page_content(page_id, 'head_html', g.lang_code) %}
{% set _cms_og_image = get_page_content(page_id, 'og_image', g.lang_code) %}
{% set _cms_before_faq_title = get_page_content(page_id, 'before_faq_title', g.lang_code) %}
{% set _cms_before_faq_content = get_page_content(page_id, 'before_faq_content', g.lang_code) %}
{% block title %}{% if _cms_title %}{{ _cms_title }}{% else %}{% trans %}Privacy Policy | OnlineConvert.cc{% endtrans %}{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Privacy Policy | OnlineConvert.cc{% endtrans %}{% endif %}{% endblock %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block extra_head %}{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}{% endblock %}

{% block content %}
{% set _pp_hero_type = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
{% set _hero_img = site.get('hero_bg_image', '') if site is defined else '' %}
{% set _hero_lcl = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
{% set _hero_lcd = (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' %}
<section class="hero-gradient relative overflow-hidden">
        {% if _pp_hero_type == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _pp_hero_type == 'gradient' %}
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
    {% elif _pp_hero_type == 'image' and _hero_img %}
    <div class="hero-bg-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>
    {% endif %}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
        <div class="max-w-3xl animate-slide-up">
            <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">{{ _cms_heading if _cms_heading else _('Privacy Policy') }}</h1>
            {% if _cms_page_desc %}<p class="text-lg text-white/90 max-w-2xl leading-relaxed">{{ _cms_page_desc }}</p>{% endif %}
        </div>
    </div>
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="flex flex-col md:flex-row gap-8">
        <aside class="w-full md:w-64 flex-shrink-0">
            <nav class="sticky top-24 space-y-1">
                <a href="{{ full_url('/privacy') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium bg-primary/10 text-primary dark:bg-primary-light/10 dark:text-primary-light">{% trans %}Privacy Policy{% endtrans %}</a>
                <a href="{{ full_url('/terms') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Terms of Use{% endtrans %}</a>
                <a href="{{ full_url('/disclaimer') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Disclaimer{% endtrans %}</a>
                <a href="{{ full_url('/imprint') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Imprint{% endtrans %}</a>
                <a href="{{ full_url('/contact') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all">{% trans %}Contact{% endtrans %}</a>
            </nav>
        </aside>

        <div class="flex-1 min-w-0">
            <div class="prose dark:prose-invert max-w-none">
                {% if _cms_page_body %}
                    {{ _cms_page_body|safe }}
                {% else %}
                <h2 class="text-xl font-bold mb-3">{% trans %}Policy Information{% endtrans %}</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">{% trans %}Update date: March 10, 2023{% endtrans %}</p>
                <p>{% trans %}You are very welcome to visit "OnlineConvert" (hereinafter referred to as this website). In order to allow you to use the services and information of this website with peace of mind, we hereby explain to you the privacy protection policy of this website to protect your rights and interests. Please read the following carefully:{% endtrans %}</p>
                <p>{% trans %}We use your personal data to provide this service. By using this service, you agree to our collection and use of data in accordance with this privacy policy. If you do not agree to all or part of it, please do not use this website service.{% endtrans %}</p>
                <h4 class="text-lg font-semibold mt-8 mb-3">{% trans %}1. THE SCOPE OF APPLICATION OF THE PRIVACY PROTECTION POLICY{% endtrans %}</h4>
                <p>{% trans %}The content of the privacy protection policy, including how this website handles the personal identification data collected when you use the website services. The privacy protection policy does not apply to related linked websites other than this website, nor does it apply to personnel who are not entrusted or participated in the management of this website.{% endtrans %}</p>
                <h4 class="text-lg font-semibold mt-8 mb-3">{% trans %}2. METHODS OF COLLECTING, PROCESSING AND USING PERSONAL DATA{% endtrans %}</h4>
                <ul class="list-disc list-inside space-y-2">
                    <li>{% trans %}When you visit this website or use the functional services provided by this website, we will consider the nature of the service function, ask you to provide the necessary personal data, and process and use your personal data within the scope of the specific purpose.{% endtrans %}</li>
                    <li>{% trans %}This website will retain your name, email address, contact information, and time of use when you use interactive functions such as service mailboxes and questionnaires.{% endtrans %}</li>
                    <li>{% trans %}During normal browsing, the server will record relevant actions on its own, including the IP address of the connected device, the time of use, the browser used, the browsing and click data records, etc., as a reference for us to improve our website services.{% endtrans %}</li>
                </ul>
                {% endif %}
            </div>
            {% if _cms_before_faq_title or _cms_before_faq_content %}
            <div class="mt-10">
                {% if _cms_before_faq_title %}<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _cms_before_faq_title }}</h2>{% endif %}
                {% if _cms_before_faq_content %}<div class="prose dark:prose-invert max-w-none">{{ _cms_before_faq_content|safe }}</div>{% endif %}
            </div>
            {% endif %}
            {% if page_faqs %}
            <div class="mt-10">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">{% trans %}Frequently Asked Questions{% endtrans %}</h2>
                <div class="space-y-3">
                {% for faq in page_faqs %}
                <details class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4">
                    <summary class="font-medium text-gray-900 dark:text-white cursor-pointer">{{ faq.question }}</summary>
                    <div class="mt-2 text-gray-600 dark:text-gray-400 prose dark:prose-invert max-w-none">{{ faq.answer|safe }}</div>
                </details>
                {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}