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

$success_msg = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = trim($_POST['name'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $subject = trim($_POST['subject'] ?? '');
    $message = trim($_POST['message'] ?? '');
    
    if (!empty($name) && !empty($email) && !empty($message)) {
        $success_msg = 'Your inquiry has been received by our Atelier Concierge. A representative will contact you within 24 business hours.';
    }
}
?>

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

<!-- Main Grid Section -->
<section class="py-5" style="background-color: var(--bg-dark);">
    <div class="container py-4">
        
        <?php if (!empty($success_msg)): ?>
            <!-- Success Toast/Alert -->
            <div class="alert alert-success border-warning bg-black text-warning rounded-4 py-3 px-4 mb-5 text-center d-flex align-items-center justify-content-center gap-2 mx-auto" style="max-width: 700px; box-shadow: 0 10px 25px rgba(220,199,163,0.08);">
                <i class="fa-solid fa-circle-check fs-4"></i>
                <span class="small fw-semibold"><?php echo htmlspecialchars($success_msg); ?></span>
            </div>
        <?php endif; ?>

        <div class="row g-5">
            <!-- Left Column: Contact Information Cards -->
            <div class="col-lg-5 text-white">
                <p class="text-warning text-uppercase small fw-bold mb-2" style="letter-spacing: 2px;">Atelier Coordinates</p>
                <h2 class="fw-bold mb-4" style="font-family: var(--font-heading); line-height: 1.3;">We welcome your direct inquiry.</h2>
                <p class="text-muted small lh-lg mb-5" style="color: var(--text-gray);">
                    Whether you require bespoke sizing, detailed sizing guides, or real-time order tracking support, our dedicated concierge team is at your disposal.
                </p>

                <!-- Cards Grid -->
                <div class="d-flex flex-column gap-4">
                    <!-- Physical Atelier -->
                    <div class="d-flex align-items-start gap-3 p-3 rounded-4 bg-black border border-secondary" style="border-color: rgba(255,255,255,0.05) !important;">
                        <div class="text-warning fs-4 mt-1"><i class="fa-solid fa-location-dot"></i></div>
                        <div>
                            <h5 class="fw-bold text-uppercase small mb-2" style="letter-spacing: 1.5px;">Atelier Location</h5>
                            <p class="text-muted small mb-0 lh-base" style="color: var(--text-gray);">No.10/4, Menikhinna, Kandy, Sri Lanka</p>
                        </div>
                    </div>

                    <!-- Helplines -->
                    <div class="d-flex align-items-start gap-3 p-3 rounded-4 bg-black border border-secondary" style="border-color: rgba(255,255,255,0.05) !important;">
                        <div class="text-warning fs-4 mt-1"><i class="fa-solid fa-phone"></i></div>
                        <div>
                            <h5 class="fw-bold text-uppercase small mb-2" style="letter-spacing: 1.5px;">Direct Telephone</h5>
                            <p class="text-muted small mb-0" style="color: var(--text-gray);">Customer Care: <a href="tel:0764146054" class="text-white text-decoration-none hover-gold fw-semibold">076 414 6054</a></p>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Right Column: Interactive Luxury Contact Form -->
            <div class="col-lg-7">
                <div class="card p-4 p-md-5 rounded-4 bg-black border border-secondary" style="border-color: rgba(255,255,255,0.06) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.4);">
                    <h3 class="text-white mb-2" style="font-family: var(--font-heading); font-weight: 600; letter-spacing: 1px;">Send A Message</h3>
                    <p class="text-muted small mb-4" style="color: var(--text-gray);">Complete the secure envelope form below to route your inquiry.</p>

                    <form action="contact.php" method="POST">
                        <div class="row g-3">
                            <!-- Name -->
                            <div class="col-md-6">
                                <label for="name" class="form-label text-uppercase text-muted fw-bold" style="font-size: 0.65rem; letter-spacing: 1.5px;">Full Name *</label>
                                <input type="text" id="name" name="name" class="form-control bg-dark border-secondary text-white py-2" placeholder="E.g. Elena Rostova" required>
                            </div>

                            <!-- Email -->
                            <div class="col-md-6">
                                <label for="email" class="form-label text-uppercase text-muted fw-bold" style="font-size: 0.65rem; letter-spacing: 1.5px;">Email Address *</label>
                                <input type="email" id="email" name="email" class="form-control bg-dark border-secondary text-white py-2" placeholder="E.g. elena@mn-direct.com" required>
                            </div>

                            <!-- Subject Selector -->
                            <div class="col-12">
                                <label for="subject" class="form-label text-uppercase text-muted fw-bold" style="font-size: 0.65rem; letter-spacing: 1.5px;">Subject of Inquiry</label>
                                <select id="subject" name="subject" class="form-select bg-dark border-secondary text-white py-2" style="font-size: 0.85rem;">
                                    <option value="Couture Sizing">Bespoke Couture Sizing Help</option>
                                    <option value="Order Status">Order Tracking / Status</option>
                                    <option value="Bespoke Request">Custom Tailoring Request</option>
                                    <option value="General Feedback">General Brand Feedback</option>
                                </select>
                            </div>

                            <!-- Message Envelope -->
                            <div class="col-12 mb-2">
                                <label for="message" class="form-label text-uppercase text-muted fw-bold" style="font-size: 0.65rem; letter-spacing: 1.5px;">Inquiry Details *</label>
                                <textarea id="message" name="message" class="form-control bg-dark border-secondary text-white py-2" rows="4" placeholder="Detail your specifications, order number, or tailoring inquiries here..." required></textarea>
                            </div>

                            <!-- Submit button -->
                            <div class="col-12 mt-4">
                                <button type="submit" class="btn btn-warning text-black w-100 py-3 rounded-pill fw-bold text-uppercase fs-7" style="letter-spacing: 1.5px;">
                                    Submit Inquiry to Atelier &rarr;
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.form-control, .form-select {
    background-color: rgba(14,14,14,0.8) !important;
    border-color: rgba(255,255,255,0.1) !important;
    font-size: 0.85rem;
    color: var(--text-white) !important;
    border-radius: 8px;
    transition: all 0.3s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 15px rgba(220,199,163,0.15) !important;
}
.hover-gold:hover {
    color: var(--accent-gold) !important;
}
.z-index-2 {
    z-index: 2;
}
</style>

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