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

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

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

{% block stylesheets %}
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .jio-plus-page {
            background-color: #0e0e0e;
            color: #fff;
            font-family: 'Manrope', system-ui, sans-serif;
            min-height: max(884px, 100dvh);
        }
        .jio-plus-page h1, .jio-plus-page h2, .jio-plus-page h3, .jio-plus-page h4 {
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        }
        .kinetic-gradient {
            background: linear-gradient(135deg, #ff9064 0%, #ff7941 100%);
        }
        .gold-shimmer {
            background: linear-gradient(135deg, #f8a91f 0%, #ffb951 50%, #f8a91f 100%);
        }
        .glass-panel {
            background: rgba(38, 38, 38, 0.7);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }
        .glass-card {
            background: rgba(38, 38, 38, 0.4);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#ff9064',
                        surface: '#0e0e0e',
                        'outline-variant': '#484847',
                        'primary-container': '#ff7941',
                        'on-primary-fixed-variant': '#531900',
                        'tertiary-fixed': '#f8a91f',
                        'on-surface': '#ffffff',
                        'on-error-container': '#ffa8a3',
                        'surface-container-highest': '#262626',
                        'on-tertiary-fixed-variant': '#593900',
                        background: '#0e0e0e',
                        'surface-bright': '#2c2c2c',
                        'on-primary-fixed': '#000000',
                        'surface-tint': '#ff9064',
                        'secondary-container': '#9a4600',
                        'secondary-dim': '#ee8137',
                        'on-secondary-container': '#fff6f2',
                        'on-tertiary-container': '#4d3100',
                        'on-tertiary-fixed': '#301c00',
                        'primary-fixed': '#ff7941',
                        'on-secondary': '#451c00',
                        secondary: '#f8883e',
                        tertiary: '#ffb951',
                        'surface-variant': '#262626',
                        'inverse-surface': '#fcf9f8',
                        'secondary-fixed': '#ffc5a5',
                        'on-tertiary': '#5a3900',
                        'error-dim': '#d7383b',
                        'on-secondary-fixed-variant': '#843c00',
                        'on-secondary-fixed': '#582500',
                        'inverse-primary': '#a83a00',
                        'tertiary-container': '#f8a91f',
                        'surface-container-low': '#131313',
                        'on-error': '#490006',
                        error: '#ff716c',
                        outline: '#767575',
                        'on-surface-variant': '#adaaaa',
                        'on-primary-container': '#431200',
                        'on-primary': '#571a00',
                        'on-background': '#ffffff',
                        'primary-fixed-dim': '#ff5e07',
                        'tertiary-fixed-dim': '#e89b09',
                        'surface-container-high': '#20201f',
                        'inverse-on-surface': '#565555',
                        'surface-container': '#1a1a1a',
                        'primary-dim': '#ff7439',
                        'surface-dim': '#0e0e0e',
                        'error-container': '#9f0519',
                        'surface-container-lowest': '#000000',
                        'tertiary-dim': '#e89b09',
                        'secondary-fixed-dim': '#ffb285'
                    },
                    fontFamily: {
                        headline: ['Plus Jakarta Sans', 'sans-serif'],
                        body: ['Manrope', 'sans-serif'],
                        label: ['Manrope', 'sans-serif']
                    },
                    borderRadius: { DEFAULT: '0.25rem', lg: '0.5rem', xl: '0.75rem', '2xl': '1rem', full: '9999px' },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-10px)' }
                        }
                    },
                    animation: { float: 'float 6s ease-in-out infinite' }
                }
            }
        };
    </script>
{% endblock %}

{% block body %}
<nav class="fixed top-0 w-full z-50 bg-[#0e0e0e]/80 backdrop-blur-xl shadow-[0_32px_64px_rgba(0,0,0,0.08)]">
    <div class="flex justify-between items-center px-6 h-20 w-full max-w-screen-2xl mx-auto">
        <div class="flex items-center gap-3 min-w-0">
            <a href="{{ path('app_profile_show', { id: profileUser.id }) }}" class="text-on-surface hover:bg-white/5 transition-colors p-2 rounded-full shrink-0" aria-label="Zurueck">
                <span class="material-symbols-outlined">arrow_back</span>
            </a>
            <a href="{{ path('app_feed') }}" class="flex items-center gap-2 min-w-0">
                <img src="{{ asset('assets/img/top_logo.png') }}" alt="JI:O" class="h-8 w-8 rounded-lg object-contain shrink-0">
                <span class="font-headline font-black italic text-xl sm:text-2xl tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-[#ff9064] to-[#ff7941] truncate">JI:O+</span>
            </a>
        </div>
        <div class="hidden md:flex items-center gap-6 text-sm">
            <a class="text-[#ff7439] font-bold font-headline" href="#jio-dashboard">Dashboard</a>
            <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="#jio-analytics">Analytics</a>
            <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="#jio-premium">Plus</a>
            <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="#jio-members">Mitglieder</a>
            <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="{{ path('app_profile_edit') }}">Einstellungen</a>
        </div>
        <div class="flex items-center gap-3 shrink-0">
            <div class="text-right hidden sm:block max-w-[140px]">
                <p class="text-sm font-bold text-on-surface truncate">{{ brandName }}</p>
                <p class="text-[10px] text-primary uppercase tracking-widest font-semibold truncate">Business</p>
            </div>
            <div class="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-surface-container-highest shrink-0">
                {% if profileUser.avatarPath %}
                    <img src="{{ profileUser.avatarPath }}" alt="" class="w-full h-full object-cover">
                {% else %}
                    <div class="w-full h-full grid place-items-center text-sm font-bold">{{ brandName|slice(0, 1)|upper }}</div>
                {% endif %}
            </div>
        </div>
    </div>
</nav>

<main class="pt-28 pb-40 px-6 max-w-screen-2xl mx-auto">

    {# —— Dashboard (Stitch 2) —— #}
    <section id="jio-dashboard" class="mb-16 scroll-mt-24">
        <div class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div>
                <h1 class="font-headline text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight mb-2">
                    Willkommen zurueck, <span class="text-primary">{% if brandName|length > 26 %}{{ brandName|slice(0, 26) }}…{% else %}{{ brandName }}{% endif %}</span>.
                </h1>
                <p class="font-body text-on-surface-variant text-base md:text-lg">Dein Ueberblick — Performance und aktive Angebote auf einen Blick.</p>
            </div>
            <div class="flex flex-wrap gap-3">
                <button type="button" class="bg-surface-container-highest text-on-surface px-5 py-3 rounded-full font-semibold flex items-center gap-2 hover:bg-white/10 transition-all active:scale-95">
                    <span class="material-symbols-outlined">calendar_month</span>
                    Buchungen
                </button>
                <a href="{{ path('app_video_upload') }}" class="kinetic-gradient text-on-primary px-5 py-3 rounded-full font-bold flex items-center gap-2 shadow-[0_8px_24px_rgba(255,144,100,0.3)] active:scale-95 transition-transform no-underline">
                    <span class="material-symbols-outlined">add_circle</span>
                    Video hochladen
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <div class="md:col-span-4 bg-surface-container-low p-6 md:p-8 rounded-xl flex flex-col justify-between relative overflow-hidden group">
                <div class="absolute -right-8 -top-8 w-40 h-40 bg-primary/10 blur-[60px] rounded-full"></div>
                <div>
                    <div class="flex justify-between items-start mb-6">
                        <span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full">Boost</span>
                        <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
                    </div>
                    <h2 class="text-4xl md:text-5xl font-headline font-black mb-1">94<span class="text-2xl text-primary-dim">/100</span></h2>
                    <p class="font-body text-on-surface-variant">Sichtbarkeits-Score</p>
                </div>
                <div class="mt-8">
                    <div class="h-2 w-full bg-surface-container rounded-full mb-3 overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-primary to-tertiary w-[94%] rounded-full shadow-[0_0_12px_rgba(255,144,100,0.5)]"></div>
                    </div>
                    <p class="text-sm text-on-surface-variant">Du liegst in den oberen <span class="text-on-surface font-bold">10&nbsp;%</span> in <span class="text-on-surface font-bold">{{ brandCity }}</span>.</p>
                </div>
            </div>

            <div id="jio-analytics" class="md:col-span-8 bg-surface-container-low p-6 md:p-8 rounded-xl scroll-mt-24">
                <div class="flex flex-wrap justify-between items-center gap-4 mb-8">
                    <div>
                        <h3 class="font-headline text-xl font-bold">Umsatz (Demo)</h3>
                        <p class="text-sm text-on-surface-variant">Verlauf — Platzhalter bis Analytics live ist</p>
                    </div>
                    <div class="text-right">
                        <p class="text-2xl font-bold font-headline">24.850&nbsp;EUR</p>
                        <p class="text-xs text-primary font-bold">+ 12,4 % zum Vormonat</p>
                    </div>
                </div>
                <div class="h-48 w-full flex items-end gap-2 md:gap-4">
                    <div class="flex-1 bg-surface-container-high hover:bg-primary/20 transition-colors rounded-t-lg h-[40%] relative group"></div>
                    <div class="flex-1 bg-surface-container-high hover:bg-primary/20 transition-colors rounded-t-lg h-[60%]"></div>
                    <div class="flex-1 bg-surface-container-high hover:bg-primary/20 transition-colors rounded-t-lg h-[55%]"></div>
                    <div class="flex-1 bg-surface-container-high hover:bg-primary/20 transition-colors rounded-t-lg h-[80%]"></div>
                    <div class="flex-1 bg-gradient-to-t from-primary/40 to-primary rounded-t-lg h-[95%] shadow-[0_0_20px_rgba(255,144,100,0.2)]"></div>
                    <div class="flex-1 bg-surface-container-high hover:bg-primary/20 transition-colors rounded-t-lg h-[70%]"></div>
                </div>
                <div class="flex justify-between mt-4 px-2">
                    {% for m in ['Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov'] %}
                        <span class="text-[10px] uppercase tracking-widest {% if m == 'Okt' %}text-primary font-bold{% else %}text-neutral-500 font-bold{% endif %}">{{ m }}</span>
                    {% endfor %}
                </div>
            </div>

            <div id="jio-members" class="md:col-span-12 scroll-mt-24">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="font-headline text-2xl font-extrabold tracking-tight">Aktive Services</h3>
                    <a href="{{ path('app_profile_edit') }}" class="text-primary font-bold text-sm hover:underline">Alle verwalten</a>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-surface-container p-6 rounded-xl group transition-all hover:bg-surface-container-high">
                        <div class="aspect-video mb-4 rounded-lg overflow-hidden bg-surface-container-lowest">
                            <img alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDc9P2iuEkXwNotD42eQO-m5sNO1BNvXKrhbSkvWLZVzWa8GV1OihLzlpI2EvqlMw60uqdBMcoxW65--7ntz2_mjDgBvN541n1ivHOAkz7qVBRyI4RY_dmbO5TgXqRML0d-y3yAtnUiFswMjIfXy8utafG14XfmvGmLrha8YfkH9Zeet3A-qXDuAMgNMxo5tEVuB82ASk5dCuRMmqg1k1zzGS9uJ6lQLTPEOqMS-tJ_gn-HI0OWIhg5H84BSuCP24khCIxOrnaijOQ">
                        </div>
                        <div class="flex justify-between items-start mb-2 gap-2">
                            <h4 class="font-bold text-lg leading-tight">Commercial Produktfotografie</h4>
                            <span class="bg-green-500/10 text-green-400 text-[10px] font-bold uppercase px-2 py-1 rounded shrink-0">Aktiv</span>
                        </div>
                        <div class="flex items-center justify-between text-on-surface-variant text-sm">
                            <span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">group</span> 12 Buchungen</span>
                            <span class="text-on-surface font-bold">ab 120&nbsp;EUR/h</span>
                        </div>
                    </div>
                    <div class="bg-surface-container p-6 rounded-xl group transition-all hover:bg-surface-container-high">
                        <div class="aspect-video mb-4 rounded-lg overflow-hidden bg-surface-container-lowest">
                            <img alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCJzUjaKarYOwa01laFmWoF4NM62UG91MtDg8-_7IrFSaC3KRPwuGujVRlYSszt-hfAVwaXpZgI0-7W9GaTNa6nmOlFDEQbYr1rP7DGzxlFKnXixoCuATZBKkxwjzaNfPeSpFwO4l6_lxFfOScG3yC0lnnW56NX0Qsv4Hq8UD0iwviwtRYC7TaJR1FBWP4-bNoggF3wLrzY6bW8NnYCgY_DoP8ftg7ZJvRI_0wFpXZJQ6TlF1FaA8R3OUmg3OnYDj6yI7oiwFJ062c">
                        </div>
                        <div class="flex justify-between items-start mb-2 gap-2">
                            <h4 class="font-bold text-lg leading-tight">4K Markenfilm &amp; Werbevideo</h4>
                            <span class="bg-green-500/10 text-green-400 text-[10px] font-bold uppercase px-2 py-1 rounded shrink-0">Aktiv</span>
                        </div>
                        <div class="flex items-center justify-between text-on-surface-variant text-sm">
                            <span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">group</span> 8 Buchungen</span>
                            <span class="text-on-surface font-bold">ab 3.500&nbsp;EUR</span>
                        </div>
                    </div>
                    <div class="bg-surface-container p-6 rounded-xl group transition-all hover:bg-surface-container-high">
                        <div class="aspect-video mb-4 rounded-lg overflow-hidden bg-surface-container-lowest">
                            <img alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDQ4C2q_jWERJdCvR7y2zQq_PVm4Y5BhIxnLPL_GLdZTVVMhDumDjuaVMb_-kRNrYAyQnw27xJzzitSTGul388DBIZS7eIW9kgGCeYHdOoW5A024C0bnkCn0Bk0_oMb0cNvw0eDIeLrG_jFZjWdoMvI6DZiWY0Z8OvSd-Gsd98HPSp2xgmNhgd0xmKkLR1DDtCvv47CVDQeNzig8wJKr-0ZkxffqH1J_O6vEDLul2dbuMxygeHahtrXzMejiUss9hRnLwzF5G4OQsE">
                        </div>
                        <div class="flex justify-between items-start mb-2 gap-2">
                            <h4 class="font-bold text-lg leading-tight">Workshop Kreativ &amp; Strategie</h4>
                            <span class="bg-primary/10 text-primary text-[10px] font-bold uppercase px-2 py-1 rounded shrink-0">Geboostet</span>
                        </div>
                        <div class="flex items-center justify-between text-on-surface-variant text-sm">
                            <span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">group</span> 24 Buchungen</span>
                            <span class="text-on-surface font-bold">250&nbsp;EUR/h</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {# —— Marketing / Premium (Stitch 1) —— #}
    <section id="jio-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="#jio-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 class="mb-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="jio-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' %}

{# Bottom nav (Stitch 1) — mobile #}
<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="#jio-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="#jio-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="#jio-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="#jio-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 %}