<?php
require_once __DIR__ . '/includes/header.php';

// Fetch categories from DB
try {
    $stmt = $pdo->query("SELECT * FROM categories ORDER BY id ASC");
    $categories = $stmt->fetchAll();
} catch (Exception $e) {
    $categories = [];
}

// Fetch featured products from DB
try {
    $stmt = $pdo->query("SELECT p.*, c.name as category_name FROM products p LEFT JOIN categories c ON p.category_id = c.id WHERE p.is_featured = TRUE LIMIT 5");
    $featured_products = $stmt->fetchAll();
} catch (Exception $e) {
    $featured_products = [];
}
?>

<!-- Modern Luxury Editorial Hero & Interactive Styling -->
<style>
/* Immersive Visual Backgrounds */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 800px;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 75% 25%, rgba(var(--accent-blue-rgb), 0.2), transparent 55%),
                radial-gradient(circle at 25% 75%, rgba(var(--accent-brown-rgb), 0.3), transparent 60%),
                var(--bg-black);
    overflow: hidden;
    padding-top: 80px;
}

/* Luxury Overlapping Left Card */
.hero-card-left {
    background: linear-gradient(135deg, rgba(var(--accent-brown-rgb), 0.7), rgba(10, 17, 30, 0.85));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--accent-gold-rgb), 0.15);
    border-radius: 28px;
    padding: 3.5rem;
    position: relative;
    z-index: 10;
    margin-right: -80px;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-card-left:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 35px 75px rgba(var(--accent-gold-rgb), 0.12);
    transform: translateY(-5px);
}

/* Luxury Graphic Wireframe Frame */
.hero-right-container {
    width: 100%;
    max-width: 480px;
    height: 580px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-wireframe-bg {
    position: absolute;
    width: 420px;
    height: 530px;
    border: 1px solid var(--accent-gold);
    border-radius: 24px;
    top: 30px;
    left: 40px;
    z-index: 1;
    opacity: 0.4;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-glow-accent {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--accent-gold-rgb), 0.15) 0%, transparent 70%);
    top: -30px;
    left: -30px;
    z-index: 1;
    pointer-events: none;
}

.hero-image-card {
    position: relative;
    width: 420px;
    height: 530px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
    z-index: 2;
    background-color: var(--bg-card);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.02) contrast(1.02);
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Micro-interactions */
.hero-right-container:hover .hero-image-card {
    transform: translateY(-10px);
    box-shadow: 0 40px 80px rgba(var(--accent-gold-rgb), 0.15);
    border-color: rgba(var(--accent-gold-rgb), 0.3);
}

.hero-right-container:hover .hero-wireframe-bg {
    transform: translate(-15px, -15px) rotate(1.5deg);
    border-color: var(--text-white);
    opacity: 0.7;
}

.hero-right-container:hover .hero-image-card img {
    transform: scale(1.05);
}

/* Season floating tag style */
.hero-tag-season {
    position: absolute;
    top: 25px;
    left: -20px;
    z-index: 3;
    background: rgba(var(--accent-brown-rgb), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--accent-gold-rgb), 0.25);
    padding: 8px 18px;
    border-radius: 40px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.hero-tag-season::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    box-shadow: 0 0 8px var(--accent-gold);
}

.hero-tag-info {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 3;
    background: rgba(10, 17, 30, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--accent-gold-rgb), 0.2);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--accent-gold);
    text-transform: uppercase;
}

/* Elegant Scroll Mouse Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    transition: opacity 0.3s;
    z-index: 10;
}
.scroll-indicator:hover {
    opacity: 1;
}
.scroll-mouse {
    width: 20px;
    height: 32px;
    border: 2px solid var(--accent-gold);
    border-radius: 20px;
    position: relative;
}
.scroll-wheel {
    width: 4px;
    height: 8px;
    background-color: var(--accent-gold);
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 1.5s infinite;
}
@keyframes scrollWheel {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 8px); }
}

/* Categories Section Styling */
.category-section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}
.category-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--accent-gold);
}

.category-card {
    position: relative;
    height: 380px;
    border-radius: 200px 200px 24px 24px;
    overflow: hidden;
    border: 1px solid rgba(var(--accent-gold-rgb), 0.15);
    background-color: rgba(var(--accent-brown-rgb), 0.3);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 3;
}

.category-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-gold);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.category-card:hover::after {
    border-color: rgba(var(--accent-gold-rgb), 0.5);
    transform: scale(1.02);
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9) contrast(1.02);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.category-card:hover img {
    transform: scale(1.08);
    filter: brightness(0.8) contrast(1.05);
}

/* Trust Badge Cards */
.trust-badge-card {
    background: rgba(var(--accent-brown-rgb), 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--accent-gold-rgb), 0.08);
    border-radius: 24px;
    padding: 2.2rem 1.8rem;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.trust-badge-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--accent-gold-rgb), 0.3);
    background: rgba(var(--accent-brown-rgb), 0.25);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.trust-badge-icon {
    font-size: 1.5rem;
    color: var(--accent-gold);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: rgba(var(--accent-gold-rgb), 0.05);
    border: 1px solid rgba(var(--accent-gold-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    transition: all 0.4s ease;
}

.trust-badge-card:hover .trust-badge-icon {
    background-color: var(--accent-gold);
    color: var(--bg-black);
    transform: rotateY(180deg);
}

/* Refined Product Cards */
.product-card {
    background: rgba(var(--accent-brown-rgb), 0.12);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 28px;
    padding: 14px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.product-card:hover {
    border-color: rgba(var(--accent-gold-rgb), 0.25);
    background: rgba(var(--accent-brown-rgb), 0.25);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.product-img-wrapper {
    position: relative;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .product-img-wrapper img {
    transform: scale(1.06);
}

.badge-new {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--accent-gold);
    color: var(--bg-black);
    padding: 5px 14px;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.wishlist-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(10, 17, 30, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 3;
}

.wishlist-btn:hover {
    background: var(--accent-gold);
    color: var(--bg-black);
    border-color: var(--accent-gold);
    transform: scale(1.1);
}

.product-details {
    padding: 1.2rem 0.6rem 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-name-price-wrap {
    flex-grow: 1;
    padding-right: 10px;
}

.product-name {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.product-name a {
    color: var(--text-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-name a:hover {
    color: var(--accent-gold);
}

.product-price {
    font-size: 1.05rem;
    color: var(--accent-gold);
    font-weight: 700;
    font-family: var(--font-heading);
}

.cart-icon-btn {
    background-color: var(--text-white);
    color: var(--bg-black);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-icon-btn:hover {
    background-color: var(--accent-gold);
    color: var(--bg-black);
    transform: scale(1.1) rotate(6deg);
    box-shadow: 0 5px 15px rgba(var(--accent-gold-rgb), 0.3);
}

/* Glassmorphic Testimonial Layout */
.testimonial-section {
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-black) 100%);
    padding: 6rem 0;
    position: relative;
    border-top: 1px solid var(--border-gray);
    border-bottom: 1px solid var(--border-gray);
    overflow: hidden;
}

.testimonial-section::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(var(--accent-gold-rgb), 0.04) 0%, transparent 70%);
    top: 10%;
    left: 5%;
    pointer-events: none;
    z-index: 1;
}

.testimonial-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--accent-blue-rgb), 0.05) 0%, transparent 70%);
    bottom: -10%;
    right: 5%;
    pointer-events: none;
    z-index: 1;
}

.testimonial-card {
    background: rgba(var(--accent-brown-rgb), 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--accent-gold-rgb), 0.15);
    border-radius: 28px;
    padding: 3rem 2.5rem;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--accent-gold-rgb), 0.4);
    box-shadow: 0 30px 60px rgba(var(--accent-gold-rgb), 0.08);
}

.avatar-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.8rem;
    position: relative;
}

.avatar-container::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed rgba(var(--accent-gold-rgb), 0.4);
    animation: rotateDashed 25s linear infinite;
}

@keyframes rotateDashed {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.client-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--bg-card);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.testimonial-stars {
    color: var(--accent-gold);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(var(--accent-gold-rgb), 0.5);
}

.testimonial-quote {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-white);
    margin-bottom: 2rem;
    font-weight: 400;
}

.client-role {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent-gold);
    letter-spacing: 2px;
}

/* Responsive fixes */
@media (max-width: 991.98px) {
    .hero-section {
        height: auto;
        padding-top: 140px;
        padding-bottom: 80px;
    }
    .hero-card-left {
        margin-right: 0 !important;
        padding: 2.2rem !important;
        margin-bottom: 20px;
        text-align: center;
    }
    .hero-title {
        font-size: 2.4rem !important;
        line-height: 1.25;
    }
    .hero-desc {
        font-size: 0.85rem !important;
        margin-bottom: 1.8rem !important;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-right-container {
        margin-top: 30px;
        max-width: 320px !important;
        height: 420px !important;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-image-card, .hero-wireframe-bg {
        width: 280px !important;
        height: 380px !important;
    }
    .hero-wireframe-bg {
        top: 20px !important;
        left: 25px !important;
    }
    .hero-tag-season {
        left: -10px !important;
        padding: 6px 14px !important;
        font-size: 0.6rem !important;
    }
    .lookbook-play {
        bottom: 30px !important;
        right: -10px !important;
        padding: 6px 14px !important;
    }
    .scroll-indicator {
        display: none;
    }
}
@media (max-width: 768px) {
    .category-card {
        height: 280px;
        border-radius: 120px 120px 18px 18px;
    }
    .product-img-wrapper {
        height: 250px;
    }
}
</style>

<section class="hero-section text-white d-flex align-items-center">
    <!-- Subtle gold accent line -->
    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: var(--border-gray); z-index: 5;"></div>
    
    <div class="container position-relative">
        <div class="row align-items-center g-5">
            <!-- Left Column: Editorial Info inside Overlapping Card -->
            <div class="col-lg-6 hero-content position-relative" style="z-index: 10;" data-aos="fade-up">
                <div class="hero-card-left">
                    <p class="hero-subtitle">NEW SPRING COUTURE 2026</p>
                    <h1 class="hero-title" style="font-size: 3.5rem; font-weight: 300;">Couture. Confidence. <span class="italic text-warning" style="font-style: italic; font-family: var(--font-heading); color: var(--accent-gold) !important;">Character.</span></h1>
                    <p class="hero-desc" style="font-size: 0.95rem; line-height: 1.7; color: var(--text-gray); margin-bottom: 2.2rem; max-width: 500px;">
                        Unveiling a new era of curated premium apparel under the new brand identity of MARTLUX. Step into absolute sophistication and flawless design templates that speak directly to your persona.
                    </p>
                    <div>
                        <a href="shop.php" class="btn btn-luxury-pill" style="border: 1px solid var(--accent-gold); background: transparent; color: var(--accent-gold) !important; padding: 1rem 2.5rem; transition: all 0.3s ease;" onmouseover="this.style.background='var(--accent-gold)'; this.style.color='#000';" onmouseout="this.style.background='transparent'; this.style.color='var(--accent-gold)';">
                            Explore Catalog <i class="fa-solid fa-arrow-right ms-2" style="font-size: 0.85rem;"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Right Column: Premium Image Card Layout -->
            <div class="col-lg-6 d-flex justify-content-center justify-content-lg-end position-relative" data-aos="fade-left">
                <div class="hero-right-container">
                    <!-- Elegant offset wireframe -->
                    <div class="hero-wireframe-bg"></div>
                    
                    <!-- Ambient Glow backdrop -->
                    <div class="hero-glow-accent"></div>
                    
                    <!-- Main Image Frame with rounded luxury corners -->
                    <div class="hero-image-card">
                        <!-- Upper season badge -->
                        <div class="hero-tag-season">NEW ATELIER 2026</div>
                        
                        <!-- Main model image -->
                        <img src="assets/images/hero_model.png" alt="MARTLUX Model">
                        
                        <!-- Lower boutique detail badge -->
                        <div class="hero-tag-info">MARTLUX ATELIER</div>
                    </div>
                    
                    <!-- Lookbook indicator -->
                    <div class="lookbook-play position-absolute d-flex align-items-center gap-2" style="bottom: 40px; right: 0; z-index: 3; background: rgba(10, 17, 30, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 8px 18px; border-radius: 30px; border: 1px solid rgba(var(--accent-gold-rgb), 0.25);">
                        <div class="play-circle d-flex align-items-center justify-content-center" style="width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--accent-gold); color: var(--accent-gold); font-size: 0.7rem; cursor: pointer; transition: all 0.3s;" onmouseover="this.style.background='var(--accent-gold)'; this.style.color='#000';" onmouseout="this.style.background='transparent'; this.style.color='var(--accent-gold)';">
                            <i class="fa-solid fa-play" style="margin-left: 2px;"></i>
                        </div>
                        <span class="text-uppercase" style="font-size: 0.65rem; font-weight: 700; letter-spacing: 2.5px; color: var(--text-white);">Atelier Film</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scroll Down Mouse Animation -->
    <div class="scroll-indicator">
        <div class="scroll-mouse">
            <div class="scroll-wheel"></div>
        </div>
        <span style="font-size: 0.55rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-gray);">Scroll Down</span>
    </div>
</section>

<!-- Categories Section -->
<section class="py-5" style="background-color: var(--bg-black);">
    <div class="container py-4">
        <div class="text-center mb-5">
            <p class="text-warning text-uppercase small fw-bold mb-2" style="letter-spacing: 3px; font-size: 0.7rem; color: var(--accent-gold) !important;">EXPLORE BY COLLECTION</p>
            <h2 class="text-white fw-light text-uppercase category-section-title" style="font-family: var(--font-heading); font-size: 2rem; letter-spacing: 2px;">Categories</h2>
        </div>
        
        <div class="row row-cols-xl-6 row-cols-lg-3 row-cols-md-2 row-cols-2 justify-content-center g-3 mt-2">
            <?php foreach ($categories as $cat): ?>
                <div class="col">
                    <a href="shop.php?category=<?php echo urlencode($cat['slug']); ?>" class="text-decoration-none">
                        <div class="category-card">
                            <img src="assets/images/<?php echo htmlspecialchars($cat['image']); ?>" alt="<?php echo htmlspecialchars($cat['name']); ?>" loading="lazy">
                            <div class="category-overlay" style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 17, 30, 0.75) 0%, rgba(10, 17, 30, 0.1) 50%, transparent 100%);"></div>
                            <div class="category-info" style="position: absolute; bottom: 20px; left: 20px; z-index: 2;">
                                <h3 class="category-name" style="font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; margin-bottom: 2px;"><?php echo htmlspecialchars($cat['name']); ?></h3>
                                <span class="shop-now-link" style="font-size: 0.6rem; letter-spacing: 1px; color: var(--accent-gold); text-decoration: none;">Couture &rarr;</span>
                            </div>
                        </div>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Value Propositions Badges -->
<section class="py-5" style="background-color: var(--bg-dark); border-top: 1px solid var(--border-gray); border-bottom: 1px solid var(--border-gray);">
    <div class="container py-2">
        <div class="row g-4 justify-content-center">
            <div class="col-xl-3 col-md-6">
                <div class="trust-badge-card">
                    <div class="trust-badge-icon"><i class="fa-solid fa-truck-fast"></i></div>
                    <h4 style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.4rem; color: #fff;">Free Islandwide Delivery</h4>
                    <p style="font-size: 0.75rem; color: var(--text-gray); margin: 0;">Swift and secure premium shipping to your door step.</p>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="trust-badge-card">
                    <div class="trust-badge-icon"><i class="fa-solid fa-shield-halved"></i></div>
                    <h4 style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.4rem; color: #fff;">Secure Cryptographic Payments</h4>
                    <p style="font-size: 0.75rem; color: var(--text-gray); margin: 0;">100% verified, encrypted checkout and billing privacy.</p>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="trust-badge-card">
                    <div class="trust-badge-icon"><i class="fa-solid fa-headset"></i></div>
                    <h4 style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.4rem; color: #fff;">Private Concierge Support</h4>
                    <p style="font-size: 0.75rem; color: var(--text-gray); margin: 0;">Dedicated style assistants available 24/7 for you.</p>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="trust-badge-card">
                    <div class="trust-badge-icon"><i class="fa-solid fa-arrows-rotate"></i></div>
                    <h4 style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.4rem; color: #fff;">Exquisite Return Policy</h4>
                    <p style="font-size: 0.75rem; color: var(--text-gray); margin: 0;">Hassle-free collection exchanges and credits.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Products Section -->
<section class="py-5" style="background-color: var(--bg-black);">
    <div class="container py-4">
        <!-- Title headers -->
        <div class="d-flex justify-content-between align-items-end mb-5 border-bottom border-secondary pb-3" style="border-bottom-width: 1px !important; border-bottom-color: rgba(var(--accent-gold-rgb), 0.2) !important;">
            <div>
                <p class="text-warning text-uppercase small fw-bold mb-1" style="letter-spacing: 2px; font-size: 0.65rem; color: var(--accent-gold) !important;">CURATED MASTERPIECES</p>
                <h2 class="text-white fw-light mb-0 text-uppercase" style="font-family: var(--font-heading); font-size: 1.8rem; letter-spacing: 2px;">Featured Pieces</h2>
            </div>
            <a href="shop.php" class="text-decoration-none text-uppercase text-warning fw-bold fs-7 hover-gold" style="font-family: var(--font-heading); letter-spacing: 2px; color: var(--accent-gold) !important; font-size: 0.75rem;">View All Catalog &rarr;</a>
        </div>

        <!-- Horizontal Product Grid -->
        <div class="row row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-2 g-4">
            <?php if (empty($featured_products)): ?>
                <div class="col-12 text-center py-5">
                    <p class="text-muted">No masterpieces featured at the moment. Explore our shop catalog!</p>
                </div>
            <?php else: ?>
                <?php foreach ($featured_products as $prod): ?>
                    <div class="col">
                        <div class="product-card">
                            <!-- Image wrapper -->
                            <div class="product-img-wrapper">
                                <a href="product.php?id=<?php echo $prod['id']; ?>">
                                    <img src="assets/images/<?php echo htmlspecialchars($prod['image']); ?>" alt="<?php echo htmlspecialchars($prod['name']); ?>" loading="lazy">
                                </a>
                                <span class="badge-new">NEW</span>
                                <button type="button" class="wishlist-btn" onclick="addToWishlist(<?php echo $prod['id']; ?>)">
                                    <i class="fa-regular fa-heart"></i>
                                </button>
                            </div>
                            
                            <!-- Detail section with left details, right white square cart button -->
                            <div class="product-details">
                                <div class="product-name-price-wrap">
                                    <h3 class="product-name">
                                        <a href="product.php?id=<?php echo $prod['id']; ?>">
                                            <?php echo htmlspecialchars($prod['name']); ?>
                                        </a>
                                    </h3>
                                    <div class="product-price">LKR <?php echo number_format($prod['price'], 2); ?></div>
                                </div>
                                
                                <button type="button" class="cart-icon-btn add-to-cart-btn" data-product-id="<?php echo $prod['id']; ?>" title="Add to Cart">
                                    <i class="fa-solid fa-bag-shopping text-dark" style="font-size: 0.95rem;"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Client Testimonials Section -->
<section class="testimonial-section" id="atelier-stories">
    <div class="container testimonial-container py-3">
        <!-- Section Header -->
        <div class="text-center mb-5" data-aos="fade-up">
            <p class="text-warning text-uppercase small fw-bold mb-2" style="letter-spacing: 3px; font-size: 0.7rem; color: var(--accent-gold) !important;">CONNOISSEUR REFLECTIONS</p>
            <h2 class="text-white fw-light text-uppercase mb-3" style="font-family: var(--font-heading); font-size: 2.2rem; letter-spacing: 2px;">Atelier Stories</h2>
            <div style="width: 40px; height: 1px; background-color: var(--accent-gold); margin: 0 auto;"></div>
        </div>

        <div class="position-relative">
            <!-- Luxury Quote Mark in background -->
            <div class="testimonial-quote-icon" style="font-family: var(--font-heading); font-size: 8rem; line-height: 1; color: rgba(var(--accent-gold-rgb), 0.06); position: absolute; top: -40px; left: 20px; pointer-events: none; user-select: none;">“</div>

            <!-- Testimonial Slider -->
            <div class="testimonial-slider-wrapper">
                <div class="testimonial-track">
                    <!-- Slide 1 -->
                    <div class="testimonial-slide">
                        <div class="testimonial-card">
                            <div class="avatar-container">
                                <img src="assets/images/client_avatar_1.png" alt="Seraphina Vance" class="client-avatar">
                            </div>
                            <div class="testimonial-stars">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <p class="testimonial-quote">"MARTLUX has completely redefined my wardrobe. The custom tailoring and minimalist silhouettes breathe absolute luxury. Every single blazer feels like a bespoke work of art."</p>
                            <div class="client-info">
                                <span class="client-name" style="font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: #fff; letter-spacing: 0.5px;"><?php echo "Seraphina Vance"; ?></span>
                                <span class="client-role">Verified Elite Member</span>
                                <span class="client-verified" style="font-size: 0.65rem; color: var(--text-gray); display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> Verified Purchase</span>
                            </div>
                        </div>
                    </div>

                    <!-- Slide 2 -->
                    <div class="testimonial-slide">
                        <div class="testimonial-card">
                            <div class="avatar-container">
                                <img src="assets/images/client_avatar_2.png" alt="Alistair Thorne" class="client-avatar">
                            </div>
                            <div class="testimonial-stars">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <p class="testimonial-quote">"As someone who appreciates fine detailing and rich textures, the trench coat was an instant favorite. The fabric weight, stitching precision, and deep colors are phenomenal."</p>
                            <div class="client-info">
                                <span class="client-name" style="font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: #fff; letter-spacing: 0.5px;"><?php echo "Alistair Thorne"; ?></span>
                                <span class="client-role">Premium Connoisseur</span>
                                <span class="client-verified" style="font-size: 0.65rem; color: var(--text-gray); display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> Verified Purchase</span>
                            </div>
                        </div>
                    </div>

                    <!-- Slide 3 -->
                    <div class="testimonial-slide">
                        <div class="testimonial-card">
                            <div class="avatar-container">
                                <img src="assets/images/client_avatar_3.png" alt="Gabriella Sterling" class="client-avatar">
                            </div>
                            <div class="testimonial-stars">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <p class="testimonial-quote">"Unparalleled customer experience. The shipping was incredibly swift, and the packaging was as exquisite as the ribbed tank top inside. Proudly wearing my confidence."</p>
                            <div class="client-info">
                                <span class="client-name" style="font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: #fff; letter-spacing: 0.5px;"><?php echo "Gabriella Sterling"; ?></span>
                                <span class="client-role">Style Tastemaker</span>
                                <span class="client-verified" style="font-size: 0.65rem; color: var(--text-gray); display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold);"></i> Verified Purchase</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dots Navigation -->
            <div class="testimonial-dots" style="display: flex; justify-content: center; gap: 12px; margin-top: 2.5rem;">
                <button type="button" class="testimonial-dot active" aria-label="Go to slide 1"></button>
                <button type="button" class="testimonial-dot" aria-label="Go to slide 2"></button>
                <button type="button" class="testimonial-dot" aria-label="Go to slide 3"></button>
            </div>
        </div>
    </div>
</section>

<!-- Brand Propositions Bar -->
<section class="brand-identity-bar" style="background-color: var(--bg-black); border-top: 1px solid var(--border-gray); padding: 2.5rem 0;">
    <div class="container">
        <div class="row align-items-center justify-content-between g-3">
            <div class="col-lg-8">
                <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center justify-content-lg-start">
                    <span class="text-muted small text-uppercase fw-bold" style="letter-spacing: 2px; color: var(--accent-gold) !important;">Why Choose MARTLUX?</span>
                    <div class="brand-check-item" style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-white); display: flex; align-items: center; gap: 8px;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold); font-size: 0.8rem;"></i> Premium Quality</div>
                    <div class="brand-check-item" style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-white); display: flex; align-items: center; gap: 8px;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold); font-size: 0.8rem;"></i> Trendy Designs</div>
                    <div class="brand-check-item" style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-white); display: flex; align-items: center; gap: 8px;"><i class="fa-solid fa-circle-check" style="color: var(--accent-gold); font-size: 0.8rem;"></i> Affordable Luxury</div>
                </div>
            </div>
            <div class="col-lg-4 text-center text-lg-end">
                <p class="signature-tagline" style="font-family: var(--font-signature); font-size: 2rem; color: var(--accent-gold); margin: 0; line-height: 1;">Wear Your Confidence.</p>
            </div>
        </div>
    </div>
</section>

<?php
require_once __DIR__ . '/includes/footer.php';
?>
