{% 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 %}Imprint | OnlineConvert.cc{% endtrans %}{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Imprint | 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 _im_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 _im_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 _im_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 _im_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 _('Imprint') }}</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 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 %}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 bg-primary/10 text-primary dark:bg-primary-light/10 dark:text-primary-light">{% 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 %}Company Information{% endtrans %}</h2>
                <div class="mb-4">{% trans %}Content Here{% endtrans %}</div>
                {% 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 %}