{% 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="relative min-h-[100dvh] flex items-center bg-gradient-to-b from-cream to-white overflow-hidden">
    {# Ambient gradient blobs #}
    <div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full opacity-[0.07] blur-[100px] pointer-events-none" style="background: radial-gradient(circle, var(--color-scout), transparent 70%)"></div>
    <div class="absolute bottom-[-10%] right-[-10%] w-[500px] h-[500px] rounded-full opacity-[0.06] blur-[100px] pointer-events-none" style="background: radial-gradient(circle, var(--color-nova), transparent 70%)"></div>
    <div class="absolute top-[40%] right-[20%] w-[300px] h-[300px] rounded-full opacity-[0.05] blur-[80px] pointer-events-none" style="background: radial-gradient(circle, var(--color-blitz), transparent 70%)"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
        <h1 class="font-display text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tighter text-dark leading-none">
            {{ '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-500 max-w-2xl mx-auto leading-relaxed" style="text-wrap: balance">
            {{ '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 shadow-lg shadow-blitz/25 transition-all duration-300 hover:-translate-y-0.5">
                {{ '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-all duration-300 hover:-translate-y-0.5">
                {{ 'home.hero.cta_how'|trans }}
            </a>
        </div>

        {# Phone mockups — aligned, subtle hover lift #}
        <div class="mt-16 max-w-4xl mx-auto">
            <div class="flex justify-center items-start gap-4 sm:gap-6">
                <div class="w-1/3 transition-transform duration-500 hover:translate-y-[-8px]">
                    {{ picture('images/hero/step_1.png', 'hero_phone', 'TROPO — ekran główny', 'w-full h-auto rounded-2xl shadow-2xl', 'eager', 500, 986) }}
                </div>
                <div class="w-1/3 transition-transform duration-500 hover:translate-y-[-8px]">
                    {{ picture('images/hero/step_2.png', 'hero_phone', 'TROPO — ekran misji', 'w-full h-auto rounded-2xl shadow-2xl', 'eager', 500, 986) }}
                </div>
                <div class="w-1/3 transition-transform duration-500 hover:translate-y-[-8px]">
                    {{ picture('images/hero/step_3.png', 'hero_phone', 'TROPO — ekran misji', 'w-full h-auto rounded-2xl shadow-2xl', 'eager', 500, 986) }}
                </div>
            </div>
        </div>
    </div>
</section>

{# SEKCJA 2 — JAK TO DZIAŁA (numbered steps, not identical cards) #}
<section id="jak-to-dziala" class="py-24 bg-cream scroll-mt-16" data-controller="reveal" data-reveal-stagger-value="true">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="font-display text-3xl sm:text-4xl font-extrabold text-center text-dark tracking-tight">{{ '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">
            {% set steps = [
                {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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>', color: 'scout'},
                {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"/>', color: 'blitz'},
                {icon: '<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"/>', color: 'echo'}
            ] %}
            {% for step in steps %}
            <div class="reveal text-center">
                <div class="w-20 h-20 mx-auto bg-{{ step.color }}/10 rounded-2xl flex items-center justify-center">
                    <svg class="w-10 h-10 text-{{ step.color }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">{{ step.icon|raw }}</svg>
                </div>
                <h3 class="mt-6 text-xl font-bold text-dark font-display">{{ ('home.how_it_works.step' ~ loop.index ~ '_title')|trans }}</h3>
                <p class="mt-3 text-gray-500">{{ ('home.how_it_works.step' ~ loop.index ~ '_desc')|trans }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

{# SEKCJA 3 — POZNAJ DRUŻYNĘ #}
<section class="py-28 bg-white" data-controller="reveal" data-reveal-stagger-value="true">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto">
            <h2 class="font-display text-3xl sm:text-4xl font-extrabold text-dark tracking-tight" style="text-wrap: balance">{{ 'home.team.title'|trans }}</h2>
            <p class="mt-4 text-gray-500">{{ 'home.team.subtitle'|trans }}</p>
        </div>

        <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="reveal char-card group bg-white rounded-2xl p-6 border-2 hover:shadow-xl transition-all duration-300" data-controller="spotlight" style="--char-color: var(--color-{{ char.color }})">
                <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 }})">
                    <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>
                </div>
                <h3 class="mt-4 text-xl font-bold text-center text-dark font-display">{{ 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-cream" data-controller="reveal" data-reveal-stagger-value="true">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal">
        <h2 class="font-display text-3xl sm:text-4xl font-extrabold text-dark tracking-tight" style="text-wrap: balance">{{ '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-5xl font-extrabold text-blitz font-display">{{ badgeCount }}</p>
        <p class="text-sm text-gray-500 mt-1">{{ '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-32 bg-white" data-controller="reveal" data-reveal-stagger-value="true">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal">
        <blockquote class="font-display text-3xl sm:text-5xl font-extrabold text-dark italic leading-tight tracking-tight">
            {{ '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" aria-hidden="true">
                        <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" aria-hidden="true">
                        <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" aria-hidden="true">
                        <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>

{# SEKCJA — DLA CAŁEJ RODZINY #}
<section class="py-16 bg-cream" data-controller="reveal" data-reveal-stagger-value="true">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-display text-3xl sm:text-4xl font-extrabold text-dark tracking-tight" style="text-wrap: balance">{{ 'home.family.title'|trans }}</h2>
        <p class="mt-4 text-gray-500 max-w-2xl mx-auto">{{ 'home.family.subtitle'|trans }}</p>

        <div class="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-6">
            {% set family_items = [
                {icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>', color: 'scout'},
                {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"/>', color: 'blitz'},
                {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"/>', color: 'nova'}
            ] %}
            {% for item in family_items %}
            <div class="reveal bg-white rounded-2xl p-6 border border-gray-100">
                <div class="w-10 h-10 bg-{{ item.color }}/10 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-5 h-5 text-{{ item.color }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">{{ item.icon|raw }}</svg>
                </div>
                <h3 class="text-base font-bold text-dark">{{ ('home.family.' ~ ['profiles_title', 'together_title', 'phone_title'][loop.index0])|trans }}</h3>
                <p class="mt-2 text-sm text-gray-500 leading-relaxed">{{ ('home.family.' ~ ['profiles_desc', 'together_desc', 'phone_desc'][loop.index0])|trans }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

{% if site_settings.monetizationEnabled %}
{# SEKCJA 5 — CENNIK #}
<section class="py-24 bg-white" data-controller="reveal" data-reveal-stagger-value="true">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
        <h2 class="font-display text-3xl sm:text-4xl font-extrabold text-center text-dark tracking-tight">{{ '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 7 — CTA KOŃCOWY #}
<section class="py-28 bg-cream">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-display text-3xl sm:text-4xl font-extrabold text-dark tracking-tight" style="text-wrap: balance">{{ 'home.cta.title'|trans }}</h2>

        <div class="mt-12 p-8 sm:p-10 bg-white rounded-2xl border border-gray-200 shadow-sm"
             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="">
                    <label for="waitlist-email" class="sr-only">{{ 'home.cta.email_placeholder'|trans }}</label>
                    <input type="email" id="waitlist-email" name="email" placeholder="{{ 'home.cta.email_placeholder'|trans }}" required autocomplete="email" class="flex-1 px-4 py-3 rounded-full border border-gray-300 focus:border-scout focus:ring-2 focus:ring-scout/40 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 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" role="status" aria-live="polite"></p>
        </div>
    </div>
</section>

{% endblock %}