@extends('landingpage.layouts.main')

@section('title', 'FAQ')

@section('content')

<style>
    :root{
        --bg:#F8F5EF;
        --white:#FFFFFF;
        --title:#2B2B2B;
        --text:#6E6558;
        --gold:#C89A4B;
        --gold-light:#F4E6CB;
        --border:#E8DCC2;
    }
    body,
    main{
        color:var(--text);
        font-family:'Poppins',sans-serif;
    }
    .faq-section{
        position:relative;
        overflow:hidden;
        padding:120px 0 90px;
        background:transparent !important;
    }
    .faq-section::before{
        content:'';
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            radial-gradient(
                circle at top left,
                rgba(200,154,75,.05),
                transparent 35%
            ),
            radial-gradient(
                circle at bottom right,
                rgba(255,255,255,.20),
                transparent 45%
            );
        z-index:0;
    }
    .faq-section > .container{
        position:relative;
        z-index:1;
    }
    .small-title{
        display:block;
        margin-bottom:14px;
        color:var(--gold);
        text-transform:uppercase;
        letter-spacing:4px;
        font-size:13px;
        font-weight:600;
    }
    .page-title{
        color:var(--title);
        font-size:48px;
        font-weight:700;
        margin-bottom:18px;
    }
    .page-desc{
        max-width:760px;
        margin:auto;
        color:var(--text);
        line-height:1.9;
        font-size:15px;
    }
    .faq-wrapper{
        max-width:950px;
        margin:70px auto 0;
    }
    .accordion-item{
        position:relative;
        background:rgba(255,255,255,.94);
        border:1px solid var(--border);
        border-radius:22px;
        overflow:hidden;
        margin-bottom:22px;
        transition:.35s;
        box-shadow:
            0 15px 35px rgba(0,0,0,.06);
    }
    .accordion-item::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:4px;
        background:linear-gradient(
            to right,
            var(--gold),
            var(--gold-light),
            var(--gold)
        );
        z-index:2;
    }
    .accordion-item:hover{
        transform:translateY(-5px);
        border-color:#D7C4A1;
        box-shadow:
            0 22px 40px rgba(0,0,0,.10);
    }
    .accordion-button{
        background:rgba(255,255,255,.94)!important;
        color:var(--title)!important;
        font-size:17px;
        font-weight:600;
        padding:24px;
        box-shadow:none!important;
    }
    .accordion-button:not(.collapsed){
        background:rgba(252,248,242,.96)!important;
        color:var(--gold)!important;
    }
    .accordion-button:focus{
        box-shadow:none!important;
    }
    .accordion-button::after{
        background-size:18px;
        filter:none;
    }
    .accordion-body{
        padding:0 24px 24px;
        color:var(--text);
        line-height:1.9;
        font-size:15px;
        background:rgba(255,255,255,.94);
    }
    .help-box{
        position:relative;
        overflow:hidden;
        margin-top:80px;
        background:rgba(255,255,255,.94);
        border:1px solid var(--border);
        border-radius:30px;
        padding:55px;
        text-align:center;
        box-shadow:
            0 15px 35px rgba(0,0,0,.06);
    }
    .help-box::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:5px;
        background:linear-gradient(
            to right,
            var(--gold),
            var(--gold-light),
            var(--gold)
        );
    }
    .help-box h3{
        color:var(--title);
        font-size:32px;
        font-weight:700;
        margin-bottom:15px;
    }
    .help-box p{
        max-width:650px;
        margin:auto auto 30px;
        color:var(--text);
        line-height:1.9;
    }
    .btn-contact{
        display:inline-block;
        padding:14px 38px;
        background:var(--gold);
        color:#fff;
        border-radius:50px;
        text-decoration:none;
        font-weight:600;
        transition:.35s;
        box-shadow:
            0 10px 20px rgba(200,154,75,.25);
    }
    .btn-contact:hover{
        background:#B98C45;
        color:#fff;
        transform:translateY(-3px);
        box-shadow:
            0 18px 30px rgba(200,154,75,.35);
    }
    @media(max-width:768px){
        .faq-section{
            padding:100px 0 70px;
        }
        .page-title{
            font-size:34px;
        }
        .page-desc{
            font-size:14px;
        }
        .accordion-button{
            font-size:15px;
            padding:20px;
        }
        .accordion-body{
            padding:0 20px 20px;
        }
        .help-box{
            padding:35px 25px;
        }
        .help-box h3{
            font-size:24px;
        }
        .btn-contact{
            padding:12px 30px;
        }
    }
</style>
<section class="faq-section">
    <div class="container">

        {{-- HEADER --}}
        <div class="text-center mb-5">
            <span class="small-title">
                Customer Support
            </span>

            <h1 class="page-title">
                Frequently Asked Questions
            </h1>

            <p class="page-desc mx-auto">
                Temukan jawaban atas pertanyaan yang paling sering diajukan
                mengenai produk, pemesanan, pembayaran, pengiriman, hingga
                layanan pelanggan <strong>Parfum Jogja</strong>.
            </p>
        </div>

        {{-- FAQ --}}
        <div class="faq-wrapper">

            <div class="accordion" id="faqAccordion">

                {{-- FAQ 1 --}}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#faq1">
                            Apakah parfum Parfum Jogja tahan lama?
                        </button>
                    </h2>

                    <div id="faq1"
                        class="accordion-collapse collapse show"
                        data-bs-parent="#faqAccordion">

                        <div class="accordion-body">
                            Ketahanan aroma parfum dapat berbeda-beda tergantung
                            jenis parfum, jenis kulit, aktivitas, dan kondisi
                            lingkungan. Untuk mendapatkan hasil aroma yang lebih
                            optimal, parfum dapat diaplikasikan pada titik-titik
                            nadi seperti pergelangan tangan dan leher.
                        </div>
                    </div>
                </div>

                {{-- FAQ 2 --}}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#faq2">
                            Apakah parfum cocok digunakan sehari-hari?
                        </button>
                    </h2>

                    <div id="faq2"
                        class="accordion-collapse collapse"
                        data-bs-parent="#faqAccordion">

                        <div class="accordion-body">
                            Tentu. Koleksi <strong>Parfum Jogja</strong> tersedia
                            untuk berbagai kebutuhan dan karakter aroma, sehingga
                            dapat digunakan untuk aktivitas sehari-hari, bekerja,
                            bepergian, acara formal, maupun momen spesial.
                        </div>
                    </div>
                </div>

                {{-- FAQ 3 --}}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#faq3">
                            Bagaimana cara mengetahui status pesanan?
                        </button>
                    </h2>

                    <div id="faq3"
                        class="accordion-collapse collapse"
                        data-bs-parent="#faqAccordion">

                        <div class="accordion-body">
                            Pelanggan dapat memantau status pesanan melalui
                            informasi pesanan yang tersedia di website.
                            Setelah pesanan dikirim, nomor resi dapat digunakan
                            untuk melacak perjalanan paket melalui layanan
                            ekspedisi yang digunakan.
                        </div>
                    </div>
                </div>

                {{-- FAQ 4 --}}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#faq4">
                            Apakah produk dapat dikembalikan?
                        </button>
                    </h2>

                    <div id="faq4"
                        class="accordion-collapse collapse"
                        data-bs-parent="#faqAccordion">

                        <div class="accordion-body">
                            Pengembalian produk dapat dilakukan apabila produk
                            mengalami kerusakan, kebocoran, kesalahan pengiriman,
                            atau ketidaksesuaian dengan pesanan. Laporan
                            pengembalian wajib disampaikan maksimal
                            <strong>2×24 jam</strong> setelah produk diterima
                            dengan menyertakan bukti kondisi produk.
                        </div>
                    </div>
                </div>

                {{-- FAQ 5 --}}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#faq5">
                            Bagaimana cara memilih parfum yang sesuai?
                        </button>
                    </h2>

                    <div id="faq5"
                        class="accordion-collapse collapse"
                        data-bs-parent="#faqAccordion">

                        <div class="accordion-body">
                            Pilih parfum berdasarkan karakter aroma dan kebutuhan
                            penggunaan. Jika Anda masih bingung menentukan aroma
                            yang sesuai, silakan hubungi tim
                            <strong>Parfum Jogja</strong> untuk mendapatkan
                            rekomendasi parfum yang sesuai dengan preferensi Anda.
                        </div>
                    </div>
                </div>

            </div>

        </div>

        {{-- HELP --}}
        <div class="help-box">
            <h3>Masih memiliki pertanyaan?</h3>

            <p>
                Tim layanan pelanggan <strong>Parfum Jogja</strong> siap membantu
                memberikan informasi mengenai produk, aroma, pemesanan,
                pembayaran, pengiriman, maupun layanan lainnya.
            </p>

            <a href="https://wa.me/6282123346910"
                target="_blank"
                rel="noopener noreferrer"
                class="btn-contact">
                Hubungi Kami
            </a>
        </div>

    </div>
</section>
@endsection