{% extends 'base.html.twig' %}

{% block title %}JI:O+ Mitgliedschaft | JI:O{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}wanted-plus-page stitch-page bg-surface text-on-surface{% endblock %}

{% set brandName = company and company.name ? company.name : (profileUser.companyName ?: 'Unternehmen') %}

{% block stylesheets %}
    {% include 'business/_jio_business_styles.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% include 'business/_jio_business_tailwind.html.twig' %}
{% endblock %}

{% block body %}
<header class="feed-shell-header">
    <nav class="feed-shell-topnav jio-plus-topnav">
        <div class="jio-plus-nav-side jio-plus-nav-side--start">
            <a href="{{ path('app_profile_show', { id: profileUser.id }) }}" class="feed-shell-location-btn no-underline inline-flex" aria-label="Zurueck">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
        </div>
        <a class="feed-shell-logo-wrap jio-plus-nav-brand inline-flex items-center gap-0.5 sm:gap-1 no-underline" href="{{ path('app_feed') }}" aria-label="Zum Feed — JI:O+">
            <img src="{{ asset('assets/img/top_logo.png') }}" alt="JI:O">
            <span class="font-headline font-black italic text-[2rem] sm:text-[2.5rem] leading-none text-transparent bg-clip-text bg-gradient-to-r from-[#ff9064] to-[#ff7941] self-center">+</span>
        </a>
        <div class="jio-plus-nav-side jio-plus-nav-side--end">
            <div class="text-right hidden sm:block max-w-[100px]">
                <p class="text-xs font-bold text-white truncate">{{ brandName }}</p>
                <p class="text-[9px] text-[#ff9064] uppercase tracking-widest font-semibold truncate">Business</p>
            </div>
            <div class="feed-shell-user shrink-0">
                {% if profileUser.avatarPath %}
                    <img src="{{ profileUser.avatarPath }}" alt="">
                {% else %}
                    <span class="text-xs font-bold">{{ brandName|slice(0, 1)|upper }}</span>
                {% endif %}
            </div>
        </div>
    </nav>
    <nav class="hidden md:flex items-center justify-center gap-6 text-sm border-t border-white/10 bg-[rgba(14,14,14,0.92)] backdrop-blur-xl py-2.5 px-4" aria-label="Business Navigation">
        <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="{{ path('app_business_dashboard') }}#wanted-dashboard">Dashboard</a>
        <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="{{ path('app_business_dashboard') }}#wanted-analytics">Analytics</a>
        <a class="text-[#ff7439] font-bold font-headline" href="#wanted-premium">Plus</a>
        <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="{{ path('app_business_dashboard') }}#wanted-members">Mitglieder</a>
        <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="{{ path('app_profile_edit') }}">Einstellungen</a>
    </nav>
</header>

<main class="pt-[92px] md:pt-[118px] pb-40 px-6 max-w-screen-2xl mx-auto">
    <section id="wanted-premium" class="relative mb-24 flex flex-col lg:flex-row items-center gap-12 overflow-hidden scroll-mt-24">
        <div class="flex-1 z-10 w-full">
            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-surface-container-highest mb-6">
                <span class="material-symbols-outlined text-tertiary" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
                <span class="text-xs font-bold uppercase tracking-[0.2em] text-tertiary">Premium</span>
            </div>
            <h2 class="text-4xl md:text-6xl lg:text-7xl font-headline font-extrabold tracking-tighter leading-[0.95] mb-8">
                JI:O+<br>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-tertiary to-primary-container">Mehr Reichweite, mehr Auftritte</span>
            </h2>
            <p class="text-lg md:text-xl text-on-surface-variant max-w-xl mb-10 leading-relaxed">
                Cinematische Sichtbarkeit und starke Tools fuer Kuratoren im lokalen Markt — priorisiert im Feed, mehr Upload-Volumen, Profi-Features.
            </p>
            <div class="flex flex-wrap gap-4">
                <a href="#wanted-final-cta" class="kinetic-gradient text-on-primary-container px-8 py-4 rounded-full font-bold text-lg transition-transform active:scale-95 shadow-[0_0_20px_rgba(255,144,100,0.3)] no-underline inline-flex items-center justify-center">Jetzt upgraden</a>
                <a href="{{ path('app_feed') }}" class="bg-surface-container-highest text-on-surface px-8 py-4 rounded-full font-bold text-lg hover:bg-surface-bright transition-all no-underline inline-flex items-center justify-center">Feed ansehen</a>
            </div>
        </div>
        <div class="flex-1 relative w-full aspect-video rounded-xl overflow-hidden border-4 border-surface-container-highest shadow-2xl">
            <div class="absolute inset-0 bg-gradient-to-t from-surface to-transparent z-10"></div>
            <img class="w-full h-full object-cover" alt="" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3khW9MJjCyaKMZ_sZ5yck69toSTeHJVhNKjYqNFwNIoT2Fv9TtgqZ-Mn_9m_QgMo_s7DEArSGGNwCSDg7tbqpOskWBcnBWHIFCoGlmcRRebCQSJosgv5hmqu229L1EFpnYlzNLjmXH1HumuV_aCNk439kbEUXccB9dVMdVZVM_4lC6RY-NjYnj3hKrwUCDDILur3AE-v8FDsqArfIOl-v1uYavoBZ1GcOP8lr7P_yFEY6J0j5UQVtuFk_pfd7zfSIH2vXP5-PsGM">
            <div class="absolute bottom-6 left-6 z-20 flex items-center gap-3">
                <div class="w-12 h-12 rounded-full kinetic-gradient flex items-center justify-center">
                    <span class="material-symbols-outlined text-on-primary">play_arrow</span>
                </div>
                <div>
                    <p class="text-sm font-bold">JI:O+ Reel</p>
                    <p class="text-xs text-on-surface-variant">Demo • Premium Story</p>
                </div>
            </div>
        </div>
    </section>

    <section class="grid grid-cols-1 md:grid-cols-12 gap-6 mb-24">
        <div class="md:col-span-7 bg-surface-container rounded-xl p-8 flex flex-col justify-between min-h-[320px] md:min-h-[400px] relative overflow-hidden group">
            <div class="relative z-10">
                <span class="material-symbols-outlined text-primary text-4xl mb-6">visibility</span>
                <h3 class="text-2xl md:text-3xl font-headline font-bold mb-4">Maximale Sichtbarkeit</h3>
                <p class="text-on-surface-variant max-w-sm">Prioritaet im kinetic Feed und in der Suche — mehr passende Kunden sehen deine Clips.</p>
            </div>
            <div class="mt-8 flex flex-wrap gap-3 relative z-10">
                <span class="px-4 py-2 rounded-lg bg-surface-container-highest border border-outline-variant/20 text-sm font-semibold">Featured im Feed</span>
                <span class="px-4 py-2 rounded-lg bg-surface-container-highest border border-outline-variant/20 text-sm font-semibold">Prioritaet Suche</span>
            </div>
            <img class="absolute right-0 bottom-0 w-1/2 h-full object-cover opacity-20 group-hover:opacity-40 transition-opacity pointer-events-none" alt="" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAPJNlPiXP4gmQGN_RhdF4PGahn1DzUATeNjLmpr4AvprQXPRHrnr3_TQ1fYkGibwE7gCKBvYXO0ZZLE5Rd-MgBl6HNa8O4faccbScf8-f0aYoIk-cQuJyYT-V3qwxB915PdnrGVsOXFAVkiiSsuJow-O8rR_AmwRkeTorump8zE8JHtcSp1a-1X5QgUw_4Vm3iZkux7ImMLMqMPKBTlOq_6hJkwhaoIwwt87PIR1JE-U1Um-OwIIn31Lb3W8zYY6Wus7p8Upf8IP4">
        </div>
        <div class="md:col-span-5 bg-surface-container-high rounded-xl p-8 flex flex-col justify-center text-center relative overflow-hidden">
            <div class="gold-shimmer w-20 h-20 rounded-2xl mx-auto mb-8 flex items-center justify-center rotate-3">
                <span class="material-symbols-outlined text-on-surface text-4xl" style="font-variation-settings: 'FILL' 1;">movie</span>
            </div>
            <h3 class="text-2xl font-headline font-bold mb-4">High-Performance Video</h3>
            <p class="text-on-surface-variant mb-6">Groessere Uploads, hoehere Qualitaet — zeig dein Handwerk ohne Kompromisse.</p>
            <div class="text-4xl font-black text-tertiary">10&nbsp;GB <span class="text-sm font-medium text-on-surface-variant uppercase tracking-widest">Limit</span></div>
        </div>
        <div class="md:col-span-5 bg-surface-container-highest rounded-xl p-8 overflow-hidden relative group">
            <span class="material-symbols-outlined text-primary-container text-4xl mb-6">bolt</span>
            <h3 class="text-2xl font-headline font-bold mb-4">Pro Buchungen</h3>
            <ul class="space-y-4">
                <li class="flex items-center gap-3 text-on-surface-variant">
                    <span class="material-symbols-outlined text-primary text-sm">check_circle</span>
                    Automatisierte Workflows
                </li>
                <li class="flex items-center gap-3 text-on-surface-variant">
                    <span class="material-symbols-outlined text-primary text-sm">check_circle</span>
                    Smart Scheduling
                </li>
                <li class="flex items-center gap-3 text-on-surface-variant">
                    <span class="material-symbols-outlined text-primary text-sm">check_circle</span>
                    Zahlungen integriert
                </li>
            </ul>
            <div class="absolute -right-10 -bottom-10 w-40 h-40 bg-primary/10 rounded-full blur-3xl group-hover:bg-primary/20 transition-all"></div>
        </div>
        <div class="md:col-span-7 bg-surface-container rounded-xl p-8 flex flex-col lg:flex-row items-center gap-8 relative overflow-hidden">
            <div class="flex-1">
                <h3 class="text-2xl md:text-3xl font-headline font-bold mb-4">Service-Skalierung</h3>
                <p class="text-on-surface-variant mb-6">Unbegrenzte Listings fuer Nischen und Spezialangebote — wachse mit JI:O+.</p>
                <span class="inline-flex items-center gap-2 text-primary font-bold">Mehr erfahren <span class="material-symbols-outlined">arrow_forward</span></span>
            </div>
            <div class="hidden lg:grid grid-cols-2 gap-2 opacity-40 shrink-0">
                <div class="w-16 h-16 rounded-lg bg-primary-container"></div>
                <div class="w-16 h-16 rounded-lg bg-surface-container-highest"></div>
                <div class="w-16 h-16 rounded-lg bg-surface-container-highest"></div>
                <div class="w-16 h-16 rounded-lg bg-primary"></div>
            </div>
        </div>
    </section>

    <section id="wanted-compare" class="mb-24 scroll-mt-24">
        <h2 class="text-3xl md:text-4xl font-headline font-bold text-center mb-12">Vergleich</h2>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-separate border-spacing-y-3 min-w-[520px]">
                <thead>
                    <tr class="text-on-surface-variant uppercase text-xs tracking-widest font-bold">
                        <th class="px-6 py-3">Funktion</th>
                        <th class="px-6 py-3">Basic</th>
                        <th class="px-6 py-3 text-primary">JI:O+</th>
                    </tr>
                </thead>
                <tbody class="font-body text-sm md:text-base">
                    <tr class="bg-surface-container-low rounded-xl">
                        <td class="px-6 py-4 rounded-l-xl font-bold">Video-Upload</td>
                        <td class="px-6 py-4">500&nbsp;MB / HD</td>
                        <td class="px-6 py-4 rounded-r-xl font-bold text-primary">10&nbsp;GB / 4K</td>
                    </tr>
                    <tr class="bg-surface-container-low rounded-xl">
                        <td class="px-6 py-4 rounded-l-xl font-bold">Service-Listings</td>
                        <td class="px-6 py-4">max. 3</td>
                        <td class="px-6 py-4 rounded-r-xl font-bold text-primary">Unbegrenzt</td>
                    </tr>
                    <tr class="bg-surface-container-low rounded-xl">
                        <td class="px-6 py-4 rounded-l-xl font-bold">Ranking</td>
                        <td class="px-6 py-4">Standard</td>
                        <td class="px-6 py-4 rounded-r-xl font-bold text-primary">Prioritaet</td>
                    </tr>
                    <tr class="bg-surface-container-low rounded-xl">
                        <td class="px-6 py-4 rounded-l-xl font-bold">Analytics</td>
                        <td class="px-6 py-4">Basis</td>
                        <td class="px-6 py-4 rounded-r-xl font-bold text-primary">Echtzeit</td>
                    </tr>
                    <tr class="bg-surface-container-low rounded-xl">
                        <td class="px-6 py-4 rounded-l-xl font-bold">Buchungsgebuehr</td>
                        <td class="px-6 py-4">12&nbsp;%</td>
                        <td class="px-6 py-4 rounded-r-xl font-bold text-primary">8&nbsp;%</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <section id="wanted-final-cta" class="bg-surface-container-high rounded-3xl p-8 md:p-16 lg:p-24 text-center relative overflow-hidden scroll-mt-24">
        <div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
            <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary rounded-full blur-[120px]"></div>
            <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-tertiary rounded-full blur-[120px]"></div>
        </div>
        <div class="relative z-10">
            <h2 class="text-3xl md:text-5xl lg:text-6xl font-headline font-extrabold mb-6">Bereit fuer den naechsten Schritt?</h2>
            <p class="text-lg md:text-xl text-on-surface-variant max-w-2xl mx-auto mb-10">Werde Teil der JI:O+ Community und nutze Motion fuer dein lokales Business.</p>
            <div class="flex flex-col items-center gap-4">
                <span class="relative kinetic-gradient text-on-primary-container px-10 py-5 rounded-full font-bold text-lg md:text-xl group transition-all inline-block">
                    <span class="absolute inset-0 rounded-full kinetic-gradient animate-ping opacity-20 scale-110 group-hover:opacity-40 pointer-events-none"></span>
                    <span class="relative">Upgrade — demnaechs buchbar</span>
                </span>
                <p class="text-sm text-on-surface-variant">Ab ca. 49&nbsp;EUR/Monat • Kuendbar • Team-Plaene geplant</p>
            </div>
        </div>
    </section>
</main>

{% include '_legal_footer_compact.html.twig' %}

<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center pb-8 md:hidden pointer-events-none">
    <div class="pointer-events-auto bg-[#262626]/70 backdrop-blur-3xl w-[92%] max-w-md rounded-full px-2 py-3 shadow-[0_32px_64px_rgba(0,0,0,0.2)] flex justify-around items-center mx-auto">
        <a href="{{ path('app_business_dashboard') }}#wanted-dashboard" class="flex flex-col items-center justify-center text-neutral-500 hover:text-white transition-all min-w-[56px]">
            <span class="material-symbols-outlined text-2xl">dashboard</span>
            <span class="font-body text-[10px] font-semibold uppercase tracking-widest mt-1">Dashboard</span>
        </a>
        <a href="{{ path('app_business_dashboard') }}#wanted-analytics" class="flex flex-col items-center justify-center text-neutral-500 hover:text-white transition-all min-w-[56px]">
            <span class="material-symbols-outlined text-2xl">insights</span>
            <span class="font-body text-[10px] font-semibold uppercase tracking-widest mt-1">Analytics</span>
        </a>
        <a href="#wanted-premium" class="flex flex-col items-center justify-center text-[#ff7439] drop-shadow-[0_0_8px_rgba(255,116,57,0.5)] min-w-[56px]">
            <span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
            <span class="font-body text-[10px] font-semibold uppercase tracking-widest mt-1">Plus</span>
        </a>
        <a href="{{ path('app_business_dashboard') }}#wanted-members" class="flex flex-col items-center justify-center text-neutral-500 hover:text-white transition-all min-w-[56px]">
            <span class="material-symbols-outlined text-2xl">group</span>
            <span class="font-body text-[10px] font-semibold uppercase tracking-widest mt-1">Services</span>
        </a>
        <a href="{{ path('app_profile_edit') }}" class="flex flex-col items-center justify-center text-neutral-500 hover:text-white transition-all min-w-[56px]">
            <span class="material-symbols-outlined text-2xl">settings</span>
            <span class="font-body text-[10px] font-semibold uppercase tracking-widest mt-1">Settings</span>
        </a>
    </div>
</nav>
{% endblock %}