@extends('layouts.app')

@section('content')

<style>

/* =========================================================
   JEWELL EXCEL CONTACT PAGE
========================================================= */

:root {
    --jewel-navy: #173957;
    --jewel-dark: #102b42;
    --jewel-gold: #c79a43;
    --jewel-gold-light: #d9b56a;
    --jewel-cream: #f7f4ed;
    --jewel-white: #ffffff;
    --jewel-text: #20384d;
    --jewel-muted: #7a7a76;
    --jewel-border: #e8e2d7;
}


/* =========================================================
   GLOBAL
========================================================= */

.jewell-contact-page {
    color: var(--jewel-text);
    background: #fff;
    font-family: inherit;
    overflow: hidden;
}

.jewell-contact-page *,
.jewell-contact-page *::before,
.jewell-contact-page *::after {
    box-sizing: border-box;
}

.jewell-contact-page a {
    text-decoration: none;
}

.jewell-contact-page img {
    max-width: 100%;
}


/* =========================================================
   CONTAINER
========================================================= */

.jewell-contact-page .container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   SECTION EYEBROW
========================================================= */

.section-eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--jewel-gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.5;
    text-transform: uppercase;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.contact-breadcrumb {
    position: relative;
    min-height: 270px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(15, 42, 63, .98) 0%,
            rgba(23, 57, 87, .94) 50%,
            rgba(23, 57, 87, .72) 100%
        ),
        url('https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?auto=format&fit=crop&w=1800&q=85');

    background-size: cover;
    background-position: center;
}

.contact-breadcrumb::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -180px;
    bottom: -300px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.contact-breadcrumb-content {
    position: relative;
    z-index: 2;
}

.contact-breadcrumb h1 {
    margin: 0 0 15px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(46px, 6vw, 72px);
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 1;
}

.contact-breadcrumb h1 em {
    color: var(--jewel-gold-light);
    font-style: normal;
}

.breadcrumb-links {
    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255,255,255,.65);
    font-size: 10px;
}

.breadcrumb-links a {
    color: #fff;
}

.breadcrumb-links span:first-of-type {
    color: var(--jewel-gold);
}


/* =========================================================
   INTRO
========================================================= */

.contact-intro {
    padding: 90px 0 80px;
    background: #fff;
}

.intro-grid {
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 70px;
    align-items: start;
}

.intro-heading {
    padding-top: 5px;
}

.intro-heading h2 {
    max-width: 390px;
    margin: 0;

    color: var(--jewel-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.5vw, 61px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -1.8px;
}

.intro-heading h2 span {
    display: block;
    color: var(--jewel-gold);
}

.intro-content {
    padding-top: 5px;
}

.intro-content p {
    margin: 0 0 18px;
    color: #70777c;
    font-size: 13px;
    line-height: 1.95;
}

.intro-quote {
    position: relative;
    margin-top: 25px;
    padding: 20px 25px 20px 42px;

    background: var(--jewel-cream);
    border-left: 2px solid var(--jewel-gold);

    color: var(--jewel-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1.7;
}

.intro-quote span {
    position: absolute;
    top: 11px;
    left: 16px;

    color: var(--jewel-gold);
    font-family: Georgia, serif;
    font-size: 27px;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {
    padding: 0 0 75px;
    background: #fff;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--jewel-border);
    border-bottom: 1px solid var(--jewel-border);
}

.detail-card {
    min-height: 150px;
    padding: 27px 25px;

    display: flex;
    align-items: flex-start;
    gap: 18px;

    border-right: 1px solid var(--jewel-border);
}

.detail-card:last-child {
    border-right: 0;
}

.detail-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dfd3bd;

    color: var(--jewel-gold);
    font-size: 13px;
}

.detail-label {
    display: block;
    margin-bottom: 8px;

    color: var(--jewel-gold);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}

.detail-card h3 {
    margin: 0 0 10px;

    color: var(--jewel-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 400;
}

.detail-card p {
    margin: 0;

    color: #858581;
    font-size: 10px;
    line-height: 1.7;
}

.detail-card p a {
    color: #858581;
    transition: .3s;
}

.detail-card p a:hover {
    color: var(--jewel-gold);
}


/* =========================================================
   FORM SECTION
========================================================= */

.contact-form-section {
    padding: 85px 0 100px;
    background: #fff;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: stretch;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.contact-image-wrapper {
    padding-right: 45px;
}

.contact-image {
    position: relative;
    height: 100%;
    min-height: 570px;
    overflow: hidden;
    background: var(--jewel-dark);
}

.contact-image img {
    width: 100%;
    height: 100%;
    min-height: 570px;

    display: block;
    object-fit: cover;

    transition: transform 1s ease;
}

.contact-image:hover img {
    transform: scale(1.04);
}

.image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(9,30,47,.05) 25%,
            rgba(8,27,43,.9) 100%
        );
}

.image-content {
    position: absolute;
    left: 35px;
    right: 35px;
    bottom: 38px;
}

.image-content .section-eyebrow {
    margin-bottom: 12px;
}

.image-content h3 {
    max-width: 320px;
    margin: 0 0 15px;

    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.05;
}

.image-content h3 em {
    color: var(--jewel-gold-light);
    font-style: italic;
}

.image-content p {
    max-width: 280px;
    margin: 0;

    color: rgba(255,255,255,.75);
    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   FORM CONTENT
========================================================= */

.contact-form-wrapper {
    padding: 10px 0 10px 15px;
}

.contact-form-wrapper h2 {
    max-width: 570px;
    margin: 0 0 16px;

    color: var(--jewel-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.5vw, 60px);
    font-weight: 400;
    letter-spacing: -1.8px;
    line-height: .98;
}

.contact-form-wrapper h2 span {
    display: block;
    color: var(--jewel-gold);
}

.form-intro {
    max-width: 520px;
    margin: 0 0 35px;

    color: #858581;
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   ALERTS
========================================================= */

.contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 25px;
    padding: 14px 17px;

    font-size: 11px;
    line-height: 1.6;
}

.contact-alert i {
    margin-top: 2px;
}

.success-alert {
    border-left: 3px solid #4c9468;
    background: #f2f8f4;
    color: #356c4a;
}

.error-alert {
    border-left: 3px solid #b55b52;
    background: #faf1f0;
    color: #8c3d35;
}


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

.luxury-contact-form {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

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

.form-field {
    margin-bottom: 23px;
}

.form-field.full-width {
    width: 100%;
}

.form-field label {
    display: block;
    margin-bottom: 8px;

    color: var(--jewel-navy);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
}

.form-field label span {
    color: var(--jewel-gold);
}

.input-wrapper,
.textarea-wrapper {
    position: relative;
}

.input-wrapper i,
.textarea-wrapper i {
    position: absolute;
    top: 50%;
    left: 15px;

    color: var(--jewel-gold);
    font-size: 11px;

    transform: translateY(-50%);
    pointer-events: none;
}

.textarea-wrapper i {
    top: 18px;
    transform: none;
}

.luxury-contact-form input,
.luxury-contact-form textarea {
    width: 100%;

    padding: 15px 15px 15px 40px;

    border: 1px solid #e5dfd4;
    border-radius: 0;

    outline: none;

    background: #faf9f6;

    color: var(--jewel-navy);

    font-family: inherit;
    font-size: 11px;

    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.luxury-contact-form textarea {
    min-height: 150px;
    padding-top: 16px;
    resize: vertical;
}

.luxury-contact-form input::placeholder,
.luxury-contact-form textarea::placeholder {
    color: #aaa9a4;
}

.luxury-contact-form input:focus,
.luxury-contact-form textarea:focus {
    border-color: var(--jewel-gold);
    background: #fff;

    box-shadow: 0 6px 20px rgba(25,55,80,.06);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.form-submit {
    margin-top: 4px;
}

.contact-submit {
    min-width: 165px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    padding: 15px 22px;

    border: 0;
    border-radius: 0;

    background: var(--jewel-navy);
    color: #fff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.contact-submit i {
    color: var(--jewel-gold-light);
    font-size: 10px;
}

.contact-submit:hover {
    background: var(--jewel-gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(23,57,87,.16);
}


/* =========================================================
   SERVICE PROMISE
========================================================= */

.service-promise {
    padding: 90px 0 95px;
    background: var(--jewel-cream);
}

.promise-header {
    max-width: 720px;
    margin-bottom: 50px;
}

.promise-header h2 {
    margin: 0 0 18px;

    color: var(--jewel-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.5vw, 57px);
    font-weight: 400;
    letter-spacing: -1.5px;
    line-height: 1;
}

.promise-header h2 span {
    color: var(--jewel-gold);
}

.promise-header p {
    max-width: 720px;
    margin: 0;

    color: #7c7b76;
    font-size: 11px;
    line-height: 1.9;
}

.promise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--jewel-border);
    border-bottom: 1px solid var(--jewel-border);
}

.promise-card {
    min-height: 190px;
    padding: 28px 22px;

    border-right: 1px solid var(--jewel-border);
}

.promise-card:last-child {
    border-right: 0;
}

.promise-number {
    display: block;
    margin-bottom: 25px;

    color: var(--jewel-gold);
    font-size: 8px;
    letter-spacing: 1px;
}

.promise-card h3 {
    margin: 0 0 13px;

    color: var(--jewel-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 400;
}

.promise-card p {
    margin: 0;

    color: #858581;
    font-size: 9px;
    line-height: 1.8;
}


/* =========================================================
   LOCATION
========================================================= */

.location-section {
    background: #fff;
    padding-top: 85px;
}

.location-heading {
    padding-bottom: 45px;
    text-align: center;
}

.location-heading h2 {
    margin: 0;

    color: var(--jewel-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4vw, 53px);
    font-weight: 400;
}

.location-heading h2 span {
    color: var(--jewel-gold);
}

.map-wrapper {
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    background: #e8e6e2;
}

.map-wrapper iframe {
    display: block;

    width: 100%;
    min-height: 420px;

    border: 0;
}


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

.contact-cta {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            #12344f 0%,
            #1b4566 100%
        );

    text-align: center;
}

.cta-pattern {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -230px;
    top: -280px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.cta-pattern::after {
    content: "";

    position: absolute;
    width: 340px;
    height: 340px;
    left: 80px;
    top: 80px;

    border: 1px solid rgba(255,255,255,.05);
    border-radius: 50%;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-content .section-eyebrow {
    margin-bottom: 15px;
}

.cta-content h2 {
    max-width: 650px;
    margin: 0 auto 18px;

    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 5vw, 63px);
    font-weight: 400;
    letter-spacing: -1.8px;
    line-height: 1;
}

.cta-content h2 em {
    color: var(--jewel-gold-light);
    font-style: italic;
}

.cta-content p {
    margin: 0 0 28px;

    color: rgba(255,255,255,.7);
    font-size: 11px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    padding: 15px 24px;

    background: var(--jewel-gold);
    color: #fff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    transition: .3s;
}

.cta-button i {
    font-size: 9px;
}

.cta-button:hover {
    background: #fff;
    color: var(--jewel-navy);
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .intro-heading h2 {
        max-width: 600px;
    }

    .details-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-card:nth-child(2) {
        border-right: 0;
    }

    .detail-card:nth-child(1),
    .detail-card:nth-child(2) {
        border-bottom: 1px solid var(--jewel-border);
    }

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

    .contact-image-wrapper {
        padding-right: 0;
        margin-bottom: 50px;
    }

    .contact-image {
        min-height: 500px;
    }

    .contact-image img {
        min-height: 500px;
    }

    .contact-form-wrapper {
        padding-left: 0;
    }

    .promise-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .promise-card:nth-child(2) {
        border-right: 0;
    }

    .promise-card:nth-child(1),
    .promise-card:nth-child(2) {
        border-bottom: 1px solid var(--jewel-border);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jewell-contact-page .container {
        width: min(100% - 30px, 600px);
    }

    .contact-breadcrumb {
        min-height: 220px;
    }

    .contact-breadcrumb h1 {
        font-size: 46px;
    }

    .contact-intro {
        padding: 60px 0;
    }

    .intro-heading h2 {
        font-size: 43px;
    }

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

    .detail-card {
        border-right: 0 !important;
        border-bottom: 1px solid var(--jewel-border);
    }

    .detail-card:last-child {
        border-bottom: 0;
    }

    .contact-details {
        padding-bottom: 55px;
    }

    .contact-form-section {
        padding: 60px 0 70px;
    }

    .contact-image-wrapper {
        margin-bottom: 45px;
    }

    .contact-image {
        min-height: 470px;
    }

    .contact-image img {
        min-height: 470px;
    }

    .image-content {
        left: 25px;
        right: 25px;
        bottom: 28px;
    }

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

    .contact-form-wrapper h2 {
        font-size: 43px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .service-promise {
        padding: 65px 0;
    }

    .promise-header {
        margin-bottom: 35px;
    }

    .promise-header h2 {
        font-size: 42px;
    }

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

    .promise-card {
        border-right: 0 !important;
        border-bottom: 1px solid var(--jewel-border);
    }

    .promise-card:last-child {
        border-bottom: 0;
    }

    .location-section {
        padding-top: 65px;
    }

    .location-heading {
        padding: 0 20px 30px;
    }

    .map-wrapper,
    .map-wrapper iframe {
        min-height: 350px;
    }

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

    .cta-content h2 {
        font-size: 43px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .contact-breadcrumb h1 {
        font-size: 40px;
    }

    .intro-heading h2,
    .contact-form-wrapper h2,
    .promise-header h2,
    .cta-content h2 {
        font-size: 38px;
    }

    .contact-image {
        min-height: 430px;
    }

    .contact-image img {
        min-height: 430px;
    }

    .contact-submit {
        width: 100%;
    }

}

</style>

<main class="jewell-contact-page">

    <!-- =========================================================
         BREADCRUMB HERO
    ========================================================== -->
    <section class="contact-breadcrumb">

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

        <div class="container contact-breadcrumb-content">

            <span class="section-eyebrow">JEWELL EXCEL</span>

            <h1>
                Contact <em>Us.</em>
            </h1>

            <div class="breadcrumb-links">
                <a href="{{ url('/') }}">Home</a>
                <span>/</span>
                <span>Contact Us</span>
            </div>

        </div>

    </section>


    <!-- =========================================================
         INTRO SECTION
    ========================================================== -->
    <section class="contact-intro">

        <div class="container">

            <div class="intro-grid">

                <div class="intro-heading">

                    <span class="section-eyebrow">
                        GET IN TOUCH
                    </span>

                    <h2>
                        Let's create
                        <span>something</span>
                        beautiful.
                    </h2>

                </div>


                <div class="intro-content">

                    <p>
                        {{ $contactPage->description }}
                    </p>

                    <p>
                        Whether you have a question about our jewellery,
                        need assistance with an order, or simply want to
                        discover more about Jewell Excel, our team is here
                        to assist you.
                    </p>

                    <div class="intro-quote">

                        <span>“</span>

                        Exceptional jewellery deserves an exceptional
                        experience from beginning to end.

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- =========================================================
         CONTACT INFORMATION
    ========================================================== -->
    <section class="contact-details">

        <div class="container">

            <div class="details-grid">

                <!-- Address -->
                <div class="detail-card">

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

                    <div>

                        <span class="detail-label">
                            VISIT US
                        </span>

                        <h3>
                            Our Address
                        </h3>

                        <p>
                            {{ $contactPage->address }}
                        </p>

                    </div>

                </div>


                <!-- Phone -->
                <div class="detail-card">

                    <div class="detail-icon">
                        <i class="fa-solid fa-phone"></i>
                    </div>

                    <div>

                        <span class="detail-label">
                            CALL US
                        </span>

                        <h3>
                            Phone Number
                        </h3>

                        <p>
                            {{ $contactPage->phone }}
                        </p>

                    </div>

                </div>


                <!-- Email -->
                <div class="detail-card">

                    <div class="detail-icon">
                        <i class="fa-regular fa-envelope"></i>
                    </div>

                    <div>

                        <span class="detail-label">
                            WRITE TO US
                        </span>

                        <h3>
                            Email Address
                        </h3>

                        <p>
                            <a href="mailto:{{ $contactPage->email }}">
                                {{ $contactPage->email }}
                            </a>
                        </p>

                    </div>

                </div>


                <!-- Working Hours -->
                <div class="detail-card">

                    <div class="detail-icon">
                        <i class="fa-regular fa-clock"></i>
                    </div>

                    <div>

                        <span class="detail-label">
                            WHEN TO VISIT
                        </span>

                        <h3>
                            Working Hours
                        </h3>

                        <p>
                            {{ $contactPage->working_days }}
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- =========================================================
         CONTACT FORM SECTION
    ========================================================== -->
    <section class="contact-form-section">

        <div class="container">

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


                <!-- =================================================
                     LEFT IMAGE
                ================================================== -->
                <div class="contact-image-wrapper">

                    <div class="contact-image">

                        <img
                            src="{{ asset('assets/images/contact-jewellery.jpg') }}"
                            alt="Jewell Excel Jewellery"
                            onerror="this.onerror=null;this.src='https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1000&q=85';"
                        >

                        <div class="image-overlay"></div>

                        <div class="image-content">

                            <span class="section-eyebrow">
                                JEWELL EXCEL
                            </span>

                            <h3>
                                Crafted with
                                <em>purpose.</em>
                            </h3>

                            <p>
                                Timeless jewellery, thoughtful service
                                and an experience designed around you.
                            </p>

                        </div>

                    </div>

                </div>


                <!-- =================================================
                     FORM
                ================================================== -->
                <div class="contact-form-wrapper">

                    <span class="section-eyebrow">
                        SEND AN ENQUIRY
                    </span>

                    <h2>
                        We'd love to
                        <span>hear from you.</span>
                    </h2>

                    <p class="form-intro">
                        Have a question or need assistance?
                        Send us a message and our team will get back
                        to you shortly.
                    </p>


                    <!-- Success -->
                    @if(session('success'))

                        <div class="contact-alert success-alert">
                            <i class="fa-solid fa-circle-check"></i>

                            <span>
                                {{ session('success') }}
                            </span>
                        </div>

                    @endif


                    <!-- Errors -->
                    @if($errors->any())

                        <div class="contact-alert error-alert">

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

                            <div>

                                @foreach($errors->all() as $error)

                                    <div>
                                        {{ $error }}
                                    </div>

                                @endforeach

                            </div>

                        </div>

                    @endif


                    <form
                        action="{{ route('contact.submit') }}"
                        method="POST"
                        class="luxury-contact-form"
                    >

                        @csrf


                        <div class="form-row">

                            <!-- Name -->
                            <div class="form-field">

                                <label for="contact-name">
                                    Your Name
                                    <span>*</span>
                                </label>

                                <div class="input-wrapper">

                                    <i class="fa-regular fa-user"></i>

                                    <input
                                        type="text"
                                        id="contact-name"
                                        name="name"
                                        value="{{ old('name') }}"
                                        placeholder="Enter your name"
                                        required
                                    >

                                </div>

                            </div>


                            <!-- Email -->
                            <div class="form-field">

                                <label for="contact-email">
                                    Your Email
                                    <span>*</span>
                                </label>

                                <div class="input-wrapper">

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

                                    <input
                                        type="email"
                                        id="contact-email"
                                        name="email"
                                        value="{{ old('email') }}"
                                        placeholder="Enter your email"
                                        required
                                    >

                                </div>

                            </div>

                        </div>


                        <!-- Message -->
                        <div class="form-field full-width">

                            <label for="contact-message">
                                Your Message
                                <span>*</span>
                            </label>

                            <div class="textarea-wrapper">

                                <i class="fa-regular fa-message"></i>

                                <textarea
                                    id="contact-message"
                                    name="message"
                                    rows="6"
                                    placeholder="Tell us how we can help..."
                                    required
                                >{{ old('message') }}</textarea>

                            </div>

                        </div>


                        <!-- Submit -->
                        <div class="form-submit">

                            <button
                                type="submit"
                                class="contact-submit"
                            >

                                <span>
                                    Send Message
                                </span>

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

                            </button>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </section>


    <!-- =========================================================
         SERVICE PROMISE
    ========================================================== -->
    <section class="service-promise">

        <div class="container">

            <div class="promise-header">

                <span class="section-eyebrow">
                    THE JEWELL EXCEL PROMISE
                </span>

                <h2>
                    A service as refined as
                    <span>our jewellery.</span>
                </h2>

                <p>
                    From your first enquiry to after-sales support,
                    we believe every interaction should reflect the
                    same care and attention to detail found in every
                    Jewell Excel creation.
                </p>

            </div>


            <div class="promise-grid">

                <!-- 01 -->
                <div class="promise-card">

                    <span class="promise-number">
                        01
                    </span>

                    <h3>
                        Personal Assistance
                    </h3>

                    <p>
                        Our team is available to help you choose
                        pieces that suit your style and occasion.
                    </p>

                </div>


                <!-- 02 -->
                <div class="promise-card">

                    <span class="promise-number">
                        02
                    </span>

                    <h3>
                        Trusted Service
                    </h3>

                    <p>
                        We believe in transparent communication
                        and dependable customer support.
                    </p>

                </div>


                <!-- 03 -->
                <div class="promise-card">

                    <span class="promise-number">
                        03
                    </span>

                    <h3>
                        Secure Delivery
                    </h3>

                    <p>
                        Your jewellery is handled with care from
                        our collection to your doorstep.
                    </p>

                </div>


                <!-- 04 -->
                <div class="promise-card">

                    <span class="promise-number">
                        04
                    </span>

                    <h3>
                        Lasting Relationship
                    </h3>

                    <p>
                        Our relationship doesn't end after your
                        purchase. We're here whenever you need us.
                    </p>

                </div>

            </div>

        </div>

    </section>


    <!-- =========================================================
         MAP SECTION
    ========================================================== -->
    <section class="location-section">

        <div class="location-heading">

            <span class="section-eyebrow">
                FIND US
            </span>

            <h2>
                Visit our <span>location.</span>
            </h2>

        </div>


        <div class="map-wrapper">

            {!! $contactPage->map_embed !!}

        </div>

    </section>


    <!-- =========================================================
         FINAL CTA
    ========================================================== -->
    <section class="contact-cta">

        <div class="cta-pattern"></div>

        <div class="container">

            <div class="cta-content">

                <span class="section-eyebrow">
                    JEWELL EXCEL
                </span>

                <h2>
                    Your story deserves
                    <em>to shine.</em>
                </h2>

                <p>
                    Have a question about our jewellery?
                    We're here to help.
                </p>

                <a
                    href="#contact-form"
                    class="cta-button"
                    onclick="document.querySelector('.contact-form-section').scrollIntoView({behavior:'smooth'}); return false;"
                >

                    Get In Touch

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

                </a>

            </div>

        </div>

    </section>

</main>





<script>

document.addEventListener('DOMContentLoaded', function () {

    /* ============================================
       Smooth scroll for CTA
    ============================================ */

    const ctaButton = document.querySelector('.cta-button');

    if (ctaButton) {

        ctaButton.addEventListener('click', function (e) {

            e.preventDefault();

            const formSection =
                document.querySelector('.contact-form-section');

            if (formSection) {

                formSection.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });

            }

        });

    }


    /* ============================================
       Input focus animation
    ============================================ */

    const formInputs =
        document.querySelectorAll(
            '.luxury-contact-form input, .luxury-contact-form textarea'
        );

    formInputs.forEach(function (input) {

        input.addEventListener('focus', function () {

            const wrapper = input.closest(
                '.input-wrapper, .textarea-wrapper'
            );

            if (wrapper) {
                wrapper.classList.add('is-focused');
            }

        });

        input.addEventListener('blur', function () {

            const wrapper = input.closest(
                '.input-wrapper, .textarea-wrapper'
            );

            if (wrapper) {
                wrapper.classList.remove('is-focused');
            }

        });

    });

});

</script>

@endsection