@extends('layouts.app')

@php
    // 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;

    $apps  = collect($apps ?? []);
    $total = $apps->count();
    $categories = $apps->pluck('genre')->filter()->unique()->sort()->values();
    $hasIos = $apps->where('kind', 'ios')->isNotEmpty();
    $hasMac = $apps->where('kind', 'mac')->isNotEmpty();
    $rel = fn ($d) => $d ? \Illuminate\Support\Carbon::parse($d)->locale($siteLocale)->diffForHumans() : '';
@endphp

@section('title', $t('Apps für iPhone, iPad & Mac | Arthur Kotsch', 'Apps for iPhone, iPad & Mac | Arthur Kotsch'))
@section('meta_description', $t('Alle Apps von Arthur Kotsch — live aus dem App Store, mit echten Icons & Screenshots. Suchen & nach Kategorie filtern.', 'All of Arthur Kotsch’s apps — live from the App Store, with real icons & screenshots. Search & filter by category.'))

@section('content')
<header class="ax-hero">
    <span class="ax-kicker"><i class="fa-brands fa-apple"></i> iOS &amp; macOS · App Store</span>
    <h1>{{ $t('Apps für', 'Apps for') }} <span>iPhone, iPad &amp; Mac.</span></h1>
    <p class="ax-lead">{{ $t('Alle meine Apps —', 'All my apps —') }} <strong>{{ $t('live aus dem App Store', 'live from the App Store') }}</strong>{{ $t(', mit echten Icons & Screenshots.', ', with real icons & screenshots.') }}</p>
    @if($total)<span class="ax-livecount"><span class="ax-dot"></span>{{ $total }} {{ $t('Apps live', 'apps live') }}</span>@endif
</header>

@if($total === 0)
    <section class="ax-empty"><i class="fa-brands fa-apple"></i><h2>{{ $t('Apps werden gerade geladen …', 'Loading apps …') }}</h2><p>{{ $t('Der App-Store-Abruf ist kurz nicht erreichbar.', 'The App Store request is briefly unavailable.') }}</p></section>
@else

<div class="ax-toolbar">
    <div class="ax-toolrow">
        <div class="ax-search">
            <i class="fa-solid fa-magnifying-glass"></i>
            <input type="search" id="appSearch" placeholder="{{ $t('App suchen …', 'Search apps …') }}" autocomplete="off" aria-label="{{ $t('App suchen', 'Search apps') }}">
        </div>
        <div class="ax-tabs" id="deviceTabs" role="tablist">
            <button type="button" class="is-active" data-device="all">{{ $t('Alle', 'All') }}</button>
            @if($hasIos)<button type="button" data-device="iphone">iPhone</button>@endif
            @if($hasIos)<button type="button" data-device="ipad">iPad</button>@endif
            @if($hasMac)<button type="button" data-device="mac">Mac</button>@endif
        </div>
    </div>
    <div class="ax-cats" id="catChips">
        <button type="button" class="is-active" data-cat="all">{{ $t('Alle Kategorien', 'All categories') }}</button>
        @foreach($categories as $c)
            <button type="button" data-cat="{{ $c }}">{{ $c }}</button>
        @endforeach
    </div>
</div>

<section class="ax-listing">
    {{-- Unsichtbarer Abschnitts-Titel verankert die Card-Überschriften (h3), damit die Heading-Reihenfolge h1→h2→h3 keine Stufe überspringt (M45). --}}
    <h2 class="footer-sr-heading">{{ $t('Verfügbare Apps', 'Available apps') }}</h2>
    <div class="ax-grid" id="appGrid">
        @foreach($apps as $app)
            @include('apple._app_card', ['app' => $app, 'rel' => $rel, 'lp' => $en ? 'en/' : ''])
        @endforeach
    </div>
    <div class="ax-noresults" id="axNoResults" hidden>
        <i class="fa-solid fa-magnifying-glass"></i>
        <p>{{ $t('Keine App gefunden.', 'No apps found.') }}</p>
    </div>
</section>

@endif

<style>
    .ax-hero{padding:104px 8% 8px; text-align:center; background:#ffffff;}
    .ax-kicker{display:inline-flex; align-items:center; gap:.45rem; padding:6px 12px; border-radius:999px; background:rgba(0,122,255,.1); color:#007aff; font-size:.66rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;}
    .ax-hero h1{font-size:clamp(1.7rem,3.6vw,2.7rem); font-weight:800; letter-spacing:-1.4px; color:#1d1d1f; line-height:1.1; margin:9px 0 0;}
    .ax-hero h1 span{color:#007aff;}
    .ax-lead{max-width:540px; margin:6px auto 0; color:#6e6e73; font-size:.96rem; line-height:1.5;}
    .ax-livecount{display:inline-flex; align-items:center; gap:.5rem; margin-top:11px; padding:6px 13px; border-radius:999px; background:#f0f9ff; border:1px solid #bae6fd; color:#0369a1; font-weight:800; font-size:.78rem;}
    .ax-dot{width:.55rem; height:.55rem; border-radius:50%; background:#007aff; animation:axPulse 2s ease-out infinite;}
    @keyframes axPulse{0%{box-shadow:0 0 0 0 rgba(0,122,255,.5);}70%{box-shadow:0 0 0 7px rgba(0,122,255,0);}100%{box-shadow:0 0 0 0 rgba(0,122,255,0);}}
    .ax-empty{text-align:center; padding:120px 8%;}
    .ax-empty i{font-size:3.4rem; color:#d2d2d7;} .ax-empty h2{margin:18px 0 6px; color:#1d1d1f;} .ax-empty p{color:#86868b;}

    /* Toolbar */
    .ax-toolbar{position:sticky; top:92px; z-index:40; display:flex; flex-direction:column; gap:9px; align-items:center;
        padding:11px 8%; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border-bottom:1px solid #ececf0;}
    .ax-toolrow{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; max-width:1100px;}
    .ax-search{position:relative; flex:1; min-width:220px; max-width:460px;}
    .ax-search i{position:absolute; left:17px; top:50%; transform:translateY(-50%); color:#86868b; font-size:.88rem;}
    .ax-search input{width:100%; height:44px; padding:0 18px 0 43px; border-radius:999px; border:1px solid #e2e4ea; background:#f5f5f7; font-size:.95rem; color:#1d1d1f; outline:none; transition:border-color .2s, background .2s, box-shadow .2s;}
    .ax-search input:focus{border-color:#007aff; background:#fff; box-shadow:0 0 0 4px rgba(0,122,255,.12);}
    .ax-tabs{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:#eceef2; flex:0 0 auto;}
    .ax-tabs button{appearance:none; border:0; background:transparent; cursor:pointer; padding:8px 15px; border-radius:999px; font:inherit; font-size:.85rem; font-weight:700; color:#475569; transition:background .2s, color .2s, box-shadow .2s; white-space:nowrap;}
    .ax-tabs button.is-active{background:#fff; color:#007aff; box-shadow:0 4px 12px -6px rgba(15,23,42,.25);}
    .ax-cats{display:flex; gap:7px; flex-wrap:nowrap; overflow-x:auto; width:100%; max-width:1100px; padding-bottom:1px; scrollbar-width:none;}
    .ax-cats::-webkit-scrollbar{display:none;}
    .ax-cats button{flex:0 0 auto; appearance:none; cursor:pointer; padding:6px 13px; border-radius:999px; border:1px solid #e2e4ea; background:#fff; font:inherit; font-size:.79rem; font-weight:700; color:#475569; transition:all .2s; white-space:nowrap;}
    .ax-cats button:hover{border-color:#bcd9ff;}
    .ax-cats button.is-active{background:#007aff; border-color:#007aff; color:#fff;}

    /* Listing */
    .ax-listing{padding:26px 8% 100px; background:#f5f5f7; min-height:60vh;}
    .ax-grid{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:18px;}
    @media (min-width:680px){ .ax-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
    @media (min-width:1080px){ .ax-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
    .ax-card{min-width:0;} .ax-cardlink h3{overflow-wrap:anywhere;}

    .ax-card{background:#fff; border:1px solid #e9e9ee; border-radius:24px; padding:22px; box-shadow:0 24px 60px -46px rgba(15,23,42,.32); display:flex; flex-direction:column;}
    .ax-card-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
    .ax-cardlink{display:flex; align-items:center; gap:14px; flex:1; min-width:170px; text-decoration:none; color:inherit;}
    .ax-cardlink h3{margin:0; font-size:1.22rem; font-weight:900; letter-spacing:-.5px; color:#1d1d1f; transition:color .2s;}
    .ax-cardlink:hover h3{color:#007aff;}
    .ax-icon{width:64px; height:64px; border-radius:21%; flex:0 0 auto; box-shadow:0 8px 20px -8px rgba(0,0,0,.3);}
    .ax-id{display:flex; flex-direction:column;}
    .ax-genre{color:#86868b; font-size:.84rem; font-weight:700;}
    .ax-metarow{display:flex; align-items:center; gap:7px; flex-wrap:wrap; width:100%; margin-top:4px;}
    .ax-chip{font-size:.72rem; font-weight:800; padding:5px 10px; border-radius:999px; background:#f1f5f9; color:#475569;}
    .ax-chip--ver{background:#eef2ff; color:#3730a3;}
    .ax-chip--upd{background:#f0f9ff; color:#0369a1;}
    .ax-price{font-size:.74rem; font-weight:900; padding:5px 12px; border-radius:999px; margin-left:auto;}
    .ax-price.free{background:#f0fdf4; color:#166534;}
    .ax-price.paid{background:#eff6ff; color:#0c4a6e;}
    .ax-btn{display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:999px; background:#007aff; color:#fff !important; font-weight:800; font-size:.82rem; text-decoration:none; transition:transform .2s, box-shadow .2s; box-shadow:0 8px 18px -8px rgba(0,122,255,.6);}
    .ax-btn:hover{transform:translateY(-2px);}
    .ax-btn--ghost{background:#eef3f9; color:#007aff !important; box-shadow:none;}
    .ax-btn--ghost:hover{background:#e2e8f0;}

    /* Screenshot-Reihen — pro Gerät erscheint die passende Reihe (iPhone-/iPad-/Mac-Shots). */
    .ax-rail{display:none; gap:12px; overflow-x:auto; padding:14px 2px 4px; margin-top:8px; scroll-snap-type:x mandatory; scrollbar-width:thin;}
    .ax-grid.device-iphone .ax-rail[data-rail="iphone"],
    .ax-grid.device-ipad   .ax-rail[data-rail="ipad"],
    .ax-grid.device-mac    .ax-rail[data-rail="mac"]{display:flex;}
    .ax-shotlink{flex:0 0 auto; scroll-snap-align:start; line-height:0; border-radius:16px;}
    .ax-shot{display:block; border-radius:16px; background:#f1f5f9; border:1px solid #e5e7eb; box-shadow:0 12px 26px -20px rgba(15,23,42,.4);}
    .ax-shot--ios{height:230px; border-radius:20px;}
    .ax-shot--ipad{height:230px; border-radius:14px;}
    .ax-shot--mac{height:150px;}

    .ax-noresults{max-width:1240px; margin:40px auto 0; text-align:center; color:#86868b; padding:60px 0;}
    .ax-noresults i{font-size:2.4rem; color:#cbd0d8;} .ax-noresults p{margin:14px 0 0; font-weight:700;}

    @media (max-width:980px){
        .ax-toolbar{top:92px; padding:18px 22px;}
        .ax-listing{padding:32px 18px 90px;}
    }
</style>

<script>
(function () {
    var search = document.getElementById('appSearch');
    var grid = document.getElementById('appGrid');
    if (!grid) return;
    var cards = Array.prototype.slice.call(grid.querySelectorAll('.ax-card'));
    var noRes = document.getElementById('axNoResults');
    var dTabs = Array.prototype.slice.call(document.querySelectorAll('#deviceTabs button'));
    var cChips = Array.prototype.slice.call(document.querySelectorAll('#catChips button'));
    var DEVICES = ['iphone', 'ipad', 'mac'];
    var fDevice = 'all', fCat = 'all', fText = '';

    function apply() {
        var shown = 0;
        cards.forEach(function (c) {
            var devs = c.getAttribute('data-devices') || '';
            var okD = fDevice === 'all' || devs.split(' ').indexOf(fDevice) !== -1;
            var okC = fCat === 'all' || c.getAttribute('data-cat') === fCat;
            var okT = !fText || (c.getAttribute('data-name') || '').indexOf(fText) !== -1;
            var show = okD && okC && okT;
            c.style.display = show ? '' : 'none';
            if (show) shown++;
        });
        // Pro Gerät die passende Screenshot-Reihe einblenden (iPhone/iPad/Mac).
        grid.classList.remove('device-iphone', 'device-ipad', 'device-mac');
        if (fDevice !== 'all') grid.classList.add('device-' + fDevice);
        if (noRes) noRes.hidden = shown > 0;
    }
    function markActive(group, val, attr) {
        group.forEach(function (b) { b.classList.toggle('is-active', b.getAttribute(attr) === val); });
    }
    function setDevice(val, pushHash) {
        fDevice = DEVICES.indexOf(val) !== -1 ? val : 'all';
        markActive(dTabs, fDevice, 'data-device');
        if (pushHash) {
            if (fDevice === 'all') {
                history.replaceState(null, '', location.pathname + location.search);
            } else {
                location.hash = 'device=' + fDevice;
            }
        }
        apply();
    }
    function readHash() {
        var m = (location.hash || '').match(/device=(iphone|ipad|mac)/);
        setDevice(m ? m[1] : 'all', false);
    }

    if (search) search.addEventListener('input', function (e) { fText = e.target.value.toLowerCase().trim(); apply(); });
    dTabs.forEach(function (b) { b.addEventListener('click', function () { setDevice(b.getAttribute('data-device'), true); }); });
    cChips.forEach(function (b) {
        b.addEventListener('click', function () {
            cChips.forEach(function (x) { x.classList.remove('is-active'); });
            b.classList.add('is-active');
            fCat = b.getAttribute('data-cat');
            apply();
        });
    });
    // Header-Links (#device=…) und direkte Aufrufe greifen über den Hash.
    window.addEventListener('hashchange', readHash);
    readHash();
})();
</script>
@endsection