@extends('web.layouts.web-master')

@section('title', 'Hilfe-Center')
@section('meta_description', 'Hilfe-Center: Antworten, Anleitungen und direkter Kontakt zum Support-Team.')

@php
    // Hilfe-Themen mit Links auf vorhandene Ziele. „#" markiert Inhalte, die
    // noch entstehen (Anleitungen/Tutorials) — vor Go-Live verlinken.
    $helpTopics = [
        [
            'title' => 'Erste Schritte',
            'links' => [
                ['label' => 'Account erstellen', 'href' => '#'],
                ['label' => 'Erste Pressemitteilung veröffentlichen', 'href' => route('veroeffentlichen')],
                ['label' => 'Newsroom einrichten', 'href' => route('newsrooms')],
                ['label' => 'Profil vervollständigen', 'href' => '#'],
            ],
        ],
        [
            'title' => 'Pressemitteilungen',
            'links' => [
                ['label' => 'PM erstellen und formatieren', 'href' => '#'],
                ['label' => 'Medien hochladen', 'href' => '#'],
                ['label' => 'SEO-Optimierung', 'href' => '#'],
                ['label' => 'PM bearbeiten / löschen', 'href' => '#'],
            ],
        ],
        [
            'title' => 'Account & Abrechnung',
            'links' => [
                ['label' => 'Tarif wechseln', 'href' => route('preise')],
                ['label' => 'Zahlungsmethoden', 'href' => route('preise')],
                ['label' => 'Rechnungen herunterladen', 'href' => '#'],
                ['label' => 'Account kündigen', 'href' => '#'],
            ],
        ],
        [
            'title' => 'Erweiterte Features',
            'links' => [
                ['label' => 'API-Integration', 'href' => route('api')],
                ['label' => 'Analytics nutzen', 'href' => '#'],
                ['label' => 'Newsroom anpassen', 'href' => route('newsrooms')],
                ['label' => 'Team-Management', 'href' => '#'],
            ],
        ],
    ];

    $quickLinks = [
        ['label' => 'FAQ', 'desc' => 'Häufig gestellte Fragen', 'href' => route('faq')],
        ['label' => 'Veröffentlichen', 'desc' => 'In wenigen Schritten zur Meldung', 'href' => route('veroeffentlichen')],
        ['label' => 'Kontakt', 'desc' => 'Direkter Draht zum Support', 'href' => route('kontakt')],
    ];
@endphp

@section('content')
    <x-web.static-page
        eyebrow="Hilfe"
        title="Hilfe-Center"
        lead="Finden Sie Antworten und Anleitungen – oder kontaktieren Sie unser Support-Team direkt."
        breadcrumb="Hilfe"
    >
        {{-- Schnellzugriff --}}
        <div class="grid gap-px bg-bg-rule border border-bg-rule grid-cols-1 sm:grid-cols-3">
            @foreach ($quickLinks as $link)
                <a href="{{ $link['href'] }}" class="group bg-bg p-6 hover:bg-bg-elev transition-colors">
                    <div class="flex items-center justify-between gap-2">
                        <span class="text-[15px] font-semibold text-ink group-hover:text-brand transition-colors">{{ $link['label'] }}</span>
                        <svg width="13" height="13" viewBox="0 0 12 12" fill="none" aria-hidden="true" class="text-ink-3 group-hover:text-brand transition-colors">
                            <path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <p class="text-[12.5px] text-ink-3 mt-1 mb-0">{{ $link['desc'] }}</p>
                </a>
            @endforeach
        </div>

        {{-- Hilfe-Themen --}}
        <h2 class="font-serif text-[22px] font-semibold tracking-[-0.3px] text-ink m-0 mt-12 mb-4">Hilfe-Themen</h2>
        <div class="grid gap-px bg-bg-rule border border-bg-rule grid-cols-1 md:grid-cols-2">
            @foreach ($helpTopics as $topic)
                <div class="bg-bg p-6">
                    <h3 class="text-[14px] font-semibold text-ink m-0 mb-3">{{ $topic['title'] }}</h3>
                    <ul class="list-none p-0 m-0 space-y-2">
                        @foreach ($topic['links'] as $link)
                            <li>
                                <a href="{{ $link['href'] }}" class="inline-flex items-center gap-1.5 text-[13px] text-ink-2 hover:text-brand transition-colors">
                                    <span class="text-ink-4" aria-hidden="true">›</span>
                                    {{ $link['label'] }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach
        </div>

        {{-- Support-CTA --}}
        <div class="mt-12 border border-bg-rule bg-bg-elev p-6 sm:p-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-5">
            <div>
                <h2 class="font-serif text-[20px] font-semibold tracking-[-0.3px] text-ink m-0">Benötigen Sie weitere Hilfe?</h2>
                <p class="text-[13px] text-ink-2 mt-1.5 mb-0">Unser Support-Team ist Mo–Fr von 9–18 Uhr für Sie da.</p>
            </div>
            <div class="flex flex-wrap gap-3 flex-shrink-0">
                <a href="{{ route('kontakt') }}"
                    class="inline-flex items-center justify-center gap-1.5 px-5 py-2.5 text-[12.5px] font-semibold text-white bg-brand hover:bg-brand-deep rounded-[2px] transition-colors">
                    Support kontaktieren
                </a>
                <a href="{{ route('faq') }}"
                    class="inline-flex items-center justify-center gap-1.5 px-5 py-2.5 text-[12.5px] font-semibold text-ink border border-bg-rule-strong hover:bg-bg transition-colors rounded-[2px]">
                    FAQ durchsuchen
                </a>
            </div>
        </div>
    </x-web.static-page>
@endsection