@extends('layouts.app')

@php
    use Illuminate\Support\Carbon;
    $registry = new \App\Support\SubdomainRegistry();

    // Anzeige-Sprache aus dem ersten URL-Segment (/en|/de); Standard = de.
    $siteLocale = in_array(request()->segment(1), ['de', 'en'], true) ? request()->segment(1) : 'de';
    $en = $siteLocale === 'en';
    $t  = fn ($de, $enText) => $en ? $enText : $de;

    $mac = ($app['kind'] ?? '') === 'mac';
    $shots = collect($app['screenshots'] ?? []);
    $shotClass = $mac ? 'mac' : 'ios';
    $platform = $mac ? 'Mac' : 'iPhone · iPad';
    $pf = $app['price_formatted'] ?? '';
    $rel = !empty($app['updated']) ? Carbon::parse($app['updated'])->locale($siteLocale)->diffForHumans() : '';
    $verLabel = !empty($app['version'])
        ? $t('in Version ' . $app['version'], 'in version ' . $app['version'])
        : $t('in dieser Version', 'in this version');

    $rating = (float) ($app['rating'] ?? 0);
    $ratingCount = (int) ($app['rating_count'] ?? 0);
    $ratingBadge = '';
    if ($rating > 0) {
        $ratingBadge = number_format($rating, 1, ',', '.');
        if ($ratingCount > 0) { $ratingBadge .= ' · ' . number_format($ratingCount, 0, ',', '.'); }
    }

    $info = [];
    if (!empty($app['seller']))  { $info[$t('Anbieter', 'Seller')] = $app['seller']; }
    if (!empty($app['size']))    { $info[$t('Größe', 'Size')] = $app['size']; }
    if (!empty($app['genre']))   { $info[$t('Kategorie', 'Category')] = $app['genre']; }
    if ($pf !== '')              { $info[$t('Preis', 'Price')] = $pf; }
    if (!empty($app['version'])) { $info[$t('Version', 'Version')] = $app['version']; }
    if ($rel !== '')             { $info[$t('Aktualisiert', 'Updated')] = $rel; }
    if (!empty($app['min_os']))  { $info[$t('Erfordert', 'Requires')] = ($mac ? 'macOS ' : 'iOS ') . $app['min_os'] . ' +'; }
    if (!empty($app['languages'])) { $info[$t('Sprachen', 'Languages')] = $app['languages']; }
    if (!empty($app['content'])) { $info[$t('Altersfreigabe', 'Age rating')] = $app['content']; }

    $metaDesc = \Illuminate\Support\Str::limit(strip_tags($app['description'] ?? ('Die App ' . ($app['name'] ?? '') . ' im App Store.')), 155);
@endphp

@section('title', ($app['name'] ?? 'App') . ' – App Store | Arthur Kotsch')
@section('meta_description', $metaDesc)

@section('structured_data')
    @php
        // Preis aus dem formatierten String ableiten (der App-Store-Service liefert
        // keinen numerischen Wert). Leer/"Gratis" → 0.
        $priceNum = '0';
        if ($pf !== '' && preg_match('/[\d.,]+/', $pf, $pm)) {
            $priceNum = str_replace([',', ' '], ['.', ''], str_replace('.', '', $pm[0]));
        }
        $appSchema = array_filter([
            '@context' => 'https://schema.org',
            '@type' => 'SoftwareApplication',
            'name' => $app['name'] ?? '',
            'description' => $metaDesc,
            'image' => $app['icon'] ?? null,
            'applicationCategory' => $app['genre'] ?? 'MobileApplication',
            'operatingSystem' => $mac ? 'macOS' : 'iOS',
            'url' => $app['url'] ?? null,
            'softwareVersion' => $app['version'] ?? null,
            'author' => ['@type' => 'Person', 'name' => 'Arthur Kotsch'],
            'offers' => [
                '@type' => 'Offer',
                'price' => $priceNum,
                'priceCurrency' => $en ? 'USD' : 'EUR',
            ],
        ], fn ($v) => $v !== null && $v !== '');
        if ($ratingCount > 0 && $rating > 0) {
            $appSchema['aggregateRating'] = [
                '@type' => 'AggregateRating',
                'ratingValue' => number_format($rating, 1, '.', ''),
                'ratingCount' => $ratingCount,
            ];
        }
    @endphp
    <script type="application/ld+json">
        {!! json_encode($appSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}
    </script>
@endsection

@section('content')
<div class="axd">
    <a class="axd-back" href="{{ $registry->url('ios', $en ? 'en' : '') }}"><i class="fa-solid fa-chevron-left"></i> {{ $t('Alle Apps', 'All apps') }}</a>

    <header class="axd-hero">
        @if(!empty($app['icon']))
            <img class="axd-icon" src="{{ $app['icon'] }}" width="128" height="128" decoding="async" referrerpolicy="no-referrer" alt="{{ $app['name'] ?? '' }} Icon">
        @endif
        <div class="axd-hmeta">
            <h1>{{ $app['name'] ?? '' }}</h1>
            <p class="axd-genre">{{ $app['genre'] ?? '' }} · {{ $platform }}</p>
            <div class="axd-badges">
                @if($ratingBadge !== '')
                    <span class="axd-badge"><i class="fa-solid fa-star"></i> {{ $ratingBadge }}</span>
                @endif
                @if($pf !== '')
                    <span class="axd-badge axd-badge--price">{{ $pf }}</span>
                @endif
                @if(!empty($app['version']))
                    <span class="axd-badge">v{{ $app['version'] }}</span>
                @endif
            </div>
            @if(!empty($app['url']))
                <a class="axd-cta" href="{{ $app['url'] }}" target="_blank" rel="noopener"><i class="fa-brands fa-apple"></i> {{ $t('Im App Store laden', 'Get it on the App Store') }}</a>
            @endif
        </div>
    </header>

    @if($shots->isNotEmpty())
        <section class="axd-shots">
            @foreach($shots as $s)
                <img class="axd-shot {{ $shotClass }}" src="{{ $s }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" alt="{{ $app['name'] ?? '' }} Screenshot">
            @endforeach
        </section>
    @endif

    <div class="axd-cols">
        <div class="axd-main">
            @if(!empty($app['notes']))
                <section class="axd-block">
                    <h2>{{ $t('Neu', 'What’s new') }} {{ $verLabel }}</h2>
                    <p class="axd-text">{!! nl2br(e($app['notes'])) !!}</p>
                </section>
            @endif
            @if(!empty($app['description']))
                <section class="axd-block">
                    <h2>{{ $t('Beschreibung', 'Description') }}</h2>
                    <p class="axd-text">{!! nl2br(e($app['description'])) !!}</p>
                </section>
            @endif
        </div>

        <aside class="axd-side">
            <h3>{{ $t('Informationen', 'Information') }}</h3>
            <dl class="axd-info">
                @foreach($info as $k => $v)
                    <dt>{{ $k }}</dt><dd>{{ $v }}</dd>
                @endforeach
            </dl>
        </aside>
    </div>
</div>

<style>
    .axd{max-width:1100px; margin:0 auto; padding:130px 6% 110px; color:#1d1d1f;}
    .axd-back{display:inline-flex; align-items:center; gap:.5rem; color:#007aff; font-weight:800; text-decoration:none; font-size:.9rem; margin-bottom:30px;}
    .axd-back:hover{text-decoration:underline;}
    .axd-hero{display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid #ececf0;}
    .axd-icon{width:128px; height:128px; border-radius:27%; flex:0 0 auto; box-shadow:0 18px 40px -16px rgba(0,0,0,.35);}
    .axd-hmeta{flex:1; min-width:240px;}
    .axd-hmeta h1{margin:0; font-size:clamp(2rem,4.5vw,3rem); font-weight:900; letter-spacing:-1.5px;}
    .axd-genre{margin:.3rem 0 0; color:#86868b; font-weight:700;}
    .axd-badges{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px;}
    .axd-badge{display:inline-flex; align-items:center; gap:.35rem; padding:7px 13px; border-radius:999px; background:#f1f5f9; color:#334155; font-weight:800; font-size:.82rem;}
    .axd-badge i{color:#f59e0b;}
    .axd-badge--price{background:#eff6ff; color:#0c4a6e;}
    .axd-cta{display:inline-flex; align-items:center; gap:9px; padding:13px 28px; border-radius:999px; background:#007aff; color:#fff !important; font-weight:800; text-decoration:none; box-shadow:0 10px 22px -8px rgba(0,122,255,.6); transition:transform .25s, box-shadow .25s;}
    .axd-cta:hover{transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(0,122,255,.7);}

    .axd-shots{display:flex; gap:18px; overflow-x:auto; padding:34px 2px 14px; scroll-snap-type:x mandatory; scrollbar-width:thin;}
    .axd-shot{flex:0 0 auto; scroll-snap-align:start; border-radius:24px; border:1px solid #e5e7eb; background:#f1f5f9; box-shadow:0 20px 40px -24px rgba(15,23,42,.4);}
    .axd-shot.ios{height:460px; border-radius:30px;}
    .axd-shot.mac{height:300px;}

    .axd-cols{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; margin-top:30px;}
    .axd-text{overflow-wrap:anywhere;} .axd-info dd{min-width:0; overflow-wrap:anywhere;}
    .axd-block{margin-bottom:34px;}
    .axd-block h2{font-size:1.5rem; font-weight:900; letter-spacing:-.6px; margin:0 0 14px;}
    .axd-text{margin:0; color:#3a3a3c; line-height:1.75; font-size:1.04rem;}
    .axd-side h3{font-size:1.1rem; font-weight:900; margin:0 0 14px;}
    .axd-info{display:grid; grid-template-columns:auto 1fr; gap:12px 18px; margin:0; padding:22px; border-radius:20px; background:#f5f5f7;}
    .axd-info dt{color:#86868b; font-weight:800; font-size:.86rem;}
    .axd-info dd{margin:0; color:#1d1d1f; font-weight:700; font-size:.92rem; text-align:right;}

    @media (min-width:880px){ .axd-cols{grid-template-columns:1fr 320px;} }
    @media (max-width:880px){
        .axd{padding:110px 22px 80px;}
        .axd-shot.ios{height:380px;}
        .axd-shot.mac{height:220px;}
        .axd-cta{width:100%; justify-content:center;}
    }
</style>
@endsection