@extends('layouts.base')
{{-- @section('title', __('labels.case_studies')) --}}
@push('css')
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Poppins -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f4f6fb;
            color: #1f2937;
        }

        /* Hero */
        .faq-hero {
            background: linear-gradient(135deg, #4f46e5, #4f46e5);
            color: #fff;
        }

        .faq-hero h1 {
            font-weight: 700;
        }

        /* FAQ Card */
        .faq-card {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
        }

        .faq-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 35px rgba(79, 70, 229, 0.1);
        }

        /* Accordion */
        .accordion-button {
            font-weight: 500;
            padding: 1.25rem;
        }

        .accordion-button:not(.collapsed) {
            background-color: #f8fafc;
            color: #4f46e5;
        }

        .accordion-body {
            color: #6b7280;
            line-height: 1.7;
        }

        .faq-icon {
            font-size: 1.2rem;
            color: #4f46e5;
            margin-right: 10px;
        }

        /* Support Ticket Button */
        .btn-support {
            background: #4f46e5;
            color: white;
            border: none;
            padding: 12px 30px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .btn-support:hover {
            background: #4338ca;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
        }

        .btn-support-outline {
            background: transparent;
            color: #4f46e5;
            border: 2px solid #4f46e5;
            padding: 10px 25px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .btn-support-outline:hover {
            background: #4f46e5;
            color: white;
            transform: translateY(-2px);
        }

        /* Floating Button */
        .floating-support {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }

        .floating-support .btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #4f46e5;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 20px rgba(79, 70, 229, 0.4);
            transition: all 0.3s;
        }

        .floating-support .btn:hover {
            transform: scale(1.1);
            background: #4338ca;
            box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5);
        }

        .floating-support .btn i {
            font-size: 24px;
        }

        /* CTA Section */
        .support-cta {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 14px;
            padding: 3rem;
            color: white;
        }

        .support-cta .btn {
            background: white;
            color: #4f46e5;
            border: none;
            padding: 12px 35px;
            font-weight: 600;
        }

        .support-cta .btn:hover {
            background: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
        }

        footer {
            background: #4f46e5;
            color: white;
            font-size: 14px;
        }
    </style>
@endpush

@section('content')
    <!-- HERO SECTION WITH BACK AND SUPPORT BUTTONS -->
    <section class="faq-hero py-5">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <a href="javascript:history.back()"
                    class="btn btn-light border d-inline-flex align-items-center gap-2 back-btn">
                    <i class="bi bi-arrow-left"></i> Zurück
                </a>
                @if(auth()->check())
                <a href="{{ route('support-tickets.create') }}" 
                    class="btn btn-light border d-inline-flex align-items-center gap-2">
                    <i class="bi bi-ticket"></i> Support Ticket
                </a>
                @endif
            </div>
            <div class="text-center">
                <h1 class="mb-3">Häufig gestellte Fragen</h1>
                <p class="mb-0 opacity-75">
                    Antworten auf die wichtigsten Fragen zu unseren Dienstleistungen, Prozessen
                    und Sicherheitslösungen.
                </p>
            </div>
        </div>
    </section>

    <!-- FAQ CONTENT -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <!-- Category 1: Allgemeine Fragen -->
                    <div class="faq-card p-4 mb-4">
                        <h5 class="fw-semibold mb-4">
                            <i class="bi bi-shield-lock faq-icon"></i> Allgemeine Fragen
                        </h5>
                        <div class="accordion" id="faqGeneral">
                            @if(isset($faqs) && count($faqs))
                                @foreach ($faqs as $key => $item)
                                <div class="accordion-item border-0">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button {{ $key === 0 ? '' : 'collapsed' }}" 
                                                type="button"
                                                data-bs-toggle="collapse" 
                                                data-bs-target="#q{{ $key }}">
                                            {{ $item->question }}
                                        </button>
                                    </h2>
                                    <div id="q{{ $key }}" class="accordion-collapse collapse {{ $key === 0 ? 'show' : '' }}" 
                                         data-bs-parent="#faqGeneral">
                                        <div class="accordion-body">
                                            {{ $item->answer }}
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @else
                                <div class="text-center py-4">
                                    <i class="bi bi-info-circle fs-1 text-muted"></i>
                                    <p class="mt-3 text-muted">Keine FAQs verfügbar.</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Category 2: Dienstleistungen (Static Example) -->
                    {{-- <div class="faq-card p-4 mb-4">
                        <h5 class="fw-semibold mb-4">
                            <i class="bi bi-gear faq-icon"></i> Dienstleistungen
                        </h5>
                        <div class="accordion" id="faqServices">
                            <div class="accordion-item border-0">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#q3">
                                        Was ist ein Penetrationstest?
                                    </button>
                                </h2>
                                <div id="q3" class="accordion-collapse collapse" data-bs-parent="#faqServices">
                                    <div class="accordion-body">
                                        Ein Penetrationstest simuliert reale Cyberangriffe, um Schwachstellen
                                        in Systemen, Netzwerken oder Anwendungen frühzeitig zu erkennen.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item border-0">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#q4">
                                        Bieten Sie individuelle Sicherheitskonzepte an?
                                    </button>
                                </h2>
                                <div id="q4" class="accordion-collapse collapse" data-bs-parent="#faqServices">
                                    <div class="accordion-body">
                                        Ja, alle unsere Lösungen werden individuell auf die Anforderungen,
                                        Branche und IT-Struktur unserer Kunden zugeschnitten.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}

                    <!-- Category 3: Prozesse & Support -->
                    {{-- <div class="faq-card p-4 mb-4">
                        <h5 class="fw-semibold mb-4">
                            <i class="bi bi-clock-history faq-icon"></i> Prozesse & Support
                        </h5>
                        <div class="accordion" id="faqProcess">
                            <div class="accordion-item border-0">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#q5">
                                        Wie schnell reagieren Sie auf Sicherheitsvorfälle?
                                    </button>
                                </h2>
                                <div id="q5" class="accordion-collapse collapse" data-bs-parent="#faqProcess">
                                    <div class="accordion-body">
                                        Unser Incident-Response-Team steht je nach Vereinbarung rund um die Uhr
                                        zur Verfügung und reagiert in der Regel innerhalb kürzester Zeit.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item border-0">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#q6">
                                        Gibt es einen festen Ansprechpartner?
                                    </button>
                                </h2>
                                <div id="q6" class="accordion-collapse collapse" data-bs-parent="#faqProcess">
                                    <div class="accordion-body">
                                        Ja, jedem Kunden wird ein dedizierter Ansprechpartner zugewiesen,
                                        der alle Projekte und Supportanfragen koordiniert.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}

                    @if(auth()->check())
                    <!-- SUPPORT TICKET CTA SECTION (BOTTOM) -->
                    <div class="text-center mt-5">
                        <div class="faq-card p-5">
                            <div class="support-cta">
                                <i class="bi bi-question-circle" style="font-size: 3rem;"></i>
                                <h4 class="mt-3 mb-3">Noch nicht fündig geworden?</h4>
                                <p class="mb-4 opacity-75">
                                    Wenn Sie weitere Fragen haben oder persönliche Unterstützung benötigen, 
                                    öffnen Sie gerne ein Support-Ticket. Unser Team hilft Ihnen schnell und kompetent weiter.
                                </p>
                                <a href="{{ route('support-tickets.create') }}" 
                                    class="btn btn-light btn-lg px-5 py-3">
                                    <i class="bi bi-ticket me-2"></i> Support Ticket erstellen
                                </a>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- QUICK SUPPORT OPTIONS -->
                    {{-- <div class="row mt-4 g-4">
                        <div class="col-md-6">
                            <div class="faq-card p-4 text-center h-100">
                                <i class="bi bi-envelope fs-1" style="color: #4f46e5;"></i>
                                <h5 class="mt-3">E-Mail Support</h5>
                                <p class="text-muted small">Antwort innerhalb von 24 Stunden</p>
                                <a href="mailto:support@example.com" class="btn btn-support-outline mt-2">
                                    <i class="bi bi-envelope me-2"></i>support@example.com
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="faq-card p-4 text-center h-100">
                                <i class="bi bi-telephone fs-1" style="color: #4f46e5;"></i>
                                <h5 class="mt-3">Telefon Support</h5>
                                <p class="text-muted small">Mo-Fr, 9:00 - 18:00 Uhr</p>
                                <a href="tel:+49123456789" class="btn btn-support-outline mt-2">
                                    <i class="bi bi-telephone me-2"></i>+49 123 456789
                                </a>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </section>

    @if(auth()->check())
    <!-- FLOATING SUPPORT BUTTON (always visible) -->
    <div class="floating-support">
        <a href="{{ route('support-tickets.create') }}" 
            class="btn"
            data-bs-toggle="tooltip" 
            data-bs-placement="left"
            title="Support Ticket öffnen">
            <i class="bi bi-ticket"></i>
        </a>
    </div>
    @endif

    @include('modules.templates.copyright')
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Initialize all tooltips
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Bootstrap tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        // Auto-collapse other accordions when one is opened
        var accordions = document.querySelectorAll('.accordion');
        accordions.forEach(function(accordion) {
            accordion.addEventListener('shown.bs.collapse', function(event) {
                var parentAccordion = event.target.closest('.accordion');
                var openItems = parentAccordion.querySelectorAll('.accordion-collapse.show');
                if (openItems.length > 1) {
                    var firstItem = openItems[0];
                    if (firstItem !== event.target) {
                        bootstrap.Collapse.getInstance(firstItem).hide();
                    }
                }
            });
        });
    });
</script>
@endpush