@extends('layouts.app')

@section('content')
<style>
/* Cards jenis TB */
.card-tb {
  border-left: 4px solid;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}
.card-tb:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Chip gejala di dalam card */
.chip-gejala {
  display: inline-block;
  background: #F5F5F5;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  margin: 2px;
  color: #555;
}

/* Statistik box */
.stat-box {
  background: white;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.stat-number {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1565C0;
  display: block;
}

/* Langkah cara kerja */
.step-card {
  text-align: center;
  position: relative;
}
.step-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 2rem;
}

@media (min-width: 992px) {
  .step-arrow::after {
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 40px;
    right: -20px;
    font-size: 1.5rem;
    color: #ccc;
    transform: translateY(-50%);
  }
}

/* Disclaimer box */
.disclaimer-box {
  background: #FFFDE7;
  border: 1px solid #F9A825;
  border-radius: 12px;
  padding: 20px 24px;
}

/* Formula box */
.formula-box {
  background: #F5F7FA;
  border-left: 4px solid #1565C0;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #1565C0;
  margin: 10px 0;
}

/* Tabel interpretasi CF */
.tabel-cf td { vertical-align: middle; }
.badge-cf { border-radius: 20px; padding: 4px 12px; font-size: 13px; }

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }
</style>

<!-- SECTION 1 — Hero -->
<section class="py-5 fade-in" style="background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);">
    <div class="container text-center py-5">
        <h1 class="display-4 fw-bold font-poppins text-dark mb-3">Tentang Sistem Pakar TB</h1>
        <p class="lead text-muted mb-4 mx-auto" style="max-width: 700px;">Aplikasi ini dirancang untuk membantu deteksi dini penyakit Tuberkulosis secara mandiri menggunakan algoritma kecerdasan buatan Certainty Factor.</p>
        <div class="d-flex justify-content-center gap-3">
            <a href="{{ route('konsultasi.index') }}" class="btn btn-primary-custom rounded-pill px-4 py-2 fw-medium shadow-sm">
                Mulai Konsultasi Sekarang <i class="fas fa-arrow-right ms-1"></i>
            </a>
            <a href="#cara-kerja" class="btn btn-outline-secondary rounded-pill px-4 py-2 fw-medium bg-white">
                Lihat Cara Kerja <i class="fas fa-chevron-down ms-1"></i>
            </a>
        </div>
    </div>
</section>

<!-- SECTION 2 — 4 Cards Jenis TB -->
<section class="py-5 bg-white fade-in">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold font-poppins text-dark">Jenis Tuberkulosis</h2>
            <p class="text-muted">Tuberkulosis tidak hanya menyerang paru-paru. Berikut jenis-jenis utamanya:</p>
        </div>
        <div class="row g-4 justify-content-center">
            <!-- Card 1 -->
            <div class="col-md-6 col-lg-3">
                <div class="card card-tb p-4" style="border-left-color: #1565C0;">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto mx-md-0" style="width: 60px; height: 60px; background-color: #E3F2FD;">
                        <i class="fas fa-lungs fa-2x" style="color: #1565C0;"></i>
                    </div>
                    <h5 class="fw-bold font-poppins text-center text-md-start">TB Paru</h5>
                    <p class="text-muted small text-center text-md-start">Menyerang jaringan paru-paru, jenis TB paling umum dan menular melalui percikan dahak saat batuk atau bersin penderita.</p>
                    <div class="mt-auto">
                        <div class="fw-semibold small mb-2 text-dark text-center text-md-start">Gejala Utama:</div>
                        <div class="text-center text-md-start">
                            <span class="chip-gejala">Batuk >2 minggu</span>
                            <span class="chip-gejala">Batuk berdarah</span>
                            <span class="chip-gejala">Sesak napas</span>
                            <span class="chip-gejala">Demam malam</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Card 2 -->
            <div class="col-md-6 col-lg-3">
                <div class="card card-tb p-4" style="border-left-color: #2E7D32;">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto mx-md-0" style="width: 60px; height: 60px; background-color: #E8F5E9;">
                        <i class="fas fa-circle-nodes fa-2x" style="color: #2E7D32;"></i>
                    </div>
                    <h5 class="fw-bold font-poppins text-center text-md-start">TB Kelenjar</h5>
                    <p class="text-muted small text-center text-md-start">Menyerang kelenjar getah bening, ditandai pembengkakan di leher, ketiak, atau selangkangan yang umumnya tidak terasa nyeri.</p>
                    <div class="mt-auto">
                        <div class="fw-semibold small mb-2 text-dark text-center text-md-start">Gejala Utama:</div>
                        <div class="text-center text-md-start">
                            <span class="chip-gejala">Benjolan di leher</span>
                            <span class="chip-gejala">Benjolan lunak</span>
                            <span class="chip-gejala">Demam ringan</span>
                            <span class="chip-gejala">BB turun</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Card 3 -->
            <div class="col-md-6 col-lg-3">
                <div class="card card-tb p-4" style="border-left-color: #E65100;">
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto mx-md-0" style="width: 60px; height: 60px; background-color: #FFF3E0;">
                        <i class="fas fa-bone fa-2x" style="color: #E65100;"></i>
                    </div>
                    <h5 class="fw-bold font-poppins text-center text-md-start">TB Tulang</h5>
                    <p class="text-muted small text-center text-md-start">Menyerang tulang dan sendi terutama tulang belakang (Pott's disease), dapat menyebabkan kelumpuhan jika tidak ditangani segera.</p>
                    <div class="mt-auto">
                        <div class="fw-semibold small mb-2 text-dark text-center text-md-start">Gejala Utama:</div>
                        <div class="text-center text-md-start">
                            <span class="chip-gejala">Nyeri punggung</span>
                            <span class="chip-gejala">Kaku sendi</span>
                            <span class="chip-gejala">Bengkak tulang</span>
                            <span class="chip-gejala">Gerak terbatas</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Card 4 -->
            <div class="col-md-6 col-lg-3">
                <div class="card card-tb p-4 position-relative" style="border-left-color: #C62828;">
                    <div class="position-absolute top-0 end-0 mt-3 me-3">
                        <span class="badge bg-danger">DARURAT MEDIS</span>
                    </div>
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-3 mx-auto mx-md-0" style="width: 60px; height: 60px; background-color: #FCE4EC;">
                        <i class="fas fa-brain fa-2x" style="color: #880E4F;"></i>
                    </div>
                    <h5 class="fw-bold font-poppins text-center text-md-start">TB Otak</h5>
                    <p class="text-muted small text-center text-md-start">Jenis TB paling berbahaya, menyerang selaput otak dan membutuhkan penanganan darurat segera di rumah sakit.</p>
                    <div class="mt-auto">
                        <div class="fw-semibold small mb-2 text-dark text-center text-md-start">Gejala Utama:</div>
                        <div class="text-center text-md-start">
                            <span class="chip-gejala">Sakit kepala berat</span>
                            <span class="chip-gejala">Kaku kuduk</span>
                            <span class="chip-gejala">Kejang</span>
                            <span class="chip-gejala">Penurunan kesadaran</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SECTION 3 — Statistik TB Indonesia -->
<section class="py-5 bg-light fade-in">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold font-poppins text-dark">Urgensi Penanganan TB</h2>
            <p class="text-muted">Statistik global dan nasional menunjukkan pentingnya deteksi dini.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="stat-box">
                    <span class="stat-number mb-2" data-target="10.8">10.8</span>
                    <span class="fs-5 fw-bold text-dark d-block">Juta</span>
                    <p class="text-muted small mb-0 mt-2">Kasus TB baru per tahun di dunia (WHO 2023)</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="stat-box">
                    <span class="stat-number mb-2 text-danger" data-target="2">#2</span>
                    <span class="fs-5 fw-bold text-dark d-block">Dunia</span>
                    <p class="text-muted small mb-0 mt-2">Peringkat Indonesia beban TB global</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="stat-box">
                    <span class="stat-number mb-2" data-target="1060000">1,060,000</span>
                    <span class="fs-5 fw-bold text-dark d-block">Kasus</span>
                    <p class="text-muted small mb-0 mt-2">Estimasi kasus TB baru di Indonesia per tahun</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="stat-box">
                    <span class="stat-number mb-2 text-warning" data-target="36">36%</span>
                    <span class="fs-5 fw-bold text-dark d-block">Belum Terdeteksi</span>
                    <p class="text-muted small mb-0 mt-2">Kasus TB yang belum terdeteksi di Indonesia</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SECTION 4 — Cara Kerja Sistem -->
<section id="cara-kerja" class="py-5 bg-white fade-in">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="fw-bold font-poppins text-dark">Cara Kerja Sistem</h2>
            <p class="text-muted">Tiga langkah mudah untuk mengetahui tingkat risiko Anda.</p>
        </div>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4 step-card step-arrow">
                <div class="step-icon bg-primary bg-opacity-10 text-primary">
                    <i class="fas fa-list-check"></i>
                </div>
                <h5 class="fw-bold font-poppins">1. Pilih Gejala yang Dialami</h5>
                <p class="text-muted small px-3">Centang gejala-gejala yang Anda rasakan dari daftar 28 gejala klinis yang tersedia, lalu tentukan tingkat keyakinan untuk setiap gejala.</p>
            </div>
            <div class="col-md-4 step-card step-arrow">
                <div class="step-icon bg-warning bg-opacity-10 text-warning" style="transition: transform 1s;" onmouseover="this.style.transform='rotate(180deg)'" onmouseout="this.style.transform='rotate(0deg)'">
                    <i class="fas fa-gear"></i>
                </div>
                <h5 class="fw-bold font-poppins">2. Sistem Menghitung CF</h5>
                <p class="text-muted small px-3">Algoritma Certainty Factor menghitung tingkat keyakinan diagnosis berdasarkan nilai kepercayaan pakar dan bobot keyakinan pengguna secara iteratif.</p>
            </div>
            <div class="col-md-4 step-card">
                <div class="step-icon bg-success bg-opacity-10 text-success">
                    <i class="fas fa-clipboard-check"></i>
                </div>
                <h5 class="fw-bold font-poppins">3. Lihat Hasil Diagnosis</h5>
                <p class="text-muted small px-3">Sistem menampilkan jenis TB yang paling mungkin beserta persentase keyakinan, interpretasi, dan saran penanganan awal yang perlu dilakukan.</p>
            </div>
        </div>
    </div>
</section>

<!-- SECTION 5 — Tentang Metode Certainty Factor -->
<section class="py-5 bg-light fade-in">
    <div class="container py-4">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <h2 class="fw-bold font-poppins text-dark mb-4">Apa itu Certainty Factor?</h2>
                <p class="text-muted text-justify">
                    Certainty Factor adalah metode dalam sistem pakar yang pertama kali dikembangkan oleh Shortliffe & Buchanan (1975) pada sistem MYCIN untuk menangani ketidakpastian dalam diagnosis medis. Metode ini mengukur tingkat keyakinan seorang pakar terhadap suatu hipotesis berdasarkan bukti-bukti yang ada.
                </p>
                <div class="formula-box mb-4 shadow-sm">
                    <strong>Rumus Dasar:</strong><br>
                    CF(H,E) = MB(H,E) - MD(H,E)<br><br>
                    <strong>Kombinasi CF:</strong><br>
                    CF_combine = CF1 + CF2 &times; (1 - CF1)
                </div>
                <p class="text-muted small mt-3">
                    <i class="fas fa-info-circle text-primary me-1"></i> Kombinasi dilakukan secara iteratif pada setiap gejala yang dipilih oleh pengguna untuk mendapatkan nilai keyakinan akhir.
                </p>
            </div>
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                    <div class="card-header bg-white border-bottom py-3">
                        <h6 class="fw-bold font-poppins mb-0 text-center">Tabel Interpretasi Nilai CF</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table tabel-cf table-hover border-0 mb-0 text-center">
                                <thead class="bg-light border-0">
                                    <tr>
                                        <th class="py-3 border-0">Nilai CF</th>
                                        <th class="py-3 border-0">Interpretasi</th>
                                        <th class="py-3 border-0">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="fw-medium border-0 py-3">0.8 – 1.0</td>
                                        <td class="border-0 py-3">Hampir Pasti</td>
                                        <td class="border-0 py-3"><span class="badge badge-cf text-white" style="background-color: #1B5E20;">Hampir Pasti</span></td>
                                    </tr>
                                    <tr>
                                        <td class="fw-medium border-0 py-3">0.6 – 0.8</td>
                                        <td class="border-0 py-3">Kemungkinan Besar</td>
                                        <td class="border-0 py-3"><span class="badge badge-cf bg-success">Kemungkinan Besar</span></td>
                                    </tr>
                                    <tr>
                                        <td class="fw-medium border-0 py-3">0.4 – 0.6</td>
                                        <td class="border-0 py-3">Kemungkinan</td>
                                        <td class="border-0 py-3"><span class="badge badge-cf bg-warning text-dark">Kemungkinan</span></td>
                                    </tr>
                                    <tr>
                                        <td class="fw-medium border-0 py-3">0.2 – 0.4</td>
                                        <td class="border-0 py-3">Mungkin</td>
                                        <td class="border-0 py-3"><span class="badge badge-cf text-white" style="background-color: #F57C00;">Mungkin</span></td>
                                    </tr>
                                    <tr>
                                        <td class="fw-medium border-0 py-3">-0.2 – 0.2</td>
                                        <td class="border-0 py-3">Tidak Tahu</td>
                                        <td class="border-0 py-3"><span class="badge badge-cf bg-secondary">Tidak Tahu</span></td>
                                    </tr>
                                    <tr>
                                        <td class="fw-medium border-0 py-3 pb-4">Nilai Negatif</td>
                                        <td class="border-0 py-3 pb-4">Mungkin Tidak / Pasti Tidak</td>
                                        <td class="border-0 py-3 pb-4"><span class="badge badge-cf bg-danger">Mungkin Tidak</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@php
    $faskes = [
        [
            'nama' => 'Puskesmas Bugul Kidul',
            'alamat' => 'Jl. Veteran No.27, Bugul Kidul, Kota Pasuruan',
            'telp' => '(0343) 421014',
            'jam' => 'Senin-Sabtu: 07.30-14.00 WIB',
            'icon' => 'fa-hospital',
            'warna' => 'primary',
            'maps' => 'https://maps.google.com/?q=Puskesmas+Bugul+Kidul+Pasuruan',
        ],
        [
            'nama' => 'Puskesmas Gadingrejo',
            'alamat' => 'Jl. Kalianyar No.7, Gadingrejo, Kota Pasuruan',
            'telp' => '(0343) 424641',
            'jam' => 'Senin-Sabtu: 07.30-14.00 WIB',
            'icon' => 'fa-hospital',
            'warna' => 'primary',
            'maps' => 'https://maps.google.com/?q=Puskesmas+Gadingrejo+Pasuruan',
        ],
        [
            'nama' => 'Puskesmas Kandangsapi',
            'alamat' => 'Jl. Pahlawan No.1, Kandangsapi, Kota Pasuruan',
            'telp' => '(0343) 421883',
            'jam' => 'Senin-Sabtu: 07.30-14.00 WIB',
            'icon' => 'fa-hospital',
            'warna' => 'primary',
            'maps' => 'https://maps.google.com/?q=Puskesmas+Kandangsapi+Pasuruan',
        ],
        [
            'nama' => 'RSUD Dr. R. Soedarsono Pasuruan',
            'alamat' => 'Jl. Dr. Wahidin No.1, Kota Pasuruan, Jawa Timur',
            'telp' => '(0343) 424371',
            'jam' => '24 Jam (Termasuk IGD)',
            'icon' => 'fa-hospital-alt',
            'warna' => 'danger',
            'maps' => 'https://maps.google.com/?q=RSUD+Dr+R+Soedarsono+Pasuruan',
        ],
        [
            'nama' => 'Hotline TB Indonesia',
            'alamat' => 'Layanan Informasi TB Nasional - Kementerian Kesehatan RI',
            'telp' => '1500-010',
            'jam' => 'Senin-Jumat: 08.00-16.00 WIB',
            'icon' => 'fa-phone-alt',
            'warna' => 'success',
            'maps' => null,
        ],
    ];
@endphp

<!-- SECTION 6 — Fasilitas Kesehatan TB -->
<section class="py-5 bg-white fade-in">
    <div class="container py-4">
        <div class="text-center mb-5">
            <span class="badge rounded-pill bg-primary-custom px-4 py-2 mb-3">KOTA PASURUAN, JAWA TIMUR</span>
            <h2 class="fw-bold font-poppins text-dark">Fasilitas Kesehatan TB di Kota Pasuruan</h2>
            <p class="text-muted mx-auto" style="max-width: 760px;">
                Jika hasil konsultasi menunjukkan indikasi TB, segera datangi fasilitas kesehatan terdekat berikut untuk pemeriksaan lebih lanjut.
            </p>
        </div>

        <div class="row justify-content-center">
            @foreach($faskes as $item)
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center mb-3">
                                <div class="rounded-circle bg-{{ $item['warna'] }} bg-opacity-10 p-3 me-3">
                                    <i class="fas {{ $item['icon'] }} fa-lg text-{{ $item['warna'] }}"></i>
                                </div>
                                <h6 class="fw-bold mb-0">{{ $item['nama'] }}</h6>
                            </div>
                            <p class="text-muted small mb-1">
                                <i class="fas fa-map-marker-alt me-2 text-danger"></i>{{ $item['alamat'] }}
                            </p>
                            <p class="text-muted small mb-1">
                                <i class="fas fa-phone me-2 text-success"></i>{{ $item['telp'] }}
                            </p>
                            <p class="text-muted small mb-3">
                                <i class="fas fa-clock me-2 text-warning"></i>{{ $item['jam'] }}
                            </p>

                            @if($item['maps'])
                                <a href="{{ $item['maps'] }}" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm rounded-pill px-3">
                                    <i class="fas fa-map-marked-alt me-1"></i> Lihat di Maps
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- SECTION 7 — Disclaimer & CTA Akhir -->
<section class="py-5 bg-white fade-in">
    <div class="container text-center py-4">
        <div class="row justify-content-center mb-5">
            <div class="col-md-8">
                <div class="disclaimer-box text-start shadow-sm">
                    <div class="d-flex">
                        <i class="fas fa-exclamation-triangle text-warning fa-2x me-3 mt-1"></i>
                        <div>
                            <h6 class="fw-bold mb-1 text-dark">Perhatian Penting:</h6>
                            <p class="text-muted small mb-0" style="color: #666 !important;">Hasil dari aplikasi ini bukan merupakan diagnosis medis resmi. Aplikasi ini hanya berfungsi sebagai alat bantu skrining awal. Selalu konsultasikan gejala Anda kepada dokter atau tenaga kesehatan profesional untuk diagnosis dan penanganan yang tepat.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <h3 class="fw-bold font-poppins text-dark mb-4">Siap untuk mengetahui kondisi Anda?</h3>
        <a href="{{ route('konsultasi.index') }}" class="btn btn-primary-custom btn-lg rounded-pill px-5 py-3 fw-bold shadow">
            Mulai Konsultasi Sekarang <i class="fas fa-arrow-right ms-2"></i>
        </a>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateCounter(entry.target);
                observer.unobserve(entry.target);
            }
        });
    });

    document.querySelectorAll('.stat-number[data-target]').forEach(el => {
        observer.observe(el);
    });

    function animateCounter(el) {
        const targetStr = el.dataset.target;
        const target = parseFloat(targetStr);
        const duration = 1500; // 1.5 seconds
        const startTime = performance.now();
        const isDecimal = targetStr.includes('.');

        function update(currentTime) {
            const elapsedTime = currentTime - startTime;
            if (elapsedTime >= duration) {
                el.innerText = isDecimal ? target.toFixed(1) : target.toLocaleString('en-US');
            } else {
                const progress = elapsedTime / duration;
                const currentVal = target * progress;
                el.innerText = isDecimal ? currentVal.toFixed(1) : Math.floor(currentVal).toLocaleString('en-US');
                requestAnimationFrame(update);
            }
        }
        requestAnimationFrame(update);
    }
});
</script>

@endsection