@extends('layouts.user')

@section('title', 'Flo.do - Florist dan Self Photo Studio Nganjuk')

@section('content')
    <!-- ======= Hero =======-->
    <section class="hero__v6 section" id="beranda" style="padding-top: 80px; padding-bottom: 0">
        <div class="container">

            <div class="row align-items-center">

                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="row">
                        <div class="col-lg-11">
                            <h1 class="hero-title mb-3 display-4" style="font-weight: 900;"data-aos="fade-up"
                                data-aos-delay="100">Blooming Your
                                Memories</h1>
                            <p class="hero-description mb-4 mb-lg-3" data-aos="fade-up" data-aos-delay="200">
                                Di Flo.do Nganjuk, bunga dan potret terbaikmu bersatu untuk menciptakan momen
                                yang selalu mekar dalam ingatan.
                            </p>
                            <div class="cta d-flex mb-4 mb-lg-5" data-aos="fade-up" data-aos-delay="300"
                                data-aos-duration="1200">
                                <a class="btn" href="#florist">Jelajahi</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="hero-image-wrapper position-relative" data-aos="fade-in" data-aos-delay="500">
                        <img class="img-fluid arch-img img-1 shadow" src="{{ asset('img/beranda/hero-buket.jpg') }}"
                            alt="Buket Bunga">
                        <img class="img-fluid arch-img img-2 shadow" src="{{ asset('img/beranda/hero-foto.jpg') }}"
                            alt="Model Foto">
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- End Hero-->
    <section class="section-buket py-5" id="florist">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 d-flex justify-content-start mb-5 mb-lg-0">
                    <div class="collage-container">
                        <div class="collage-stacked">
                            <img src="{{ asset('img/beranda/florist1.jpeg') }}" class="img-collage shadow-sm"
                                alt="Buket 1">
                            <img src="{{ asset('img/beranda/florist3.jpeg') }}" class="img-collage shadow-sm"
                                alt="Buket 2">
                        </div>
                        <div class="collage-single">
                            <img src="{{ asset('img/beranda/florist2.jpeg') }}" class="img-collage shadow-sm"
                                alt="Buket 3">
                        </div>
                    </div>
                </div>

                <div class="col-lg-5 offset-lg-1">
                    <div class="buket-content">
                        <h2 class="buket-title">Florist</h2>
                        <p class="buket-desc">Flo.do menyajikan rangkaian bunga segar yang dirancang dengan keanggunan untuk
                            berbagai momen istimewa.</p>
                        <a href="{{ route('pesan.buket') }}" class="btn btn-buket">Lihat Pilihan Bunga</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section-foto py-5" id="photostudio">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5 order-2 order-lg-1">
                    <div class="foto-content">
                        <h2 class="foto-title">Self Photo Studio</h2>
                        <p class="foto-desc">Flodo menghadirkan pengalaman self photo yang estetik dan personal di Nganjuk.
                        </p>
                        <a href="{{ route('booking.foto') }}" class="btn btn-foto">Lihat Paket Foto</a>
                    </div>
                </div>

                <div class="col-lg-6 offset-lg-1 order-1 order-lg-2 d-flex justify-content-end mb-5 mb-lg-0">
                    <div class="collage-container">
                        <div class="collage-single">
                            <img src="{{ asset('img/beranda/foto1.jpeg') }}" class="img-collage shadow-sm" alt="Buket 3">
                        </div>
                        <div class="collage-stacked">
                            <img src="{{ asset('img/beranda/foto2.jpeg') }}" class="img-collage shadow-sm" alt="Buket 1">
                            <img src="{{ asset('img/beranda/foto3.jpeg') }}" class="img-collage shadow-sm" alt="Buket 2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ======= FAQ =======-->
    <section class="section faq__v2" id="faq">
        <div class="container">
            <div class="row mb-4">
                <div class="col-md-6 col-lg-7 mx-auto text-center" data-aos="fade-up" data-aos-delay="0"
                    data-aos-once="true">
                    <h2 class="h2 fw-bold mb-3">Frequently Asked Questions</h2>
                    <p>Cari tahu tentang layanan florist dan self photo studio kami.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 mx-auto" data-aos="fade-up" data-aos-delay="200" data-aos-once="true">
                    <div class="faq-content">
                        <div class="accordion custom-accordion" id="accordionPanelsStayOpenExample">

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
                                        aria-controls="panelsStayOpen-collapseOne">
                                        Bagaimana cara memesan buket di Flo.do?
                                    </button>
                                </h2>
                                <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
                                    <div class="accordion-body">
                                        Pemesanan buket dapat dilakukan melalui menu Pesan Buket dengan memilih buket
                                        favorit dari katalog yang tersedia. Anda dapat menggunakan fitur filter untuk
                                        memudahkan pencarian. Setelah mengisi formulir pemesanan, silakan selesaikan
                                        pembayaran. Setelah pembayaran berhasil, Anda akan diarahkan untuk mengonfirmasi
                                        pesanan melalui WhatsApp Flo.do.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
                                        aria-controls="panelsStayOpen-collapseTwo">
                                        Bagaimana cara memesan layanan foto di Flo.do?
                                    </button>
                                </h2>
                                <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionPanelsStayOpenExample">
                                    <div class="accordion-body">
                                        Pemesanan layanan foto dilakukan melalui menu Booking Foto dengan memilih paket foto
                                        yang diinginkan, lalu menentukan tanggal dan jam yang tersedia pada kalender
                                        booking. Setelah mengisi formulir pemesanan, lakukan pembayaran maksimal dalam waktu
                                        2 jam dan unggah bukti transfer. Setelah pembayaran selesai, Anda akan diarahkan
                                        untuk mengonfirmasi pesanan melalui WhatsApp Flo.do.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
                                        aria-controls="panelsStayOpen-collapseThree">
                                        Apakah perlu booking jadwal untuk self photo studio?
                                    </button>
                                </h2>
                                <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionPanelsStayOpenExample">
                                    <div class="accordion-body">
                                        Ya, sangat disarankan. Dengan melakukan booking melalui website, slot waktu pilihan
                                        Anda akan otomatis terkunci oleh sistem sehingga tidak terjadi bentrok jadwal dengan
                                        pelanggan lain. Kami menyarankan booking dilakukan minimal H-1 sebelum kunjungan.
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
                                        aria-controls="panelsStayOpen-collapseFour">
                                        Bagaimana jika saya terlambat membayar setelah mengisi formulir booking sesi foto?
                                    </button>
                                </h2>
                                <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
                                    data-bs-parent="#accordionPanelsStayOpenExample">
                                    <div class="accordion-body">
                                        Sistem menerapkan batas waktu pembayaran selama 2 jam setelah formulir booking
                                        diisi. Jika hingga batas waktu tersebut bukti transfer belum diunggah, pesanan atau
                                        slot jadwal foto akan otomatis dibatalkan agar dapat digunakan oleh pelanggan lain.
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End FAQ-->
@endsection