@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);
        }

        /* 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;
        }

        footer {
            background: #4f46e5;
            color: white;
            font-size: 14px;
        }
    </style>
@endpush
@section('content')
    <!-- HERO -->
    <section class="faq-hero py-5">
        <div class="container text-center">
            <a href="javascript:history.back()"
                class="btn btn-light border d-inline-flex align-items-center gap-2 w-auto back-btn float-start">
                <i class="bi bi-arrow-left"></i> Zurück
            </a>
            <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>
    </section>

    <!-- FAQ CONTENT -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <!-- Category 1 -->
                    <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 accordion-collapse" 
                                                data-bs-toggle="collapse" 
                                                data-bs-target="#q{{ $key }}">
                                            {{ $item->question }}
                                        </button>
                                    </h2>
                                    <div id="q{{ $key }}" class="accordion-collapse collapse" data-bs-parent="#faqGeneral">
                                        <div class="accordion-body">
                                            {{ $item->answer }}
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endif
                        </div>
                    </div>

                    {{-- <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" 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" 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>

                    <div class="faq-card p-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" 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" 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> --}}

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

    @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>
@endpush