{% extends 'base.html.twig' %}
{% block title %}{{ 'manifest.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'manifest.meta_description'|trans }}{% endblock %}

{% block body %}
{# Hero #}
<section class="py-24 bg-gradient-to-b from-cream to-white">
    <div class="max-w-3xl mx-auto px-4 text-center">
        <h1 class="text-sm font-semibold text-scout uppercase tracking-wider mb-4">{{ 'manifest.hero_label'|trans }}</h1>
        <blockquote class="text-4xl sm:text-5xl font-extrabold text-dark italic leading-tight">
            {{ 'manifest.quote'|trans }}
        </blockquote>
        <p class="mt-6 text-lg text-gray-500 max-w-xl mx-auto">
            {{ 'manifest.intro'|trans }}
        </p>
    </div>
</section>

{# 5 zasad #}
<section class="py-20 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center text-dark mb-16">{{ 'manifest.rules_title'|trans }}</h2>

        {% set rules = [
            {title: 'manifest.rule1_title'|trans, desc: 'manifest.rule1_desc'|trans, icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>'},
            {title: 'manifest.rule2_title'|trans, desc: 'manifest.rule2_desc'|trans, icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>'},
            {title: 'manifest.rule3_title'|trans, desc: 'manifest.rule3_desc'|trans, icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>'},
            {title: 'manifest.rule4_title'|trans, desc: 'manifest.rule4_desc'|trans, icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>'},
            {title: 'manifest.rule5_title'|trans, desc: 'manifest.rule5_desc'|trans, icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>'}
        ] %}

        <div class="space-y-16">
            {% for rule in rules %}
            <div class="flex flex-col {{ loop.index is even ? 'md:flex-row-reverse' : 'md:flex-row' }} items-center gap-8">
                <div class="w-20 h-20 shrink-0 bg-{{ loop.index is odd ? 'scout' : 'echo' }}/10 rounded-2xl flex items-center justify-center">
                    <svg class="w-10 h-10 text-{{ loop.index is odd ? 'scout' : 'echo' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        {{ rule.icon|raw }}
                    </svg>
                </div>
                <div class="{{ loop.index is even ? 'md:text-right' : '' }}">
                    <h3 class="text-xl font-bold text-dark">{{ loop.index }}. {{ rule.title }}</h3>
                    <p class="mt-2 text-gray-600 leading-relaxed">{{ rule.desc }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

{# Transparentność — infografika #}
<section class="py-20 bg-cream">
    <div class="max-w-3xl mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-dark mb-12">{{ 'manifest.transparency_title'|trans }}</h2>

        <div class="bg-white rounded-2xl p-8 border border-gray-200 mb-8">
            <p class="text-sm font-semibold text-gray-400 uppercase mb-4">{{ 'manifest.avg_mission_time'|trans }}</p>
            <div class="flex rounded-full overflow-hidden h-10">
                <div class="bg-scout flex items-center justify-center text-white text-xs font-bold" style="width: 20%">{{ 'manifest.screen_time'|trans }}</div>
                <div class="bg-echo flex items-center justify-center text-white text-xs font-bold" style="width: 80%">{{ 'manifest.adventure_time'|trans }}</div>
            </div>
            <p class="mt-3 text-sm text-gray-500">{{ 'manifest.screen_to_play'|trans }}</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
            <div class="bg-white rounded-2xl p-6 border border-gray-200">
                <p class="text-3xl font-extrabold text-blitz">0</p>
                <p class="text-sm text-gray-500 mt-1">{{ 'manifest.zero_ads'|trans }}</p>
            </div>
            <div class="bg-white rounded-2xl p-6 border border-gray-200">
                <p class="text-3xl font-extrabold text-echo">{{ 'manifest.min_data'|trans }}</p>
                <p class="text-sm text-gray-500 mt-1">{{ 'manifest.min_data_desc'|trans }}</p>
            </div>
            <div class="bg-white rounded-2xl p-6 border border-gray-200">
                <p class="text-3xl font-extrabold text-nova">{{ 'manifest.full_offline'|trans }}</p>
                <p class="text-sm text-gray-500 mt-1">{{ 'manifest.offline_desc'|trans }}</p>
            </div>
        </div>
    </div>
</section>

{# Wersje manifestu — tabs #}
<section class="py-20 bg-white">
    <div class="max-w-3xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-dark mb-8">{{ 'manifest.versions_title'|trans }}</h2>

        <div class="border border-gray-200 rounded-2xl overflow-hidden" data-controller="tabs">
            <div class="flex border-b border-gray-200 bg-gray-50">
                <button data-tabs-target="btn" data-action="tabs#switch" data-tab="full" class="flex-1 px-4 py-3 text-sm font-semibold text-scout border-b-2 border-scout">{{ 'manifest.tab_full'|trans }}</button>
                <button data-tabs-target="btn" data-action="tabs#switch" data-tab="short" class="flex-1 px-4 py-3 text-sm font-medium text-gray-500 hover:text-dark">{{ 'manifest.tab_short'|trans }}</button>
                <button data-tabs-target="btn" data-action="tabs#switch" data-tab="press" class="flex-1 px-4 py-3 text-sm font-medium text-gray-500 hover:text-dark">{{ 'manifest.tab_press'|trans }}</button>
                <button data-tabs-target="btn" data-action="tabs#switch" data-tab="bio" class="flex-1 px-4 py-3 text-sm font-medium text-gray-500 hover:text-dark">{{ 'manifest.tab_bio'|trans }}</button>
            </div>
            <div class="p-8">
                <div id="tab-full" data-tabs-target="panel">
                    <p class="text-gray-600 leading-relaxed">{{ 'manifest.version_full'|trans }}</p>
                </div>
                <div id="tab-short" data-tabs-target="panel" class="hidden">
                    <p class="text-gray-600 leading-relaxed">{{ 'manifest.version_short'|trans }}</p>
                </div>
                <div id="tab-press" data-tabs-target="panel" class="hidden">
                    <p class="text-gray-600 leading-relaxed">{{ 'manifest.version_press'|trans }}</p>
                </div>
                <div id="tab-bio" data-tabs-target="panel" class="hidden">
                    <p class="text-gray-600 leading-relaxed">{{ 'manifest.version_bio'|trans }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

{# CTA #}
<section class="py-20 bg-cream">
    <div class="max-w-3xl mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-dark">{{ 'manifest.cta_title'|trans }}</h2>
        <p class="mt-4 text-gray-500 text-lg">{{ 'manifest.cta_subtitle'|trans }}</p>
        <a href="{{ path('app_download') }}" class="mt-8 inline-flex items-center px-8 py-4 bg-scout text-white text-lg font-bold rounded-full hover:bg-scout/90 transition shadow-lg">
            {{ 'manifest.cta_button'|trans }}
        </a>
    </div>
</section>

{% endblock %}