<?php
	/* Template Name: Contact */
	get_header();
?>


<!-- =========================================
CONTACT HERO
========================================= -->

<section class="contact-hero">

    <!-- Background Image -->

    <div class="contact-hero-bg">

        <img
            src="<?= get_template_directory_uri(); ?>/assets/images/contact-hero.jpg"
            alt="Libas Bespoke Atelier">

    </div>

    <!-- Overlay -->

    <div class="contact-hero-overlay"></div>

    <!-- Decorative Elements -->

    <span class="contact-circle contact-circle-one"></span>
    <span class="contact-circle contact-circle-two"></span>

    <div class="container">

        <div class="contact-hero-wrapper">

            <!-- Left Content -->

            <div class="contact-hero-content">

                <span class="contact-label">
                    Contact Libas Bespoke
                </span>

                <h1>

                    Let's Create
                    <span>Your Next</span>
                    <span>Masterpiece.</span>

                </h1>

                <p>

                    Whether you're planning your first bespoke suit,
                    scheduling a private consultation, or discussing
                    your next commission, our tailoring consultants
                    are ready to welcome you.

                </p>

                <div class="contact-hero-buttons">

                    <a href="#contactForm" class="primary-btn">

                        Book Consultation

                    </a>

                    <a href="tel:+971501234567" class="secondary-btn">

                        Call Us

                    </a>

                </div>

            </div>

            <!-- Floating Contact Card -->

            <aside class="contact-hero-card">

                <span class="card-label">

                    Available Today

                </span>

                <h3>

                    Visit Our
                    Bespoke Atelier

                </h3>

                <ul>

                    <li>

                        <i class="fa-solid fa-location-dot"></i>

                        <div>

                            <strong>Location</strong>

                            <span>
                                Dubai, United Arab Emirates
                            </span>

                        </div>

                    </li>

                    <li>

                        <i class="fa-solid fa-phone"></i>

                        <div>

                            <strong>Call</strong>

                            <span>
                                +971 XX XXX XXXX
                            </span>

                        </div>

                    </li>

                    <li>

                        <i class="fa-solid fa-clock"></i>

                        <div>

                            <strong>Working Hours</strong>

                            <span>
                                Mon – Sat · 10 AM – 8 PM
                            </span>

                        </div>

                    </li>

                </ul>

            </aside>

        </div>

    </div>

    <!-- Scroll Indicator -->

    <div class="contact-scroll">

        <span>

            Scroll

        </span>

        <div class="scroll-mouse">

            <span></span>

        </div>

    </div>

</section>

<!-- =========================================
CONTACT HERO ENDS
========================================= -->


<!-- =========================================
VISIT OUR ATELIER
========================================= -->

<section class="visit-atelier light-section">

    <div class="container">

        <div class="visit-atelier-wrapper">

            <!-- Left Editorial Content -->

            <div class="visit-content">

                <span class="section-label">
                    Visit Our Atelier
                </span>

                <h2>
                    Experience Bespoke
                    <span>Tailoring In</span>
                    <span>Its Finest Form.</span>
                </h2>

                <p>
                    Every bespoke journey begins with a personal
                    consultation inside our atelier. Explore the world's
                    finest fabrics, meet our experienced tailoring
                    consultants, and discover craftsmanship refined over
                    decades.
                </p>

                <div class="atelier-features">

                    <article class="atelier-feature">

                        <span class="atelier-icon">
                            <i class="fa-solid fa-location-dot"></i>
                        </span>

                        <div>

                            <h3>
                                Convenient Location
                            </h3>

                            <p>
                                Located in the heart of Dubai with easy
                                access and dedicated parking facilities.
                            </p>

                        </div>

                    </article>

                    <article class="atelier-feature">

                        <span class="atelier-icon">
                            <i class="fa-solid fa-user-tie"></i>
                        </span>

                        <div>

                            <h3>
                                Private Consultation
                            </h3>

                            <p>
                                Meet one-on-one with our tailoring
                                specialists to discuss your personal
                                style, fabrics, and garment details.
                            </p>

                        </div>

                    </article>

                    <article class="atelier-feature">

                        <span class="atelier-icon">
                            <i class="fa-solid fa-scissors"></i>
                        </span>

                        <div>

                            <h3>
                                Precision Measurements
                            </h3>

                            <p>
                                Every commission begins with detailed
                                measurements to achieve exceptional fit,
                                comfort and elegance.
                            </p>

                        </div>

                    </article>

                </div>

                <div class="atelier-actions">

                    <a href="#contactForm" class="primary-btn">
                        Schedule Your Visit
                    </a>

                    <a href="#googleMap" class="secondary-btn">
                        View Location
                    </a>

                </div>

            </div>

            <!-- Right Image -->

            <div class="visit-media">

                <div class="visit-image">

                    <img
                        src="<?= get_template_directory_uri(); ?>/assets/images/about-hero.jpg"
                        alt="Libas Bespoke Atelier">

                </div>

                <!-- Floating Card -->

                <div class="atelier-card">

                    <span class="atelier-card-label">
                        Our Atelier
                    </span>

                    <h3>
                        Crafted Around
                        Your Lifestyle
                    </h3>

                    <p>
                        A refined environment where craftsmanship,
                        luxury fabrics, and personalised service come
                        together to create garments made exclusively
                        for you.
                    </p>

                    <div class="atelier-card-footer">

                        <div>

                            <strong>
                                Mon – Sat
                            </strong>

                            <span>
                                10:00 AM – 8:00 PM
                            </span>

                        </div>

                        <a href="#contactForm">

                            Book Visit

                            <i class="fa-solid fa-arrow-right"></i>

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<!-- =========================================
VISIT OUR ATELIER ENDS
========================================= -->


<!-- =========================================
PRIVATE CONSULTATION
========================================= -->

<section class="consultation-section light-section" id="contactForm" style="background-image: url(<?= get_template_directory_uri(); ?>/assets/images/about-hero.jpg);">

    <div class="container">

        <!-- Section Heading -->

        <div class="consultation-heading">

            <span class="section-label">
                Private Consultation
            </span>

            <h2>

                Let's Begin Your
                <span>Bespoke Journey.</span>

            </h2>

            <p>

                Complete the enquiry below and one of our tailoring
                consultants will personally contact you to arrange
                your consultation, discuss your requirements and
                recommend the perfect bespoke experience.

            </p>

        </div>

        <!-- Main Layout -->

        <div class="consultation-wrapper">

            <!-- =========================================
            FORM
            ========================================= -->

            <div class="consultation-form">

                <form action="#" method="post">

                    <div class="form-grid">

                        <div class="form-group">

                            <label>
                                Full Name
                            </label>

                            <input
                                type="text"
                                placeholder="Enter your full name">

                        </div>

                        <div class="form-group">

                            <label>
                                Email Address
                            </label>

                            <input
                                type="email"
                                placeholder="Enter your email">

                        </div>

                        <div class="form-group">

                            <label>
                                Phone Number
                            </label>

                            <input
                                type="tel"
                                placeholder="+971">

                        </div>

                        <div class="form-group">

                            <label>
                                Service Required
                            </label>

                            <select>

                                <option>
                                    Select Service
                                </option>

                                <option>
                                    Bespoke Suit
                                </option>

                                <option>
                                    Wedding Suit
                                </option>

                                <option>
                                    Business Suit
                                </option>

                                <option>
                                    Shirts
                                </option>

                                <option>
                                    Ladies Tailoring
                                </option>

                            </select>

                        </div>

                        <div class="form-group full-width">

                            <label>
                                Preferred Appointment
                            </label>

                            <input
                                type="text"
                                placeholder="Preferred Date & Time">

                        </div>

                        <div class="form-group full-width">

                            <label>
                                Tell Us About Your Requirements
                            </label>

                            <textarea
                                rows="6"
                                placeholder="Share your ideas, occasion, preferred fabrics or any questions..."></textarea>

                        </div>

                    </div>

                    <div class="consultation-bottom">

                        <div class="consultation-note">

                            <span>

                                <i class="fa-solid fa-circle-check"></i>

                                Complimentary Consultation

                            </span>

                            <span>

                                <i class="fa-solid fa-circle-check"></i>

                                Private Appointment

                            </span>

                            <span>

                                <i class="fa-solid fa-circle-check"></i>

                                Premium Fabric Guidance

                            </span>

                        </div>

                        <button
                            type="submit"
                            class="primary-btn">

                            Book Consultation

                        </button>

                    </div>

                </form>

            </div>

            <!-- =========================================
            CONTACT INFO
            ========================================= -->

            <aside class="consultation-sidebar">

                <div class="consultation-card">

                    <span class="consultation-card-label">

                        Contact Information

                    </span>

                    <h3>

                        Speak With
                        Our Tailoring Team

                    </h3>

                    <p>

                        Whether you prefer to visit our atelier,
                        call us directly or connect via WhatsApp,
                        our consultants are always happy to assist.

                    </p>

                    <div class="consultation-info">

                        <article>

                            <i class="fa-solid fa-phone"></i>

                            <div>

                                <strong>
                                    Phone
                                </strong>

                                <span>
                                    +971 XX XXX XXXX
                                </span>

                            </div>

                        </article>

                        <article>

                            <i class="fa-brands fa-whatsapp"></i>

                            <div>

                                <strong>
                                    WhatsApp
                                </strong>

                                <span>
                                    Chat With Our Team
                                </span>

                            </div>

                        </article>

                        <article>

                            <i class="fa-solid fa-envelope"></i>

                            <div>

                                <strong>
                                    Email
                                </strong>

                                <span>
                                    info@libasbespoke.ae
                                </span>

                            </div>

                        </article>

                        <article>

                            <i class="fa-solid fa-location-dot"></i>

                            <div>

                                <strong>
                                    Atelier
                                </strong>

                                <span>
                                    Dubai, United Arab Emirates
                                </span>

                            </div>

                        </article>

                        <article>

                            <i class="fa-solid fa-clock"></i>

                            <div>

                                <strong>
                                    Working Hours
                                </strong>

                                <span>
                                    Mon – Sat · 10 AM – 8 PM
                                </span>

                            </div>

                        </article>

                    </div>

                    <a
                        href="#googleMap"
                        class="secondary-btn">

                        Get Directions

                    </a>

                </div>

            </aside>

        </div>

    </div>

</section>

<!-- =========================================
PRIVATE CONSULTATION ENDS
========================================= -->

<!-- =========================================
FIND OUR ATELIER
========================================= -->

<section class="find-atelier light-section" id="googleMap">

    <div class="container">

        <!-- Section Heading -->

        <div class="find-atelier-heading">

            <span class="section-label">
                Find Our Atelier
            </span>

            <h2>
                Visit Us In The
                <span>Heart Of Dubai.</span>
            </h2>

            <p>
                Located in one of Dubai's most prestigious destinations,
                our bespoke atelier offers a refined environment where
                craftsmanship, luxury fabrics, and personalised tailoring
                come together.
            </p>

        </div>

        <!-- Map -->

        <div class="atelier-map">

            <iframe
                src="https://www.google.com/maps?q=Dubai,+United+Arab+Emirates&output=embed"
                loading="lazy"
                allowfullscreen
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>

        </div>

        <!-- Information Cards -->

        <div class="atelier-location-grid">

            <article class="location-card">

                <span class="location-icon">
                    <i class="fa-solid fa-location-dot"></i>
                </span>

                <h3>
                    Address
                </h3>

                <p>
                    Libas Bespoke<br>
                    Dubai, United Arab Emirates
                </p>

            </article>

            <article class="location-card">

                <span class="location-icon">
                    <i class="fa-solid fa-car"></i>
                </span>

                <h3>
                    Parking
                </h3>

                <p>
                    Complimentary customer parking available directly outside our atelier.
                </p>

            </article>

            <article class="location-card">

                <span class="location-icon">
                    <i class="fa-solid fa-clock"></i>
                </span>

                <h3>
                    Opening Hours
                </h3>

                <p>
                    Monday – Saturday<br>
                    10:00 AM – 8:00 PM
                </p>

            </article>

            <article class="location-card">

                <span class="location-icon">
                    <i class="fa-solid fa-phone"></i>
                </span>

                <h3>
                    Need Assistance?
                </h3>

                <p>
                    Call our tailoring consultants before your visit for personalised guidance.
                </p>

            </article>

        </div>

        <!-- Bottom CTA -->

        <div class="find-atelier-footer">

            <h3>
                We Look Forward To Welcoming You.
            </h3>

            <p>
                Schedule your private consultation and experience the Libas Bespoke difference in person.
            </p>

            <div class="find-atelier-actions">

                <a href="#contactForm" class="primary-btn">
                    Book Consultation
                </a>

                <a href="#" class="secondary-btn">
                    Get Directions
                </a>

            </div>

        </div>

    </div>

</section>

<!-- =========================================
FIND OUR ATELIER ENDS
========================================= -->

<?php get_footer(); ?>