@extends('layouts.app')

@php
    // Generische, marketing-orientierte App-Seite (wiederverwendbares Muster).
    // $appSlug + optional $platform kommen aus der Route. Inhalte aus config/cross_apps.php.
    // Verhalten: Übersicht ($platform=null) = reine Entscheidungs-/Marketingseite OHNE Download/Kauf
    // → leitet zur Plattform-Seite. Plattform-Seiten = Download + Key kaufen + Marketing + Infos.
    $appSlug = $appSlug ?? null;
    $platform = $platform ?? null;
    $app = config('cross_apps.' . $appSlug, []);
    $name = $app['name'] ?? 'App';

    $reg = new \App\Support\SubdomainRegistry();
    $urlAndroid  = $reg->url('android', $appSlug);
    $urlApple    = $reg->url('ios', $appSlug);
    $urlWindows  = $reg->url('windows', $appSlug);
    $urlOverview = $reg->url($appSlug);

    $pa = $app['platforms']['android'] ?? [];
    $pi = $app['platforms']['ios'] ?? [];
    $pw = $app['platforms']['windows'] ?? [];

    // Download-/Store-Daten: Admin-verwaltet (DB) mit Fallback auf config/cross_apps.php.
    $android = \App\Support\Apps\AppCatalog::platform($appSlug, 'android');
    $ios     = \App\Support\Apps\AppCatalog::platform($appSlug, 'ios');
    $windows = \App\Support\Apps\AppCatalog::platform($appSlug, 'windows');

    $apkExists = $android['has_download'];
    $apkSize = $android['size_mb'];
    $apkUrl = $android['download_url'];
    $winOn = $windows['available'];
    $winSize = $windows['size_mb'];
    $winUrl = $windows['download_url'];
    $appStoreUrl = $ios['store_url'];
    $playUrl = $android['store_url'];

    // Download-Buttons nur auf der passenden Plattform-Seite.
    $showApk = $android['available'] && $platform === 'android';
    $showWin = $windows['available'] && $platform === 'windows';

    // Shop-Key
    $product = ! empty($app['shop_slug']) ? \App\Models\ShopProduct::where('slug', $app['shop_slug'])->first() : null;
    $price = $product?->price_formatted;
    $compare = $product?->compare_at_price_formatted;
    $buyUrl = $product ? route('shop.show', $product->slug) : null;
    $accent = $app['accent'] ?? '#2563eb';
    $accent2 = $app['accent_2'] ?? '#7c3aed';

    // Plattform-Header — nur Plattformen, die es wirklich gibt (status != none).
    $navPlats = [];
    if (($ios['status'] ?? 'none') !== 'none') $navPlats['ios']     = ['label' => 'iOS', 'icon' => 'fa-apple', 'url' => $urlApple, 'brand' => true];
    if (($android['status'] ?? 'none') !== 'none') $navPlats['android'] = ['label' => 'Android', 'icon' => 'fa-android', 'url' => $urlAndroid, 'brand' => true];
    if (($windows['status'] ?? 'none') !== 'none') $navPlats['windows'] = ['label' => 'Windows', 'icon' => 'fa-windows', 'url' => $urlWindows, 'brand' => true];

    $platLabel = ['android' => 'Android', 'windows' => 'Windows', 'ios' => 'iOS'];
    $statusWord = ['live' => 'Verfügbar', 'dev' => 'In Kürze', 'planned' => 'Geplant', 'none' => ''];

    // Zwei Bezugswege auf den Plattform-Seiten: (1) direkt bei Kotsch.Tech (Download + Key),
    // (2) im jeweiligen Store. Store-Link erscheint, sobald in der Config gesetzt.
    $storeMeta = [
        'android' => ['label' => 'Google Play', 'icon' => 'fa-google-play', 'url' => $playUrl],
        'windows' => ['label' => 'Microsoft Store', 'icon' => 'fa-microsoft', 'url' => $windows['store_url']],
        'ios' => ['label' => 'App Store', 'icon' => 'fa-apple', 'url' => $appStoreUrl],
    ];
    $store = $storeMeta[$platform] ?? null;
    $directDownload = $showApk
        ? ['url' => $apkUrl, 'label' => 'Android-APK laden', 'sub' => 'APK · ' . $apkSize . ' MB', 'icon' => 'fa-android', 'cls' => 'cv-btn-android']
        : ($showWin ? ['url' => $winUrl, 'label' => 'Windows laden', 'sub' => $winSize . ' MB', 'icon' => 'fa-windows', 'cls' => 'cv-btn-primary'] : null);
@endphp

@section('title', $name . ' – ' . ($app['tagline'] ?? '') . ' | KOTSCH.TECH')
@section('meta_description', $app['subtitle'] ?? ($app['tagline'] ?? ''))
@if (($app['noindex'] ?? false))@section('robots', 'noindex,follow')@endif

@section('content')
@include('apps._styles')
<style>
    .ap-nav{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px;
        padding:12px 22px; margin:0 auto; max-width:1180px; background:#fff; border-bottom:1px solid var(--line); }
    .ap-nav-brand{ display:flex; align-items:center; gap:11px; font-weight:800; color:var(--ink); text-decoration:none; font-size:1.02rem; }
    .ap-nav-brand img{ width:34px; height:34px; border-radius:10px; }
    .ap-nav-plats{ display:flex; gap:8px; flex-wrap:wrap; }
    .ap-nav-plat{ display:inline-flex; align-items:center; gap:.5rem; padding:8px 15px; border-radius:11px; font-weight:800; font-size:.9rem;
        text-decoration:none; color:var(--ink); border:1.5px solid var(--line); background:#fff; transition:transform .15s, border-color .15s, background .15s; }
    .ap-nav-plat:hover{ transform:translateY(-2px); border-color:rgba(37,99,235,.5); }
    .ap-nav-plat.is-current{ background:var(--ink); color:#fff; border-color:var(--ink); }
    .ap-hero-actions .cv-btn{ min-width:0; }
    .ap-choose{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .ap-choice{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:34px 24px;
        background:#fff; border:1px solid var(--line); border-radius:22px; text-decoration:none; box-shadow:var(--u-sh,0 1px 2px rgba(15,23,42,.04));
        transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s; }
    .ap-choice:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(37,99,235,.5); border-color:rgba(37,99,235,.35); }
    .ap-choice i.pf{ font-size:2.6rem; color:var(--ink); }
    .ap-choice strong{ font-size:1.25rem; color:var(--ink); }
    .ap-choice .st{ font-size:.78rem; font-weight:800; padding:4px 12px; border-radius:999px; }
    .ap-choice .st.live{ background:#dcfce7; color:#0f9d58; } .ap-choice .st.dev{ background:#fef3c7; color:#b45309; } .ap-choice .st.planned{ background:#eef2ff; color:#4338ca; }
    .ap-choice .go{ margin-top:6px; font-weight:800; color:var(--blue); font-size:.92rem; }
    .ap-choice.disabled{ pointer-events:none; opacity:.55; }
    .ap-usps{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
    .ap-usp{ display:flex; gap:16px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:20px; }
    .ap-usp i{ font-size:1.5rem; color:#fff; width:52px; height:52px; flex-shrink:0; border-radius:14px; display:grid; place-items:center;
        background:linear-gradient(135deg,var(--blue),{{ $accent2 }}); }
    .ap-usp h3{ font-size:1.1rem; font-weight:800; margin:0 0 5px; color:var(--ink); }
    .ap-usp p{ margin:0; color:#475569; font-size:.95rem; line-height:1.55; }
    .ap-ways{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
    .ap-way{ position:relative; display:flex; flex-direction:column; gap:12px; padding:30px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
    .ap-way-direct{ border-color:rgba(15,157,88,.4); box-shadow:0 22px 50px -34px rgba(15,157,88,.45); }
    .ap-way-tag{ align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:#dcfce7; color:#0f9d58; }
    .ap-way-tag-alt{ background:#eef2ff; color:#4338ca; }
    .ap-way-ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem; color:#fff; background:linear-gradient(135deg,#0f9d58,#3ddc84); }
    .ap-way-ic-alt{ background:linear-gradient(135deg,var(--blue),{{ $accent2 }}); }
    .ap-way h3{ font-size:1.35rem; font-weight:800; color:var(--ink); margin:0; }
    .ap-way p{ margin:0; color:#475569; font-size:.96rem; line-height:1.6; flex:1; }
    .ap-way-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
    @media(max-width:760px){ .ap-ways{ grid-template-columns:1fr; } }
    @media(max-width:760px){
        .ap-choose{ grid-template-columns:1fr; } .ap-usps{ grid-template-columns:1fr; }
        .ap-nav{ flex-direction:column; gap:10px; align-items:stretch; padding:10px 16px; }
        .ap-nav-brand{ justify-content:center; }
        .ap-nav-plats{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
        .ap-nav-plat{ justify-content:center; padding:9px 4px; font-size:.82rem; }
    }
    @media(max-width:520px){
        .cv-wrap{ padding-left:16px; padding-right:16px; }
        .cv-cta-row{ flex-direction:column; }
        .cv-cta-row .cv-btn{ width:100%; }
        .ap-way-actions{ flex-direction:column; }
        .ap-way-actions .cv-btn{ width:100%; }
        .ap-nav-plat span{ display:inline; }
    }
</style>

<div class="cv-wrap" style="--blue: {{ $accent }}; padding-top:0;">

    {{-- Plattform-Header: nur verfügbare Plattformen --}}
    @if (count($navPlats))
    <nav class="ap-nav">
        <a href="{{ $urlOverview }}" class="ap-nav-brand">
            @if (! empty($app['icon']))<img src="{{ asset($app['icon']) }}" alt="{{ $name }}">@endif
            {{ $name }}
        </a>
        <div class="ap-nav-plats">
            @foreach ($navPlats as $key => $np)
                <a href="{{ $np['url'] }}" class="ap-nav-plat {{ $platform === $key ? 'is-current' : '' }}"><i class="fa-brands {{ $np['icon'] }}"></i> {{ $np['label'] }}</a>
            @endforeach
        </div>
    </nav>
    @endif

    <div style="padding-top:24px;">

    @if ($platform === 'android')
        <div class="cv-pbanner cv-pbanner-android"><i class="fab fa-android"></i> <span><strong>{{ $name }} für Android.</strong> @if($buyUrl)Key im Shop kaufen, @endif App laden und mit dem Key freischalten.</span></div>
    @elseif ($platform === 'windows')
        <div class="cv-pbanner cv-pbanner-windows"><i class="fab fa-windows"></i> <span><strong>{{ $name }} für Windows.</strong> @if($winOn)Windows-Installer jetzt direkt laden. @else Der Windows-Download folgt in Kürze. @endif @if($apkExists)Auch für <a href="{{ $urlAndroid }}" style="color:#2563eb;font-weight:800;">Android</a>. @endif</span></div>
    @endif

    {{-- Hero --}}
    <section class="cv-hero">
        <div class="cv-hero-text">
            @if (! empty($app['icon']))<img src="{{ asset($app['icon']) }}" alt="{{ $name }}" class="cv-appicon">@endif
            <span class="cv-eyebrow">{{ $platform ? $platLabel[$platform] . '-App' : 'App für iOS · Android · Windows' }} · KOTSCH.TECH</span>
            <h1>{{ $name }}</h1>
            @if (! empty($app['tagline']))<p class="cv-claim">{{ $app['tagline'] }}</p>@endif
            @if (! empty($app['subtitle']))<p class="cv-sub">{{ $app['subtitle'] }}</p>@endif

            <div class="cv-cta-row ap-hero-actions">
                @if (! $platform)
                    {{-- Übersicht: KEIN Download/Kauf — nur zur Plattform-Wahl --}}
                    <a href="#ap-choose" class="cv-btn cv-btn-primary"><i class="fas fa-download"></i> Plattform wählen & holen</a>
                    <a href="#ap-features" class="cv-btn cv-btn-ghost"><i class="fas fa-list-check"></i> Funktionen</a>
                @else
                    @if ($showApk)<a href="{{ $apkUrl }}" class="cv-btn cv-btn-android"><i class="fab fa-android"></i> Android-APK laden<span class="cv-btn-sub">APK · {{ $apkSize }} MB</span></a>@endif
                    @if ($showWin)<a href="{{ $winUrl }}" class="cv-btn cv-btn-primary"><i class="fab fa-windows"></i> Windows laden<span class="cv-btn-sub">{{ $winSize }} MB</span></a>@endif
                    @if ($platform === 'ios' && $appStoreUrl)<a href="{{ $appStoreUrl }}" target="_blank" rel="noopener" class="cv-btn cv-btn-key"><i class="fab fa-apple"></i> Im App Store</a>@endif
                    @if ($buyUrl)<a href="{{ $buyUrl }}" class="cv-btn cv-btn-key"><i class="fas fa-key"></i> {{ $price ? 'Key kaufen — ' . $price : 'Key kaufen' }} @if($compare)<span class="cv-btn-strike">{{ $compare }}</span>@endif</a>@endif
                @endif
            </div>

            @if (! $platform && $buyUrl)
                <p class="cv-note"><i class="fas fa-circle-info"></i> Kauf & Download findest du auf der jeweiligen Plattform-Seite. Der Key gilt plattformübergreifend.</p>
            @endif

            @if (! empty($app['chips']))
                <div class="cv-chips">@foreach($app['chips'] as $c)<span>{{ $c }}</span>@endforeach</div>
            @endif
        </div>
        @if (! empty($app['hero_shot']))
            <div class="cv-hero-shot"><img src="{{ asset($app['hero_shot']) }}" alt="{{ $name }}" loading="eager"></div>
        @endif
    </section>

    {{-- Zwei Bezugswege — nur auf den Plattform-Seiten (Android/Windows) --}}
    @if ($platform && in_array($platform, ['android', 'windows']) && $store)
    <section class="cv-section" id="ap-ways">
        <h2 class="cv-h2">Zwei Wege — du hast die Wahl</h2>
        <p class="cv-lead">Direkt bei Kotsch.Tech oder bequem über {{ $store['label'] }}.</p>
        <div class="ap-ways">
            <div class="ap-way ap-way-direct">
                <span class="ap-way-tag">Empfohlen · günstiger</span>
                <div class="ap-way-ic"><i class="fas fa-bolt"></i></div>
                <h3>Direkt bei Kotsch.Tech</h3>
                <p>App laden + Lizenz-Key im Shop kaufen. Günstiger Preis — ein Key gilt für alle Plattformen (bis zu 3 Geräte).</p>
                <div class="ap-way-actions">
                    @if ($directDownload)<a href="{{ $directDownload['url'] }}" download class="cv-btn {{ $directDownload['cls'] }}"><i class="fab {{ $directDownload['icon'] }}"></i> {{ $directDownload['label'] }}<span class="cv-btn-sub">{{ $directDownload['sub'] }}</span></a>@endif
                    @if ($buyUrl)<a href="{{ $buyUrl }}" class="cv-btn cv-btn-key"><i class="fas fa-key"></i> {{ $price ? 'Key kaufen — ' . $price : 'Key kaufen' }}</a>@endif
                    @if (! $directDownload && $platform === 'windows')<p class="cv-note" style="margin-top:6px;"><i class="fas fa-circle-info"></i> Der Windows-Installer folgt in Kürze — den Key kannst du schon sichern.</p>@endif
                </div>
            </div>
            <div class="ap-way">
                <span class="ap-way-tag ap-way-tag-alt">Bequem · 1 Tap</span>
                <div class="ap-way-ic ap-way-ic-alt"><i class="fa-brands {{ $store['icon'] }}"></i></div>
                <h3>Im {{ $store['label'] }}</h3>
                <p>Kauf, Installation und Updates komplett über {{ $store['label'] }} — bequem in einem Schritt.</p>
                <div class="ap-way-actions">
                    @if ($store['url'])
                        <a href="{{ $store['url'] }}" target="_blank" rel="noopener" class="cv-btn cv-btn-primary"><i class="fa-brands {{ $store['icon'] }}"></i> Im {{ $store['label'] }} holen</a>
                    @else
                        <span class="cv-btn cv-btn-ghost" style="opacity:.65; cursor:default;"><i class="fa-brands {{ $store['icon'] }}"></i> Bald im {{ $store['label'] }}</span>
                    @endif
                </div>
            </div>
        </div>
    </section>
    @endif

    {{-- Plattform-Wahl (nur Übersicht) — der zentrale Entscheidungspunkt --}}
    @if (! $platform)
    <section class="cv-section" id="ap-choose">
        <h2 class="cv-h2">Für welche Plattform?</h2>
        <p class="cv-lead">Wähle dein Gerät — dort findest du Download{{ $buyUrl ? ' & Key' : '' }}.</p>
        <div class="ap-choose">
            @php
                $choices = [
                    ['key'=>'ios','icon'=>'fa-apple','label'=>'iPhone & iPad','st'=>$pi['status'] ?? 'none','url'=>$urlApple],
                    ['key'=>'android','icon'=>'fa-android','label'=>'Android','st'=>$pa['status'] ?? 'none','url'=>$urlAndroid],
                    ['key'=>'windows','icon'=>'fa-windows','label'=>'Windows','st'=>$pw['status'] ?? 'none','url'=>$urlWindows],
                ];
            @endphp
            @foreach ($choices as $ch)
                @if ($ch['st'] !== 'none')
                    <a href="{{ $ch['url'] }}" class="ap-choice">
                        <i class="fa-brands {{ $ch['icon'] }} pf"></i>
                        <strong>{{ $ch['label'] }}</strong>
                        <span class="st {{ $ch['st'] }}">{{ $statusWord[$ch['st']] }}</span>
                        <span class="go">Öffnen <i class="fa-solid fa-arrow-right"></i></span>
                    </a>
                @endif
            @endforeach
        </div>
    </section>
    @endif

    {{-- Warum / USPs --}}
    @if (! empty($app['usps']))
    <section class="cv-section">
        <h2 class="cv-h2">Warum {{ $name }}?</h2>
        <div class="ap-usps">
            @foreach ($app['usps'] as $u)
                <div class="ap-usp"><i class="fas {{ $u[0] }}"></i><div><h3>{{ $u[1] }}</h3><p>{{ $u[2] }}</p></div></div>
            @endforeach
        </div>
    </section>
    @endif

    {{-- Features --}}
    @if (! empty($app['features']))
    <section class="cv-section" id="ap-features">
        <h2 class="cv-h2">Funktionen</h2>
        <p class="cv-lead">Alles drin — nichts überladen.</p>
        <div class="cv-grid">
            @foreach ($app['features'] as $f)
                <div class="cv-card"><div class="cv-card-ic"><i class="fas {{ $f[0] }}"></i></div><h3>{{ $f[1] }}</h3><p>{{ $f[2] }}</p></div>
            @endforeach
        </div>
    </section>
    @endif

    {{-- Screenshots --}}
    @if (! empty($app['screenshots']))
    <section class="cv-section">
        <h2 class="cv-h2">Ein Blick in die App</h2>
        <div class="cv-shots">
            @foreach ($app['screenshots'] as $s)
                <figure class="cv-shot"><img src="{{ asset($s[0]) }}" alt="{{ $s[1] ?? '' }}" loading="lazy"><figcaption>{{ $s[1] ?? '' }}</figcaption></figure>
            @endforeach
        </div>
    </section>
    @endif

    {{-- So funktioniert's (nur Plattform-Seiten mit Key) --}}
    @if ($platform && $buyUrl)
    <section class="cv-section">
        <h2 class="cv-h2">In 3 Schritten startklar</h2>
        <div class="cv-steps">
            <div class="cv-step"><span class="cv-step-n">1</span><h3>Key kaufen</h3><p>Im Shop bezahlen{{ $price ? ' (' . $price . ')' : '' }} — kein Abo. Den Schlüssel bekommst du <strong>sofort per E-Mail</strong>.</p></div>
            <div class="cv-step"><span class="cv-step-n">2</span><h3>App laden</h3><p>{{ $platform === 'android' ? 'Die Android-APK herunterladen und installieren.' : ($platform === 'windows' ? 'Den Windows-Installer herunterladen und starten.' : 'Im App Store laden.') }}</p></div>
            <div class="cv-step"><span class="cv-step-n">3</span><h3>Key eingeben</h3><p>Schlüssel beim ersten Start eingeben — dauerhaft freigeschaltet, für bis zu 3 Geräte.</p></div>
        </div>
    </section>
    @endif

    {{-- Fakten + FAQ --}}
    @if (! empty($app['facts']) || ! empty($app['faq']))
    <section class="cv-section cv-facts-sec">
        @if (! empty($app['facts']))
        <div>
            <h2 class="cv-h2" style="text-align:left;">Eckdaten</h2>
            <table class="cv-fact-table">
                @foreach ($app['facts'] as $k => $v)<tr><td>{{ $k }}</td><td>{{ $v }}</td></tr>@endforeach
            </table>
        </div>
        @endif
        @if (! empty($app['faq']))
        <div class="cv-faq">
            <h2 class="cv-h2" style="text-align:left;">Häufige Fragen</h2>
            @foreach ($app['faq'] as $qa)<details><summary>{{ $qa[0] }}</summary><p>{{ $qa[1] }}</p></details>@endforeach
        </div>
        @endif
    </section>
    @endif

    {{-- Final CTA --}}
    <section class="cv-final">
        @if (! $platform)
            <h2>Bereit?</h2>
            <p>Wähle deine Plattform.</p>
            <div class="cv-cta-row cv-center"><a href="#ap-choose" class="cv-btn cv-btn-primary"><i class="fas fa-download"></i> Plattform wählen</a></div>
        @else
            <h2>{{ $name }} holen</h2>
            <div class="cv-cta-row cv-center">
                @if ($buyUrl)<a href="{{ $buyUrl }}" class="cv-btn cv-btn-primary"><i class="fas fa-key"></i> {{ $price ? 'Key sichern — ' . $price : 'Key sichern' }}</a>@endif
                @if ($showApk)<a href="{{ $apkUrl }}" class="cv-btn cv-btn-ghost"><i class="fab fa-android"></i> Android-APK</a>@endif
                @if ($showWin)<a href="{{ $winUrl }}" class="cv-btn cv-btn-ghost"><i class="fab fa-windows"></i> Windows</a>@endif
                @if ($platform === 'ios' && $appStoreUrl)<a href="{{ $appStoreUrl }}" target="_blank" rel="noopener" class="cv-btn cv-btn-ghost"><i class="fab fa-apple"></i> App Store</a>@endif
            </div>
            <div style="margin-top:22px;"><a href="{{ $urlOverview }}" style="color:var(--muted); font-weight:700; text-decoration:none;">← {{ $name }} für alle Plattformen</a></div>
        @endif
    </section>

    </div>
</div>
@endsection