<script>
    import {
        IconBuildingSkyscraper,
        IconClipboardText,
        IconHistory,
        IconUsersGroup,
        IconChevronDown,
        IconChevronUp,
        IconStarFilled,
    } from "@tabler/icons-svelte";
    import { v4 as uuidv4 } from "uuid";

    const currentYear = new Date().getFullYear();

    let features = [
        {
            id: uuidv4(),
            icon: IconBuildingSkyscraper,
            title: "Manajemen Data Anak",
            description: "Keloola data lengkap anak dengan sistem manajemen yang mudah dan efisien.",
        },
        {
            id: uuidv4(),
            title: "Laporan dan Statistik",
            icon: IconClipboardText,
            description: "Dapatkan laporan dan statistik perkembangan anak secara lengkap dan terperinci.",
        },
        {
            id: uuidv4(),
            title: "Riwayat Kesehatan",
            icon: IconHistory,
            description: "Pantau riwayat kesehatan anak dengan mudah, dan penyakit yang pernah diderita.",
        },
        {
            id: uuidv4(),
            title: "Kerjasama dengan Ahli",
            icon: IconUsersGroup,
            description: "Koordinasi kepada ahli tenaga kesehatan anak untuk konsultasi dan saran yang tepat.",
        },
    ];

    let testimonials = [
        {
            id: uuidv4(),
            name: "Sari Indrawati",
            role: "Ibu Rumah Tangga",
            avatar: "https://ui-avatars.com/api/?name=Sari+Indrawati&background=random&size=64",
            content:
                "BalitaSehat membantu saya memantau tumbuh kembang anak dengan mudah. Fitur riwayat kesehatan sangat membantu saat kontrol ke dokter.",
            rating: 5,
        },
        {
            id: uuidv4(),
            name: "Ahmad Rizki",
            role: "Ayah dari 2 Anak",
            avatar: "https://ui-avatars.com/api/?name=Ahmad+Rizki&background=random&size=64",
            content:
                "Aplikasi yang sangat berguna untuk orang tua modern. Laporan statistik membantu saya memahami perkembangan anak lebih baik.",
            rating: 5,
        },
        {
            id: uuidv4(),
            name: "Dr. Maya Sari",
            role: "Dokter Anak",
            avatar: "https://ui-avatars.com/api/?name=Dr.+Maya+Sari&background=random&size=64",
            content:
                "Sebagai dokter anak, saya merekomendasikan BalitaSehat kepada para orang tua. Data yang tersimpan sangat membantu dalam diagnosis.",
            rating: 5,
        },
    ];

    let faqs = [
        {
            id: uuidv4(),
            question: "Apa itu BalitaSehat?",
            answer: "BalitaSehat adalah aplikasi digital yang membantu orang tua memantau dan mencatat tumbuh kembang anak secara komprehensif, mulai dari data kesehatan, pertumbuhan, hingga riwayat medis.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Bagaimana cara menangani demam pada balita?",
            answer: "Demam pada balita bisa ditangani dengan memberikan banyak cairan, kompres air hangat, dan paracetamol sesuai dosis. Segera konsultasi ke dokter jika demam di atas 38.5°C atau berlangsung lebih dari 3 hari.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Apa yang harus dilakukan saat anak batuk pilek?",
            answer: "Berikan banyak air putih, jaga kelembaban udara, dan hindari makanan yang memicu alergi. Untuk batuk berdahak, bantu anak mengeluarkan dahak dengan menepuk punggung secara perlahan. Konsultasi dokter jika batuk berlangsung lebih dari 2 minggu.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Bagaimana mengatasi mual dan muntah pada anak?",
            answer: "Berikan cairan sedikit demi sedikit, hindari makanan berlemak dan pedas, berikan makanan dalam porsi kecil tapi sering. Jika muntah terus menerus dan disertai dehidrasi, segera bawa ke dokter.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Kapan harus ke dokter saat anak flu?",
            answer: "Bawa anak ke dokter jika flu disertai demam tinggi (>38.5°C), kesulitan bernapas, tidak mau makan/minum, atau gejala memburuk setelah 3-4 hari. Untuk bayi di bawah 3 bulan, segera konsultasi dokter.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Bagaimana menangani sakit kepala pada anak?",
            answer: "Berikan istirahat yang cukup, kompres dingin di dahi, pastikan anak terhidrasi dengan baik. Hindari paparan cahaya terang dan suara bising. Jika sakit kepala disertai muntah, demam tinggi, atau gangguan penglihatan, segera konsultasi dokter.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Apa yang harus dilakukan jika napsu makan anak berkurang?",
            answer: "Coba berikan makanan dalam porsi kecil tapi sering, sajikan makanan favorit anak, dan buat suasana makan yang menyenangkan. Pastikan anak tetap terhidrasi. Jika tidak mau makan lebih dari 2-3 hari disertai penurunan berat badan, konsultasi dokter.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Kapan sesak napas pada anak perlu penanganan darurat?",
            answer: "Sesak napas adalah kondisi serius yang memerlukan perhatian medis segera. Bawa anak ke IGD jika napas cepat dan dangkal, kulit kebiruan, tidak bisa berbicara karena sesak, atau menggunakan otot tambahan untuk bernapas. Jangan tunda untuk mencari bantuan medis.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Apa penyebab ruam kulit pada balita?",
            answer: "Ruam kulit pada balita bisa disebabkan oleh berbagai faktor seperti alergi makanan, kontak dengan bahan iritan (deterjen, sabun), infeksi jamur atau bakteri, eksim, biang keringat, atau reaksi obat. Cuaca panas dan kelembaban tinggi juga bisa memicu ruam kulit pada anak.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Mengapa anak saya sering terlihat lesu dan tidak berenergi?",
            answer: "Anak yang lesu bisa disebabkan oleh kurang tidur, kekurangan nutrisi, dehidrasi, stres, atau sedang dalam masa pertumbuhan. Namun, jika disertai gejala lain seperti demam, muntah, atau berlangsung lama, bisa jadi tanda infeksi atau masalah kesehatan lainnya yang perlu diperiksa dokter.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Bagaimana cara mencegah diare pada anak?",
            answer: "Cegah diare dengan menjaga kebersihan tangan, memasak makanan hingga matang, menyimpan makanan dengan benar, memberikan ASI eksklusif untuk bayi, dan memastikan air minum bersih. Hindari jajan sembarangan dan selalu cuci buah dan sayur sebelum dikonsumsi.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Apa saja gejala sakit tenggorokan yang perlu diwaspadai?",
            answer: "Gejala sakit tenggorokan yang perlu diwaspadai meliputi kesulitan menelan, demam tinggi di atas 39°C, pembengkakan kelenjar getah bening di leher, bercak putih atau nanah di tenggorokan, suara serak yang tidak kunjung membaik, dan anak menolak makan atau minum.",
            isOpen: false,
        },
        {
            id: uuidv4(),
            question: "Kapan nyeri perut pada anak bisa menjadi tanda bahaya?",
            answer: "Nyeri perut menjadi tanda bahaya jika sangat hebat dan terus menerus, disertai muntah berulang, demam tinggi, perut kembung dan keras, BAB berdarah, atau anak tampak sangat kesakitan hingga menangis terus. Kondisi ini memerlukan penanganan medis segera.",
            isOpen: false,
        },
    ];

    const toggleFAQ = (id) => {
        faqs = faqs.map((faq) => ({
            ...faq,
            isOpen: faq.id === id ? !faq.isOpen : false,
        }));
    };
</script>

<div class="container">
    <header class="navbar navbar-expand-md d-print-none fixed-top">
        <div class="container-xl d-flex align-items-center">
            <a href={"#"} aria-label="Tabler" class="navbar-brand navbar-brand-autodark me-3">
                <img src="./img/logo.png" width="110" height="32" alt="Tabler" class="navbar-brand-image" />
            </a>

            <h1 class="navbar-brand d-md-block mb-0">BalitaSehat</h1>

            <ul class="navbar-nav ms-auto">
                <li class="d-flex align-items-center">
                    <a class="btn btn-primary my-2" href="/login"> Login </a>
                </li>
            </ul>
        </div>
    </header>

    <!-- Hero -->
    <section class="py-5 py-lg-6 mt-6">
        <div class="container mt-6">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-1">
                    <h1 class="display-5 fw-semibold mb-3">
                        Pantau <span class="text-primary">Tumbuh Kembang</span> Anak dengan Mudah
                    </h1>
                    <p class="text-muted tracking-wide">
                        Hadir untuk membantu orang tua mencatat dan memantau perkembangan anak sejak dini, dapatkan
                        wawasan dan dukungan terbaik di setiap tahap pertumbuhannya.
                    </p>
                    <div class="d-flex gap-3 flex-wrap mt-6">
                        <a href="/register" class="btn btn-primary">Mulai Sekarang</a>
                        <a href={"#"} class="btn btn-outline-primary">Pelajari lebih lanjut</a>
                    </div>
                </div>
                <div class="col-lg-6 mb-lg-5 text-center">
                    <img src="./img/img-hero.svg" alt="hero" class="img-fluid shadow" style="max-height: 350px;" />
                </div>
            </div>
        </div>
    </section>

    <!-- Feature -->
    <section class="py-6 py-lg-6 bg-body mt-6">
        <div class="container text-center">
            <p class="text-primary fw-semibold mb-6">Fitur Unggulan</p>
            <h2 class="fw-bold display-6 mb-3">Dukung Tumbuh Kembang Anak Lebih Optimal</h2>
            <p class="lead text-muted mb-6">
                BalitaSehat menyediakan fitur lengkap untuk membantu orang tua mengawasi pertumbuhan dan kesehatan buah
                hati mereka.
            </p>
            <div class="row text-start">
                {#each features as feature}
                    <div class="col-md-6 col-lg-3 mb-6">
                        <div class="card d-flex align-items-start">
                            <div class="ms-3 mt-3 text-primary">
                                <svelte:component this={feature.icon} size={40} stroke={1} />
                            </div>
                            <div class="card-body">
                                <h3 class="fw-semibold">{feature.title}</h3>
                                <p class="text-muted mb-0">{feature.description}</p>
                            </div>
                        </div>
                    </div>
                {/each}
            </div>
        </div>
    </section>

    <!-- Testimonial -->
    <section class="py-6 py-lg-6 mt-6">
        <div class="container text-center">
            <p class="text-primary fw-semibold mb-6">Dipercaya oleh Ribuan Keluarga</p>
            <h2 class="fw-bold display-6 mb-3">Apa Kata Mereka Tentang BalitaSehat</h2>
            <p class="lead text-muted mb-6">
                Orang tua dan tenaga kesehatan telah merasakan manfaat BalitaSehat dalam memantau tumbuh kembang anak.
            </p>
            <div class="row">
                {#each testimonials as testimonial}
                    <div class="col-12 col-lg-4 col-md-4 mb-4">
                        <div class="card h-100">
                            <div class="card-body text-start">
                                <div class="d-flex align-items-center mb-3 py-4 py-lg-0 py-md-0">
                                    <img
                                        src={testimonial.avatar}
                                        alt={testimonial.name}
                                        class="avatar avatar-md rounded-circle me-3"
                                        style="width: 48px; height: 48px; object-fit: cover;"
                                    />
                                    <div>
                                        <h5 class="card-title mb-0">{testimonial.name}</h5>
                                        <small class="text-muted">{testimonial.role}</small>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    {#each Array(testimonial.rating) as _, i}
                                        <span class="text-warning"><IconStarFilled /></span>
                                    {/each}
                                </div>
                                <p class="text-muted">{testimonial.content}</p>
                            </div>
                        </div>
                    </div>
                {/each}
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="py-6 py-lg-6 bg-body mt-6">
        <div class="container">
            <div class="text-center mb-6">
                <p class="text-primary fw-semibold mb-6">Pertanyaan Umum</p>
                <h2 class="fw-bold display-6 mb-3">Frequently Asked Questions</h2>
                <p class="lead text-muted">
                    Temukan jawaban untuk pertanyaan yang sering diajukan tentang BalitaSehat.
                </p>
            </div>
            <div class="row justify-content-center">
                <div class="col-12 col-lg-8">
                    <div class="accordion" id="faqAccordion">
                        {#each faqs as faq, index}
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="heading{faq.id}">
                                    <button
                                        class="accordion-button {faq.isOpen ? '' : 'collapsed'}"
                                        type="button"
                                        on:click={() => toggleFAQ(faq.id)}
                                        aria-expanded={faq.isOpen}
                                        aria-controls="collapse{faq.id}"
                                    >
                                        {faq.question}
                                    </button>
                                </h3>
                                <div
                                    id="collapse{faq.id}"
                                    class="accordion-collapse collapse {faq.isOpen ? 'show' : ''}"
                                    aria-labelledby="heading{faq.id}"
                                >
                                    <div class="accordion-body">
                                        {faq.answer}
                                    </div>
                                </div>
                            </div>
                        {/each}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="bg-primary text-white text-center py-4 py-lg-4 mt-6">
        <div class="container">
            <h3 class="fw-bold display-6 mb-6">
                Siap untuk mulai memantau <br />pertumbuhan si kecil?
            </h3>
            <p class="text-lg-center lead mt-6 text-white">
                Daftarkan dirimu sekarang dan nikmati fitur gratis dari BalitaSehat. <br /> Tidak perlu kartu kredit!
            </p>
            <div class="d-flex justify-content-center gap-3 flex-wrap mt-6">
                <a href="/register" class="btn btn-light btn-md fw-semibold px-4">Daftar Gratis</a>
                <a href={"#"} class="btn btn-outline-light btn-md px-4">Lihat Fitur</a>
            </div>
        </div>
    </section>

    <footer class="footer footer-transparent bg-light-subtle text-dark mt-6 pt-4 pb-3">
        <div class="container">
            <div class="row pt-3">
                <div class="col-12 col-lg-6 text-center text-lg-start mb-3 mb-lg-0">
                    <span class="text-muted">
                        &copy; {currentYear} <strong>BalitaSehat</strong>. All rights reserved.
                    </span>
                </div>
                <div class="col-12 col-lg-6 text-center text-lg-end">
                    <a href={"#"} class="text-muted text-decoration-none me-3">Kebijakan Privasi</a>
                    <a href={"#"} class="text-muted text-decoration-none">Syarat Layanan</a>
                </div>
            </div>
        </div>
    </footer>
</div>

<style>
    .card {
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
</style>
