@extends('layouts.app')

@section('content')
<style>
    .faq-hero {
        background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
    }

    .faq-accordion .accordion-button:not(.collapsed) {
        background-color: #E3F2FD;
        color: #1565C0;
        font-weight: 600;
    }

    .faq-accordion .accordion-button:focus {
        box-shadow: none;
    }

    .faq-accordion .accordion-button {
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        font-weight: 500;
    }

    .faq-accordion .accordion-body {
        color: #4A5568;
        font-size: 0.92rem;
        line-height: 1.75;
    }

    .faq-category-badge {
        background: #1565C0;
        color: white;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 12px;
        display: inline-block;
    }
</style>

<section class="faq-hero py-5 fade-in">
    <div class="container text-center py-5">
        <h1 class="display-5 fw-bold font-poppins text-dark mb-3">Pertanyaan yang Sering Diajukan</h1>
        <p class="lead text-muted mb-0 mx-auto" style="max-width: 720px;">
            Temukan jawaban dari pertanyaan umum seputar TB dan penggunaan aplikasi ini
        </p>
    </div>
</section>

<section class="py-5 bg-white">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div class="mb-5 fade-in">
                    <span class="faq-category-badge">
                        <i class="fas fa-laptop-medical me-2"></i> Tentang Aplikasi
                    </span>

                    <div class="accordion faq-accordion shadow-sm rounded-3 overflow-hidden" id="accordionAplikasi">
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqAplikasi1" aria-expanded="true" aria-controls="faqAplikasi1">
                                    Apakah hasil diagnosis dari aplikasi ini akurat dan bisa dipercaya?
                                </button>
                            </h2>
                            <div id="faqAplikasi1" class="accordion-collapse collapse show" data-bs-parent="#accordionAplikasi">
                                <div class="accordion-body">
                                    Aplikasi ini menggunakan metode Certainty Factor yang telah diuji dengan akurasi 85% berdasarkan perbandingan dengan diagnosis dokter pada 40 kasus uji. Namun hasil ini tetap bersifat estimasi dan tidak dapat menggantikan diagnosis medis resmi. Selalu konsultasikan ke dokter untuk kepastian.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqAplikasi2" aria-expanded="false" aria-controls="faqAplikasi2">
                                    Bagaimana cara kerja metode Certainty Factor?
                                </button>
                            </h2>
                            <div id="faqAplikasi2" class="accordion-collapse collapse" data-bs-parent="#accordionAplikasi">
                                <div class="accordion-body">
                                    CF menghitung tingkat keyakinan diagnosis berdasarkan dua nilai pakar: MB (Measure of Belief - keyakinan dokter bahwa gejala mendukung diagnosis) dan MD (Measure of Disbelief). Rumus: <code>CF = MB - MD</code>. Setiap gejala yang dipilih dikalikan bobot keyakinan user, lalu digabung secara iteratif dengan rumus: <code>CF_combine = CF1 + CF2 x (1 - CF1)</code>.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqAplikasi3" aria-expanded="false" aria-controls="faqAplikasi3">
                                    Apakah data konsultasi saya aman dan private?
                                </button>
                            </h2>
                            <div id="faqAplikasi3" class="accordion-collapse collapse" data-bs-parent="#accordionAplikasi">
                                <div class="accordion-body">
                                    Ya. Data konsultasi tersimpan aman di server dan hanya dapat diakses oleh akun Anda sendiri. Data digunakan hanya untuk keperluan penelitian akademis dalam rangka skripsi pengembangan sistem ini.
                                </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="#faqAplikasi4" aria-expanded="false" aria-controls="faqAplikasi4">
                                    Apakah aplikasi ini gratis?
                                </button>
                            </h2>
                            <div id="faqAplikasi4" class="accordion-collapse collapse" data-bs-parent="#accordionAplikasi">
                                <div class="accordion-body">
                                    Ya, sepenuhnya gratis dan dapat diakses dari browser manapun tanpa instalasi.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-5 fade-in">
                    <span class="faq-category-badge">
                        <i class="fas fa-lungs-virus me-2"></i> Tentang Tuberkulosis
                    </span>

                    <div class="accordion faq-accordion shadow-sm rounded-3 overflow-hidden" id="accordionTuberkulosis">
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqTb1" aria-expanded="true" aria-controls="faqTb1">
                                    Apa saja gejala TB yang paling umum?
                                </button>
                            </h2>
                            <div id="faqTb1" class="accordion-collapse collapse show" data-bs-parent="#accordionTuberkulosis">
                                <div class="accordion-body">
                                    Gejala TB yang paling sering muncul adalah batuk lebih dari 2-3 minggu, batuk berdarah, demam pada sore/malam hari, keringat malam berlebih, penurunan berat badan tanpa sebab jelas, dan kelelahan berkepanjangan. Jika mengalami beberapa gejala ini, segera konsultasikan ke dokter.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqTb2" aria-expanded="false" aria-controls="faqTb2">
                                    Apakah TB bisa sembuh total?
                                </button>
                            </h2>
                            <div id="faqTb2" class="accordion-collapse collapse" data-bs-parent="#accordionTuberkulosis">
                                <div class="accordion-body">
                                    Ya! TB dapat sembuh dengan pengobatan OAT (Obat Anti Tuberkulosis) selama minimal 6 bulan. Kunci keberhasilan adalah kepatuhan minum obat hingga selesai. Jangan pernah menghentikan obat di tengah jalan karena bisa menyebabkan TB-MDR (kebal obat) yang jauh lebih sulit diobati.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqTb3" aria-expanded="false" aria-controls="faqTb3">
                                    Bagaimana TB menular?
                                </button>
                            </h2>
                            <div id="faqTb3" class="accordion-collapse collapse" data-bs-parent="#accordionTuberkulosis">
                                <div class="accordion-body">
                                    TB Paru menular melalui udara (droplet) saat penderita batuk, bersin, atau berbicara. TB jenis lain (kelenjar, tulang, otak) tidak menular melalui udara. Risiko penularan meningkat pada kontak erat, ruangan padat dan kurang ventilasi.
                                </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="#faqTb4" aria-expanded="false" aria-controls="faqTb4">
                                    Apa itu TB-MDR dan seberapa berbahaya?
                                </button>
                            </h2>
                            <div id="faqTb4" class="accordion-collapse collapse" data-bs-parent="#accordionTuberkulosis">
                                <div class="accordion-body">
                                    TB-MDR (Multi Drug Resistant) adalah TB yang sudah kebal terhadap obat-obat utama TB. Penyebab utamanya adalah ketidakpatuhan minum obat. TB-MDR jauh lebih sulit dan mahal diobati, membutuhkan waktu pengobatan 18-24 bulan dengan efek samping lebih berat.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-5 fade-in">
                    <span class="faq-category-badge">
                        <i class="fas fa-map-signs me-2"></i> Cara Menggunakan Aplikasi
                    </span>

                    <div class="accordion faq-accordion shadow-sm rounded-3 overflow-hidden" id="accordionCara">
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqCara1" aria-expanded="true" aria-controls="faqCara1">
                                    Bagaimana cara memulai konsultasi?
                                </button>
                            </h2>
                            <div id="faqCara1" class="accordion-collapse collapse show" data-bs-parent="#accordionCara">
                                <div class="accordion-body">
                                    (1) Daftar akun atau masuk ke akun yang sudah ada. (2) Klik menu "Konsultasi". (3) Pilih tab jenis TB yang ingin diperiksa. (4) Centang gejala yang sedang dialami. (5) Pilih tingkat keyakinan untuk setiap gejala (Tidak Yakin hingga Sangat Yakin). (6) Klik tombol "Proses Diagnosis".
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCara2" aria-expanded="false" aria-controls="faqCara2">
                                    Apa arti bobot keyakinan 0.2, 0.4, 0.6, 0.8, 1.0?
                                </button>
                            </h2>
                            <div id="faqCara2" class="accordion-collapse collapse" data-bs-parent="#accordionCara">
                                <div class="accordion-body">
                                    Bobot ini merepresentasikan seberapa yakin Anda mengalami gejala tersebut: 0.2 = Tidak Yakin (baru sedikit terasa), 0.4 = Mungkin (kadang-kadang), 0.6 = Cukup Yakin (cukup sering), 0.8 = Yakin (sering dan jelas), 1.0 = Sangat Yakin (pasti dan terus-menerus).
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCara3" aria-expanded="false" aria-controls="faqCara3">
                                    Apakah saya bisa konsultasi berkali-kali?
                                </button>
                            </h2>
                            <div id="faqCara3" class="accordion-collapse collapse" data-bs-parent="#accordionCara">
                                <div class="accordion-body">
                                    Boleh. Setiap hasil konsultasi tersimpan otomatis di halaman Riwayat dan dapat dilihat kapan saja beserta detail gejala yang dipilih.
                                </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="#faqCara4" aria-expanded="false" aria-controls="faqCara4">
                                    Apa yang harus dilakukan jika hasil menunjukkan "Hampir Pasti"?
                                </button>
                            </h2>
                            <div id="faqCara4" class="accordion-collapse collapse" data-bs-parent="#accordionCara">
                                <div class="accordion-body">
                                    Segera datangi puskesmas atau rumah sakit terdekat untuk pemeriksaan dahak (TCM/BTA) dan rontgen dada. Bawa hasil cetak dari aplikasi ini sebagai referensi awal untuk dokter. Deteksi dan pengobatan dini sangat meningkatkan peluang kesembuhan.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-center py-5">
                    <p class="text-muted mb-3">Masih ada pertanyaan lain? Atau siap memulai konsultasi?</p>
                    <a href="{{ route('konsultasi.index') }}" class="btn btn-primary-custom btn-lg rounded-pill px-5">
                        <i class="fas fa-stethoscope me-2"></i> Mulai Konsultasi Sekarang
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection