<?php include 'config/koneksi.php'; ?>
<!DOCTYPE html>
<html>
<head>
    <title>Shop - Jasa Interior</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #3F5D50;
            --accent: #F9BF29;
        }

        body {
            background: #f5f5f5;
        }

        .navbar {
            position: sticky;
            top: 0;
            z-index: 999;
            background: rgba(63,93,80,0.95) !important;
            backdrop-filter: blur(6px);
        }
        .navbar .navbar-brand {
            font-size: 28px;   /* BESARKAN */
            font-weight: 700;  /* BOLD */
            letter-spacing: 1px; /* biar keren */
        }
        .navbar .navbar-brand span {
            color: #F9BF29;
        }
        .nav-link {
            color: white !important;
             position: relative;
        }
        .navbar .nav-link {
            font-size: 25px;   /* BESARIN FONT */
            font-weight: 500;  /* AGAK TEBAL */
            margin: 0 10px;

        }

        .navbar .nav-link::after {
            content: "";
            position: absolute;
            width: 0%;
            height: 2px;
            background: #F9BF29;
            left: 0;
            bottom: -5px;
            transition: 0.3s;
        }

        .navbar .nav-link:hover::after {
            width: 100%;
        }

        .nav-icons a {
            color: white;
            font-size: 25px;
            margin-left: 25px;
            transition: 0.3s;
        }

        .nav-icons a:hover {
            color: #F9BF29;
            transform: scale(1.2);
        }

        .content {
            margin-top: 75px;
        }

        .card {
            border: none;
            border-radius: 20px;
            overflow: hidden;
            transition: 0.3s;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        .card img {
            height: 300px;
            object-fit: cover;
            transition: 0.3s;
        }

        .card:hover img {
            transform: scale(1.05);
        }

        .price {
            color: var(--primary);
            font-weight: bold;
        }

        .btn-custom {
            background-color: var(--primary);
            color: white;
            border-radius: 25px;
        }

        .btn-custom:hover {
            background-color: #2f4a40;
        }
        .badge {
            background: #F9BF29 !important;
            color: #000;
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 10px;
        }
        .section-shop {
            background: #ffffff;
            padding: 50px 30px;
            border-radius: 20px;
        }

    </style>
</head>

<body>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark px-5">
    <div class="container-fluid">

        <a class="navbar-brand fw-bold text-white" href="index.php">F3F3.</a>

        <div class="collapse navbar-collapse justify-content-center">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
                <li class="nav-item"><a class="nav-link active" href="jasa.php">Shop</a></li>
                <li class="nav-item"><a class="nav-link" href="index.php #about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="index.php #services">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="index.php #contact">Contact</a></li>
            </ul>
        </div>

        <div class="d-flex align-items-center nav-icons">

            <!-- WhatsApp -->
            <a href="https://wa.me/6281234567890" target="_blank">
                <i class="fab fa-whatsapp"></i>
            </a>

            <!-- Cart -->
            <a href="jasa.php">
                <i class="fas fa-shopping-cart"></i>
            </a>

            <!-- User -->
            <a href="#">
                <i class="fas fa-user"></i>
            </a>

        </div>

    </div>
</nav>

<!-- CONTENT -->
<div class="container content">

    <h2 class="text-center mb-3 title">Produk Furniture Kami</h2>

    <p class="text-center text-muted mb-5">
        Kami menyediakan berbagai layanan desain  untuk menciptakan ruang yang nyaman, estetik, dan sesuai kebutuhan Anda.
    </p>

    <div class="row">
        <?php
$kategori = mysqli_query($conn, "SELECT DISTINCT kategori FROM jasa");

while($k = mysqli_fetch_array($kategori)){
?>

<h3 class="mt-5 mb-3" style="color:#3F5D50;">
    <?= $k['kategori']; ?>
</h3>

<div class="row">
<?php
$data = mysqli_query($conn, "SELECT * FROM jasa WHERE kategori='".$k['kategori']."'");

while($d = mysqli_fetch_array($data)){
?>

<div class="col-md-3 mb-6">
    <div class="card shadow-sm">

        <!-- LABEL DI ATAS GAMBAR -->
        <div class="position-relative">
            <span class="badge bg-warning position-absolute m-2">
                <?= $d['kategori']; ?>
            </span>

            <img src="assets/img/<?= $d['gambar']; ?>" class="img-fluid">
        </div>

        <div class="p-3 d-flex flex-column">
            <h5><?= $d['nama_jasa']; ?></h5>

            <p class="text-muted">
                <?= substr($d['deskripsi'],0,60); ?>...
            </p>

            <p class="fw-bold" style="color:#3F5D50;">
                Rp <?= number_format($d['harga']); ?>
            </p>

            <a href="detail.php?id=<?= $d['id']; ?>" 
               class="btn btn-custom w-100">
               Pesan
            </a>
        </div>

    </div>
</div>

<?php } ?>
</div>

<?php } ?>
    </div>

</div>

</body>
</html>