@extends('layouts.app')

@section('title', 'KOTSCH.TECH | Apps, Tools, Webdesign & IT von Arthur Kotsch')
@section('meta_description', 'Ein Name, acht Welten: iOS- & Mac-Apps, Windows-Programme, ' . $webtoolsCount . ' Web-Tools, Shop, Webdesign, News und IT-Hilfe von Arthur Kotsch.')

@php
    use App\Support\SubdomainRegistry;
    $registry = new SubdomainRegistry();
    // Tester wird NICHT als eigenes Welt-Band auf der Startseite gezeigt (nur im Header
    // bei den Software-Bereichen); noindex-Bereiche ebenfalls raus.
    $worlds = collect($registry->subdomains())
        ->reject(fn ($a) => !empty($a['noindex']) || !empty($a['footer_only']) || ($a['key'] ?? '') === 'tester')
        ->values();
    $icons = [
        'ios' => 'fa-apple', 'windows' => 'fa-windows', 'android' => 'fa-android',
        'webtools' => 'fa-screwdriver-wrench', 'shop' => 'fa-bag-shopping',
        'hosting' => 'fa-server', 'news' => 'fa-newspaper', 'it-hilfe' => 'fa-life-ring',
        'webdesign' => 'fa-compass-drafting',
    ];
    $brands = ['ios', 'windows', 'android'];
    $count = $worlds->count();
    // Live-Anzahl der verfügbaren Web-Tools (aktualisiert sich automatisch mit der Tool-Liste).
    $toolCount = $webtoolsCount; // geteilte Quelle aus dem View-Composer (AppServiceProvider)
    $points = [
        'ios'       => ['13 Apps im App Store', 'iPhone · iPad · Mac', 'Regelmäßige Updates'],
        'windows'   => ['9 Programme', 'Cleaner · Commander · Notes', 'Direkt-Download'],
        'android'   => ['Native Apps', 'In Entwicklung', 'Bald im Play Store'],
        'webtools'  => [$toolCount . ' Tools', 'Ohne Login nutzbar', 'Vieles lokal im Browser'],
        'shop'      => ['Digitale Produkte', 'Sofort-Download', 'Sichere Zahlung'],
        'hosting'   => ['Managed Webhosting', 'vServer / VPS', 'DSGVO-konform'],
        'news'      => ['Ratgeber & Tipps', 'Verständlich erklärt', 'Regelmäßig Neues'],
        'it-hilfe'  => ['Vor-Ort & Remote', 'Keine Lösung = kein Preis', 'PC · Handy · WLAN'],
        'webdesign' => ['Studio & Vorlagen', '20 Branchen-Demos', 'Modernes Webdesign'],
    ];
    $vrev = '?v=3'; // Cache-Buster für die Videos/Poster

    // iOS-Sektion: echte, immer aktuelle Apps + Updates (live aus dem App Store, gecacht)
    $iosApps   = rescue(fn () => app(\App\Services\AppStoreService::class)->apps(), collect());
    $iosCount  = $iosApps->count();
    $appCount  = $iosCount ?: 19; // Live-Zahl; Fallback falls App-Store-Abruf scheitert
    $iosRecent = $iosApps->sortByDesc('updated')->take(4)->values();

    // Anzeige-Sprache (siehe Apple-Views): request() bleibt der äußere Request,
    // daher liefert segment(1) auch beim internen /en-Dispatch korrekt 'en'.
    $en = in_array(request()->segment(1), ['de', 'en'], true) ? request()->segment(1) === 'en' : false;
    $tr = fn ($de, $enText) => $en ? $enText : $de;

@endphp

@section('content')
{{-- Genau eine semantische H1 für die Startseite (P1-5). Visuell versteckt, da das
     Design mit den Welt-Bändern startet; für SEO/Screenreader voll wirksam. --}}
<h1 style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">{{ $tr('KOTSCH.TECH — Apps, Tools, Webdesign & IT von Arthur Kotsch', 'KOTSCH.TECH — Apps, tools, web design & IT by Arthur Kotsch') }}</h1>
<div class="hub">
    @foreach($worlds as $i => $t)
        @php $ic = $icons[$t['key']] ?? 'fa-cube'; $isBrand = in_array($t['key'], $brands, true); @endphp
        <section class="world-band" style="--c: {{ $t['accent'] }};" data-reveal>
            <video class="world-bg" muted loop playsinline preload="none"
                   poster="{{ asset('video/'.$t['key'].'-poster.jpg').$vrev }}"
                   data-vsrc="{{ asset('video/'.$t['key'].'.mp4').$vrev }}" aria-hidden="true"></video>
            <span class="world-scrim" aria-hidden="true"></span>
            <span class="world-num" aria-hidden="true">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</span>
            @if($t['key'] === 'ios')
                <div class="world-card ios-card">
                    <span class="world-kicker"><i class="fa-brands fa-apple" aria-hidden="true"></i> {{ $tr('Welt', 'World') }} {{ $i + 1 }} / {{ $count }}@if($iosCount) · <span class="ios-livebadge"><span class="ios-livedot" aria-hidden="true"></span>{{ $iosCount }} {{ $tr('Apps live', 'apps live') }}</span>@endif</span>
                    <h2 class="world-title">{{ $t['label'] }}</h2>
                    <p class="world-tag">{{ $tr('Apps für iPhone, iPad & Mac — automatisch aktuell aus dem App Store.', 'Apps for iPhone, iPad & Mac — always up to date from the App Store.') }}</p>
                    @if($iosRecent->isNotEmpty())
                        <div class="ios-updates">
                            <div class="ios-updates-head"><i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i> {{ $tr('Zuletzt aktualisiert', 'Recently updated') }}</div>
                            @foreach($iosRecent as $app)
                                <a class="ios-update" href="{{ $app['url'] }}" target="_blank" rel="noopener">
                                    @if(!empty($app['icon']))<img class="ios-update-icon" src="{{ $app['icon'] }}" width="44" height="44" loading="lazy" decoding="async" referrerpolicy="no-referrer" alt="{{ $app['name'] ?? '' }} App-Icon">@endif
                                    <span class="ios-update-meta">
                                        <span class="ios-update-name">{{ $app['name'] }}@if(($app['kind'] ?? '') === 'mac')<span class="ios-update-tag">Mac</span>@endif</span>
                                        <span class="ios-update-sub">@if(!empty($app['version']))v{{ $app['version'] }} · @endif{{ !empty($app['updated']) ? \Illuminate\Support\Carbon::parse($app['updated'])->locale($en ? 'en' : 'de')->diffForHumans() : $tr('aktualisiert', 'updated') }}</span>
                                    </span>
                                    <i class="fa-solid fa-chevron-right ios-update-go" aria-hidden="true"></i>
                                </a>
                            @endforeach
                        </div>
                    @endif
                    <a class="world-cta" href="{{ $registry->url('ios') }}">{{ $tr('Alle Apps ansehen', 'View all apps') }} <span aria-hidden="true">›</span></a>
                </div>
            @else
                <div class="world-card">
                    <span class="world-kicker"><i class="{{ $isBrand ? 'fa-brands' : 'fa-solid' }} {{ $ic }}" aria-hidden="true"></i> {{ $tr('Welt', 'World') }} {{ $i + 1 }} / {{ $count }}</span>
                    <h2 class="world-title">{{ $t['label'] }}</h2>
                    <p class="world-tag">{{ $t['tagline'] }}</p>
                    <ul class="world-points">
                        @foreach(($points[$t['key']] ?? []) as $p)
                            <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i> {{ $p }}</li>
                        @endforeach
                    </ul>
                    <a class="world-cta" href="{{ $registry->url($t['key']) }}">{{ $tr('Entdecken', 'Explore') }} <span aria-hidden="true">›</span></a>
                </div>
            @endif
        </section>
    @endforeach
</div>


<style>
    .hub{position:relative; background:#ffffff; color:#1d2433; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; overflow:hidden;}
    .hub *{box-sizing:border-box;}
    .hub h2{color:#0f172a; margin:0;}
    .hub [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
    .hub [data-reveal].is-in{opacity:1; transform:none;}

    /* ===== Video-Welt-Sektionen (hell, weiße Bühne) ===== */
    .world-band{position:relative; min-height:90svh; display:flex; align-items:center; overflow:hidden; background:#ffffff;}
    .world-band:nth-child(even of .world-band){background:#fafbfd;}
    .world-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center;}
    .world-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,.18) 70%, transparent 100%);}
    .world-band:nth-child(even of .world-band) .world-scrim{background:linear-gradient(90deg, rgba(250,251,253,.95) 0%, rgba(250,251,253,.72) 38%, rgba(250,251,253,.18) 70%, transparent 100%);}
    .world-num{position:absolute; right:clamp(20px,5vw,90px); top:clamp(86px,12vh,120px); z-index:1; font-size:clamp(5rem,12vw,11rem); font-weight:800; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb,var(--c) 30%, #ffffff);}
    .world-card{position:relative; z-index:2; width:min(560px,92%); margin:0 clamp(24px,6vw,80px);}
    .world-kicker{display:inline-flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--c);}
    .world-kicker i{color:var(--c);}
    .world-title{font-size:clamp(2.6rem,5.5vw,4.4rem); font-weight:800; letter-spacing:-.035em; line-height:1; margin:.6rem 0 0; color:#0f172a;}
    .world-tag{font-size:clamp(1.15rem,2.2vw,1.6rem); color:#5b6472; margin:1rem 0 0; max-width:32ch;}
    .world-points{list-style:none; margin:1.4rem 0 .4rem; padding:0; display:grid; gap:13px;}
    .world-points li{display:flex; align-items:center; gap:.7rem; font-size:1.06rem; font-weight:500; color:#334155;}
    .world-points i{color:var(--c);}
    .world-cta{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.7rem; padding:1rem 2rem; border-radius:980px; background:var(--c); color:#fff; font-size:1.05rem; font-weight:600; text-decoration:none; transition:transform .25s, box-shadow .25s; box-shadow:0 14px 32px -12px var(--c);}
    .world-cta:hover{transform:translateY(-2px); box-shadow:0 20px 42px -12px var(--c);}
    .world-cta span{transition:transform .25s;} .world-cta:hover span{transform:translateX(5px);}

    /* ===== iOS-Sektion: Live-Apps & Updates ===== */
    .ios-card{width:min(580px,94%);}
    .ios-livebadge{display:inline-flex; align-items:center; gap:.35rem; color:var(--c);}
    .ios-livedot{width:.5rem; height:.5rem; border-radius:50%; background:var(--c); animation:iosPulse 2s ease-out infinite;}
    @keyframes iosPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
    .ios-updates{margin:1.4rem 0 .3rem; padding:14px; max-width:460px; border-radius:20px; background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid color-mix(in srgb,var(--c) 16%, #e8eef7); box-shadow:0 20px 44px -26px color-mix(in srgb,var(--c) 70%, transparent); display:grid; gap:4px;}
    .ios-updates-head{display:flex; align-items:center; gap:.5rem; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--c); margin:2px 4px 6px;}
    .ios-update{display:flex; align-items:center; gap:.7rem; padding:8px; border-radius:14px; text-decoration:none; color:#0f172a; transition:background .2s ease;}
    .ios-update:hover{background:color-mix(in srgb,var(--c) 8%, #fff);}
    .ios-update-icon{width:44px; height:44px; border-radius:22%; flex:0 0 auto; box-shadow:0 6px 14px -6px rgba(0,0,0,.3);}
    .ios-update-meta{display:flex; flex-direction:column; min-width:0; flex:1;}
    .ios-update-name{font-weight:700; font-size:.98rem; display:flex; align-items:center; gap:.4rem; color:#0f172a;}
    .ios-update-tag{font-size:.62rem; font-weight:700; padding:.05rem .35rem; border-radius:6px; background:color-mix(in srgb,var(--c) 14%,#fff); color:var(--c);}
    .ios-update-sub{font-size:.82rem; color:#64748b;}
    .ios-update-go{color:var(--c); font-size:.8rem; flex:0 0 auto;}

    @media (prefers-reduced-motion:reduce){
        .ios-livedot{animation:none;}
        .hub [data-reveal]{opacity:1; transform:none; transition:none;}
    }
    @media(max-width:860px){
        .world-band{min-height:auto; flex-direction:column; background:#ffffff;}
        .world-band:nth-child(even of .world-band){background:#fafbfd;}
        .world-bg{position:relative; height:44svh; min-height:300px;}
        .world-scrim{background:none;}
        .world-card{margin:26px 18px 8px; width:auto;}
        .world-num{top:78px; right:18px; font-size:4.5rem;}
    }
</style>

<script>
(function () {
    var reduceMo = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
    var saveData = navigator.connection && (navigator.connection.saveData || /2g/.test(navigator.connection.effectiveType || ''));

    // Reveal beim Scrollen
    var reveals = document.querySelectorAll('.hub [data-reveal]');
    if (!('IntersectionObserver' in window) || reduceMo) {
        reveals.forEach(function (el) { el.classList.add('is-in'); });
    } else {
        var ro = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('is-in'); ro.unobserve(e.target); } });
        }, { rootMargin: '0px 0px -12% 0px' });
        reveals.forEach(function (el) { ro.observe(el); });
    }

    // Lazy-Videos: nur die sichtbare Welt lädt + spielt
    var vids = document.querySelectorAll('.world-bg[data-vsrc]');
    if ('IntersectionObserver' in window && !reduceMo && !saveData) {
        var vo = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
                var v = e.target;
                if (e.isIntersecting) {
                    if (!v.dataset.loaded) {
                        var s = document.createElement('source'); s.src = v.dataset.vsrc; s.type = 'video/mp4';
                        v.appendChild(s); v.load(); v.dataset.loaded = '1';
                    }
                    var pr = v.play(); if (pr && pr.catch) { pr.catch(function () {}); }
                } else if (!v.paused) { v.pause(); }
            });
        }, { rootMargin: '300px 0px 300px 0px', threshold: 0.15 });
        vids.forEach(function (v) { vo.observe(v); });
    }
})();
</script>
@endsection