@extends('landingpage.layouts.main')
@section('content')

<style>
    :root{
        --pj-cream:#F8F3EB;
        --pj-cream-light:#FFFCF8;
        --pj-brown:#6E4B35;
        --pj-brown-dark:#4B3022;
        --pj-brown-soft:#8A6850;
        --pj-gold:#B88A44;
        --pj-gold-light:#D8B77A;
        --pj-terracotta:#A65F3F;
        --pj-border:#E5D6C3;
        --pj-text:#3E342D;
        --pj-text-soft:#75685D;
    }
    body{
        margin:0;
        padding:0;
        font-family:'Poppins',sans-serif;
        background:var(--pj-cream);
        color:var(--pj-text);
    }
    .page-contact{
        position:relative;
        padding:120px 0 90px;
        overflow:hidden;
        background:
            radial-gradient(
                circle at top right,
                rgba(184,138,68,.10),
                transparent 35%
            ),
            transparent;
    }
    .page-contact::before{
        content:'';
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            radial-gradient(
                circle at top left,
                rgba(166,95,63,.07),
                transparent 35%
            ),
            radial-gradient(
                circle at bottom right,
                rgba(255,252,248,.95),
                transparent 45%
            );
    }
    .page-contact .container{
        position:relative;
        z-index:2;
    }
    .page-heading{
        text-align:center;
        margin-bottom:70px;
    }
    .page-heading span{
        display:inline-block;
        color:var(--pj-terracotta);
        text-transform:uppercase;
        letter-spacing:4px;
        font-size:13px;
        font-weight:600;
        margin-bottom:15px;
    }
    .page-heading h2{
        font-size:50px;
        font-weight:700;
        color:var(--pj-brown-dark);
        margin-bottom:18px;
    }
    .page-heading p{
        max-width:720px;
        margin:auto;
        color:var(--pj-text-soft);
        line-height:1.9;
    }
    .glass-card{
        background:rgba(255,252,248,.96);
        border:1px solid var(--pj-border);
        border-radius:20px;
        padding:35px;
        box-shadow:
            0 15px 35px rgba(75,48,34,.07);
        transition:.35s;
        position:relative;
        overflow:hidden;
    }
    .glass-card::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:4px;
        background:linear-gradient(
            to right,
            var(--pj-brown),
            var(--pj-gold-light),
            var(--pj-brown)
        );
    }
    .glass-card:hover{
        transform:translateY(-6px);
        border-color:#D7C1A5;
        box-shadow:
            0 22px 40px rgba(75,48,34,.11);
    }
    .card-title{
        color:var(--pj-brown-dark);
        font-size:22px;
        font-weight:700;
        margin-bottom:25px;
        padding-bottom:15px;
        border-bottom:1px solid #EBDDCF;
    }
    .card-title i{
        color:var(--pj-terracotta);
        margin-right:10px;
    }
    .form-label{
        color:var(--pj-brown);
        font-weight:600;
    }
    .form-control{
        background:#FFFEFC;
        border:1px solid #DCCDBB;
        border-radius:10px;
        color:var(--pj-text);
        padding:15px 18px;
        min-height:54px;
        box-shadow:none;
        transition:.3s;
    }
    .form-control::placeholder{
        color:#A69A90;
    }
    .form-control:focus{
        border-color:var(--pj-gold);
        box-shadow:
            0 0 0 4px rgba(184,138,68,.12);
        background:#fff;
    }
    textarea.form-control{
        resize:none;
        min-height:150px;
    }
    .btn-custom{
        width:100%;
        padding:15px;
        border:none;
        border-radius:10px;
        background:
            linear-gradient(
                135deg,
                var(--pj-brown),
                var(--pj-brown-soft)
            );
        color:#fff;
        font-weight:600;
        transition:.35s;
    }
    .btn-custom:hover{
        background:
            linear-gradient(
                135deg,
                var(--pj-brown-dark),
                var(--pj-brown)
            );
        transform:translateY(-3px);
        box-shadow:
            0 12px 25px rgba(75,48,34,.22);
        color:#fff;
    }
    .accordion-item{
        border:1px solid var(--pj-border) !important;
        border-radius:12px !important;
        overflow:hidden;
        margin-bottom:15px;
        background:#FFFCF8;
        box-shadow:none;
    }
    .accordion-button{
        background:#FFFCF8 !important;
        color:var(--pj-brown-dark) !important;
        font-weight:600;
        padding:20px;
        box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
        background:#F5EDE2 !important;
        color:var(--pj-terracotta) !important;
    }
    .accordion-button::after{
        filter:none;
    }
    .accordion-body{
        background:#FFFCF8;
        color:var(--pj-text-soft);
        line-height:1.9;
        padding:20px;
    }
    .info-contact h5{
        color:var(--pj-brown-dark);
        margin-bottom:20px;
        font-weight:700;
    }
    .info-contact p{
        color:var(--pj-text-soft);
        display:flex;
        align-items:flex-start;
        gap:10px;
        line-height:1.8;
        margin-bottom:14px;
    }
    .info-contact i{
        color:var(--pj-terracotta);
        margin-top:3px;
    }
    .btn-whatsapp{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:10px;
        width:100%;
        padding:15px 20px;
        background:
            linear-gradient(
                135deg,
                var(--pj-brown),
                var(--pj-gold)
            );
        color:#fff;
        text-decoration:none;
        font-weight:600;
        border-radius:10px;
        border:none;
        transition:.35s;
        box-shadow:
            0 10px 25px rgba(75,48,34,.16);
    }
    .btn-whatsapp:hover{
        background:
            linear-gradient(
                135deg,
                var(--pj-brown-dark),
                var(--pj-brown)
            );
        color:#fff;
        transform:translateY(-3px);
        box-shadow:
            0 16px 30px rgba(75,48,34,.24);
    }
    .btn-whatsapp i{
        font-size:18px;
    }
    .text-muted{
        color:var(--pj-text-soft) !important;
    }
    .glass-card p{
        color:var(--pj-text-soft);
        line-height:1.9;
    }
    @media(max-width:768px){
        .page-contact{
            padding:100px 0 70px;
        }
        .page-heading{
            margin-bottom:50px;
        }
        .page-heading h2{
            font-size:34px;
        }
        .page-heading p{
            font-size:14px;
        }
        .glass-card{
            padding:25px;
        }
        .card-title{
            font-size:20px;
        }
        .accordion-button{
            padding:18px;
            font-size:15px;
        }
    }
</style>

<div class="page-contact">

    <section class="py-5">

        <div class="container">

            <div class="page-heading">
                <span>Parfum Jogja</span>

                <h2>Hubungi Parfum Jogja</h2>

                <p>
                    Kami siap membantu Anda menemukan aroma parfum
                    yang sesuai dengan karakter, gaya, dan kebutuhan Anda.
                    Jangan ragu untuk menghubungi kami untuk informasi
                    produk, pemesanan, maupun layanan lainnya.
                </p>
            </div>

            <div class="row g-4">

                <div class="col-lg-6">

                    <div class="glass-card">

                        <h4 class="card-title">
                            <i class="bi bi-envelope-fill"></i>
                            Hubungi Kami
                        </h4>

                        @if(session('contact_success'))

                            <div class="alert alert-success">
                                {{ session('contact_success') }}
                            </div>

                        @endif

                        <form action="{{ route('contact_us.store') }}"
                              method="POST">

                            @csrf

                            <div class="mb-3">

                                <label class="form-label">
                                    Nama
                                </label>

                                <input type="text"
                                       name="nama"
                                       class="form-control"
                                       placeholder="Masukkan nama Anda"
                                       required>

                            </div>

                            <div class="mb-3">

                                <label class="form-label">
                                    Email
                                </label>

                                <input type="email"
                                       name="email"
                                       class="form-control"
                                       placeholder="Masukkan email Anda"
                                       required>

                            </div>

                            <div class="mb-3">

                                <label class="form-label">
                                    Pesan
                                </label>

                                <textarea name="pertanyaan"
                                          rows="4"
                                          class="form-control"
                                          placeholder="Tulis pertanyaan atau pesan Anda..."
                                          required></textarea>

                            </div>

                            <button type="submit"
                                    class="btn btn-custom">

                                Kirim Pesan

                            </button>

                        </form>

                    </div>

                </div>


                {{-- FAQ & INFO --}}
                <div class="col-lg-6">

                    {{-- FAQ --}}
                    <div class="glass-card mb-4">

                        <h4 class="card-title">

                            <i class="bi bi-question-circle-fill"></i>

                            Pertanyaan Umum

                        </h4>

                        @if($faqs->count())

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

                                @foreach ($faqs as $index => $faq)

                                    <div class="accordion-item">

                                        <h2 class="accordion-header">

                                            <button class="accordion-button collapsed"
                                                    type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#collapse{{ $index }}">

                                                {{ $faq->pertanyaan }}

                                            </button>

                                        </h2>

                                        <div id="collapse{{ $index }}"
                                             class="accordion-collapse collapse">

                                            <div class="accordion-body">

                                                {{ $faq->jawaban ?? '-' }}

                                            </div>

                                        </div>

                                    </div>

                                @endforeach

                            </div>

                        @endif

                    </div>


                    {{-- INFO KONTAK --}}
                    <div class="glass-card mb-3 info-contact">

                        <h5 class="fw-bold mb-3">
                            Informasi Parfum Jogja
                        </h5>

                        <p>
                            <i class="bi bi-telephone"></i>
                                0821-2334-6910
                        </p>

                        <p>
                            <i class="bi bi-envelope"></i>
                            parfumjogja@gmail.com
                        </p>

                        <p>
                            <i class="bi bi-geo-alt"></i>
                            Yogyakarta, Indonesia
                        </p>

                    </div>


                    {{-- WHATSAPP --}}
                    <a href="https://wa.me/6282123346910"
                       target="_blank"
                       class="btn btn-whatsapp w-100 mb-3">

                        <i class="bi bi-whatsapp"></i>

                        Chat WhatsApp

                    </a>


                    {{-- JAM OPERASIONAL --}}
                    <div class="glass-card">

                        <h5 class="fw-bold mb-3">

                            Jam Operasional

                        </h5>

                        <p class="mb-1">

                            Setiap Hari: 08.00 - 22.00

                        </p>

                        <p class="mb-0">

                            Kami siap melayani kebutuhan parfum
                            Anda dengan sepenuh hati.

                        </p>

                    </div>

                </div>

            </div>

        </div>

    </section>

</div>

@endsection