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

<!-- Luxury Page Banner -->
<section class="py-5 bg-black border-bottom border-dark position-relative overflow-hidden" style="min-height: 250px; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('assets/images/logo.jpeg'); background-size: cover; background-position: center;">
    <div class="container text-center py-4 z-index-2">
        <p class="text-warning text-uppercase small fw-bold mb-2" style="letter-spacing: 4px;">Brand Editorial</p>
        <h1 class="text-white fw-bold display-4 mb-0" style="font-family: var(--font-heading); font-style: italic;">The Atelier Story</h1>
        <div class="mx-auto mt-3" style="width: 60px; height: 1px; background-color: var(--accent-gold);"></div>
    </div>
</section>

<!-- The Narrative Section -->
<section class="py-5" style="background-color: var(--bg-dark);">
    <div class="container py-4">
        <div class="row g-5 align-items-center">
            <!-- Left Column: Story -->
            <div class="col-lg-6">
                <div class="pe-lg-4 text-white">
                    <p class="text-warning text-uppercase small fw-bold mb-2" style="letter-spacing: 2px;">Since 2024</p>
                    <h2 class="fw-bold display-6 mb-4" style="font-family: var(--font-heading); line-height: 1.2;">Wear Your Confidence, Define Your Presence.</h2>
                    <p class="text-muted small lh-lg mb-4" style="color: var(--text-gray);">
                        MARTLUX emerged from a singular aesthetic pursuit: to strip fashion down to its rawest, most confident elegance. We believe that true luxury does not scream; it whispers through the flawless cut of a shoulder, the rich drape of premium silk, and the silent weight of handcrafted hardware.
                    </p>
                    <p class="text-muted small lh-lg mb-4" style="color: var(--text-gray);">
                        Designed for the modern connoisseur, our collections are released in limited numbers from our Horana atelier, assuring exclusivity and ultimate dedication. Each garment is curated to serve as a wearable armor of confidence.
                    </p>
                    <div class="d-flex align-items-center gap-3 mt-4 pt-2">
                        <div class="border-top border-warning" style="width: 40px;"></div>
                        <span class="text-warning text-uppercase small fw-bold" style="letter-spacing: 2px;">The Creative Directors</span>
                    </div>
                </div>
            </div>

            <!-- Right Column: Visual Brand Identity Grid -->
            <div class="col-lg-6">
                <div class="border border-secondary p-4 rounded-4 bg-black position-relative" style="border-color: rgba(255,255,255,0.06) !important;">
                    <div class="text-center py-5">
                        <img src="assets/images/logo.png" alt="MARTLUX Brand Shield" class="img-fluid rounded mb-4" style="max-height: 100px; border: 1px solid rgba(255,255,255,0.1); padding: 8px;">
                        <h4 class="text-white mb-2" style="font-family: var(--font-heading); font-style: italic; letter-spacing: 1px;">"Elegance is the only beauty that never fades."</h4>
                        <span class="text-muted small">- Audrey Hepburn</span>
                    </div>
                    <!-- Ambient golden blur behind brand shield -->
                    <div class="position-absolute top-50 start-50 translate-middle" style="width: 250px; height: 250px; background-color: rgba(var(--accent-gold-rgb),0.03); filter: blur(50px); z-index: -1;"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Our Atelier Craftsmanship Values -->
<section class="py-5 bg-black border-top border-bottom border-dark">
    <div class="container py-4">
        <!-- Section Header -->
        <div class="text-center mb-5">
            <p class="text-warning text-uppercase small fw-bold mb-2" style="letter-spacing: 3px;">Craftsmanship</p>
            <h3 class="text-white fw-bold display-6" style="font-family: var(--font-heading);">Bespoke Atelier Commitments</h3>
            <div class="mx-auto mt-3" style="width: 50px; height: 2px; background-color: var(--accent-gold);"></div>
        </div>

        <div class="row g-4 justify-content-center">
            <!-- Tailored Perfection -->
            <div class="col-lg-4 col-md-6">
                <div class="p-4 rounded-4 bg-dark border border-secondary text-white h-100 transition-all hover-glow-card" style="border-color: rgba(255,255,255,0.05) !important;">
                    <div class="text-warning mb-3 fs-3"><i class="fa-solid fa-scissors"></i></div>
                    <h5 class="fw-bold mb-3 text-uppercase small" style="letter-spacing: 1.5px;">1. Tailored Excellence</h5>
                    <p class="text-muted small lh-lg mb-0" style="color: var(--text-gray);">
                        Our garments are structured by master tailors with decades of meticulous experience, promising perfect contours, luxurious fit, and premium silhouette retention.
                    </p>
                </div>
            </div>

            <!-- Material Integrity -->
            <div class="col-lg-4 col-md-6">
                <div class="p-4 rounded-4 bg-dark border border-secondary text-white h-100 transition-all hover-glow-card" style="border-color: rgba(255,255,255,0.05) !important;">
                    <div class="text-warning mb-3 fs-3"><i class="fa-solid fa-leaf"></i></div>
                    <h5 class="fw-bold mb-3 text-uppercase small" style="letter-spacing: 1.5px;">2. Sourced Integrity</h5>
                    <p class="text-muted small lh-lg mb-0" style="color: var(--text-gray);">
                        We work exclusively with conscious, premium weavers in Italy and Japan to source raw materials, choosing only the finest grade pure organic silks, cottons, and wools.
                    </p>
                </div>
            </div>

            <!-- Bespoke Accents -->
            <div class="col-lg-4 col-md-6">
                <div class="p-4 rounded-4 bg-dark border border-secondary text-white h-100 transition-all hover-glow-card" style="border-color: rgba(255,255,255,0.05) !important;">
                    <div class="text-warning mb-3 fs-3"><i class="fa-solid fa-gem"></i></div>
                    <h5 class="fw-bold mb-3 text-uppercase small" style="letter-spacing: 1.5px;">3. Bespoke Accessories</h5>
                    <p class="text-muted small lh-lg mb-0" style="color: var(--text-gray);">
                        Every gold monogrammed zipper, pure brass button, and silk stitching in MARTLUX masterpieces undergoes rigorous quality checkpoints before shipping.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Parallax Editorial Block -->
<section class="py-5 position-relative overflow-hidden text-center text-white" style="min-height: 380px; display: flex; align-items: center; background-image: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url('assets/images/logo.png'); background-size: cover; background-attachment: fixed; background-position: center;">
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <i class="fa-solid fa-quote-left text-warning display-4 mb-4 opacity-50"></i>
                <h3 class="fw-normal lh-lg mb-4" style="font-family: var(--font-heading); font-style: italic; font-size: 1.8rem;">
                    "We do not design garments; we design confidence. Confidence that empowers you to walk into any room, under any gaze, and command absolute respect."
                </h3>
                <div class="mx-auto my-3" style="width: 40px; height: 1px; background-color: var(--accent-gold);"></div>
                <p class="text-warning text-uppercase small fw-bold mb-0" style="letter-spacing: 3px;">The Atelier Creed</p>
            </div>
        </div>
    </div>
</section>

<style>
.hover-glow-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold) !important;
    box-shadow: 0 10px 25px rgba(220, 199, 163, 0.08);
}
.transition-all {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.z-index-2 {
    z-index: 2;
}
</style>

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