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

{% block title %}Business Dashboard | 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') %}
{% set brandCity = company and company.city ? company.city : (profileUser.city ?: 'Deutschland') %}

{% 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-1.5 sm:gap-2 no-underline" href="{{ path('app_feed') }}" aria-label="Zum Feed">
            <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-[#ff7439] font-bold font-headline" href="#wanted-dashboard">Dashboard</a>
        <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="#wanted-analytics">Analytics</a>
        <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="{{ path('app_wanted_plus') }}#wanted-premium">Plus</a>
        <a class="text-neutral-400 font-headline hover:text-white transition-colors" href="#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-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="wanted-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="wanted-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>
</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="#wanted-dashboard" 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;">dashboard</span>
            <span class="font-body text-[10px] font-semibold uppercase tracking-widest mt-1">Dashboard</span>
        </a>
        <a href="#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="{{ path('app_wanted_plus') }}#wanted-premium" 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">workspace_premium</span>
            <span class="font-body text-[10px] font-semibold uppercase tracking-widest mt-1">Plus</span>
        </a>
        <a href="#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 %}