@extends('layouts.app')

@section('title', 'Support & Hilfe | KOTSCH.TECH')
@section('meta_description', 'Support-Center von KOTSCH.TECH: Hilfe zu iOS- & Mac-Apps, Windows-Programmen, Web-Tools und dem digitalen Shop. Antworten auf häufige Fragen und der direkte Draht zu Arthur Kotsch.')

@section('content')
    <!-- =============================================
         1. HERO: SUPPORT CENTER
         ============================================= -->
    <header style="padding: 160px 8% 80px; text-align: center; background: #f5f5f7; border-bottom: 1px solid #e8e8ed;">
        <div class="container reveal active">
            <span class="label" style="color: var(--primary);">KOTSCH.TECH Hilfe-Center</span>
            <img src="{{ asset('img/logo-wordmark-cropped.png') }}" alt="Kotsch.tech" style="width: min(320px, 72%); display: block; margin: 0 auto 24px;">
            <h1 style="font-size: 3.5rem; font-weight: 800; color: #000; letter-spacing: -2px;">Support <span>& Hilfe.</span></h1>
            <p class="lead" style="max-width: 620px; margin: 20px auto 0;">
                Hier findest du Antworten zu meinen iOS- &amp; Mac-Apps, Windows-Programmen,
                den kostenlosen Web-Tools und dem Shop. Schnell, direkt und unkompliziert.
            </p>
        </div>
    </header>

    <!-- =============================================
         2. KNOWLEDGE BASE (Kategorien)
         ============================================= -->
    <section style="padding: 80px 8%;">
        <div class="container">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;" class="reveal">

                <!-- iOS / macOS Support -->
                <div class="support-box">
                    <div class="s-icon" style="background: #f2f2f7; color: #000;"><i class="fab fa-apple"></i></div>
                    <h3>iOS &amp; Mac Apps</h3>
                    <p>Hilfe zu Installation, Updates und Käufen meiner Apps aus dem App&nbsp;Store.</p>
                    <ul class="s-list">
                        <li><a href="#faq-apps">App installieren &amp; einrichten</a></li>
                        <li><a href="#faq-restore">Käufe wiederherstellen</a></li>
                        <li><a href="/apple">Alle Apps ansehen</a></li>
                    </ul>
                </div>

                <!-- Windows Support -->
                <div class="support-box">
                    <div class="s-icon" style="background: #e0f2fe; color: #0284c7;"><i class="fab fa-windows"></i></div>
                    <h3>Windows-Programme</h3>
                    <p>Fragen zu Download, Installation und Kompatibilität meiner Windows-Tools.</p>
                    <ul class="s-list">
                        <li><a href="#faq-windows">Windows 10/11 &amp; Sicherheitswarnung</a></li>
                        <li><a href="#faq-updates">Updates erhalten</a></li>
                        <li><a href="/windows">Alle Programme ansehen</a></li>
                    </ul>
                </div>

                <!-- Web-Tools -->
                <div class="support-box">
                    <div class="s-icon" style="background: #ecfdf5; color: #059669;"><i class="fas fa-screwdriver-wrench"></i></div>
                    <h3>Web-Tools</h3>
                    <p>Die {{ $webtoolsCount }} kostenlosen Rechner und Konverter direkt im Browser.</p>
                    <ul class="s-list">
                        <li><a href="#faq-webtools">Sind die Tools kostenlos?</a></li>
                        <li><a href="#faq-daten">Was passiert mit meinen Eingaben?</a></li>
                        <li><a href="/webtools">Alle Web-Tools öffnen</a></li>
                    </ul>
                </div>

                <!-- Shop Support -->
                <div class="support-box">
                    <div class="s-icon" style="background: #fffbeb; color: #d97706;"><i class="fas fa-bag-shopping"></i></div>
                    <h3>Shop &amp; Downloads</h3>
                    <p>Hilfe rund um Bestellung, Bezahlung und den Zugriff auf gekaufte digitale Produkte.</p>
                    <ul class="s-list">
                        <li><a href="#faq-shop">Wo ist mein Download nach dem Kauf?</a></li>
                        <li><a href="#faq-rechnung">Rechnung &amp; Widerruf</a></li>
                        <li><a href="/shop">Zum Shop</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </section>

    <!-- =============================================
         3. FAQ — häufige Fragen (mit echten Ankern)
         ============================================= -->
    <section style="padding: 20px 8% 90px;">
        <div class="container reveal" style="max-width: 820px;">
            <h2 style="font-size: 2.2rem; font-weight: 800; color: #000; letter-spacing: -1px; margin-bottom: 36px; text-align: center;">Häufige Fragen</h2>

            <div class="faq-item" id="faq-apps">
                <h3>Wie installiere und richte ich die Apps ein?</h3>
                <p>Meine iOS- und Mac-Apps lädst du direkt über den <a href="/apple">App&nbsp;Store</a>. Tippe dort auf „Laden", danach steht die App auf dem Home-Bildschirm bzw. im Launchpad bereit. Eine Anmeldung bei KOTSCH.TECH ist nicht nötig &ndash; alle Einstellungen findest du direkt in der App.</p>
            </div>

            <div class="faq-item" id="faq-restore">
                <h3>Wie stelle ich frühere Käufe wieder her?</h3>
                <p>Bezahlte Apps und In-App-Käufe sind an deine Apple-ID gebunden. Auf einem neuen Gerät meldest du dich einfach mit derselben Apple-ID an und installierst die App erneut &ndash; es fallen keine erneuten Kosten an. Bei Abos findest du „Käufe wiederherstellen" in den App-Einstellungen.</p>
            </div>

            <div class="faq-item" id="faq-windows">
                <h3>Laufen die Windows-Programme unter Windows 10 und 11? Warum erscheint eine Warnung?</h3>
                <p>Ja, meine Programme sind für 64-bit-Windows&nbsp;10 und 11 gebaut. Da es sich um kleine Indie-Apps ohne teures Code-Signing-Zertifikat handelt, zeigt Windows&nbsp;SmartScreen beim ersten Start manchmal „Der Computer wurde geschützt". Klicke dort auf „Weitere Informationen" &rarr; „Trotzdem ausführen". Im Zweifel <a href="/kontakt?subject=Windows-Support">frag mich</a> vorher.</p>
            </div>

            <div class="faq-item" id="faq-updates">
                <h3>Wie bekomme ich Updates?</h3>
                <p>App-Store-Apps aktualisieren sich automatisch über den Store. Bei Windows-Programmen lädst du einfach die neueste Version erneut über die <a href="/windows">Programm-Seite</a> herunter &ndash; die jeweils aktuellste Version wird automatisch angeboten.</p>
            </div>

            <div class="faq-item" id="faq-webtools">
                <h3>Sind die Web-Tools wirklich kostenlos?</h3>
                <p>Ja. Alle {{ $webtoolsCount }} <a href="/webtools">Web-Tools</a> sind komplett kostenlos und ohne Anmeldung nutzbar. Es gibt keine Test-Phase und keine versteckten Kosten.</p>
            </div>

            <div class="faq-item" id="faq-daten">
                <h3>Was passiert mit meinen Eingaben in den Web-Tools?</h3>
                <p>Die allermeisten Tools rechnen vollständig lokal in deinem Browser &ndash; deine Eingaben verlassen dein Gerät nicht. Nur bei Tools, die eine serverseitige Verarbeitung brauchen (z.&nbsp;B. „PDF teilen"), werden Dateien temporär übertragen; Details dazu stehen in der <a href="/datenschutz">Datenschutzerklärung</a>.</p>
            </div>

            <div class="faq-item" id="faq-shop">
                <h3>Wo finde ich meinen Download nach dem Kauf?</h3>
                <p>Nach erfolgreicher Zahlung erhältst du eine Bestätigungs-E-Mail mit einem persönlichen, signierten Download-Link zu deinem digitalen Produkt. Der Link ist auch auf der Bestell-Abschlussseite verfügbar. Kommt nichts an, prüfe bitte den Spam-Ordner und <a href="/kontakt?subject=Shop-Bestellung">melde dich</a> mit deiner Bestellnummer.</p>
            </div>

            <div class="faq-item" id="faq-rechnung">
                <h3>Bekomme ich eine Rechnung &ndash; und wie ist das mit dem Widerruf?</h3>
                <p>Du erhältst zu jeder Bestellung eine Bestätigung mit allen Angaben. Bei digitalen Produkten erlischt das Widerrufsrecht, sobald der Download mit deiner ausdrücklichen Zustimmung beginnt (§&nbsp;356 Abs.&nbsp;5 BGB) &ndash; darauf weist der Checkout vor dem Kauf hin. Alle Details findest du in den <a href="/agb">AGB</a>.</p>
            </div>
        </div>
    </section>

    <!-- =============================================
         4. DIREKTER KONTAKT (Der "Ticket" Bereich)
         ============================================= -->
    <style>
        @media (max-width: 760px) {
            .sup-cta-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
            .sup-cta-grid .sup-cta-deco { display: none !important; }
            .sup-cta-section { padding: 64px 7% !important; border-radius: 32px !important; margin: 0 4% 70px !important; }
        }
    </style>
    <section class="sup-cta-section" style="padding: 100px 8%; background: #000; color: white; border-radius: 60px; margin: 0 4% 100px;">
        <div class="container reveal sup-cta-grid" style="display: grid; grid-template-columns: 1.2fr minmax(0, 1fr); gap: 80px; align-items: center;">
            <div>
                <h2 style="color: white; font-size: 3rem;">Keine Lösung gefunden?</h2>
                <p style="opacity: 0.7; font-size: 1.2rem; margin: 30px 0;">
                    Als unabhängiger Entwickler biete ich dir persönlichen Support.
                    Kein Bot, kein Callcenter &ndash; du schreibst direkt mit mir.
                </p>
                <div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: center;">
                    <a href="/kontakt?subject=Technischer-Support" class="btn-nav" style="background: var(--primary); color: white; padding: 18px 40px; border-radius: 12px; font-weight: 800;">Anfrage senden</a>
                    <a href="mailto:arthurkotsch@kotsch.tech" style="color: white; display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700;">
                        <i class="fas fa-envelope"></i> E-Mail senden
                    </a>
                </div>
            </div>
            <div class="sup-cta-deco" style="text-align: right; opacity: 0.1; font-size: 15rem;">
                <i class="fas fa-headset"></i>
            </div>
        </div>
    </section>

    <!-- =============================================
         5. FOOTER INFO
         ============================================= -->
    <section class="container" style="padding-bottom: 100px; text-align: center;">
        <div class="reveal">
            <p style="color: #8e8e93; font-size: 0.9rem; max-width: 600px; margin: 0 auto;">
                Der Support zu allen Produkten von KOTSCH.TECH ist kostenlos.
                Antwortzeiten liegen in der Regel unter 24&nbsp;Stunden (werktags).
            </p>
            <div style="margin-top: 30px; display: flex; justify-content: center; gap: 30px; font-size: 0.8rem;">
                <a href="/impressum" style="color: var(--primary); text-decoration: none; font-weight: 700;">IMPRESSUM</a>
                <a href="/datenschutz" style="color: var(--primary); text-decoration: none; font-weight: 700;">DATENSCHUTZ</a>
                <a href="/agb" style="color: var(--primary); text-decoration: none; font-weight: 700;">AGB</a>
            </div>
        </div>
    </section>

    <style>
        .support-box {
            background: white; padding: 45px; border-radius: 35px; border: 1px solid #e8e8ed;
            transition: 0.4s cubic-bezier(0.15, 0, 0.2, 1);
        }
        .support-box:hover { border-color: var(--primary); transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.05); }

        .s-icon {
            width: 60px; height: 60px; border-radius: 16px; display: flex;
            align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 25px;
        }

        .support-box h3 { font-size: 1.5rem; margin-bottom: 15px; color: #000; }
        .support-box p { color: #86868b; font-size: 0.95rem; margin-bottom: 25px; line-height: 1.6; }

        .s-list { list-style: none; padding: 0; border-top: 1px solid #f2f2f7; padding-top: 20px; }
        .s-list li { margin-bottom: 10px; }
        .s-list a { text-decoration: none; color: var(--primary); font-size: 0.9rem; font-weight: 600; }
        .s-list a:hover { text-decoration: underline; }

        .faq-item {
            background: #fff; border: 1px solid #e8e8ed; border-radius: 20px;
            padding: 28px 32px; margin-bottom: 16px; scroll-margin-top: 110px;
        }
        .faq-item:target { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
        .faq-item h3 { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
        .faq-item p { color: #475569; font-size: 0.98rem; line-height: 1.7; margin: 0; }
        .faq-item a { color: var(--primary); font-weight: 600; text-decoration: none; }
        .faq-item a:hover { text-decoration: underline; }
    </style>
@endsection