@extends('layouts.app')

@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: #007aff;">Official Kotsch.tech Help 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: 600px; margin: 20px auto 0;">
                Hier findest du Antworten zu meinen Apps, Windows-Tools und Hardware-Kits. 
                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(300px, 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 & Mac Apps</h3>
                    <p>Hilfe zur <strong>DE-Companion</strong> App, iCloud-Synchronisierung und Abonnements.</p>
                    <ul class="s-list">
                        <li><a href="#faq-icloud">Wie funktioniert der Sync?</a></li>
                        <li><a href="#faq-restore">Käufe wiederherstellen</a></li>
                    </ul>
                </div>

                <!-- Windows Support -->
                <div class="support-box">
                    <div class="s-icon" style="background: #e0f2fe; color: #007aff;"><i class="fab fa-windows"></i></div>
                    <h3>Windows Tools</h3>
                    <p>Probleme mit <strong>Kotsch Commander</strong>, Lizenzen oder Hardware-Kompatibilität.</p>
                    <ul class="s-list">
                        <li><a href="#faq-license">Key nicht erhalten?</a></li>
                        <li><a href="#faq-win11">Windows 11 Support</a></li>
                    </ul>
                </div>

                <!-- Hardware Support -->
                <div class="support-box">
                    <div class="s-icon" style="background: #fffbeb; color: #f59e0b;"><i class="fas fa-microchip"></i></div>
                    <h3>Hardware & IoT</h3>
                    <p>Anleitungen für ESP32 Kits, Schaltpläne und Hilfe bei der Verkabelung.</p>
                    <ul class="s-list">
                        <li><a href="#faq-driver">Treiber-Installation</a></li>
                        <li><a href="#faq-code">Beispiel-Skripte</a></li>
                    </ul>
                </div>

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

    <!-- =============================================
         3. DIREKTER KONTAKT (Der "Ticket" Bereich)
         ============================================= -->
    <section style="padding: 100px 8%; background: #000; color: white; border-radius: 60px; margin: 0 4% 100px;">
        <div class="container reveal" style="display: grid; grid-template-columns: 1.2fr 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 – du schreibst direkt mit mir.
                </p>
                <div style="display: flex; gap: 20px;">
                    <a href="/kontakt?subject=Technischer-Support" class="btn-nav" style="background: #007aff; color: white; padding: 18px 40px; border-radius: 12px; font-weight: 800;">TICKET ERÖFFNEN</a>
                    <a href="mailto:kotsch.tech@icloud.com" 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 style="text-align: right; opacity: 0.1; font-size: 15rem;">
                <i class="fas fa-headset"></i>
            </div>
        </div>
    </section>

    <!-- =============================================
         4. FOOTER INFO FÜR REVIEWER
         ============================================= -->
    <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;">
                KOTSCH.TECH Support ist für alle rechtmäßig erworbenen Produkte kostenlos verfügbar. 
                Antwortzeiten liegen in der Regel unter 24 Stunden (Werktags).
            </p>
            <div style="margin-top: 30px; display: flex; justify-content: center; gap: 30px; font-size: 0.8rem;">
                <a href="/impressum" style="color: #007aff; text-decoration: none; font-weight: 700;">IMPRESSUM</a>
                <a href="/datenschutz" style="color: #007aff; text-decoration: none; font-weight: 700;">DATENSCHUTZ</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: #007aff; 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: #007aff; font-size: 0.9rem; font-weight: 600; }
        .s-list a:hover { text-decoration: underline; }
    </style>
@endsection