<?php
$this->assign('title', 'Contact');

$firstNameError = $contactMessage->getError('first_name');
$lastNameError  = $contactMessage->getError('last_name');
$phoneError     = $contactMessage->getError('phone');
$emailError     = $contactMessage->getError('email');
$messageError   = $contactMessage->getError('message');
?>

<div class="landing-page contact-page">
    <section class="contact-hero-section">
        <div class="contact-hero-overlay"></div>

        <nav class="navbar navbar-expand-lg hero-navbar">
            <div class="container-fluid hero-nav-container">
                <a class="navbar-brand brand-link" href="<?= $this->Url->build('/') ?>">
                    <?= $this->Html->image('impeccable-logo.png', [
                        'alt' => 'Impeccable Courier',
                        'class' => 'brand-logo'
                    ]) ?>
                </a>

                <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#heroNavbar" aria-controls="heroNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse justify-content-end" id="heroNavbar">
                    <ul class="navbar-nav align-items-lg-center hero-menu">
                        <li class="nav-item">
                            <a class="nav-link" href="<?= $this->Url->build('/') ?>">Home</a>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Services
                            </a>
                            <ul class="dropdown-menu custom-dropdown" aria-labelledby="servicesDropdown">
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/booking') ?>">Book a Shipment</a></li>
                                <li><a class="dropdown-item" href="#">Track a Shipment</a></li>
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/') ?>#volumetricSection">Volumetric Weight Calculator</a></li>
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="<?= $this->Url->build('/contact') ?>">Contact Us</a>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="helpDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Help
                            </a>
                            <ul class="dropdown-menu custom-dropdown" aria-labelledby="helpDropdown">

                                <li><a class="dropdown-item" href="<?= $this->Url->build('/terms') ?>">Terms and Conditions</a></li>
                                <li><a class="dropdown-item" href="<?= $this->Url->build('/restricted-cargos') ?>">Restricted Cargos</a></li>
                            </ul>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if (!$this->Identity->isLoggedIn()) {
                                echo $this->Html->link(
                                    'Log in',
                                    ['controller' => 'Auth', 'action' => 'login'],
                                    ['class' => 'btn login-btn']
                                );
                            }
                            ?>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if ($this->Identity->isLoggedIn()) {
                                echo $this->Html->link(
                                    'Logout',
                                    ['controller' => 'Auth', 'action' => 'logout'],
                                    ['class' => 'btn login-btn']
                                );
                            }
                            ?>
                        </li>

                        <li class="nav-item nav-login-item">
                            <?php
                            if ($this->Identity->isLoggedIn()) {
                                echo $this->Html->link(
                                    'Dashboard',
                                    ['prefix' => 'Admin', 'controller' => 'Dashboard', 'action' => 'index'],
                                    ['class' => 'btn login-btn']
                                );
                            }
                            ?>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="contact-hero-center">
            <h1>Contact Us</h1>
            <p><a href="<?= $this->Url->build('/') ?>">Home</a> / Contact Us</p>
        </div>
    </section>

    <section class="contact-main-section">
        <div class="container-fluid contact-main-container">
            <div class="contact-heading-wrap">
                <h2>Get in touch with our team</h2>
                <p>
                    Contact us for shipment support, delivery enquiries, and international courier assistance.
                </p>
            </div>

            <div class="row gx-4 gy-4 align-items-center">
                <div class="col-lg-7">
                    <div class="contact-form-card">
                        <h3>Send Us A Message</h3>
                        <p class="contact-form-intro">
                            Our team is here to help with delivery information, parcel enquiries, and customer support.
                            Please fill in the form below and we will get back to you.
                        </p>

                        <?= $this->Form->create($contactMessage, [
                            'url' => ['controller' => 'Contact', 'action' => 'index'],
                            'id' => 'contactForm'
                        ]) ?>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="first-name-field">First Name <span class="required-star">*</span></label>
                                <input
                                    id="first-name-field"
                                    name="first_name"
                                    type="text"
                                    class="form-control"
                                    placeholder="First Name"
                                    maxlength="30"
                                    value="<?= h((string)$contactMessage->first_name) ?>"
                                    required
                                    <?= $submittedSuccessfully ? 'disabled' : '' ?>
                                >
                                <?php if (!empty($firstNameError)) : ?>
                                    <div class="field-error"><?= h(is_array($firstNameError) ? reset($firstNameError) : $firstNameError) ?></div>
                                <?php endif; ?>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="last-name-field">Last Name</label>
                                <input
                                    id="last-name-field"
                                    name="last_name"
                                    type="text"
                                    class="form-control"
                                    placeholder="Last Name"
                                    maxlength="30"
                                    value="<?= h((string)$contactMessage->last_name) ?>"
                                    <?= $submittedSuccessfully ? 'disabled' : '' ?>
                                >
                                <?php if (!empty($lastNameError)) : ?>
                                    <div class="field-error"><?= h(is_array($lastNameError) ? reset($lastNameError) : $lastNameError) ?></div>
                                <?php endif; ?>
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="phone-field">Phone Number <span class="required-star">*</span></label>
                                <input
                                    id="phone-field"
                                    name="phone"
                                    type="text"
                                    class="form-control"
                                    placeholder="Phone Number"
                                    maxlength="11"
                                    inputmode="numeric"
                                    pattern="^\d{1,11}$"
                                    value="<?= h((string)$contactMessage->phone) ?>"
                                    required
                                    <?= $submittedSuccessfully ? 'disabled' : '' ?>
                                >
                                <?php if (!empty($phoneError)) : ?>
                                    <div class="field-error"><?= h(is_array($phoneError) ? reset($phoneError) : $phoneError) ?></div>
                                <?php endif; ?>
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="email-field">Email Address</label>
                                <input
                                    id="email-field"
                                    name="email"
                                    type="email"
                                    class="form-control"
                                    placeholder="Email Address"
                                    maxlength="40"
                                    value="<?= h((string)$contactMessage->email) ?>"
                                    <?= $submittedSuccessfully ? 'disabled' : '' ?>
                                >
                                <?php if (!empty($emailError)) : ?>
                                    <div class="field-error"><?= h(is_array($emailError) ? reset($emailError) : $emailError) ?></div>
                                <?php endif; ?>
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="message-field">Message <span class="required-star">*</span></label>
                                <textarea
                                    id="message-field"
                                    name="message"
                                    class="form-control"
                                    placeholder="Message"
                                    rows="6"
                                    required
                                    <?= $submittedSuccessfully ? 'disabled' : '' ?>
                                ><?= h((string)$contactMessage->message) ?></textarea>
                                <?php if (!empty($messageError)) : ?>
                                    <div class="field-error"><?= h(is_array($messageError) ? reset($messageError) : $messageError) ?></div>
                                <?php endif; ?>
                            </div>

                            <!-- Google reCAPTCHA v2 -->
                            <div class="field">
                                <!-- if CAPTCHA is not filled, throw error -->
                                <div class="field <?= $this->Form->isFieldError('g-recaptcha-response') ? 'has-error' : '' ?>">
                                    <div class="g-recaptcha" data-sitekey="<?= h(\Cake\Core\Configure::read('Recaptcha.site')) ?>"></div>
                                </div>

                                <!-- Let Cake render the validator message -->
                                <?= $this->Form->error('g-recaptcha-response', null, ['class' => 'error']) ?>

                                <?= $this->Form->end() ?>

                                <!-- Google reCAPTCHA script -->
                                <script src="https://www.google.com/recaptcha/api.js" async defer></script>

                            </div>

                            <div class="col-12">
                                <button type="submit" id="submitBtn" class="contact-submit-btn" <?= $submittedSuccessfully ? 'disabled' : '' ?>>
                                    <?php if ($submittedSuccessfully): ?>
                                        Sent
                                    <?php else: ?>
                                        Send Message <span>➜</span>
                                    <?php endif; ?>
                                </button>

                                <?php if (!empty($successMessage)) : ?>
                                    <div class="contact-success-message">
                                        <?= h($successMessage) ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>

                        <?= $this->Form->end() ?>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="contact-side-cards">
                        <div class="contact-side-card">
                            <div class="contact-side-icon">
                                <i class="bi bi-geo-alt"></i>
                            </div>
                            <div class="contact-side-text">
                                <h4>Contact Us</h4>
                                <p>1011 Sydney road, Coburg North, Melbourne, Victoria 3047</p>
                            </div>
                        </div>

                        <div class="contact-side-card">
                            <div class="contact-side-icon">
                                <i class="bi bi-telephone"></i>
                            </div>
                            <div class="contact-side-text">
                                <h4>Call or Text</h4>
                                <p>+61 450 401 691</p>
                            </div>
                        </div>

                        <div class="contact-side-card">
                            <div class="contact-side-icon">
                                <i class="bi bi-envelope"></i>
                            </div>
                            <div class="contact-side-text">
                                <h4>Send Email</h4>
                                <p>info@impeccablecourier.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="contact-map-wrap">
                <iframe
                    src="https://maps.google.com/maps?q=1011%20Sydney%20Road%20Coburg%20North%20Melbourne%20Victoria%203047&t=&z=15&ie=UTF8&iwloc=&output=embed"
                    allowfullscreen=""
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    </section>

    <footer style="
        background:#ffffff;
        border-top:1px solid #ffffff;
        padding:70px 40px 50px 40px;
    ">
        <div style="
            max-width:1480px;
            margin:0 auto;
        ">
            <div style="
                display:flex;
                justify-content:flex-start;
                align-items:flex-start;
                gap:150px;
                flex-wrap:wrap;
                padding-bottom:26px;
                border-bottom:1px solid #d9dde5;
            ">
                <div style="
                    flex:1 1 420px;
                    min-width:300px;
                ">
                    <div style="margin-bottom:16px;">
                        <?= $this->Html->image('footer-logo.png', [
                            'alt' => 'Impeccable Courier',
                            'style' => 'max-width:640px; width:100%; height:auto; display:block;'
                        ]) ?>
                    </div>

                    <p style="
                        margin:0 0 0 27px;
                        color:#475467;
                        font-size:18px;
                        line-height:1.8;
                        font-weight:400;
                        font-family:var(--font-main);
                        max-width:560px;
                    ">
                        Trusted international courier services with affordable rates, secure delivery, and reliable support across Australia, Pakistan, the UK, USA and Canada.
                    </p>
                </div>

                <div style="
                    flex:1 1 760px;
                    min-width:320px;
                    display:flex;
                    justify-content:space-between;
                    gap:70px;
                    flex-wrap:wrap;
                    align-items:flex-start;
                ">
                    <div style="
                        min-width:260px;
                        display:flex;
                        flex-direction:column;
                        gap:34px;
                    ">
                        <div>
                            <h4 style="
                                margin:0 0 16px 0;
                                color:#c91c1c;
                                font-size:20px;
                                font-weight:700;
                                font-family:var(--font-main);
                                text-transform:uppercase;
                                letter-spacing:0.6px;
                            ">
                                Contact
                            </h4>

                            <p style="
                                margin:0 0 12px 0;
                                color:#101828;
                                font-size:18px;
                                line-height:1.8;
                                font-family:var(--font-main);
                            ">
                                <?php 
                            $phone = $this->ContentBlock->text('contact-phone');
                            $phoneClean = preg_replace('/\s+/', '', $phone); // removes spaces
                            ?>
                            <strong>Phone:</strong>
                            <a href="tel:<?= h($phoneClean) ?>">
                                <?= h($phone) ?>
                            </a>
                            </p>

                            <p style="
                                margin:0;
                                color:#101828;
                                font-size:18px;
                                line-height:1.8;
                                font-family:var(--font-main);
                            ">
                                <?php $email = $this->ContentBlock->text('contact-email'); ?>
                                <strong>Email:</strong>
                                <a href="mailto:<?= h($email) ?>">
                                    <?= h($email) ?>
                                </a>
                            </p>
                        </div>

                        <div>
                            <h4 style="
                                margin:0 0 16px 0;
                                color:#c91c1c;
                                font-size:20px;
                                font-weight:700;
                                font-family:var(--font-main);
                                text-transform:uppercase;
                                letter-spacing:0.6px;
                            ">
                                Quick Links
                            </h4>

                            <div style="
                                display:flex;
                                gap:50px;
                                flex-wrap:wrap;
                            ">
                                <div style="
                                    display:flex;
                                    flex-direction:column;
                                    gap:12px;
                                    min-width:140px;
                                ">
                                    <a href="<?= $this->Url->build('/') ?>"
                                       style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                       onmouseover="this.style.color='#c91c1c'"
                                       onmouseout="this.style.color='#101828'">
                                       Home
                                    </a>

                                    <a href="#"
                                       style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                       onmouseover="this.style.color='#c91c1c'"
                                       onmouseout="this.style.color='#101828'">
                                       Booking
                                    </a>

                                    <a href="#"
                                       style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                       onmouseover="this.style.color='#c91c1c'"
                                       onmouseout="this.style.color='#101828'">
                                       About Us
                                    </a>
                                </div>

                                <div style="
                                    display:flex;
                                    flex-direction:column;
                                    gap:12px;
                                    min-width:180px;
                                ">
                                    <a href="<?= $this->Url->build('/contact') ?>"
                                       style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                       onmouseover="this.style.color='#c91c1c'"
                                       onmouseout="this.style.color='#101828'">
                                       Contact Us
                                    </a>

                                    <a href="#"
                                       style="color:#101828; text-decoration:none; font-size:18px; font-family:var(--font-main); transition:color 0.25s ease;"
                                       onmouseover="this.style.color='#c91c1c'"
                                       onmouseout="this.style.color='#101828'">
                                       Terms &amp; Condition
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="min-width:260px; margin-left:10px;">
                        <h4 style="
                            margin:0 0 16px 0;
                            color:#c91c1c;
                            font-size:20px;
                            font-weight:700;
                            font-family:var(--font-main);
                            text-transform:uppercase;
                            letter-spacing:0.6px;
                        ">
                            Warehouse
                        </h4>

                        <p style="
                            margin:0;
                            color:#101828;
                            font-size:18px;
                            line-height:1.8;
                            font-family:var(--font-main);
                            max-width:340px;
                        ">
                            <a href="https://www.google.com/maps?q=1011+Sydney+Road,+Coburg+North,+Victoria+3047" target="_blank">
                            1011 Sydney Road, Coburg North,<br>
                            Victoria 3047
                        </a>
                        </p>
                    </div>
                </div>
            </div>

            <div style="
                padding-top:18px;
                text-align:center;
            ">
                <p style="
                    margin:0;
                    color:#c91c1c;
                    font-size:18px;
                    line-height:1.7;
                    font-weight:500;
                    font-family:var(--font-main);
                ">
                    © All Rights Reserved by Webspire 2026
                </p>
            </div>
        </div>
    </footer>
</div>

<?php $this->start('css'); ?>
<style>
    :root {
        --font-main: 'Inter', Arial, sans-serif;
        --white: #ffffff;
        --black: #161616;
        --soft-black: #2c2c2c;
        --text-gray: #5d5d5d;
        --accent: #173d70;
    }

    * {
        box-sizing: border-box;
    }

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
        font-family: var(--font-main);
        background: #ffffff;
        color: var(--black);
        scroll-behavior: smooth;
    }

    body {
        min-width: 320px;
        font-weight: 300;
    }

    .landing-page {
        width: 100%;
        background: #ffffff;
    }

    .hero-navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        padding: 10px 50px;
        background: rgba(8, 8, 8, 0.15);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    }

    .hero-nav-container {
        align-items: center;
    }

    .brand-link {
        margin: 0;
        padding: 0;
    }

    .brand-logo {
        width: 280px;
        max-width: 100%;
        height: auto;
        display: block;
    }

    .hero-menu {
        gap: 10px;
    }

    .hero-menu .nav-link {
        color: var(--white);
        font-size: 18px;
        font-weight: 400;
        padding: 10px 12px !important;
        letter-spacing: 0.2px;
    }

    .hero-menu .nav-link:hover,
    .hero-menu .nav-link:focus {
        color: var(--white);
        opacity: 0.82;
    }

    .hero-menu .nav-link:hover {
        color: #c62828 !important;
    }

    .custom-dropdown {
        border: none;
        border-radius: 12px;
        padding: 10px 0;
        box-shadow: 0 12px 28px rgba(0,0,0,0.18);
        min-width: 270px;
    }

    .custom-dropdown .dropdown-item {
        font-size: 15px;
        padding: 12px 18px;
        font-weight: 400;
        font-family: var(--font-main);
    }

    .custom-dropdown .dropdown-item:hover {
        background: #bbbec4ff;
    }

    .nav-login-item {
        margin-left: 10px;
    }

    .login-btn {
        background: var(--white);
        color: var(--black);
        border-radius: 999px;
        padding: 12px 28px;
        font-size: 17px;
        font-weight: 400;
        min-width: 118px;
        border: none;
    }

    .login-btn:hover {
        background: #c62828;
        color: var(--white);
    }

    .custom-toggler {
        border-color: rgba(255,255,255,0.45);
        background: rgba(255,255,255,0.08);
    }

    .custom-toggler .navbar-toggler-icon {
        filter: invert(1);
    }

    .contact-hero-section {
        position: relative;
        min-height: 420px;
        background-image: url('/img/contact-hero.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .contact-hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(61, 55, 55, 0.55);
        z-index: 1;
    }

    .contact-hero-center {
        position: relative;
        z-index: 2;
        min-height: 420px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 120px 20px 60px;
        text-align: center;
    }

    .contact-hero-center h1 {
        margin: 0 0 12px 0;
        color: #ffffff;
        font-size: 64px;
        line-height: 1.08;
        font-weight: 500;
        letter-spacing: -1px;
        font-family: var(--font-main);
    }

    .contact-hero-center p,
    .contact-hero-center a {
        margin: 0;
        color: #ffffff;
        font-size: 18px;
        line-height: 1.6;
        font-weight: 400;
        font-family: var(--font-main);
        text-decoration: none;
    }

    .contact-main-section {
        background: #f7f8fa;
        padding: 70px 36px 100px 36px;
    }

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

    .contact-heading-wrap {
        text-align: center;
        margin-bottom: 48px;
    }

    .contact-heading-wrap h2 {
        margin: 0 0 18px 0;
        color: #101828;
        font-size: 55px;
        line-height: 1.1;
        font-weight: 500;
        letter-spacing: -1px;
        font-family: var(--font-main);
    }

    .contact-heading-wrap p {
        max-width: 760px;
        margin: 0 auto;
        color: #667085;
        font-size: 18px;
        line-height: 1.75;
        font-weight: 400;
        font-family: var(--font-main);
    }

    .contact-form-card {
        background: #ffffff;
        border-radius: 10px;
        padding: 38px 34px 34px 34px;
        box-shadow: 0 14px 30px rgba(16,24,40,0.05);
    }

    .contact-form-card h3 {
        margin: 0 0 16px 0;
        color: #101828;
        font-size: 30px;
        line-height: 1.2;
        font-weight: 600;
        font-family: var(--font-main);
    }

    .contact-form-intro {
        margin: 0 0 26px 0;
        color: #475467;
        font-size: 16px;
        line-height: 1.8;
        font-weight: 400;
        font-family: var(--font-main);
        max-width: 660px;
    }

    .contact-form-card .form-label {
        display: block;
        margin-bottom: 10px;
        color: #101828;
        font-size: 15px;
        font-weight: 500;
        font-family: var(--font-main);
    }

    .required-star {
        color: #c91c1c;
    }

    .contact-form-card .form-control {
        width: 100%;
        height: 58px;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        padding: 0 18px;
        font-size: 16px;
        color: #101828;
        background: #fff;
        font-family: var(--font-main);
        outline: none;
        box-shadow: none;
        font-weight: 400;
    }

    .contact-form-card textarea.form-control {
        min-height: 170px;
        padding: 16px 18px;
        resize: vertical;
    }

    .contact-form-card .form-control::placeholder {
        color: #a3a3a3;
        font-weight: 400;
    }

    .contact-form-card .form-control:hover,
    .contact-form-card .form-control:focus {
        border-color: #c91c1c;
        box-shadow: 0 0 0 0.12rem rgba(201, 28, 28, 0.08);
    }

    .field-error {
        margin-top: 8px;
        color: #c91c1c;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 400;
        font-family: var(--font-main);
    }

    .contact-submit-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-width: 210px;
        height: 58px;
        border: none;
        border-radius: 999px;
        background: #c91c1c;
        color: #fff;
        font-size: 19px;
        font-weight: 500;
        font-family: var(--font-main);
        cursor: pointer;
        box-shadow: 0 14px 26px rgba(201,28,28,0.18);
        transition: all 0.25s ease;
    }

    .contact-submit-btn:hover {
        background: #b51616;
        transform: translateY(-2px);
    }

    .contact-submit-btn:disabled {
        opacity: 1;
        cursor: not-allowed;
    }

    .contact-success-message {
        margin-top: 22px;
        padding: 30px 34px;
        border: 2px solid #93c23d;
        background: #eef3e8;
        color: #8db92d;
        font-size: 20px;
        line-height: 1.65;
        font-weight: 400;
        font-family: var(--font-main);
    }

    .contact-side-cards {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        height: 100%;
    }

    .contact-side-card {
        background: #ffffff;
        border-radius: 10px;
        padding: 28px 26px;
        box-shadow: 0 14px 30px rgba(16,24,40,0.05);
        transition: all 0.35s ease;
        cursor: pointer;
        display: flex;
        align-items: flex-start;
        gap: 18px;
    }

    .contact-side-card:hover {
        background: #c62828;
        transform: translateY(-4px);
    }

    .contact-side-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #fff1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 64px;
        transition: all 0.35s ease;
    }

    .contact-side-icon i {
        font-size: 28px;
        color: #c62828;
        transition: all 0.35s ease;
    }

    .contact-side-text h4 {
        margin: 0 0 10px 0;
        color: #101828;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 600;
        font-family: var(--font-main);
        transition: all 0.35s ease;
    }

    .contact-side-text p {
        margin: 0;
        color: #475467;
        font-size: 16px;
        line-height: 1.8;
        font-weight: 400;
        font-family: var(--font-main);
        transition: all 0.35s ease;
    }

    .contact-side-card:hover .contact-side-icon {
        background: rgba(255,255,255,0.14);
    }

    .contact-side-card:hover .contact-side-icon i,
    .contact-side-card:hover .contact-side-text h4,
    .contact-side-card:hover .contact-side-text p {
        color: #ffffff;
    }

    .contact-map-wrap {
        margin-top: 28px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 14px 30px rgba(16,24,40,0.05);
        background: #ffffff;
    }

    .contact-map-wrap iframe {
        display: block;
        width: 100%;
        height: 500px;
        border: 0;
    }

    @media (max-width: 1100px) {
        .hero-navbar {
            padding: 22px 22px 0 22px;
        }

        .contact-hero-center h1 {
            font-size: 48px;
        }

        .contact-heading-wrap h2 {
            font-size: 40px;
        }

        .contact-main-section {
            padding: 60px 24px 80px 24px;
        }
    }

    @media (max-width: 991px) {
        .hero-menu {
            gap: 0;
            margin-top: 16px;
            padding: 18px;
            border-radius: 16px;
            background: rgba(8, 10, 18, 0.82);
            backdrop-filter: blur(8px);
        }

        .nav-login-item {
            margin-left: 0;
            margin-top: 10px;
        }

        .contact-hero-center {
            padding-top: 120px;
        }
    }

    @media (max-width: 767px) {
        .brand-logo {
            width: 220px;
        }

        .contact-hero-section {
            min-height: 340px;
        }

        .contact-hero-center {
            min-height: 340px;
            padding: 120px 20px 50px;
        }

        .contact-hero-center h1 {
            font-size: 38px;
        }

        .contact-heading-wrap h2 {
            font-size: 32px;
        }

        .contact-heading-wrap p,
        .contact-form-intro,
        .contact-side-text p {
            font-size: 16px;
        }

        .contact-submit-btn {
            width: 100%;
        }

        .contact-map-wrap iframe {
            height: 340px;
        }
    }
</style>
<?php $this->end(); ?>

<?php $this->start('script'); ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const heroNavbar = document.querySelector('.hero-navbar');
    if (heroNavbar) {
        window.addEventListener('scroll', function () {
            if (window.scrollY > 50) {
                heroNavbar.classList.add('scrolled');
            } else {
                heroNavbar.classList.remove('scrolled');
            }
        });
    }

    const form = document.getElementById('contactForm');
    const submitBtn = document.getElementById('submitBtn');
    const phone = document.getElementById('phone-field');
    const email = document.getElementById('email-field');
    const firstName = document.getElementById('first-name-field');
    const lastName = document.getElementById('last-name-field');
    const message = document.getElementById('message-field');

    if (phone) {
        phone.addEventListener('input', function () {
            this.value = this.value.replace(/\D/g, '').slice(0, 11);
            this.setCustomValidity('');
        });

        phone.addEventListener('invalid', function () {
            if (!this.value.trim()) {
                this.setCustomValidity('Fill out this field');
            } else {
                this.value = '';
                this.setCustomValidity('Phone number must contain digits only and be at most 11 digits.');
            }
        });

        phone.addEventListener('input', function () {
            this.setCustomValidity('');
        });
    }

    if (email) {
        email.addEventListener('blur', function () {
            if (this.value.trim() !== '' && !this.checkValidity()) {
                this.value = '';
            }
            this.setCustomValidity('');
        });

        email.addEventListener('invalid', function () {
            this.value = '';
            this.setCustomValidity('Please enter an email address in the correct format.');
        });

        email.addEventListener('input', function () {
            this.setCustomValidity('');
        });
    }

    [firstName, lastName].forEach(function (field) {
        if (!field) return;
        field.addEventListener('input', function () {
            this.value = this.value.slice(0, 30);
            this.setCustomValidity('');
        });
    });

    if (firstName) {
        firstName.addEventListener('invalid', function () {
            if (!this.value.trim()) {
                this.setCustomValidity('Fill out this field');
            } else {
                this.setCustomValidity('');
            }
        });

        firstName.addEventListener('input', function () {
            this.setCustomValidity('');
        });
    }

    if (message) {
        message.addEventListener('invalid', function () {
            if (!this.value.trim()) {
                this.setCustomValidity('Fill out this field');
            } else {
                this.setCustomValidity('');
            }
        });

        message.addEventListener('input', function () {
            this.setCustomValidity('');
        });
    }

    if (form && submitBtn) {
        form.addEventListener('submit', function () {
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Sending...';
        });
    }
});
</script>
<?php $this->end(); ?>
