@extends('landingpage.layouts.main')

@section('content')

<section class="pj-store-section">
    <div class="container">
        <div class="pj-store-heading">
            <div class="pj-heading-label">
                OUR STORES
            </div>
            <h1>
                Temukan <span>Parfum Jogja</span><br>
                Terdekat Denganmu
            </h1>
            <p>
                Kunjungi outlet Parfum Jogja dan rasakan langsung koleksi
                aroma pilihan dengan karakter elegan, premium, dan berkelas.
            </p>
            <div class="pj-search">
                <i class="fas fa-search"></i>
                <input
                    type="text"
                    id="branchSearch"
                    placeholder="Cari nama atau lokasi toko..."
                >
            </div>
        </div>
        <div class="pj-location-title">
            <div>
                <span>OUR LOCATION</span>
                <h2>Yogyakarta</h2>
            </div>
            <div class="pj-location-line"></div>
        </div>
        <div class="pj-store-item branch-item">
            <div class="pj-store-number">
                01
            </div>
            <div class="pj-store-info">
                <span class="pj-store-label">
                    PARFUM JOGJA
                </span>
                <h3 class="store-name">
                    Parfum Jogja Malioboro
                </h3>
                <div class="pj-divider"></div>
                <div class="pj-detail">
                    <div class="pj-detail-item">
                        <i class="fas fa-location-dot"></i>
                        <p>
                            Jl. Jend. Ahmad Yani No.104,
                            Ngupasan, Kec. Gondomanan,
                            Kota Yogyakarta,
                            Daerah Istimewa Yogyakarta 55122
                        </p>
                    </div>
                    <div class="pj-detail-item">
                        <i class="fas fa-clock"></i>
                        <p>
                            08.00 - 22.00 WIB
                        </p>
                    </div>
                    <div class="pj-detail-item">
                        <i class="fas fa-phone"></i>
                        <p>
                            0821-2334-6910
                        </p>
                    </div>
                </div>
                <a
                    href="https://www.google.com/maps/search/?api=1&query=Parfum+Jogja+Malioboro"
                    target="_blank"
                    class="pj-map-button"
                >
                    <span>VIEW LOCATION</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            <div class="pj-map">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3865.435845494517!2d110.362912374934!3d-7.796630177385943!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a5747111b202d%3A0x6327343ff666773c!2sparfumJogja%20Malioboro!5e1!3m2!1sid!2sid!4v1787627106841!5m2!1sid!2sid"
                    loading="lazy"
                    allowfullscreen
                    referrerpolicy="strict-origin-when-cross-origin">
                </iframe>
            </div>
        </div>
        <div class="pj-store-item branch-item">
            <div class="pj-store-number">
                02
            </div>
            <div class="pj-store-info">
                <span class="pj-store-label">
                    PARFUM JOGJA
                </span>
                <h3 class="store-name">
                    Parfum Jogja Wirobrajan
                </h3>
                <div class="pj-divider"></div>
                <div class="pj-detail">
                    <div class="pj-detail-item">
                        <i class="fas fa-location-dot"></i>
                        <p>
                            Jl. Kapten Piere Tendean No.39A,
                            Wirobrajan, Kota Yogyakarta,
                            Daerah Istimewa Yogyakarta 55252
                        </p>
                    </div>
                    <div class="pj-detail-item">
                        <i class="fas fa-clock"></i>
                        <p>
                            08.00 - 22.00 WIB
                        </p>
                    </div>
                    <div class="pj-detail-item">
                        <i class="fas fa-phone"></i>
                        <p>
                            0822-3336-2440
                        </p>
                    </div>
                </div>
                <a
                    href="https://www.google.com/maps/search/?api=1&query=Parfum+Jogja+Wirobrajan"
                    target="_blank"
                    class="pj-map-button"
                >
                    <span>VIEW LOCATION</span>
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            <div class="pj-map">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3865.3575342631157!2d110.34848447493418!3d-7.805103177485344!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a57000b5f2bc9%3A0x127e086647ce1e3!2sPARFUM%20JOGJA%20WIROBRAJAN!5e1!3m2!1sid!2sid!4v1787627161542!5m2!1sid!2sid"
                    loading="lazy"
                    allowfullscreen
                    referrerpolicy="strict-origin-when-cross-origin">
                </iframe>
            </div>
        </div>
    </div>
</section>


<style>
    .pj-store-section{
        position:relative;
        padding:130px 0 100px;
        color:#2B2926;
    }
    .pj-store-heading{
        max-width:850px;
        margin:0 auto 100px;
        text-align:center;
    }
    .pj-heading-label{
        display:inline-flex;
        align-items:center;
        gap:12px;
        margin-bottom:22px;
        color:#B1843C;
        font-size:12px;
        letter-spacing:5px;
        font-weight:600;
    }
    .pj-heading-label::before,
    .pj-heading-label::after{
        content:"";
        width:35px;
        height:1px;
        background:#C89A4B;
    }
    .pj-store-heading h1{
        margin:0;
        font-family:'Poppins',sans-serif;
        font-size:52px;
        line-height:1.18;
        font-weight:300;
        letter-spacing:-1px;
    }
    .pj-store-heading h1 span{
        color:#B1843C;
        font-weight:500;
    }
    .pj-store-heading > p{
        max-width:650px;
        margin:25px auto 0;
        color:#756C60;
        font-size:15px;
        line-height:1.9;
    }
    .pj-search{
        position:relative;
        max-width:480px;
        margin:35px auto 0;
    }
    .pj-search i{
        position:absolute;
        left:20px;
        top:50%;
        transform:translateY(-50%);
        color:#B1843C;
        font-size:14px;
    }
    .pj-search input{
        width:100%;
        height:55px;
        padding:0 20px 0 48px;
        background:rgba(255,255,255,.75);
        border:none;
        border-bottom:1px solid #C89A4B;
        outline:none;
        color:#302D29;
        font-size:14px;
        transition:.3s;
    }
    .pj-search input:focus{
        background:#fff;
        box-shadow:0 10px 30px rgba(0,0,0,.06);
    }
    .pj-search input::placeholder{
        color:#958A7C;
    }
    .pj-location-title{
        display:flex;
        align-items:end;
        gap:30px;
        margin-bottom:35px;
    }
    .pj-location-title span{
        color:#B1843C;
        font-size:11px;
        letter-spacing:4px;
        font-weight:600;
    }
    .pj-location-title h2{
        margin:7px 0 0;
        font-size:32px;
        font-weight:400;
        letter-spacing:1px;
    }
    .pj-location-line{
        flex:1;
        height:1px;
        margin-bottom:8px;
        background:linear-gradient(
            to right,
            #C89A4B,
            transparent
        );
    }
    .pj-store-item{
        position:relative;
        display:grid;
        grid-template-columns:45% 55%;
        min-height:420px;
        margin-bottom:45px;
        background:rgba(255,255,255,.86);
        border:1px solid rgba(200,154,75,.28);
        box-shadow:
            0 20px 50px rgba(70,50,25,.08);
        overflow:hidden;
        transition:.4s ease;
    }
    .pj-store-item:hover{
        transform:translateY(-5px);
        box-shadow:
            0 28px 60px rgba(70,50,25,.13);
    }
    .pj-store-number{
        position:absolute;
        top:22px;
        left:25px;
        color:#C89A4B;
        font-size:12px;
        letter-spacing:3px;
        z-index:5;
    }
    .pj-store-info{
        padding:70px 55px 50px;
    }
    .pj-store-label{
        color:#B1843C;
        font-size:10px;
        font-weight:600;
        letter-spacing:4px;
    }
    .pj-store-info h3{
        margin:12px 0 20px;
        font-size:29px;
        line-height:1.3;
        font-weight:400;
        letter-spacing:.5px;
        color:#292724;
    }
    .pj-divider{
        width:55px;
        height:2px;
        margin-bottom:28px;
        background:#C89A4B;
    }
    .pj-detail{
        display:flex;
        flex-direction:column;
        gap:17px;
    }
    .pj-detail-item{
        display:flex;
        align-items:flex-start;
        gap:13px;
    }
    .pj-detail-item i{
        width:18px;
        margin-top:4px;
        color:#C89A4B;
        font-size:14px;
    }
    .pj-detail-item p{
        margin:0;
        color:#6D665D;
        font-size:13px;
        line-height:1.7;
    }
    .pj-map-button{
        display:inline-flex;
        align-items:center;
        gap:15px;
        margin-top:30px;
        color:#2D2A26;
        text-decoration:none;
        font-size:11px;
        font-weight:600;
        letter-spacing:2px;
        transition:.3s;
    }
    .pj-map-button i{
        color:#C89A4B;
        transition:.3s;
    }
    .pj-map-button:hover{
        color:#B1843C;
    }
    .pj-map-button:hover i{
        transform:translateX(6px);
    }
    .pj-map{
        min-height:420px;
        overflow:hidden;
    }
    .pj-map iframe{
        width:100%;
        height:100%;
        min-height:420px;
        display:block;
        border:none;
        filter:
            grayscale(15%)
            contrast(95%)
            saturate(75%);
    }
    @media(max-width:768px){
        .pj-store-section{
            padding:100px 20px 70px;
        }
        .pj-store-heading{
            margin-bottom:70px;
        }
        .pj-store-heading h1{
            font-size:34px;
        }
        .pj-store-heading > p{
            font-size:14px;
        }
        .pj-location-title{
            gap:15px;
        }
        .pj-location-title h2{
            font-size:25px;
        }
        .pj-location-line{
            display:none;
        }
        .pj-store-item{
            display:flex;
            flex-direction:column;
        }
        .pj-store-info{
            padding:60px 25px 35px;
        }
        .pj-store-info h3{
            font-size:23px;
        }
        .pj-map{
            min-height:280px;
            height:280px;
        }
        .pj-map iframe{
            min-height:280px;
        }
    }
</style>


<script>
    document.addEventListener('DOMContentLoaded', function(){
        const searchInput =
            document.getElementById('branchSearch');
        const branchItems =
            document.querySelectorAll('.branch-item');
        searchInput.addEventListener('input', function(){
            const keyword =
                this.value.toLowerCase().trim();
            branchItems.forEach(item => {
                const text =
                    item.textContent.toLowerCase();
                if(text.includes(keyword)){
                    item.style.display = '';
                }else{
                    item.style.display = 'none';
                }
            });
        });
    });
</script>

@endsection