<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->

<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->

<!--    <title>Contact Us | APA Sales</title>-->

    <!-- Google Fonts -->

<!--    <link rel="preconnect" href="https://fonts.googleapis.com">-->

<!--    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>-->

<!--    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;500&display=swap" rel="stylesheet">-->

    <!-- Bootstrap Icons -->

<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">-->

    <!-- AOS -->

<!--    <link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">-->

<?= $this->include('templates/header', ['title' => 'Footer | APA Sales']) ?>
    <style>

        /* =========================================================
           ROOT
        ========================================================== */

        :root {
            --gold: #b5965a;
            --dark: #111111;
            --text: #333333;
            --muted: #777777;
            --light: #f8f7f4;
            --border: #e5e1d9;
            --white: #ffffff;
        }


        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        body {
            font-family: 'Inter', sans-serif;
            color: var(--text);
            background: var(--white);
            line-height: 1.7;
        }


        a {
            text-decoration: none;
            color: inherit;
        }


        /* =========================================================
           CONTACT HERO
        ========================================================== */

        .contact-hero {
            position: relative;
            min-height: 480px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: var(--light);
            text-align: center;
        }


        .contact-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(to right, transparent 24.9%, #e7e2d9 25%, transparent 25.1%),
                linear-gradient(to right, transparent 49.9%, #e7e2d9 50%, transparent 50.1%),
                linear-gradient(to right, transparent 74.9%, #e7e2d9 75%, transparent 75.1%);
            opacity: 0.65;
        }


        .contact-hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            padding: 90px 20px;
        }


        .contact-eyebrow {
            display: inline-block;
            margin-bottom: 18px;
            color: var(--gold);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 4px;
            text-transform: uppercase;
        }


        .contact-hero h1 {
            margin-bottom: 20px;
            color: var(--dark);
            font-family: 'Playfair Display', serif;
            font-size: clamp(48px, 7vw, 78px);
            font-weight: 400;
            line-height: 1.1;
        }


        .contact-hero p {
            max-width: 600px;
            margin: 0 auto;
            color: #707070;
            font-size: 15px;
            font-weight: 300;
        }


        /* =========================================================
           CONTACT SECTION
        ========================================================== */

        .contact-section {
            padding: 110px 20px;
            background: var(--white);
        }


        .contact-container {
            max-width: 1200px;
            margin: 0 auto;
        }


        .contact-grid {
            display: grid;
            grid-template-columns: 0.8fr 1.2fr;
            gap: 100px;
            align-items: start;
        }


        /* =========================================================
           CONTACT INFO
        ========================================================== */

        .contact-info {
            max-width: 440px;
        }


        .section-label {
            display: block;
            margin-bottom: 15px;
            color: var(--gold);
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
        }


        .section-title {
            margin-bottom: 25px;
            color: var(--dark);
            font-family: 'Playfair Display', serif;
            font-size: clamp(38px, 4vw, 52px);
            font-weight: 400;
            line-height: 1.15;
        }


        .contact-intro {
            margin-bottom: 40px;
            color: #707070;
            font-size: 15px;
            font-weight: 300;
        }


        .contact-details {
            border-top: 1px solid var(--border);
        }


        .contact-detail {
            display: flex;
            gap: 18px;
            padding: 25px 0;
            border-bottom: 1px solid var(--border);
        }


        .contact-detail-icon {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gold);
            border: 1px solid var(--border);
            font-size: 17px;
        }


        .contact-detail-content h4 {
            margin-bottom: 4px;
            color: var(--dark);
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            font-weight: 400;
        }


        .contact-detail-content p {
            margin: 0;
            color: #777;
            font-size: 13px;
            line-height: 1.6;
        }


        .contact-detail-content a {
            color: #777;
            transition: color 0.3s ease;
        }


        .contact-detail-content a:hover {
            color: var(--gold);
        }


        /* =========================================================
           CONTACT FORM
        ========================================================== */

        .contact-form-wrapper {
            padding: 50px;
            background: var(--light);
            border: 1px solid var(--border);
        }


        .contact-form-heading {
            margin-bottom: 35px;
        }


        .contact-form-heading h2 {
            margin-bottom: 8px;
            color: var(--dark);
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            font-weight: 400;
        }


        .contact-form-heading p {
            color: #777;
            font-size: 13px;
        }


        .contact-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px 20px;
        }


        .form-group {
            position: relative;
        }


        .form-group.full-width {
            grid-column: 1 / -1;
        }


        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #444;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
        }


        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 14px 15px;
            color: #333;
            background: var(--white);
            border: 1px solid #ddd8cf;
            border-radius: 0;
            outline: none;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            transition: border-color 0.3s ease;
        }


        .form-group input,
        .form-group select {
            height: 50px;
        }


        .form-group textarea {
            min-height: 140px;
            resize: vertical;
        }


        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--gold);
        }


        .contact-submit {
            grid-column: 1 / -1;
            display: flex;
            justify-content: flex-start;
            margin-top: 5px;
        }


        .contact-submit button {
            min-width: 190px;
            padding: 15px 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            color: var(--white);
            background: var(--dark);
            border: 0;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
        }


        .contact-submit button:hover {
            background: var(--gold);
        }


        /* =========================================================
           SHOWROOM SECTION
        ========================================================== */

        .showroom-section {
            padding: 110px 20px;
            background: var(--light);
        }


        .showroom-container {
            max-width: 1200px;
            margin: 0 auto;
        }


        .showroom-heading {
            max-width: 650px;
            margin: 0 auto 60px;
            text-align: center;
        }


        .showroom-heading h2 {
            margin-bottom: 15px;
            color: var(--dark);
            font-family: 'Playfair Display', serif;
            font-size: clamp(38px, 5vw, 55px);
            font-weight: 400;
        }


        .showroom-heading p {
            color: #777;
            font-size: 14px;
            font-weight: 300;
        }


        .showroom-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 450px;
            background: var(--white);
        }


        .showroom-map {
            min-height: 450px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ebe9e4;
        }


        .map-placeholder {
            text-align: center;
            color: #777;
        }


        .map-placeholder i {
            display: block;
            margin-bottom: 15px;
            color: var(--gold);
            font-size: 40px;
        }


        .map-placeholder span {
            display: block;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }


        .showroom-content {
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }


        .showroom-content h3 {
            margin-bottom: 18px;
            color: var(--dark);
            font-family: 'Playfair Display', serif;
            font-size: 34px;
            font-weight: 400;
        }


        .showroom-content > p {
            margin-bottom: 30px;
            color: #777;
            font-size: 14px;
            font-weight: 300;
        }


        .showroom-hours {
            padding-top: 25px;
            border-top: 1px solid var(--border);
        }


        .hours-row {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 8px 0;
            color: #666;
            font-size: 13px;
        }


        .hours-row span:last-child {
            color: #333;
        }


        /* =========================================================
           CTA
        ========================================================== */

        .contact-cta {
            padding: 100px 20px;
            text-align: center;
            background: var(--white);
        }


        .contact-cta-content {
            max-width: 700px;
            margin: 0 auto;
        }


        .contact-cta h2 {
            margin-bottom: 15px;
            color: var(--dark);
            font-family: 'Playfair Display', serif;
            font-size: clamp(38px, 5vw, 55px);
            font-weight: 400;
        }


        .contact-cta p {
            margin-bottom: 30px;
            color: #777;
            font-size: 14px;
        }


        .contact-cta-button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 14px 30px;
            color: var(--white);
            background: var(--dark);
            font-size: 11px;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }


        .contact-cta-button:hover {
            color: var(--white);
            background: var(--gold);
        }


        /* =========================================================
           RESPONSIVE
        ========================================================== */

        @media (max-width: 991px) {

            .contact-grid {
                grid-template-columns: 1fr;
                gap: 60px;
            }


            .contact-info {
                max-width: 100%;
            }


            .showroom-grid {
                grid-template-columns: 1fr;
            }

        }


        @media (max-width: 767px) {

            .contact-hero {
                min-height: 400px;
            }


            .contact-section,
            .showroom-section {
                padding: 80px 20px;
            }


            .contact-form-wrapper {
                padding: 30px 20px;
            }


            .contact-form {
                grid-template-columns: 1fr;
            }


            .form-group.full-width {
                grid-column: auto;
            }


            .contact-submit {
                grid-column: auto;
            }


            .showroom-map {
                min-height: 300px;
            }


            .showroom-content {
                padding: 40px 25px;
            }


            .contact-cta {
                padding: 80px 20px;
            }

        }


        @media (max-width: 480px) {

            .contact-hero-content {
                padding: 70px 20px;
            }


            .contact-form-wrapper {
                padding: 25px 18px;
            }


            .contact-detail {
                gap: 12px;
            }


            .showroom-content h3 {
                font-size: 30px;
            }

        }

    </style>

</head>


<body>


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

    <section class="contact-hero">

        <div class="contact-hero-content" data-aos="fade-up">

            <span class="contact-eyebrow">
                APA SALES
            </span>

            <h1>
                Contact Us
            </h1>

            <p>
                Whether you are a wholesaler, retailer or independent
                business owner, we would love to hear from you.
            </p>

        </div>

    </section>


    <!-- =========================================================
         CONTACT SECTION
    ========================================================== -->

    <section class="contact-section">

        <div class="contact-container">

            <div class="contact-grid">

                <!-- CONTACT INFORMATION -->

                <div class="contact-info" data-aos="fade-right">

                    <span class="section-label">
                        Get In Touch
                    </span>

                    <h2 class="section-title">
                        Let's Start a Conversation
                    </h2>

                    <p class="contact-intro">
                        Have questions about our collections, pricing,
                        orders or showroom? Send us a message and our
                        team will be happy to assist you.
                    </p>


                    <div class="contact-details">

                        <div class="contact-detail">

                            <div class="contact-detail-icon">
                                <i class="bi bi-geo-alt"></i>
                            </div>

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

                                <h4>
                                    Visit Us
                                </h4>

                                <p>
                                    New York City, United States
                                </p>

                            </div>

                        </div>


                        <div class="contact-detail">

                            <div class="contact-detail-icon">
                                <i class="bi bi-envelope"></i>
                            </div>

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

                                <h4>
                                    Email
                                </h4>

                                <p>
                                    <a href="mailto:sales@apasales.com">
                                        sales@apasales.com
                                    </a>
                                </p>

                            </div>

                        </div>


                        <div class="contact-detail">

                            <div class="contact-detail-icon">
                                <i class="bi bi-telephone"></i>
                            </div>

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

                                <h4>
                                    Phone
                                </h4>

                                <p>
                                    <a href="tel:(212)-684-1447">
                                       (212)-684-1447
                                    </a>
                                </p>

                            </div>

                        </div>


                        <!--<div class="contact-detail">-->

                        <!--    <div class="contact-detail-icon">-->
                        <!--        <i class="bi bi-clock"></i>-->
                        <!--    </div>-->

                        <!--    <div class="contact-detail-content">-->

                        <!--        <h4>-->
                        <!--            Business Hours-->
                        <!--        </h4>-->

                        <!--        <p>-->
                        <!--            Monday – Friday<br>-->
                        <!--            9:00 AM – 6:00 PM-->
                        <!--        </p>-->

                        <!--    </div>-->

                        <!--</div>-->

                    </div>

                </div>


                <!-- CONTACT FORM -->

                <div class="contact-form-wrapper" data-aos="fade-left">

                    <div class="contact-form-heading">

                        <span class="section-label">
                            Send A Message
                        </span>

                        <h2>
                            How Can We Help?
                        </h2>

                        <p>
                            Fill out the form below and our team will
                            get back to you.
                        </p>

                    </div>


                    <form class="contact-form" action="#" method="post">

                        <div class="form-group">

                            <label for="firstName">
                                First Name
                            </label>

                            <input
                                type="text"
                                id="firstName"
                                name="first_name"
                                placeholder="Your first name"
                                required
                            >

                        </div>


                        <div class="form-group">

                            <label for="lastName">
                                Last Name
                            </label>

                            <input
                                type="text"
                                id="lastName"
                                name="last_name"
                                placeholder="Your last name"
                                required
                            >

                        </div>


                        <div class="form-group">

                            <label for="email">
                                Email Address
                            </label>

                            <input
                                type="email"
                                id="email"
                                name="email"
                                placeholder="Your email address"
                                required
                            >

                        </div>


                        <div class="form-group">

                            <label for="phone">
                                Phone Number
                            </label>

                            <input
                                type="tel"
                                id="phone"
                                name="phone"
                                placeholder="Your phone number"
                            >

                        </div>


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

                            <label for="subject">
                                Subject
                            </label>

                            <select id="subject" name="subject">

                                <option value="">
                                    Select a subject
                                </option>

                                <option value="catalog">
                                    Catalog Inquiry
                                </option>

                                <option value="wholesale">
                                    Wholesale Inquiry
                                </option>

                                <option value="order">
                                    Order Inquiry
                                </option>

                                <option value="showroom">
                                    Showroom Appointment
                                </option>

                                <option value="other">
                                    Other
                                </option>

                            </select>

                        </div>


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

                            <label for="message">
                                Message
                            </label>

                            <textarea
                                id="message"
                                name="message"
                                placeholder="Tell us how we can help..."
                                required
                            ></textarea>

                        </div>


                        <div class="contact-submit">

                            <button type="submit">

                                Send Message

                                <i class="bi bi-arrow-right"></i>

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </section>


    <!-- =========================================================
         SHOWROOM
    ========================================================== -->

    <!--<section class="showroom-section">-->

    <!--    <div class="showroom-container">-->

    <!--        <div class="showroom-heading" data-aos="fade-up">-->

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

    <!--            <h2>-->
    <!--                Come See Us-->
    <!--            </h2>-->

    <!--            <p>-->
    <!--                Experience our sterling silver collections-->
    <!--                in person at our New York City showroom.-->
    <!--            </p>-->

    <!--        </div>-->


    <!--        <div class="showroom-grid">-->

    <!--            <div class="showroom-map" data-aos="fade-right">-->

    <!--                <div class="map-placeholder">-->

    <!--                    <i class="bi bi-geo-alt"></i>-->

    <!--                    <span>-->
    <!--                        New York City-->
    <!--                    </span>-->

    <!--                </div>-->

    <!--            </div>-->


    <!--            <div class="showroom-content" data-aos="fade-left">-->

    <!--                <span class="section-label">-->
    <!--                    Our Location-->
    <!--                </span>-->

    <!--                <h3>-->
    <!--                    New York City-->
    <!--                </h3>-->

    <!--                <p>-->
    <!--                    Visit our showroom to explore our collections,-->
    <!--                    discuss your requirements and discover jewelry-->
    <!--                    designed for your business.-->
    <!--                </p>-->

    <!--                <p>-->
    <!--                    First-time visitors are requested to contact-->
    <!--                    us and schedule an appointment before visiting.-->
    <!--                </p>-->


    <!--                <div class="showroom-hours">-->

    <!--                    <div class="hours-row">-->
    <!--                        <span>Monday</span>-->
    <!--                        <span>9:00 AM – 6:00 PM</span>-->
    <!--                    </div>-->

    <!--                    <div class="hours-row">-->
    <!--                        <span>Tuesday</span>-->
    <!--                        <span>9:00 AM – 6:00 PM</span>-->
    <!--                    </div>-->

    <!--                    <div class="hours-row">-->
    <!--                        <span>Wednesday</span>-->
    <!--                        <span>9:00 AM – 6:00 PM</span>-->
    <!--                    </div>-->

    <!--                    <div class="hours-row">-->
    <!--                        <span>Thursday</span>-->
    <!--                        <span>9:00 AM – 6:00 PM</span>-->
    <!--                    </div>-->

    <!--                    <div class="hours-row">-->
    <!--                        <span>Friday</span>-->
    <!--                        <span>9:00 AM – 6:00 PM</span>-->
    <!--                    </div>-->

    <!--                </div>-->

    <!--            </div>-->

    <!--        </div>-->

    <!--    </div>-->

    <!--</section>-->


    <!-- =========================================================
         CTA
    ========================================================== -->

    <section class="contact-cta">

        <div class="contact-cta-content" data-aos="fade-up">

            <span class="section-label">
                Explore APA Sales
            </span>

            <h2>
                Discover Our Collections
            </h2>

            <p>
                Explore our sterling silver jewelry collections and
                find designs made for your customers.
            </p>

            <a href="#" class="contact-cta-button">

                View Catalogs

                <i class="bi bi-arrow-right"></i>

            </a>

        </div>

    </section>


    <!-- =========================================================
         AOS
    ========================================================== -->

    <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

    <script>

        AOS.init({
            duration: 900,
            once: true,
            offset: 80
        });

    </script>


<!--</body>-->

<!--</html>-->
<?= $this->include('templates/footer') ?>