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

<style>
    body{
        margin:0;
        padding:0;
        font-family:'Poppins',sans-serif;
        background:#F8F5EF;
        color:#2B2B2B;
    }
    .page-contact{
        position:relative;
        padding:120px 0 90px;
        overflow:hidden;
        background:
            radial-gradient(circle at top right,
            rgba(200,154,75,.08),
            transparent 35%),
            #F8F5EF;
    }
    .page-contact::before{
        content:'';
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            radial-gradient(circle at top left,
            rgba(200,154,75,.08),
            transparent 35%),
            radial-gradient(circle at bottom right,
            rgba(255,255,255,.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:#C89A4B;
        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:#2B2B2B;
        margin-bottom:18px;
    }
    .page-heading p{
        max-width:720px;
        margin:auto;
        color:#6E6558;
        line-height:1.9;
    }
    .glass-card{
        background:#fff;
        border:1px solid #E8DCC2;
        border-radius:24px;
        padding:35px;
        box-shadow:0 15px 35px rgba(0,0,0,.06);
        transition:.35s;
        position:relative;
        overflow:hidden;
    }
    .glass-card::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:5px;
        background:linear-gradient(
            to right,
            #C89A4B,
            #F3E4C9,
            #C89A4B
        );
    }
    .glass-card:hover{
        transform:translateY(-8px);
        border-color:#D7C4A1;
        box-shadow:0 25px 45px rgba(0,0,0,.10);
    }
    .card-title{
        color:#2B2B2B;
        font-size:22px;
        font-weight:700;
        margin-bottom:25px;
        padding-bottom:15px;
        border-bottom:1px solid #EFE4D1;
    }
    .card-title i{
        color:#C89A4B;
        margin-right:10px;
    }

    .form-label{
        color:#555;
        font-weight:600;
    }
    .form-control{
        background:#fff;
        border:1px solid #DDD2BF;
        border-radius:12px;
        color:#444;
        padding:15px 18px;
        min-height:54px;
        box-shadow:none;
    }
    .form-control::placeholder{
        color:#999;
    }
    .form-control:focus{
        border-color:#C89A4B;
        box-shadow:0 0 0 4px rgba(200,154,75,.12);
    }
    textarea.form-control{
        resize:none;
        min-height:150px;
    }
    .btn-custom{
        width:100%;
        padding:15px;
        border:none;
        border-radius:14px;
        background:#C89A4B;
        color:#fff;
        font-weight:600;
        transition:.35s;
    }
    .btn-custom:hover{
        background:#B88437;
        transform:translateY(-3px);
        box-shadow:0 15px 30px rgba(200,154,75,.30);
    }
    .accordion-item{
        border:1px solid #E8DCC2 !important;
        border-radius:16px !important;
        overflow:hidden;
        margin-bottom:15px;
        background:#fff;
        box-shadow:none;
    }
    .accordion-button{
        background:#fff !important;
        color:#2B2B2B !important;
        font-weight:600;
        padding:20px;
        box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
        background:#FCF8F2 !important;
        color:#C89A4B !important;
    }
    .accordion-button::after{
        filter:none;
    }
    .accordion-body{
        background:#fff;
        color:#6E6558;
        line-height:1.9;
        padding:20px;
    }
    .info-contact h5{
        color:#2B2B2B;
        margin-bottom:20px;
        font-weight:700;
    }
    .info-contact p{
        color:#666;
        display:flex;
        align-items:flex-start;
        gap:10px;
        line-height:1.8;
        margin-bottom:14px;
    }
    .info-contact i{
        color:#C89A4B;
        margin-top:3px;
    }
    .btn-whatsapp{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:10px;
        width:100%;
        padding:15px 20px;
        background:linear-gradient(
            135deg,
            #C89A4B,
            #D8B980
        );
        color:#fff;
        text-decoration:none;
        font-weight:600;
        border-radius:14px;
        border:none;
        transition:.35s;
        box-shadow:0 10px 25px rgba(200,154,75,.22);
    }
    .btn-whatsapp:hover{
        background:linear-gradient(
            135deg,
            #B88437,
            #C89A4B
        );
        color:#fff;
        transform:translateY(-3px);
        box-shadow:0 18px 35px rgba(200,154,75,.32);
    }
    .btn-whatsapp i{
        font-size:18px;
    }
    .text-muted{
        color:#7A6C57 !important;
    }
    .glass-card p{
        color:#666;
        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>Luxury Fragrance</span>
                <h2>Hubungi Pekanbaru Perfumery</h2>
                <p>
                    Kami siap membantu Anda menemukan
                    aroma terbaik dan menjawab semua
                    pertanyaan mengenai parfum favorit Anda.
                </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"
                                       required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">
                                    Email
                                </label>
                                <input type="email"
                                       name="email"
                                       class="form-control"
                                       required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">
                                    Pesan
                                </label>
                                <textarea name="pertanyaan"
                                          rows="4"
                                          class="form-control"
                                          required></textarea>
                            </div>
                            <button type="submit"
                                    class="btn btn-custom">
                                Kirim Pesan
                            </button>
                        </form>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="glass-card mb-4">
                        <h4 class="card-title">
                            <i class="bi bi-question-circle-fill"></i>
                            FAQ
                        </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>
                    <div class="glass-card mb-3 info-contact">
                        <h5 class="fw-bold mb-3">
                            Info Kontak
                        </h5>
                        <p>
                            <i class="bi bi-telephone"></i>
                            0821-7017-4812
                        </p>
                        <p>
                            <i class="bi bi-envelope"></i>
                            pekanbaruperfumery@gmail.com
                        </p>
                        <p>
                            <i class="bi bi-geo-alt"></i>
                            Pekanbaru, Riau
                        </p>
                    </div>
                    <a href="https://wa.me/6282170174812"
                       target="_blank"
                       class="btn btn-whatsapp w-100 mb-3">
                        <i class="bi bi-whatsapp"></i>
                        Chat WhatsApp
                    </a>
                    <div class="glass-card">
                        <h5 class="fw-bold mb-3">
                            Jam Operasional
                        </h5>
                        <p class="mb-1">
                            Setiap Hari: 08.00 - 22.00
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@endsection