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

{% block head_extra %}
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{% endblock %}

{% block meta_extra %}
{% if site_settings.monetizationEnabled %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "TROPO",
    "applicationCategory": "GameApplication",
    "operatingSystem": "iOS, Android",
    "description": "{{ 'seo.app_description'|trans }}",
    "offers": [
        {"@type": "Offer", "price": "0", "priceCurrency": "PLN", "description": "{{ 'seo.free_offer'|trans }}"},
        {"@type": "Offer", "price": "70", "priceCurrency": "PLN", "description": "{{ 'seo.plus_offer'|trans }}"}
    ],
    "author": {"@type": "Organization", "name": "TROPO"}
}
</script>
{% endif %}
{% endblock %}

{% block body %}
{% from '_macros/image.html.twig' import picture %}
{# SEKCJA 1 — HERO #}
<section class="min-h-screen flex items-center bg-gradient-to-b from-cream to-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-dark leading-tight">
            {{ 'home.hero.title_1'|trans }}<br>
            <span class="text-gradient-brand">{{ 'home.hero.title_2'|trans }}</span>
        </h1>
        <p class="mt-6 text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
            {{ 'home.hero.subtitle'|trans }}
        </p>
        <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
            {% if site_settings.monetizationEnabled %}
            <a href="{{ path('app_download') }}" class="inline-flex items-center justify-center px-8 py-4 bg-blitz text-white text-lg font-bold rounded-full hover:bg-blitz/90 transition shadow-lg shadow-blitz/25">
                {{ 'home.hero.cta_download'|trans }}
            </a>
            {% endif %}
            <a href="#jak-to-dziala" class="inline-flex items-center justify-center px-8 py-4 bg-white text-dark text-lg font-semibold rounded-full border-2 border-gray-200 hover:border-gray-300 transition">
                {{ 'home.hero.cta_how'|trans }}
            </a>
        </div>
        <div class="mt-16 max-w-5xl mx-auto flex justify-center items-center gap-4 sm:gap-8">
            {{ picture('images/hero/step_1.png', 'hero_phone', 'TROPO — ekran główny', 'w-full h-auto', 'eager', 500, 986) }}
            {{ picture('images/hero/step_2.png', 'hero_phone', 'TROPO — ekran misji', 'w-full h-auto', 'eager', 500, 986) }}
            {{ picture('images/hero/step_3.png', 'hero_phone', 'TROPO — ekran misji', 'w-full h-auto', 'eager', 500, 986) }}
        </div>
    </div>
</section>

{# SEKCJA 2 — JAK TO DZIAŁA #}
<section id="jak-to-dziala" class="py-20 bg-white scroll-mt-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl sm:text-4xl font-bold text-center text-dark">{{ 'home.how_it_works.title'|trans }}</h2>
        <p class="mt-4 text-center text-gray-500 max-w-xl mx-auto">{{ 'home.how_it_works.subtitle'|trans }}</p>

        <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-12">
            <div class="text-center">
                <div class="w-20 h-20 mx-auto bg-scout/10 rounded-2xl flex items-center justify-center">
                    <svg class="w-10 h-10 text-scout" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
                <h3 class="mt-6 text-xl font-bold text-dark">{{ 'home.how_it_works.step1_title'|trans }}</h3>
                <p class="mt-3 text-gray-500">{{ 'home.how_it_works.step1_desc'|trans }}</p>
            </div>

            <div class="text-center">
                <div class="w-20 h-20 mx-auto bg-blitz/10 rounded-2xl flex items-center justify-center">
                    <svg class="w-10 h-10 text-blitz" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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"/>
                    </svg>
                </div>
                <h3 class="mt-6 text-xl font-bold text-dark">{{ 'home.how_it_works.step2_title'|trans }}</h3>
                <p class="mt-3 text-gray-500">{{ 'home.how_it_works.step2_desc'|trans }}</p>
            </div>

            <div class="text-center">
                <div class="w-20 h-20 mx-auto bg-echo/10 rounded-2xl flex items-center justify-center">
                    <svg class="w-10 h-10 text-echo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <h3 class="mt-6 text-xl font-bold text-dark">{{ 'home.how_it_works.step3_title'|trans }}</h3>
                <p class="mt-3 text-gray-500">{{ 'home.how_it_works.step3_desc'|trans }}</p>
            </div>
        </div>
    </div>
</section>

{# SEKCJA 2.5 — DLA CAŁEJ RODZINY #}
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto text-center">
            <h2 class="text-3xl sm:text-4xl font-bold text-dark">{{ 'home.family.title'|trans }}</h2>
            <p class="mt-4 text-gray-500 max-w-xl mx-auto">{{ 'home.family.subtitle'|trans }}</p>
        </div>

        <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div class="text-center">
                <div class="w-16 h-16 mx-auto bg-scout/10 rounded-2xl flex items-center justify-center text-3xl">👤</div>
                <h3 class="mt-4 text-lg font-bold text-dark">{{ 'home.family.profiles_title'|trans }}</h3>
                <p class="mt-2 text-sm text-gray-500">{{ 'home.family.profiles_desc'|trans }}</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 mx-auto bg-blitz/10 rounded-2xl flex items-center justify-center text-3xl">👥</div>
                <h3 class="mt-4 text-lg font-bold text-dark">{{ 'home.family.together_title'|trans }}</h3>
                <p class="mt-2 text-sm text-gray-500">{{ 'home.family.together_desc'|trans }}</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 mx-auto bg-nova/10 rounded-2xl flex items-center justify-center text-3xl">📱</div>
                <h3 class="mt-4 text-lg font-bold text-dark">{{ 'home.family.phone_title'|trans }}</h3>
                <p class="mt-2 text-sm text-gray-500">{{ 'home.family.phone_desc'|trans }}</p>
            </div>
        </div>
    </div>
</section>

{# SEKCJA 3 — POZNAJ DRUŻYNĘ #}
<section class="py-20 bg-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl sm:text-4xl font-bold text-center text-dark">{{ 'home.team.title'|trans }}</h2>
        <p class="mt-4 text-center text-gray-500 max-w-xl mx-auto">{{ 'home.team.subtitle'|trans }}</p>

        <div class="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {% set characters = [
                {slug: 'scout', name: 'Scout', species: 'character.scout.species'|trans, color: 'scout', desc: 'character.scout.home_desc'|trans},
                {slug: 'blitz', name: 'Blitz', species: 'character.blitz.species'|trans, color: 'blitz', desc: 'character.blitz.home_desc'|trans},
                {slug: 'nova', name: 'Nova', species: 'character.nova.species'|trans, color: 'nova', desc: 'character.nova.home_desc'|trans},
                {slug: 'echo', name: 'Echo', species: 'character.echo.species'|trans, color: 'echo', desc: 'character.echo.home_desc'|trans}
            ] %}

            {% for char in characters %}
            <a href="{{ path('app_character_show', {slug: char.slug}) }}" class="char-card group bg-white rounded-2xl p-6 border-2 hover:shadow-xl transition-all duration-300" style="--char-color: var(--color-{{ char.color }})">
                {% set hoverSlugs = ['scout', 'blitz', 'nova', 'echo'] %}
                <div class="w-32 h-32 mx-auto rounded-full bg-white border-4 p-1 overflow-hidden group-hover:scale-105 transition-transform" style="border-color: var(--color-{{ char.color }})">
                    {% if char.slug in hoverSlugs %}
                    <div class="relative w-full h-full">
                        <div class="absolute inset-0 transition-opacity duration-300 group-hover:opacity-0">
                            {{ picture('images/characters/' ~ char.slug ~ '_ikona.png', 'char_icon', char.name, 'w-full h-full object-cover rounded-full') }}
                        </div>
                        <div class="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                            {{ picture('images/' ~ char.slug ~ '_logo_hover.png', 'char_icon', char.name, 'w-full h-full object-cover rounded-full') }}
                        </div>
                    </div>
                    {% else %}
                    {{ picture('images/characters/' ~ char.slug ~ '_ikona.png', 'char_icon', char.name, 'w-full h-full object-cover rounded-full') }}
                    {% endif %}
                </div>
                <h3 class="mt-4 text-xl font-bold text-center text-dark">{{ char.name }}</h3>
                <p class="text-sm text-center text-{{ char.color }} font-medium">{{ char.species }}</p>
                <p class="mt-3 text-sm text-gray-500 text-center">{{ char.desc }}</p>
                <p class="mt-4 text-sm font-semibold text-{{ char.color }} text-center group-hover:underline">{{ 'home.team.meet_me'|trans }}</p>
            </a>
            {% endfor %}
        </div>
    </div>
</section>

{# SEKCJA 3.5 — ZBIERAJ OZNAKI #}
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-bold text-dark">{{ 'home.badges.title'|trans }}</h2>
        <p class="mt-4 text-gray-500 max-w-xl mx-auto">{{ 'home.badges.subtitle'|trans({'%count%': badgeCount}) }}</p>

        <p class="mt-10 text-4xl font-extrabold text-blitz">{{ badgeCount }}</p>
        <p class="text-sm text-gray-500">{{ 'home.badges.count_label'|trans }}</p>

        <div class="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-4 max-w-3xl mx-auto">
            {% set sampleBadges = [
                {name: 'Tropiciel', char: 'scout', loc: 'Teren'},
                {name: 'Domowy Olimpijczyk', char: 'blitz', loc: 'Dom'},
                {name: 'Budowniczy', char: 'nova', loc: 'Dom'},
                {name: 'Poeta Przyrody', char: 'echo', loc: 'Teren'}
            ] %}
            {% for b in sampleBadges %}
            <div class="bg-white rounded-2xl p-4 border-2 hover:shadow-lg transition-shadow flex items-center gap-3 text-left" style="border-color: var(--color-{{ b.char }})">
                <div class="w-10 h-10 rounded-full overflow-hidden border-2 shrink-0" style="border-color: var(--color-{{ b.char }})">
                    {{ picture('images/characters/' ~ b.char ~ '_ikona.png', 'char_icon', b.name, 'w-full h-full object-cover rounded-full') }}
                </div>
                <div class="min-w-0">
                    <p class="font-bold text-dark text-sm leading-tight">{{ b.name }}</p>
                    <span class="text-xs text-gray-500">{{ b.loc }}</span>
                </div>
            </div>
            {% endfor %}
        </div>

        <a href="{{ path('app_badges') }}" class="mt-8 inline-block text-scout font-semibold hover:underline">
            {{ 'home.badges.see_all'|trans }}
        </a>
    </div>
</section>

{# SEKCJA 4 — MANIFEST #}
<section class="py-20 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <blockquote class="text-3xl sm:text-4xl font-bold text-dark italic">
            {{ 'home.manifest.quote'|trans }}
        </blockquote>
        <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="p-6">
                <div class="w-14 h-14 mx-auto bg-scout/10 rounded-xl flex items-center justify-center">
                    <svg class="w-7 h-7 text-scout" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <p class="mt-4 font-bold text-dark">{{ 'home.manifest.screen_time'|trans }}</p>
            </div>
            <div class="p-6">
                <div class="w-14 h-14 mx-auto bg-blitz/10 rounded-xl flex items-center justify-center">
                    <svg class="w-7 h-7 text-blitz" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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"/>
                    </svg>
                </div>
                <p class="mt-4 font-bold text-dark">{{ 'home.manifest.no_ads'|trans }}</p>
            </div>
            <div class="p-6">
                <div class="w-14 h-14 mx-auto bg-echo/10 rounded-xl flex items-center justify-center">
                    <svg class="w-7 h-7 text-echo" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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"/>
                    </svg>
                </div>
                <p class="mt-4 font-bold text-dark">{{ 'home.manifest.together'|trans }}</p>
            </div>
        </div>
        <a href="{{ path('app_manifest') }}" class="mt-8 inline-block text-scout font-semibold hover:underline">
            {{ 'home.manifest.read_more'|trans }}
        </a>
    </div>
</section>

{% if site_settings.monetizationEnabled %}
{# SEKCJA 5 — CENNIK #}
<section class="py-20 bg-cream">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl sm:text-4xl font-bold text-center text-dark">{{ 'pricing.heading'|trans }}</h2>
        <div class="mt-12">
            {% include '_partials/pricing_cards.html.twig' with {variant: 'compact'} %}
        </div>
        <p class="mt-8 text-center">
            <a href="{{ path('app_pricing') }}" class="text-scout font-semibold hover:underline">{{ 'pricing.compare'|trans }}</a>
        </p>
    </div>
</section>
{% endif %}

{# SEKCJA 6 — SOCIAL PROOF #}
{#<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-bold text-dark">{{ 'home.social_proof.title'|trans }}</h2>

        {% if testimonials|length > 0 %}
        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
            {% for t in testimonials %}
            <div class="bg-cream rounded-2xl p-6">
                <div class="flex items-center gap-1 text-blitz mb-4">
                    {% for s in 1..t.rating %}<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>{% endfor %}
                    {% for s in 1..(5 - t.rating) %}<svg class="w-4 h-4 fill-current text-gray-300" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>{% endfor %}
                </div>
                <p class="text-gray-600 italic">„{{ t.content }}"</p>
                <p class="mt-4 text-sm font-semibold text-dark">{{ t.authorName }}</p>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <div class="mt-12 flex justify-center gap-12">
            <div>
                <p class="text-4xl font-extrabold text-dark">{{ 'home.social_proof.missions_count'|trans }}</p>
                <p class="text-sm text-gray-500">{{ 'home.social_proof.missions_label'|trans }}</p>
            </div>
            <div>
                <p class="text-4xl font-extrabold text-dark">{{ 'home.social_proof.minutes_count'|trans }}</p>
                <p class="text-sm text-gray-500">{{ 'home.social_proof.minutes_label'|trans }}</p>
            </div>
        </div>
    </div>
</section>#}

{# SEKCJA 7 — CTA KOŃCOWY #}
<section class="py-20 bg-gradient-to-b from-cream to-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-bold text-dark">{{ 'home.cta.title'|trans }}</h2>

        {% if site_settings.monetizationEnabled %}
        <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
            <a href="#" class="inline-flex items-center justify-center px-8 py-4 bg-dark text-white text-lg font-bold rounded-xl hover:bg-dark/90 transition">
                <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
                App Store
            </a>
            <a href="#" class="inline-flex items-center justify-center px-8 py-4 bg-dark text-white text-lg font-bold rounded-xl hover:bg-dark/90 transition">
                <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.199l2.302 2.302-2.302 2.302L15.396 12l2.302-2.492zM5.864 2.658L16.8 8.99l-2.302 2.302L5.864 2.658z"/></svg>
                Google Play
            </a>
        </div>
        {% endif %}

        <div class="mt-12 p-8 bg-white rounded-2xl border border-gray-200"
             data-controller="waitlist">
            <p class="text-gray-600 mb-4">{% if site_settings.monetizationEnabled %}{{ 'home.cta.email_prompt_monetized'|trans }}{% else %}{{ 'home.cta.email_prompt'|trans }}{% endif %}</p>
            <form data-waitlist-target="form" data-action="submit->waitlist#submit" class="max-w-md mx-auto">
                <div class="flex flex-col sm:flex-row gap-3">
                    <input type="hidden" name="name" value="">
                    <input type="email" name="email" placeholder="{{ 'home.cta.email_placeholder'|trans }}" required class="flex-1 px-4 py-3 rounded-full border border-gray-300 focus:border-scout focus:ring-2 focus:ring-scout/20 outline-none text-sm">
                    <input type="hidden" name="_token" value="{{ csrf_token('public_form') }}">
                    <button type="submit" data-waitlist-target="submit" class="px-6 py-3 bg-blitz text-white font-semibold rounded-full hover:bg-blitz/90 transition text-sm whitespace-nowrap">
                        {{ 'home.cta.notify_me'|trans }}
                    </button>
                </div>
                <div class="cf-turnstile mt-3" data-sitekey="{{ turnstile_site_key }}" data-theme="light" data-size="flexible"></div>
            </form>
            <p data-waitlist-target="message" class="hidden mt-4 text-echo font-semibold"></p>
        </div>
    </div>
</section>

{% endblock %}