@extends('layouts.app')

@php
    $reg = new \App\Support\SubdomainRegistry();
    $en  = $reg->currentLocale() === 'en';
    $t   = fn ($de, $enT) => $en ? $enT : $de;

    $stats = $stats ?? ['responses' => 0, 'problems' => 0, 'areas' => 22];
    $hasProof = ($stats['problems'] ?? 0) >= 10;

    $entries = [
        [
            'url'   => $reg->url('umfrage', 'start'),
            'icon'  => 'fa-clipboard-list',
            'badge' => $t('5–8 Min · größter Einfluss', '5–8 min · most impact'),
            'title' => $t('Die große Umfrage', 'The full survey'),
            'desc'  => $t('Der vollständige Fragebogen — er liefert die aussagekräftigsten Ergebnisse.', 'The complete questionnaire — it yields the most meaningful results.'),
            'feat'  => true,
        ],
        [
            'url'   => $reg->url('umfrage', 'problem'),
            'icon'  => 'fa-lightbulb',
            'badge' => $t('ohne langen Fragebogen', 'no long questionnaire'),
            'title' => $t('Ein Problem schildern', 'Report one problem'),
            'desc'  => $t('Für alle, die einfach kurz ein nerviges Problem loswerden möchten.', 'For anyone who just wants to describe one annoying problem.'),
            'feat'  => false,
        ],
        [
            'url'   => $reg->url('umfrage', 'kurz'),
            'icon'  => 'fa-bolt',
            'badge' => $t('2 Minuten', '2 minutes'),
            'title' => $t('In zwei Minuten helfen', 'Help in two minutes'),
            'desc'  => $t('Nur die wichtigsten Fragen — schnell beantwortet.', 'Only the key questions — answered fast.'),
            'feat'  => false,
        ],
        [
            'url'   => $reg->url('umfrage', 'ideen'),
            'icon'  => 'fa-star-half-stroke',
            'badge' => $t('Feedback geben', 'give feedback'),
            'title' => $t('App-Ideen bewerten', 'Rate app ideas'),
            'desc'  => $t('Bewerte ausgewählte Problemfelder, Funktionen und Prototypen.', 'Rate selected problem areas, features and prototypes.'),
            'feat'  => false,
        ],
    ];

    $blips = [
        ['top' => '14%', 'left' => '60%', 'v' => false, 'label' => $t('Fristen vergessen', 'Missed deadlines')],
        ['top' => '30%', 'left' => '20%', 'v' => true,  'label' => $t('Lernen organisieren', 'Organising study')],
        ['top' => '66%', 'left' => '70%', 'v' => true,  'label' => $t('Zeiten übertragen', 'Re-typing hours')],
        ['top' => '78%', 'left' => '32%', 'v' => false, 'label' => $t('Vereinsschichten', 'Club shifts')],
    ];

    $examples = [
        $t('Fahrzeugwartungen in Notizen dokumentieren', 'Logging vehicle maintenance in notes'),
        $t('Lerngruppen über WhatsApp organisieren', 'Organising study groups over WhatsApp'),
        $t('Arbeitszeiten mehrfach übertragen', 'Re-typing working hours several times'),
        $t('Vereinsschichten in Excel planen', 'Planning club shifts in a spreadsheet'),
        $t('Wiederkehrende Fristen vergessen', 'Forgetting recurring deadlines'),
        $t('Einkäufe über mehrere Apps verteilen', 'Spreading shopping across several apps'),
    ];
@endphp

@section('title', $t('ProblemRadar — Welche App-Probleme sollten gelöst werden?', 'ProblemRadar — Which app problems should be solved?'))
@section('meta_description', $t('Beschreibe, was dich im Alltag, bei der Arbeit oder beim Lernen regelmäßig nervt. Deine Antworten formen die nächsten Apps — anonym, freiwillig, ohne unnötige Daten.', 'Describe what regularly annoys you in everyday life, at work or while studying. Your answers shape the next apps — anonymous, voluntary, no unnecessary data.'))

@section('content')
@include('umfrage._shell')

<section class="u-shell" style="padding:72px 0 40px;">
    <div class="u-container" style="display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center;">
        {{-- Text --}}
        <div>
            <span class="u-eyebrow"><span class="u-dot"></span> ProblemRadar · Kotsch.Tech</span>
            <h1 class="u-display">
                {{ $t('Welche Probleme', 'Which problems') }}<br>
                {{ $t('sollte eine App', 'should an app') }}<br>
                <span class="u-grad-text">{{ $t('endlich lösen?', 'finally solve?') }}</span>
            </h1>
            <p class="u-lead">{{ $t('Beschreibe, was dich im Alltag, bei der Arbeit oder beim Lernen regelmäßig nervt. Deine Antworten formen die nächsten Apps — anonym, freiwillig, ohne unnötige Daten.', 'Describe what regularly annoys you in everyday life, at work or while studying. Your answers shape the next apps — anonymous, voluntary, no unnecessary data.') }}</p>

            <div class="u-cta-row" style="display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;">
                <a href="{{ $reg->url('umfrage', 'start') }}" class="u-btn u-btn-primary">{{ $t('Umfrage starten', 'Start the survey') }} <i class="fa-solid fa-arrow-right"></i></a>
                <a href="{{ $reg->url('umfrage', 'problem') }}" class="u-btn u-btn-ghost"><i class="fa-solid fa-lightbulb"></i> {{ $t('Nur ein Problem melden', 'Just report a problem') }}</a>
            </div>

            <div class="u-stats">
                @if ($hasProof)
                    <div class="u-stat"><b data-countup="{{ $stats['problems'] }}">0</b><span>{{ $t('Probleme gesammelt', 'problems collected') }}</span></div>
                @else
                    <div class="u-stat"><b>{{ $t('Sei dabei', 'Be first') }}</b><span>{{ $t('unter den Ersten', 'among the first') }}</span></div>
                @endif
                <div class="u-stat-div"></div>
                <div class="u-stat"><b data-countup="{{ $stats['areas'] }}">0</b><span>{{ $t('Lebensbereiche', 'life areas') }}</span></div>
                <div class="u-stat-div"></div>
                <div class="u-stat"><b>100%</b><span>{{ $t('anonym & freiwillig', 'anonymous & optional') }}</span></div>
            </div>
        </div>

        {{-- Radar --}}
        <div style="position:relative;">
            <div class="u-radar" role="img" aria-label="{{ $t('Radar, der Alltagsprobleme erfasst', 'Radar detecting everyday problems') }}">
                <div class="u-radar-ring"></div><div class="u-radar-ring"></div><div class="u-radar-ring"></div><div class="u-radar-ring"></div>
                <div class="u-radar-cross h"></div><div class="u-radar-cross v"></div>
                <div class="u-radar-sweep"></div>
                <div class="u-radar-core"></div>
                @foreach ($blips as $i => $b)
                    <div class="u-blip {{ $b['v'] ? 'v' : '' }}" style="top:{{ $b['top'] }}; left:{{ $b['left'] }}; animation-delay:{{ $i * .6 }}s;"></div>
                @endforeach
                <div class="u-blip-label" style="top:8%; left:52%; animation:uFloat 5s ease-in-out infinite;">{{ $blips[0]['label'] }}</div>
                <div class="u-blip-label" style="top:52%; left:2%; animation:uFloat 6s ease-in-out infinite .5s;">{{ $blips[1]['label'] }}</div>
                <div class="u-blip-label" style="bottom:6%; right:0; animation:uFloat 5.5s ease-in-out infinite 1s;">{{ $blips[2]['label'] }}</div>
            </div>
        </div>
    </div>
</section>

{{-- Pfade --}}
<section class="u-shell" style="padding:24px 0 40px;">
    <div class="u-container">
        <div class="u-sec-head u-reveal" style="justify-content:space-between; flex-wrap:wrap;">
            <div>
                <span class="u-kicker">{{ $t('Dein Weg', 'Your path') }}</span>
                <h2 class="u-h2" style="margin-top:6px;">{{ $t('Wähle, wie du beitragen willst', 'Choose how you want to contribute') }}</h2>
            </div>
        </div>
        <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:26px;">
            @foreach ($entries as $i => $e)
                <a class="u-card u-reveal {{ $e['feat'] ? 'is-feat' : '' }}" href="{{ $e['url'] }}" style="transition-delay:{{ $i * 60 }}ms;">
                    @if ($e['feat'])<span class="u-feat-tag">{{ $t('Empfohlen', 'Top pick') }}</span>@endif
                    <span class="u-card-ic"><i class="fa-solid {{ $e['icon'] }}"></i></span>
                    <span class="u-card-badge">{{ $e['badge'] }}</span>
                    <span class="u-card-title">{{ $e['title'] }}</span>
                    <span class="u-card-desc">{{ $e['desc'] }}</span>
                    <span class="u-card-go">{{ $t('Loslegen', 'Get started') }} <i class="fa-solid fa-arrow-right"></i></span>
                </a>
            @endforeach
        </div>

        <div class="u-note u-reveal" style="margin-top:26px;">
            <i class="fa-solid fa-shield-halved"></i>
            <span>{{ $t('Die Teilnahme ist freiwillig und anonym. Dein Name ist optional und erscheint nie in Statistiken. Eine E-Mail wird nur abgefragt, wenn du danach ausdrücklich kontaktiert werden möchtest.', 'Participation is voluntary and anonymous. Your name is optional and never appears in statistics. An email is only requested if you explicitly want to be contacted afterwards.') }}</span>
        </div>
    </div>
</section>

{{-- Signal-Feed / Beispiele --}}
<section class="u-shell" style="padding:34px 0 96px;">
    <div class="u-container">
        <div class="u-reveal">
            <span class="u-kicker">{{ $t('Signale', 'Signals') }}</span>
            <h2 class="u-h2" style="margin-top:6px;">{{ $t('So klingen typische Probleme', 'What typical problems sound like') }}</h2>
        </div>
        <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; margin-top:24px;">
            @foreach ($examples as $i => $ex)
                <div class="u-reveal" style="display:flex; align-items:center; gap:.8rem; padding:16px 18px; background:#fff; border:1px solid var(--u-line); border-radius:14px; box-shadow:var(--u-sh); transition-delay:{{ $i * 50 }}ms;">
                    <span style="width:34px;height:34px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:var(--u-grad-soft);color:var(--u-violet);"><i class="fa-solid fa-wave-square"></i></span>
                    <span style="color:var(--u-ink2); font-size:.95rem; font-weight:600; line-height:1.4;">{{ $ex }}</span>
                </div>
            @endforeach
        </div>

        <div class="u-reveal" style="text-align:center; margin-top:44px;">
            <a href="{{ $reg->url('umfrage', 'start') }}" class="u-btn u-btn-primary" style="display:inline-flex;">{{ $t('Jetzt dein Problem loswerden', 'Get your problem off your chest') }} <i class="fa-solid fa-arrow-right"></i></a>
        </div>
    </div>
</section>

<style>@media(max-width:900px){ section.u-shell > .u-container[style*="grid-template-columns:1.08fr"]{ grid-template-columns:1fr !important; gap:40px !important; } }</style>
@endsection