@extends('landingpage.layouts.main')
@section('title', 'Beranda')
@section('navAdm', 'active')

@section('content')

<style>
    :root{
        --black:#1b1b1b;
        --cream:#FAF6EF;
        --cream2:#F4EBDD;
        --gold:#C89A4B;
        --gold-light:#E9D7B6;
        --gold-dark:#A9782D;
        --text:#2C2C2C;
        --text-soft:#6E6558;
        --white:#FFFFFF;
    }
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }
    body{
        background:var(--cream);
        color:var(--text);
        overflow-x:hidden;
        font-family:'Poppins',sans-serif;
    }
    section{
        overflow:hidden;
    }
    .hero{
        position:relative;
        height:auto;
        padding:120px 0 80px;
        background:
            linear-gradient(
                rgba(15,15,15,.45),
                rgba(15,15,15,.55)
            ),
            url('/storage/image.png');
        background-size:cover;
        background-position:center;
        background-attachment:fixed;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        color:#fff;
    }
    .hero-content{
        max-width:850px;
        padding:20px;
        animation:fadeUp 1s ease;
    }
    .hero-small{
        letter-spacing:8px;
        text-transform:uppercase;
        font-size:13px;
        color:#E9D7B6;
        margin-bottom:20px;
    }
    .hero-title{
        font-size:5rem;
        font-weight:300;
        text-transform:uppercase;
        line-height:1.05;
        margin-bottom:25px;
        letter-spacing:2px;
        color:#fff;
        text-shadow:0 5px 20px rgba(0,0,0,.3);
    }
    .hero-tagline{
        font-size:1.2rem;
        letter-spacing:3px;
        text-transform:uppercase;
        color:#F5E6C8;
        margin-top:-10px;
        margin-bottom:25px;
        font-weight:300;
        font-style:italic;
    }
    .hero-desc{
        max-width:650px;
        margin:auto;
        line-height:2;
        color:#F7F0E6;
        font-size:16px;
    }
    .btn-luxury{
        margin-top:35px;
        color:white;
        border:none;
        padding:15px 42px;
        background:#C89A4B;
        text-transform:uppercase;
        letter-spacing:3px;
        transition:.4s;
        border-radius:50px;
    }
    .btn-luxury:hover{
        background:#A9782D;
        color:white;
        box-shadow:0 10px 30px rgba(215,196,161,.35);
    }
    .section-padding{
        padding:50px 0;
    }
    .section-small{
        text-transform:uppercase;
        letter-spacing:4px;
        color:#bfa880;
        font-size:12px;
        margin-bottom:10px;
    }
    .section-title{
        font-size:3rem;
        font-weight:300;
        text-transform:uppercase;
        color:#1b1b1b;
        line-height:1.2;
    }
    .section-text{
        color:#6E6558;
        line-height:2;
        margin-top:25px;
    }
    .story-image{
        width:80%;
        height:550px;
        object-fit:cover;
        border-radius:20px;
        display:block;
        margin:auto;
        transition:
            transform .7s ease,
            box-shadow .5s ease;
    }
    .story-image:hover,
    .luxury-image:hover{
        box-shadow:0 25px 60px rgba(215,196,161,.15);
    }
    .collection-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        cursor: pointer;
        background: #fff;
        border: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
        max-width: 330px;
        margin: 0 auto;
        transition: all 0.4s ease;
    }

    .collection-card img {
        display: block;
        width: 100%;
        height: 330px;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .collection-card .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 0, 0, 0.18) 100%
        );
        pointer-events: none;
    }

    .collection-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
    }

    .collection-card:hover img {
        transform: scale(1.04);
    }

    .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            transparent,
            rgba(0, 0, 0, .92)
        );
    }

    /* POSISI TEXT COLLECTION CARD */
    .card-content {
        position: absolute;
        left: 30px;
        bottom: 32px;
        z-index: 10;
        color: #fff;
    }

    .card-content h4 {
        font-size: 25px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        margin: 0 0 6px;
        line-height: 1.1;
        color: #fff;
    }

    .card-content p {
        font-size: 15px;
        font-weight: 300;
        margin: 0;
        letter-spacing: 0.5px;
        color: #F7E7C7;
    }
    .why-box{
        height: 100%;
        padding: 35px 25px;
        text-align: center;
        border-radius: 20px;
        background: #fff;
        border: 1px solid #E9D7B6;
        box-shadow: 0 15px 30px rgba(0,0,0,.08);
    }
    .why-box:hover{
        transform:translateY(-5px);
    }
    .why-box i{
        color:#C89A4B;
        font-size:40px;
        margin-bottom:20px;
    }
    .why-box h5{
        color:#222;
        text-transform:uppercase;
        letter-spacing:2px;
        margin-bottom:10px;
        font-weight:400;
    }
    .why-box p{
        color:#6E6558;
        line-height:1.8;
    }
    .why-section{
        background:linear-gradient(
            to bottom,
            #FCFAF6,
            #F5EEE4
        );
    }
    .cta-section{
        position:relative;
        height:450px;
        background:
            linear-gradient(
                rgba(15,15,15,.55),
                rgba(15,15,15,.55)
            ),
            url('/storage/image.png');
        background-size:cover;
        background-position:center;
        display:flex;
        justify-content:center;
        align-items:center;
        text-align:center;
    }
    .cta-title{
        color:white;
        font-size:3rem;
        font-weight:300;
        text-transform:uppercase;
        margin-bottom:20px;
    }
    .luxury-section{
        position:relative;
    }
    .luxury-image-wrapper{
        position:relative;
    }
    .luxury-image{
        width:100%;
        height:720px;
        object-fit:cover;
        border-radius:24px;
        transition:.5s ease;
    }
    .luxury-image:hover{
        transform:scale(1.02);
    }
    .luxury-image-wrapper::before{
        content:'';
        position:absolute;
        top:-20px;
        left:-20px;
        width:100%;
        height:100%;
        border:1px solid rgba(215,196,161,.28);
        border-radius:24px;
        z-index:-1;
    }
    .fade-left{
        opacity:0;
        transform:translateX(-60px);
        animation:fadeLeft 1s ease forwards;
    }
    .fade-right{
        opacity:0;
        transform:translateX(60px);
        animation:fadeRight 1s ease forwards;
    }
    .fade-up{
        opacity:0;
        transform:translateY(50px);
        animation:fadeUpSoft 1s ease forwards;
    }
    .delay-1{
        animation-delay:.2s;
    }
    .delay-2{
        animation-delay:.4s;
    }
    @keyframes fadeUp{
        from{
            opacity:0;
            transform:translateY(30px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }
    @keyframes fadeLeft{
        from{
            opacity:0;
            transform:translateX(-60px);
        }
        to{
            opacity:1;
            transform:translateX(0);
        }
    }
    @keyframes fadeRight{
        from{
            opacity:0;
            transform:translateX(60px);
        }
        to{
            opacity:1;
            transform:translateX(0);
        }
    }
    @keyframes fadeUpSoft{
        from{
            opacity:0;
            transform:translateY(50px);
        }
        to{
            opacity:1;
            transform:translateY(0);
        }
    }
    @media(max-width:768px){
        .hero{
            padding:100px 20px 70px;
            background-attachment:scroll;
        }
        .hero-small{
            letter-spacing:4px;
        }
        .hero-title{
            font-size:2.8rem;
        }
        .hero-tagline{
            font-size:.9rem;
            letter-spacing:2px;
            margin-bottom:20px;
        }
        .hero-desc{
            font-size:14px;
            line-height:1.8;
        }
        .section-title{
            font-size:2rem;
        }
        .story-image,
        .luxury-image,
        .collection-card img{
            height:420px;
        }
        .luxury-image-wrapper::before{
            display:none;
        }
        .cta-title{
            font-size:2rem;
        }
        .btn-luxury{
            padding:12px 30px;
            font-size:14px;
        }
    }
</style>
<section class="hero">
    <div class="hero-content">
        <p class="hero-small">
            PARFUM JOGJA
        </p>
        <h1 class="hero-title">
            PARFUM <br> JOGJA
        </h1>
        <p class="hero-tagline">
            Terbuat dari Rindu, Pulang, dan Parfum.
        </p>
        <p class="hero-desc">
            Setiap aroma menyimpan cerita, setiap wangi membawa kenangan.
            Parfum Jogja hadir untuk menghadirkan pengalaman parfum
            yang bukan sekadar wewangian, tetapi menjadi bagian dari
            perjalanan, kerinduan, dan rasa ingin selalu pulang.
            Temukan aroma yang menemani setiap langkah dan menciptakan
            kenangan yang tak mudah dilupakan.
        </p>
        <a href="/semuaproduk" class="btn btn-luxury">
            Jelajahi Koleksi
        </a>
    </div>
</section>

<section class="section-padding fade-up">
    <div class="container">
        <div class="row align-items-center gy-5">
            <div class="col-lg-6 fade-left">
                <img src="/storage/parjog1.png"
                     class="story-image"
                     alt="Parfum Jogja">
            </div>
            <div class="col-lg-5 offset-lg-1 fade-right delay-1">
                <p class="section-small">
                    Tentang Parfum Jogja
                </p>
                <h2 class="section-title">
                    Terbuat dari Rindu, Pulang, dan Parfum.
                </h2>
                <p class="section-text">
                    Parfum Jogja lahir dari sebuah cerita sederhana
                    tentang rindu dan keinginan untuk selalu pulang.
                    Kami percaya bahwa aroma memiliki cara tersendiri
                    untuk menghidupkan kembali kenangan, menghadirkan
                    suasana, dan mengingatkan kita pada tempat yang
                    memiliki arti.
                </p>
                <p class="section-text">
                    Melalui berbagai pilihan aroma yang kami hadirkan,
                    Parfum Jogja ingin menjadi bagian dari cerita Anda.
                    Sebuah wangi yang menemani perjalanan, menyimpan
                    kenangan, dan menjadi pengingat akan momen-momen
                    yang ingin selalu dikenang.
                </p>
            </div>
        </div>
    </div>
</section>

<section class="section-padding fade-up">
    <div class="container">
        <div class="row align-items-center gy-5 flex-lg-row-reverse">
            <div class="col-lg-6 fade-right">
                <img src="/storage/parjog2.png"
                     class="story-image"
                     alt="Parfum Jogja">
            </div>
            <div class="col-lg-5 fade-left delay-1">
                <p class="section-small">
                    Our Story
                </p>
                <h2 class="section-title">
                    Karena Setiap Rindu Punya Aroma
                </h2>
                <p class="section-text">
                    Bagi kami, parfum bukan hanya tentang bagaimana
                    seseorang wangi. Parfum adalah tentang cerita,
                    perasaan, kenangan, dan seseorang yang mungkin
                    sedang kita rindukan.
                </p>
                <p class="section-text">
                    Seperti Jogja yang selalu memiliki alasan untuk
                    dirindukan, kami ingin setiap aroma Parfum Jogja
                    menghadirkan rasa yang sama: hangat, dekat,
                    dan membuat Anda ingin kembali.
                </p>
                <p class="section-text">
                    Karena pada akhirnya, ada aroma yang tidak hanya
                    melekat di tubuh, tetapi juga tinggal di ingatan.
                </p>
            </div>
        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container-fluid px-lg-5">
        <div class="text-center mb-5">
            <p class="section-small">
                Authentic Parfum Jogja
            </p>
            <h2 class="section-title">
                Aroma Asli, Kualitas Terpercaya
            </h2>
            <p class="section-text mx-auto" style="max-width:700px">
                Hadirkan pengalaman berbeda melalui koleksi parfum autentik
                dengan karakter aroma yang beragam. Pilih aroma favoritmu
                dan temukan wangi yang paling mencerminkan dirimu.
            </p>
        </div>
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="collection-card">
                    <img
                        src="/storage/b1.jpg"
                        alt="Koleksi Parfum Authentic Parfum Jogja"
                    >
                    <div class="overlay"></div>
                    <div class="card-content">
                        <h4>AUTHENTIC COLLECTION</h4>
                        <p>Aroma Berkualitas & Berkarakter</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="collection-card">
                    <img
                        src="/storage/b2.jpg"
                        alt="Koleksi Parfum Premium Parfum Jogja"
                    >
                    <div class="overlay"></div>
                    <div class="card-content">
                        <h4>PREMIUM FRAGRANCE</h4>
                        <p>Elegan, Modern & Memikat</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="collection-card">
                    <img
                        src="/storage/b3.jpg"
                        alt="Koleksi Parfum Parfum Jogja"
                    >
                    <div class="overlay"></div>
                    <div class="card-content">
                        <h4>YOUR SIGNATURE SCENT</h4>
                        <p>Temukan Aroma Khasmu</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding why-section">
    <div class="container text-center">
        <p class="section-small">
            Mengapa Parfum Jogja
        </p>
        <h2 class="section-title mb-5">
            Bukan Sekadar Parfum
        </h2>
        <div class="row">
            <div class="col-md-3">
                <div class="why-box">
                    <i class="bi bi-stars"></i>
                    <h5>Aroma Berkarakter</h5>
                    <p>
                        Pilihan aroma dengan karakter
                        yang dapat menemani setiap cerita
                        dan suasana.
                    </p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="why-box">
                    <i class="bi bi-clock-history"></i>
                    <h5>Wangi yang Menemani</h5>
                    <p>
                        Aroma yang tahan lama untuk
                        menemani langkah Anda sepanjang hari.
                    </p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="why-box">
                    <i class="bi bi-heart"></i>
                    <h5>Dibuat dengan Rasa</h5>
                    <p>
                        Setiap aroma dipilih untuk menghadirkan
                        pengalaman yang dekat dengan hati.
                    </p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="why-box">
                    <i class="bi bi-house-heart"></i>
                    <h5>Selalu Ada Rasa Pulang</h5>
                    <p>
                        Karena ada aroma tertentu yang mampu
                        membawa kita kembali pada sebuah kenangan.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="cta-section">
    <div>
        <p class="section-small">
            Parfum Jogja
        </p>
        <h2 class="cta-title">
            Terbuat dari Rindu,<br>
            Pulang, dan Parfum.
        </h2>
        <p class="hero-desc mb-4">
            Temukan aroma yang bukan hanya wangi,
            tetapi juga menyimpan cerita.
            Biarkan setiap semprotan membawa Anda
            pada kenangan yang ingin selalu dikenang.
        </p>
        <a href="/semuaproduk"
           class="btn btn-luxury">
            Temukan Aroma Anda
        </a>
    </div>
</section>

@endsection