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

<div class="landing-page">
    <section class="hero-section">
        <div class="hero-video-wrap">
            <video class="hero-video" autoplay muted loop playsinline>
                <?php
                $videoBlock = \Cake\ORM\TableRegistry::getTableLocator()->get('ContentBlocks.ContentBlocks')
                    ->find()
                    ->where(['slug' => 'hero-video'])
                    ->first();
                $videoUrl = $videoBlock ? $videoBlock->value : '/videos/file.mp4';
                ?>
                <source src="<?= $this->Url->build($videoUrl) ?>" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="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->ContentBlock->image('logo', [
                        '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="<?= $this->Url->build('/tracking') ?>">Track a Shipment</a></li>
                                <li><a class="dropdown-item" href="#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()) {
                                $role = $this->Identity->get('role');
                                if (in_array($role, ['admin', 'staff'], true)) {
                                    echo $this->Html->link(
                                        'Dashboard',
                                        ['prefix' => 'Admin', 'controller' => 'Dashboard', 'action' => 'index'],
                                        ['class' => 'btn login-btn']
                                    );
                                }
                            }
                            ?>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container-fluid hero-content-wrap">
            <div class="row">
                <div class="col-xl-7 col-lg-8 col-md-10">
                    <div class="hero-content hero-pop hero-pop-text">
    <h1><?= $this->ContentBlock->text('hero-heading'); ?></h1>

    <p>
        <?= $this->ContentBlock->text('hero-subheading'); ?>
    </p>

    <a href="<?= $this->Url->build('/booking') ?>" class="quote-btn">Get a Quote</a>
</div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-center align-items-center w-100" style="margin-top: 100px; margin-bottom: 0; z-index: 10; position: relative;">
            <i class="bi bi-chevron-down indicator-bounce" style="font-size: 2rem; color: #a3acbc; cursor: pointer;"></i>
        </div>
        <div class="quick-panel-wrap">
    <div class="quick-panel hero-pop hero-pop-panel">
        <div class="quick-tabs quick-tabs-two">
            <button class="quick-tab" type="button" data-tab="tracking">
                <i class="bi bi-geo-alt"></i>
                <span>Tracking</span>
            </button>


            <button class="quick-tab active" type="button" data-tab="booking">
                <i class="bi bi-box-seam"></i>
                <span>Booking</span>
            </button>
        </div>

        <div class="quick-body">
            <!-- TRACKING -->
            <div class="quick-pane" data-pane="tracking" style="display:none;">
                <label for="trackInput">Tracking number or parcel reference</label>

                <div class="quick-form quick-form-single">
                    <div class="input-icon-wrap">
                        <i class="bi bi-geo-alt input-icon"></i>
                        <input
                            id="trackInput"
                            type="text"
                            placeholder="Enter tracking number or parcel reference"
                        >
                    </div>

                    <button type="button" class="track-submit-btn">
                        <span>Track</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </div>
            </div>

            <!-- BOOKING -->
            <div class="quick-pane" data-pane="booking" style="display:block;">
                <div class="quick-form quick-booking-form">
                    <div class="quick-address-field quick-address-autocomplete">
    <label for="quickFrom">From</label>
    <div class="input-icon-wrap">
        <i class="bi bi-geo-alt input-icon"></i>
        <input
            id="quickFrom"
            type="text"
            placeholder="Origin"
            autocomplete="off"
        >
        <div class="address-suggestions" id="quickFromSuggestions"></div>
    </div>
</div>

<div class="quick-address-field quick-address-autocomplete">
    <label for="quickTo">To</label>
    <div class="input-icon-wrap">
        <i class="bi bi-geo-alt input-icon"></i>
        <input
            id="quickTo"
            type="text"
            placeholder="Destination"
            autocomplete="off"
        >
        <div class="address-suggestions" id="quickToSuggestions"></div>
    </div>
</div>

                    <button type="button" class="track-submit-btn quick-next-btn" id="quickBookingNextBtn">
                        <span>Next</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
    </section>

    <section class="about-section">
        <div class="container-fluid about-container">
            <div class="row align-items-start gx-5">
                <div class="col-lg-4">
                    <div class="about-left-label section-pop section-pop-delay-1">
                        <?= $this->ContentBlock->text('value-proposition'); ?>
                    </div>
                </div>

                <div class="col-lg-8">
                    <div class="about-right-content section-pop section-pop-delay-2">
                        <h2><?= $this->ContentBlock->text('intro-title'); ?></h2>

                        <p>
                            <?= $this->ContentBlock->text('introduction'); ?>
                        </p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="about-truck-stage">
                        <?= $this->Html->image('about-truck.png', [
                            'alt' => 'White truck',
                            'class' => 'about-truck-img',
                            'id' => 'scrollTruck'
                        ]) ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section style="background:#eef1f4; padding:40px clamp(15px, 5vw, 50px) 60px;">
        <div style="max-width:1500px; margin:0 auto;">
            <div class="row align-items-center" style="column-gap:0;">

                <div class="col-lg-6" style="padding-right:clamp(0px, 4vw, 40px);">
                    <div class="section-pop section-pop-delay-1" style="color:#c62828; font-size:16px; font-weight:600; letter-spacing:2px; text-transform:uppercase; margin-bottom:22px;">
                        About Us
                    </div>

                    <h2 class="section-pop section-pop-delay-2" style="margin:0 0 24px 0; color:#111; font-family:var(--font-main); font-size:clamp(32px, 6vw, 56px); line-height:1.08; font-weight:500;">
                        <?= $this->ContentBlock->text('about-us-title'); ?>
                    </h2>

                    <p class="section-pop section-pop-delay-3" style="margin:0; color:#666; font-size:clamp(16px, 4vw, 20px); line-height:1.8; font-weight:300;">
                        <?= $this->ContentBlock->text('about-us'); ?>
                    </p>
                </div>

                <div class="col-lg-6 section-pop section-pop-delay-4" style="position:relative; min-height:clamp(380px, 90vw, 620px); margin-top:30px;">
                    <div style="position:absolute; top:0; right:clamp(10px, 10vw, 70px); width:80%; max-width:460px; aspect-ratio:46/50; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,0.12); background:#ddd;">
                        <?= $this->ContentBlock->image('about-us-image-2', [
                            'alt' => 'Logistics operations',
                            'style' => 'width:100%; height:100%; object-fit:cover; display:block;'
                        ]) ?>
                    </div>

                    <div style="position:absolute; right:0; bottom:0; width:65%; max-width:330px; aspect-ratio:33/29; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,0.18); background:#ddd;">
                        <?= $this->ContentBlock->image('about-us-image-1', [
                            'alt' => 'Container ship',
                            'style' => 'width:100%; height:100%; object-fit:cover; display:block;'
                        ]) ?>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <style>
        @media (max-width: 768px) {
            #services-section {
                padding: 50px 20px !important;
            }
            #services-title {
                font-size: 36px !important;
                margin-bottom: 40px !important;
            }
            #services-grid {
                grid-template-columns: 1fr !important;
                margin: 0 auto !important;
                text-align: center !important;
                gap: 40px !important;
            }
            #services-grid img {
                margin: 0 auto 20px auto !important;
            }
            #services-grid p {
                margin: 0 auto !important;
                max-width: 100% !important;
            }
        }
    </style>

    <section id="services-section" style="background:#ffffff; padding:70px 50px 90px 50px;">
        <div style="max-width:1600px; margin:0 auto; text-align:center;">

            <div class="section-pop section-pop-delay-1" style="color:#c62828; font-family:var(--font-main); font-size:22px; font-weight:600; margin-bottom:18px;">
                Our Services
            </div>

            <h2 id="services-title" class="section-pop section-pop-delay-2" style="margin:0 auto 70px auto; max-width:980px; color:#121826; font-family:var(--font-main); font-size:60px; line-height:1.15; font-weight:400;">
                <?= $this->ContentBlock->text('our-service-title'); ?>
            </h2>

            <div id="services-grid" style="display:grid; grid-template-columns:repeat(4, 280px); justify-content:center; gap:44px; text-align:left; margin:0 auto 0 40px;">

                <div class="card-pop section-pop-delay-1" style="transition:transform 0.3s ease;">
                    <?= $this->Html->image('service-trucking.png', [
                        'alt' => 'Trucking',
                        'style' => 'width:86px; height:86px; object-fit:contain; display:block; margin-bottom:26px;'
                    ]) ?>

                    <h3 style="margin:0 0 18px 0; color:#121826; font-family:var(--font-main); font-size:28px; line-height:1.2; font-weight:600;">
                        Trucking
                    </h3>

                    <p style="margin:0; color:#8a8f98; font-family:var(--font-main); font-size:18px; line-height:1.8; font-weight:400; max-width:320px;">
                        Reliable ground transportation for shipments across cities and regions with flexible fleet options.
                    </p>
                </div>

                <div class="card-pop section-pop-delay-1" style="transition:transform 0.3s ease;">
                    <?= $this->Html->image('service-airfreight.png', [
                        'alt' => 'Air Freight',
                        'style' => 'width:86px; height:86px; object-fit:contain; display:block; margin-bottom:26px;'
                    ]) ?>

                    <h3 style="margin:0 0 18px 0; color:#121826; font-family:var(--font-main); font-size:28px; line-height:1.2; font-weight:600;">
                        Air Freight
                    </h3>

                    <p style="margin:0; color:#8a8f98; font-family:var(--font-main); font-size:18px; line-height:1.8; font-weight:400; max-width:320px;">
                        Fast delivery of time-sensitive cargo using global air routes with real-time tracking.
                    </p>
                </div>

                <div class="card-pop section-pop-delay-1" style="transition:transform 0.3s ease;">
                    <?= $this->Html->image('service-shipfreight.png', [
                        'alt' => 'Ship Freight',
                        'style' => 'width:86px; height:86px; object-fit:contain; display:block; margin-bottom:26px;'
                    ]) ?>

                    <h3 style="margin:0 0 18px 0; color:#121826; font-family:var(--font-main); font-size:28px; line-height:1.2; font-weight:600;">
                        Ship Freight
                    </h3>

                    <p style="margin:0; color:#8a8f98; font-family:var(--font-main); font-size:18px; line-height:1.8; font-weight:400; max-width:320px;">
                        Cost-effective shipping solution for bulk cargo with dependable international sea freight services.
                    </p>
                </div>

                <div class="card-pop section-pop-delay-1" style="transition:transform 0.3s ease;">
                    <?= $this->Html->image('service-railfreight.png', [
                        'alt' => 'Rail Freight',
                        'style' => 'width:86px; height:86px; object-fit:contain; display:block; margin-bottom:26px;'
                    ]) ?>

                    <h3 style="margin:0 0 18px 0; color:#121826; font-family:var(--font-main); font-size:28px; line-height:1.2; font-weight:600;">
                        Rail Freight
                    </h3>

                    <p style="margin:0; color:#8a8f98; font-family:var(--font-main); font-size:18px; line-height:1.8; font-weight:400; max-width:320px;">
                        Efficient and eco-friendly rail transport option ideal for long-distance heavy shipments.
                    </p>
                </div>

            </div>
        </div>
    </section>

    <style>
        @media (max-width: 768px) {
            #whyChooseContainer {
                flex-direction: column !important;
                padding: 0 20px !important;
            }
            #whyLeftBox, #whyRightStats {
                width: 100% !important;
                margin-top: 40px !important;
                padding-top: 0 !important;
                padding-left: 30px !important;
                padding-right: 30px !important;
            }
            #whyRightStats {
                margin-top: 0 !important;
            }
        }
    </style>

    <section id="whyChooseSection" style="
    position: relative;
    overflow: hidden;
    background: #eef1f4;
    padding: 90px 0 90px 0;
">
        <style>
            @media (max-width: 991px) {
                #whyChooseSection { padding: 50px 0 !important; }
                #whyChooseContainer { flex-direction: column !important; padding: 0 20px !important; gap: 40px !important; }
                #whyLeftBox { width: 100% !important; margin-top: 30px !important; padding: 40px 25px !important; box-sizing: border-box; }
                #whyRightStats { width: 100% !important; padding-top: 10px !important; box-sizing: border-box; }
                #whyRightStats > div { gap: 40px 20px !important; }
                #whyLeftBox > div:first-child { font-size: 26px !important; margin-bottom: 15px !important; }
                #whyLeftBox > p { font-size: 16px !important; line-height: 1.6 !important; }
                .count-up { font-size: 42px !important; margin-bottom: 5px !important; }
                .count-up + div + div { font-size: 16px !important; }
            }
            @media (max-width: 575px) {
                #whyRightStats > div { grid-template-columns: repeat(2, 1fr) !important; gap: 30px 15px !important; }
                .count-up { font-size: 32px !important; }
                .count-up + div + div { font-size: 14px !important; line-height: 1.4 !important; }
            }
        </style>

        <div id="whyChooseBg" style="
            position: absolute;
            inset: 0;
        <?php
        $bgBlock = \Cake\ORM\TableRegistry::getTableLocator()->get('ContentBlocks.ContentBlocks')
            ->find()
            ->where(['slug' => 'why-choose-us-background'])
            ->first();
        $bgUrl = $bgBlock ? $bgBlock->value : '/img/why-choose-bg.jpg';
        ?>
            background: url('<?= $this->Url->build($bgUrl) ?>') center center / cover no-repeat;
            opacity: 0.28;
            transform: scale(1.08);
            transition: opacity 1.2s ease, transform 1.2s ease;
            z-index: 1;
            "></div>

        <div style="
        position: absolute;
        inset: 0;
        background: rgba(15, 25, 45, 0.38);
        z-index: 2;
    "></div>

        <div id="whyChooseContainer" style="
        position: relative;
        z-index: 3;
        max-width: 1600px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 60px;
        padding: 0 50px;
    ">

            <div id="whyLeftBox" style="
            width: 54%;
            background: #b71c1c;
            color: #ffffff;
            padding: 70px 60px;
            margin-top: 110px;
            box-shadow: 0 18px 40px rgba(0,0,0,0.24);
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 1s ease, transform 1s ease;
        ">
                <div style="
                font-family: var(--font-main);
                font-size: 35px;
                font-weight: 700;
                line-height: 1.2;
                letter-spacing: 1px;
                margin-bottom: 28px;
                text-transform: uppercase;
                color: #ffffff;
            ">
                    Why Choose Us
                </div>

                <p style="
                margin: 0;
                color: #ffffff;
                font-family: var(--font-main);
                font-size: 24px;
                line-height: 1.95;
                font-weight: 400;
                max-width: 760px;
            ">
                    <?= $this->ContentBlock->text('why-choose-us'); ?>
                </p>
            </div>

            <div id="whyRightStats" style="
            width: 34%;
            padding-top: 110px;
            color: #ffffff;
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 1s ease, transform 1s ease;
        ">
                <div style="
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 70px 70px;
            ">

                    <div>
                        <div class="count-up"
                             data-target="<?= $this->ContentBlock->text('packages-statistic'); ?>"
                             style="
        font-family: var(--font-main);
        font-size: 64px;
        line-height: 1;
        font-weight: 600;
        margin-bottom: 10px;
">0</div>

                        <div style="
                        width: 82px;
                        height: 4px;
                        background: #ffffff;
                        margin-bottom: 20px;
                    "></div>

                        <div style="
                        font-family: var(--font-main);
                        font-size: 22px;
                        line-height: 1.5;
                        font-weight: 400;
                    ">Delivered Packages</div>
                    </div>

                    <div>
                        <div class="count-up"
                             data-target="<?= $this->ContentBlock->text('countries-statistic'); ?>"
                             style="
        font-family: var(--font-main);
        font-size: 64px;
        line-height: 1;
        font-weight: 600;
        margin-bottom: 10px;
">0</div>

                        <div style="
                        width: 82px;
                        height: 4px;
                        background: #ffffff;
                        margin-bottom: 20px;
                    "></div>

                        <div style="
                        font-family: var(--font-main);
                        font-size: 22px;
                        line-height: 1.5;
                        font-weight: 400;
                    ">Countries Covered</div>
                    </div>

                    <div>
                        <div class="count-up"
                             data-target="<?= $this->ContentBlock->text('clients-statistic'); ?>"
                             style="
        font-family: var(--font-main);
        font-size: 64px;
        line-height: 1;
        font-weight: 600;
        margin-bottom: 10px;
">0</div>
                        <div style="
                        width: 82px;
                        height: 4px;
                        background: #ffffff;
                        margin-bottom: 20px;
                    "></div>
                        <div style="
                        font-family: var(--font-main);
                        font-size: 22px;
                        line-height: 1.5;
                        font-weight: 400;
                    ">Satisfied Clients</div>
                    </div>
                    <div>
                        <div class="count-up"
                             data-target="<?= $this->ContentBlock->text('goods-statistic'); ?>"
                             style="
        font-family: var(--font-main);
        font-size: 64px;
        line-height: 1;
        font-weight: 600;
        margin-bottom: 10px;
">0</div>
                        <div style="
                        width: 82px;
                        height: 4px;
                        background: #ffffff;
                        margin-bottom: 20px;
                    "></div>
                        <div style="
                        font-family: var(--font-main);
                        font-size: 22px;
                        line-height: 1.5;
                        font-weight: 400;
                    ">Tons of Goods</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="feedbackSection" style="background:#ffffff; padding:100px 50px 110px 50px; overflow:hidden; position:relative;">
        <style>
            @media (max-width: 768px) {
                #feedbackSection { padding: 40px 10px !important; }
                #feedbackSection h2 { font-size: 26px !important; margin-bottom: 25px !important; }
                .feedback-pop-delay-1 {
                    overflow-x: auto !important;
                    scroll-snap-type: x mandatory !important;
                    scrollbar-width: none;
                    -webkit-overflow-scrolling: touch;
                    padding: 0 5px !important;
                }
                .feedback-pop-delay-1::-webkit-scrollbar { display: none; }
                #feedbackTrack {
                    width: 100% !important;
                    display: block !important;
                    transform: none !important;
                    transition: none !important;
                }
                #feedbackTrack > div {
                    display: flex !important;
                    grid-template-columns: none !important;
                    gap: 0 !important;
                    width: auto !important;
                }
                .card-item {
                    flex: 0 0 100% !important;
                    scroll-snap-align: center;
                    min-height: auto !important;
                    padding: 20px !important;
                    box-sizing: border-box !important;
                    background: #f8fafc !important;
                    border: 1px solid #eee;
                }
                .card-item h3 { font-size: 18px !important; margin-bottom: 10px !important; }
                .card-item p { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 15px !important; }
                .card-item img { width: 50px !important; height: 50px !important; }
                .rating-box { margin-bottom: 12px !important; padding: 4px 10px !important; }
                .feedback-pop-delay-2 { display: none !important; }
                .mobile-nav-arrow {
                    display: flex !important;
                    position: absolute;
                    top: 60%;
                    width: 100%;
                    left: 0;
                    justify-content: space-between;
                    padding: 0 5px;
                    pointer-events: none;
                    z-index: 10;
                }
                .mobile-nav-arrow button {
                    pointer-events: auto;
                    background: rgba(255,255,255,0.9);
                    border: 1px solid #ddd;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    transition: opacity 0.3s ease;
                }
                .btn-hidden { opacity: 0 !important; pointer-events: none !important; }
            }
            .mobile-nav-arrow { display: none; }
        </style>

        <div class="mobile-nav-arrow">
            <button id="prevBtn" class="btn-hidden" onclick="document.querySelector('.feedback-pop-delay-1').scrollBy({left: -window.innerWidth, behavior: 'smooth'})">
                <i class="bi bi-chevron-left" style="color:#101828;"></i>
            </button>
            <button id="nextBtn" onclick="document.querySelector('.feedback-pop-delay-1').scrollBy({left: window.innerWidth, behavior: 'smooth'})">
                <i class="bi bi-chevron-right" style="color:#101828;"></i>
            </button>
        </div>

        <div style="max-width:1500px; margin:0 auto;">
            <div class="feedback-pop" style="text-align:center; max-width:1100px; margin:0 auto 56px auto;">
                <div style="color:#c62828; font-size:24px; font-weight:600; letter-spacing:0.3px; margin-bottom:18px; font-family:var(--font-main);">
                    Our Feedbacks
                </div>
                <h2 style="margin:0; color:#101828; font-family:var(--font-main); font-size:58px; line-height:1.08; font-weight:500; letter-spacing:-1px;">
                    What people are saying about us
                </h2>
            </div>
            <div class="feedback-pop feedback-pop-delay-1" style="max-width:1420px; margin:0 auto; overflow:hidden;">
                <div id="feedbackTrack" style="display:flex; width:300%; transition:transform 0.9s ease;">
                    <div style="width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; flex-shrink:0;">
                        <div class="card-item" style="background:#eef1f4; padding:28px 24px 30px 24px; border-radius:16px; min-height:400px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 14px 34px rgba(16,24,40,0.06);">
                            <div>
                                <div class="rating-box" style="display:inline-flex; align-items:center; gap:8px; background:#ffffff; border-radius:12px; padding:12px 18px; width:fit-content; margin-bottom:30px;">
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <span style="color:#111827; font-size:18px; font-weight:600; margin-left:6px; font-family:var(--font-main);">(5) Rating</span>
                                </div>
                                <h3 style="color:#0f172a; font-size:30px; line-height:1.35; font-weight:700; margin:0 0 28px 0; font-family:var(--font-main);">
                                    <?= $this->ContentBlock->text('comment-title-1'); ?>
                                </h3>
                                <p style="color:#6b7280; font-size:20px; line-height:1.95; font-weight:400; margin:0 0 42px 0; font-family:var(--font-main);">
                                    <?= $this->ContentBlock->text('comment-1'); ?>
                                </p>
                            </div>
                            <div style="display:flex; align-items:center; gap:18px; margin-top:auto;">
                                <?= $this->Html->image('feedback-avatar-1.png', ['style' => 'width:82px; height:82px; border-radius:50%; object-fit:cover; display:block;']) ?>
                                <div>
                                    <div style="color:#0f172a; font-size:24px; font-weight:700; margin-bottom:8px; font-family:var(--font-main);">Ghulam Abbas</div>
                                    <div style="color:#1f2937; font-size:18px; font-weight:400; font-family:var(--font-main);">Customer</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-item" style="background:#f5f6f8; padding:28px 24px 30px 24px; border-radius:16px; min-height:620px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 14px 34px rgba(16,24,40,0.06);">
                            <div>
                                <div class="rating-box" style="display:inline-flex; align-items:center; gap:8px; background:#ffffff; border-radius:12px; padding:12px 18px; width:fit-content; margin-bottom:30px;">
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <span style="color:#111827; font-size:18px; font-weight:600; margin-left:6px; font-family:var(--font-main);">(5) Rating</span>
                                </div>
                                <h3 style="color:#0f172a; font-size:30px; line-height:1.35; font-weight:700; margin:0 0 28px 0; font-family:var(--font-main);">
                                    <?= $this->ContentBlock->text('comment-title-2'); ?>
                                </h3>
                                <p style="color:#6b7280; font-size:20px; line-height:1.95; font-weight:400; margin:0 0 42px 0; font-family:var(--font-main);">
                                    <?= $this->ContentBlock->text('comment-2'); ?>
                                </p>
                            </div>
                            <div style="display:flex; align-items:center; gap:18px; margin-top:auto;">
                                <?= $this->Html->image('feedback-avatar-2.png', ['style' => 'width:82px; height:82px; border-radius:50%; object-fit:cover; display:block;']) ?>
                                <div>
                                    <div style="color:#0f172a; font-size:24px; font-weight:700; margin-bottom:8px; font-family:var(--font-main);">Maryam Mudassir</div>
                                    <div style="color:#1f2937; font-size:18px; font-weight:400; font-family:var(--font-main);">Customer</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-item" style="background:#f5f6f8; padding:28px 24px 30px 24px; border-radius:16px; min-height:620px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 14px 34px rgba(16,24,40,0.06);">
                            <div>
                                <div class="rating-box" style="display:inline-flex; align-items:center; gap:8px; background:#ffffff; border-radius:12px; padding:12px 18px; width:fit-content; margin-bottom:30px;">
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <i class="bi bi-star-fill" style="color:#c91c1c; font-size:22px;"></i>
                                    <span style="color:#111827; font-size:18px; font-weight:600; margin-left:6px; font-family:var(--font-main);">(5) Rating</span>
                                </div>
                                <h3 style="color:#0f172a; font-size:30px; line-height:1.35; font-weight:700; margin:0 0 28px 0; font-family:var(--font-main);">
                                    <?= $this->ContentBlock->text('comment-title-3'); ?>
                                </h3>
                                <p style="color:#6b7280; font-size:20px; line-height:1.95; font-weight:400; margin:0 0 42px 0; font-family:var(--font-main);">
                                    <?= $this->ContentBlock->text('comment-3'); ?>
                                </p>
                            </div>
                            <div style="display:flex; align-items:center; gap:18px; margin-top:auto;">
                                <?= $this->Html->image('feedback-avatar-3.png', ['style' => 'width:82px; height:82px; border-radius:50%; object-fit:cover; display:block;']) ?>
                                <div>
                                    <div style="color:#0f172a; font-size:24px; font-weight:700; margin-bottom:8px; font-family:var(--font-main);">Komal Heer</div>
                                    <div style="color:#1f2937; font-size:18px; font-weight:400; font-family:var(--font-main);">Customer</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="feedback-pop feedback-pop-delay-2" style="display:flex; justify-content:center; gap:12px; margin-top:34px;">
                <button class="feedback-dot active" data-slide="0" style="width:12px; height:12px; border-radius:50%; border:none; background:#c91c1c; cursor:pointer;"></button>
                <button class="feedback-dot" data-slide="1" style="width:12px; height:12px; border-radius:50%; border:none; background:#d0d5dd; cursor:pointer;"></button>
                <button class="feedback-dot" data-slide="2" style="width:12px; height:12px; border-radius:50%; border:none; background:#d0d5dd; cursor:pointer;"></button>
            </div>
        </div>
        <script>
            (function(){
                const container = document.querySelector('.feedback-pop-delay-1');
                const prev = document.getElementById('prevBtn');
                const next = document.getElementById('nextBtn');
                if(!container || !prev || !next) return;
                container.addEventListener('scroll', () => {
                    const scrollL = container.scrollLeft;
                    const maxScroll = container.scrollWidth - container.clientWidth;
                    scrollL <= 10 ? prev.classList.add('btn-hidden') : prev.classList.remove('btn-hidden');
                    scrollL >= maxScroll - 10 ? next.classList.add('btn-hidden') : next.classList.remove('btn-hidden');
                });
            })();
        </script>
    </section>
<section id="contactSection" style="background:#f7f8fa; padding:60px 36px 100px 36px; overflow:hidden;">
    <style>
        @media (max-width: 768px) {
            #contactSection { padding: 30px 15px !important; }
            #contactSection h2 { font-size: 28px !important; margin-bottom: 12px !important; }
            #contactSection p { font-size: 15px !important; margin-bottom: 25px !important; }
            .contact-pop.contact-delay-1 {
                padding: 20px !important;
                flex: 1 1 100% !important;
                box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
            }
            .contact-pop[onmouseover],
            .contact-pop:hover {
                transform: none !important;
                background: #ffffff !important;
            }
            .contact-pop:hover .contact-title,
            .contact-pop:hover .contact-text { color: inherit !important; }
            .contact-pop:hover .contact-icon-circle { background: #fff1f1 !important; }
            .contact-pop:hover .contact-main-icon { color: #c91c1c !important; }
            .contact-pop.contact-delay-1 h3 { font-size: 20px !important; margin-bottom: 10px !important; }
            .contact-pop.contact-delay-1 p { font-size: 14px !important; margin-bottom: 15px !important; }
            input, textarea {
                height: 48px !important;
                font-size: 15px !important;
                padding: 0 12px !important;
            }
            textarea { min-height: 100px !important; padding-top: 12px !important; }
            label { font-size: 13px !important; margin-bottom: 5px !important; }
            #landingSubmitBtn {
                width: 100% !important;
                height: 50px !important;
                font-size: 17px !important;
                margin-top: 10px;
                transform: none !important;
            }
            div[style*="gap:20px"] { gap: 10px !important; }
            div[style*="margin-bottom:20px"],
            div[style*="margin-bottom:26px"] { margin-bottom: 12px !important; }
            div[style*="flex:1 1 520px"] { gap: 10px !important; margin-top: 20px; }
            div[style*="padding:28px 26px"] { padding: 15px !important; }
            .contact-icon-circle { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
            .contact-main-icon { font-size: 18px !important; }
            .contact-title { font-size: 16px !important; margin-bottom: 2px !important; }
            .contact-text { font-size: 13px !important; line-height: 1.4 !important; }
        }
    </style>
    <div style="max-width:1480px; margin:0 auto;">

        <!-- heading -->
        <div class="contact-pop" style="text-align:center; margin-bottom:48px;">
    <div style="
        color:#c62828;
        font-size:22px;
        font-weight:600;
        margin-bottom:14px;
        font-family:var(--font-main);
    ">
        Contact Us
    </div>

    <h2 style="
        margin:0 0 18px 0;
        color:#101828;
        font-size:58px;
        line-height:1.08;
        font-weight:500;
        letter-spacing:-1px;
        font-family:var(--font-main);
    ">
        Get in touch with our team
    </h2>

            <p style="
                max-width:780px;
                margin:0 auto;
                color:#667085;
                font-size:21px;
                line-height:1.7;
                font-weight:400;
                font-family:var(--font-main);
            ">
                Contact us for shipment support, delivery enquiries, and international courier assistance.
            </p>
        </div>

        <!-- two columns -->
        <div style="display:flex; gap:40px; align-items:stretch; flex-wrap:wrap;">

            <!-- LEFT FORM -->
            <div class="contact-pop contact-delay-1" style="
                flex:1 1 760px;
                min-width:320px;
                background:#ffffff;
                border-radius:10px;
                padding:38px 34px 34px 34px;
                box-shadow:0 14px 30px rgba(16,24,40,0.05);
            ">
                <h3 style="
                    margin:0 0 16px 0;
                    color:#101828;
                    font-size:28px;
                    line-height:1.2;
                    font-weight:700;
                    font-family:var(--font-main);
                ">
                    Send Us A Message
                </h3>

                <p style="
                    margin:0 0 26px 0;
                    color:#475467;
                    font-size:17px;
                    line-height:1.8;
                    font-weight:400;
                    font-family:var(--font-main);
                    max-width:660px;
                ">
                    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($landingContactMessage ?? null, [
    'url' => ['controller' => 'LandingPage', 'action' => 'index', '#' => 'contactSection'],
    'id' => 'landingContactForm',
    'style' => 'margin:0;'
]) ?>

<?= $this->Form->hidden('form_source', ['value' => 'landing_contact']) ?>

<div style="display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px;">
    <div style="flex:1 1 300px;">
        <label style="
            display:block;
            margin-bottom:10px;
            color:#101828;
            font-size:15px;
            font-weight:600;
            font-family:var(--font-main);
        ">
            First Name <span style="color:#c91c1c;">*</span>
        </label>

        <input
            type="text"
            name="first_name"
            required
            maxlength="30"
            placeholder="First Name"
            value="<?= h((string)($landingContactMessage->first_name ?? '')) ?>"
            <?= !empty($landingSubmittedSuccessfully) ? 'disabled' : '' ?>
            style="
                width:100%;
                height:60px;
                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;
            "
        >
        <?php if (!empty($landingContactMessage) && $landingContactMessage->getError('first_name')) : ?>
            <div style="margin-top:8px; color:#c91c1c; font-size:13px; line-height:1.5;">
                <?= h($landingContactMessage->getError('first_name')[0]) ?>
            </div>
        <?php endif; ?>
    </div>

    <div style="flex:1 1 300px;">
        <label style="
            display:block;
            margin-bottom:10px;
            color:#101828;
            font-size:15px;
            font-weight:600;
            font-family:var(--font-main);
        ">
            Last Name
        </label>

        <input
            type="text"
            name="last_name"
            maxlength="30"
            placeholder="Last Name"
            value="<?= h((string)($landingContactMessage->last_name ?? '')) ?>"
            <?= !empty($landingSubmittedSuccessfully) ? 'disabled' : '' ?>
            style="
                width:100%;
                height:60px;
                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;
            "
        >
        <?php if (!empty($landingContactMessage) && $landingContactMessage->getError('last_name')) : ?>
            <div style="margin-top:8px; color:#c91c1c; font-size:13px; line-height:1.5;">
                <?= h($landingContactMessage->getError('last_name')[0]) ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<div style="margin-bottom:20px;">
    <label style="
        display:block;
        margin-bottom:10px;
        color:#101828;
        font-size:15px;
        font-weight:600;
        font-family:var(--font-main);
    ">
        Phone Number <span style="color:#c91c1c;">*</span>
    </label>

    <input
        type="tel"
        name="phone"
        required
        maxlength="11"
        inputmode="numeric"
        pattern="^\d{1,11}$"
        placeholder="Phone Number"
        value="<?= h((string)($landingContactMessage->phone ?? '')) ?>"
        <?= !empty($landingSubmittedSuccessfully) ? 'disabled' : '' ?>
        style="
            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;
        "
    >
    <?php if (!empty($landingContactMessage) && $landingContactMessage->getError('phone')) : ?>
        <div style="margin-top:8px; color:#c91c1c; font-size:13px; line-height:1.5;">
            <?= h($landingContactMessage->getError('phone')[0]) ?>
        </div>
    <?php endif; ?>
</div>

<div style="margin-bottom:20px;">
    <label style="
        display:block;
        margin-bottom:10px;
        color:#101828;
        font-size:15px;
        font-weight:600;
        font-family:var(--font-main);
    ">
        Email Address
    </label>

    <input
        type="email"
        name="email"
        maxlength="40"
        placeholder="Email Address"
        value="<?= h((string)($landingContactMessage->email ?? '')) ?>"
        <?= !empty($landingSubmittedSuccessfully) ? 'disabled' : '' ?>
        style="
            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;
        "
    >
    <?php if (!empty($landingContactMessage) && $landingContactMessage->getError('email')) : ?>
        <div style="margin-top:8px; color:#c91c1c; font-size:13px; line-height:1.5;">
            <?= h($landingContactMessage->getError('email')[0]) ?>
        </div>
    <?php endif; ?>
</div>

<div style="margin-bottom:26px;">
    <label style="
        display:block;
        margin-bottom:10px;
        color:#101828;
        font-size:15px;
        font-weight:600;
        font-family:var(--font-main);
    ">
        Message <span style="color:#c91c1c;">*</span>
    </label>

    <textarea
        name="message"
        required
        placeholder="Message"
        <?= !empty($landingSubmittedSuccessfully) ? 'disabled' : '' ?>
        style="
            width:100%;
            min-height:170px;
            border:1px solid #d0d5dd;
            border-radius:8px;
            padding:16px 18px;
            font-size:16px;
            color:#101828;
            background:#fff;
            font-family:var(--font-main);
            outline:none;
            resize:vertical;
            box-shadow:none;
        "
    ><?= h((string)($landingContactMessage->message ?? '')) ?></textarea>
    <?php if (!empty($landingContactMessage) && $landingContactMessage->getError('message')) : ?>
        <div style="margin-top:8px; color:#c91c1c; font-size:13px; line-height:1.5;">
            <?= h($landingContactMessage->getError('message')[0]) ?>
        </div>
    <?php endif; ?>
</div>

                <!-- Google reCAPTCHA -->
                <div style="margin-bottom:20px;">
                    <div class="<?= !empty($landingContactMessage) && $landingContactMessage->getError('g-recaptcha-response') ? 'has-error' : '' ?>">
                        <div class="g-recaptcha" data-sitekey="<?= h(\Cake\Core\Configure::read('Recaptcha.site')) ?>"></div>
                    </div>

                    <?php if (!empty($landingContactMessage) && $landingContactMessage->getError('g-recaptcha-response')) : ?>
                        <div style="margin-top:8px; color:#c91c1c; font-size:13px;">
                            <?= h($landingContactMessage->getError('g-recaptcha-response')[0]) ?>
                        </div>
                    <?php endif; ?>
                </div>

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

<button
    id="landingSubmitBtn"
    type="submit"
    <?= !empty($landingSubmittedSuccessfully) ? 'disabled' : '' ?>
    style="
        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:600;
        font-family:var(--font-main);
        cursor:pointer;
        box-shadow:0 14px 26px rgba(201,28,28,0.18);
        transition:all 0.25s ease;
    "
    onmouseover="this.style.background='#b51616';this.style.transform='translateY(-2px)'"
    onmouseout="this.style.background='#c91c1c';this.style.transform='translateY(0)'"
>
    <?php if (!empty($landingSubmittedSuccessfully)) : ?>
        Sent
    <?php else : ?>
        Send Message <span style="font-size:20px;">➜</span>
    <?php endif; ?>
</button>

<?php if (!empty($landingSuccessMessage)) : ?>
    <div style="
        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);
    ">
        <?= h($landingSuccessMessage) ?>
    </div>
<?php endif; ?>

<?php if (!empty($landingSaveErrorMessage)) : ?>
    <div style="
        margin-top:22px;
        padding:24px 28px;
        border:2px solid #ef4444;
        background:#fff1f2;
        color:#c81e1e;
        font-size:16px;
        line-height:1.6;
        font-weight:400;
        font-family:var(--font-main);
        border-radius:8px;
    ">
        <?= h($landingSaveErrorMessage) ?>
    </div>
<?php endif; ?>

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

            <!-- RIGHT COLUMN -->
            <div style="
                flex:1 1 520px;
                min-width:320px;
                display:flex;
                flex-direction:column;
                justify-content:center;
                gap:22px;
            ">

                <!-- Contact Us -->
                <div
                    class="contact-pop contact-delay-2"
                    style="
                        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;
                    "
                    onmouseover="
                        this.style.background='#c91c1c';
                        this.style.transform='translateY(-4px)';
                        this.querySelector('.contact-title').style.color='#ffffff';
                        this.querySelector('.contact-text').style.color='#ffffff';
                        this.querySelector('.contact-icon-circle').style.background='rgba(255,255,255,0.14)';
                        this.querySelector('.contact-main-icon').style.color='#ffffff';
                    "
                    onmouseout="
                        this.style.background='#ffffff';
                        this.style.transform='translateY(0)';
                        this.querySelector('.contact-title').style.color='#101828';
                        this.querySelector('.contact-text').style.color='#475467';
                        this.querySelector('.contact-icon-circle').style.background='#fff1f1';
                        this.querySelector('.contact-main-icon').style.color='#c91c1c';
                    "
                >
                    <div style="display:flex; align-items:flex-start; gap:18px;">
                        <div class="contact-icon-circle" style="
                            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;
                        ">
                            <i class="bi bi-geo-alt contact-main-icon" style="font-size:28px; color:#c91c1c; transition:all 0.35s ease;"></i>
                        </div>

                        <div>
                            <h3 class="contact-title" style="
                                margin:0 0 10px 0;
                                color:#101828;
                                font-size:22px;
                                line-height:1.2;
                                font-weight:700;
                                font-family:var(--font-main);
                                transition:all 0.35s ease;
                            ">
                                Contact Us
                            </h3>

                            <p class="contact-text" style="
                                margin:0;
                                color:#475467;
                                font-size:17px;
                                line-height:1.8;
                                font-weight:400;
                                font-family:var(--font-main);
                                transition:all 0.35s ease;
                            ">
                                <?= $this->ContentBlock->text('warehouse-address'); ?>
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Call or Text -->
                <div
                    class="contact-pop contact-delay-3"
                    style="
                        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;
                    "
                    onmouseover="
                        this.style.background='#c91c1c';
                        this.style.transform='translateY(-4px)';
                        this.querySelector('.contact-title').style.color='#ffffff';
                        this.querySelector('.contact-text').style.color='#ffffff';
                        this.querySelector('.contact-icon-circle').style.background='rgba(255,255,255,0.14)';
                        this.querySelector('.contact-main-icon').style.color='#ffffff';
                    "
                    onmouseout="
                        this.style.background='#ffffff';
                        this.style.transform='translateY(0)';
                        this.querySelector('.contact-title').style.color='#101828';
                        this.querySelector('.contact-text').style.color='#475467';
                        this.querySelector('.contact-icon-circle').style.background='#fff1f1';
                        this.querySelector('.contact-main-icon').style.color='#c91c1c';
                    "
                >
                    <div style="display:flex; align-items:flex-start; gap:18px;">
                        <div class="contact-icon-circle" style="
                            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;
                        ">
                            <i class="bi bi-telephone contact-main-icon" style="font-size:28px; color:#c91c1c; transition:all 0.35s ease;"></i>
                        </div>

                        <div>
                            <h3 class="contact-title" style="
                                margin:0 0 10px 0;
                                color:#101828;
                                font-size:22px;
                                line-height:1.2;
                                font-weight:700;
                                font-family:var(--font-main);
                                transition:all 0.35s ease;
                            ">
                                Call or Text
                            </h3>

                            <p class="contact-text" style="
                                margin:0;
                                color:#475467;
                                font-size:17px;
                                line-height:1.8;
                                font-weight:400;
                                font-family:var(--font-main);
                                transition:all 0.35s ease;
                            ">
                                <?= $this->ContentBlock->text('contact-phone'); ?>
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Send Email -->
                <div
                    class="contact-pop contact-delay-4"
                    style="
                        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;
                    "
                    onmouseover="
                        this.style.background='#c91c1c';
                        this.style.transform='translateY(-4px)';
                        this.querySelector('.contact-title').style.color='#ffffff';
                        this.querySelector('.contact-text').style.color='#ffffff';
                        this.querySelector('.contact-icon-circle').style.background='rgba(255,255,255,0.14)';
                        this.querySelector('.contact-main-icon').style.color='#ffffff';
                    "
                    onmouseout="
                        this.style.background='#ffffff';
                        this.style.transform='translateY(0)';
                        this.querySelector('.contact-title').style.color='#101828';
                        this.querySelector('.contact-text').style.color='#475467';
                        this.querySelector('.contact-icon-circle').style.background='#fff1f1';
                        this.querySelector('.contact-main-icon').style.color='#c91c1c';
                    "
                >
                    <div style="display:flex; align-items:flex-start; gap:18px;">
                        <div class="contact-icon-circle" style="
                            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;
                        ">
                            <i class="bi bi-envelope contact-main-icon" style="font-size:28px; color:#c91c1c; transition:all 0.35s ease;"></i>
                        </div>

                        <div>
                            <h3 class="contact-title" style="
                                margin:0 0 10px 0;
                                color:#101828;
                                font-size:22px;
                                line-height:1.2;
                                font-weight:700;
                                font-family:var(--font-main);
                                transition:all 0.35s ease;
                            ">
                                Send Email
                            </h3>

                            <p class="contact-text" style="
                                margin:0;
                                color:#475467;
                                font-size:17px;
                                line-height:1.8;
                                font-weight:400;
                                font-family:var(--font-main);
                                transition:all 0.35s ease;
                            ">
                                <?= $this->ContentBlock->text('contact-email'); ?>
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

<section id="volumetricSection" style="
    position:relative;
    overflow:hidden;
    padding:100px 40px;
    background:#2b1247;
">
    <style>
        @media (max-width: 768px) {
            #volumetricSection { padding: 50px 20px !important; }
            #volumetricSection h2 { font-size: 32px !important; line-height: 1.2 !important; margin-bottom: 15px !important; }
            #volumetricSection p { font-size: 16px !important; line-height: 1.6 !important; }
            .vol-pop { flex: 1 1 100% !important; min-width: 100% !important; }
            .vol-pop-delay-1 { padding: 25px 20px !important; margin-top: 10px !important; }
            .vol-pop-delay-1 h3 { font-size: 24px !important; margin-bottom: 20px !important; }
            input[type="number"] { height: 54px !important; font-size: 16px !important; }
            #calcVolumetricBtn { width: 100% !important; height: 54px !important; font-size: 18px !important; }
            #volumetricResult { font-size: 15px !important; padding: 12px 15px !important; min-height: 50px !important; flex: 1 1 100% !important; }
            div[style*="gap:48px"] { gap: 30px !important; }
            div[style*="gap:16px"] { gap: 12px !important; }
            div[style*="font-size:18px"][style*="margin-bottom:18px"] { font-size: 14px !important; margin-bottom: 10px !important; }
        }
    </style>
    <!-- background image -->
    <div style="
    position:absolute;
    inset:0;
    background-image:url('<?= $this->Url->image('quote-bg.png') ?>');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0.30;
    z-index:0;
"></div>

    <div style="
        position:relative;
        z-index:2;
        max-width:1480px;
        margin:0 auto;
    ">
        <div style="
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:48px;
            flex-wrap:wrap;
        ">

            <!-- LEFT CONTENT -->
            <div class="vol-pop" style="
                flex:1 1 520px;
                min-width:320px;
                color:#ffffff;
            ">
                <div style="
                    display:inline-block;
                    color:#ffffff;
                    font-size:18px;
                    font-weight:600;
                    margin-bottom:18px;
                    font-family:var(--font-main);
                    letter-spacing:0.5px;
                ">
                    Fast & Reliable Shipping Support
                </div>

                <h2 style="
                    margin:0 0 22px 0;
                    color:#ffffff;
                    font-size:58px;
                    line-height:1.08;
                    font-weight:600;
                    letter-spacing:-1px;
                    font-family:var(--font-main);
                    max-width:700px;
                ">
                    <?= $this->ContentBlock->text('calculate-weight-title'); ?>
                </h2>

                <p style="
                    margin:0;
                    color:rgba(255,255,255,0.88);
                    font-size:21px;
                    line-height:1.8;
                    font-weight:400;
                    font-family:var(--font-main);
                    max-width:640px;
                ">
                    <?= $this->ContentBlock->text('calculate-weight-text'); ?>
                </p>
            </div>

            <!-- RIGHT FORM -->
            <div class="vol-pop vol-pop-delay-1" style="
                flex:1 1 560px;
                min-width:320px;
                background:rgba(255,255,255,0.08);
                border:1px solid rgba(255,255,255,0.14);
                border-radius:14px;
                padding:34px 30px 30px 30px;
                backdrop-filter:blur(8px);
                -webkit-backdrop-filter:blur(8px);
                box-shadow:0 24px 50px rgba(0,0,0,0.20);
            ">
                <h3 style="
                    margin:0 0 24px 0;
                    color:#ffffff;
                    font-size:34px;
                    line-height:1.2;
                    font-weight:600;
                    font-family:var(--font-main);
                ">
                    Volumetric Weight Calculator
                </h3>

                <div style="display:flex; flex-direction:column; gap:18px;">

                    <input
                        id="boxLength"
                        type="number"
                        min="0"
                        step="0.1"
                        placeholder="Box Length (cm)"
                        style="
                            width:100%;
                            height:64px;
                            border:none;
                            border-radius:10px;
                            background:#ffffff;
                            color:#101828;
                            font-size:18px;
                            font-family:var(--font-main);
                            padding:0 20px;
                            outline:none;
                            box-shadow:none;
                        "
                    >

                    <input
                        id="boxHeight"
                        type="number"
                        min="0"
                        step="0.1"
                        placeholder="Box Height (cm)"
                        style="
                            width:100%;
                            height:64px;
                            border:none;
                            border-radius:10px;
                            background:#ffffff;
                            color:#101828;
                            font-size:18px;
                            font-family:var(--font-main);
                            padding:0 20px;
                            outline:none;
                            box-shadow:none;
                        "
                    >

                    <input
                        id="boxWidth"
                        type="number"
                        min="0"
                        step="0.1"
                        placeholder="Box Width (cm)"
                        style="
                            width:100%;
                            height:64px;
                            border:none;
                            border-radius:10px;
                            background:#ffffff;
                            color:#101828;
                            font-size:18px;
                            font-family:var(--font-main);
                            padding:0 20px;
                            outline:none;
                            box-shadow:none;
                        "
                    >

                    <div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:6px;">
                        <button
                            id="calcVolumetricBtn"
                            type="button"
                            style="
                                min-width:190px;
                                height:60px;
                                border:none;
                                border-radius:10px;
                                background:#c91c1c;
                                color:#ffffff;
                                font-size:20px;
                                font-weight:600;
                                font-family:var(--font-main);
                                cursor:pointer;
                                transition:all 0.25s ease;
                                box-shadow:0 14px 28px rgba(201,28,28,0.28);
                            "
                            onmouseover="this.style.background='#b51616';this.style.transform='translateY(-2px)'"
                            onmouseout="this.style.background='#c91c1c';this.style.transform='translateY(0)'"
                        >
                            Calculate
                        </button>

                        <div id="volumetricResult" style="
                            flex:1 1 240px;
                            min-height:60px;
                            display:flex;
                            align-items:center;
                            padding:14px 18px;
                            border-radius:10px;
                            background:rgba(255,255,255,0.12);
                            color:#ffffff;
                            font-size:18px;
                            line-height:1.5;
                            font-weight:500;
                            font-family:var(--font-main);
                        ">
                            Estimated weight will appear here.
                        </div>
                    </div>

                    <div style="
                        color:rgba(255,255,255,0.72);
                        font-size:14px;
                        line-height:1.7;
                        font-family:var(--font-main);
                        margin-top:2px;
                    ">
                        Formula used: Length × Height × Width ÷ 5000. Result is an approximate air-freight volumetric weight in kilograms.
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<footer style="
    background:#ffffff;
    border-top:1px solid #ffffff;
    padding:70px 40px 50px 40px;
">
    <style>
        @media (max-width: 768px) {
            footer { padding: 20px 15px 15px 15px !important; }
            footer div[style*="gap:150px"] { gap: 20px !important; padding-bottom: 15px !important; border-bottom: 1px solid #eee !important; }
            footer div[style*="flex:1 1 420px"] { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 100% !important; }
            footer div[style*="margin-bottom:16px"] { margin-bottom: 5px !important; }
            footer img { max-width: 160px !important; }
            footer p[style*="margin:0 0 0 27px"] { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; }
            footer div[style*="flex:1 1 760px"] { gap: 15px !important; flex: 1 1 100% !important; justify-content: center !important; }
            footer div[style*="min-width:260px"] { min-width: 100% !important; margin-left: 0 !important; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px !important; }
            footer h4 { font-size: 15px !important; margin-bottom: 4px !important; letter-spacing: 0 !important; }
            footer p[style*="margin:0 0 12px 0"] { margin-bottom: 4px !important; }
            footer div[style*="gap:50px"] { gap: 8px 20px !important; justify-content: center !important; }
            footer div[style*="min-width:140px"], footer div[style*="min-width:180px"] { min-width: auto !important; gap: 4px !important; align-items: center; }
            footer p, footer a { font-size: 13px !important; line-height: 1.4 !important; }
            footer div[style*="padding-top:18px"] { padding-top: 10px !important; }
            footer p[style*="color:#c91c1c"] { font-size: 12px !important; }
        }
    </style>
    <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;
        ">
            <!-- LEFT -->
            <div style="
                flex:1 1 420px;
                min-width:300px;
            ">
                <div style="margin-bottom:16px;">
                    <?= $this->ContentBlock->image('footer-logo', [
                        '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;
                ">
                    <?= $this->ContentBlock->text('footer-message'); ?>
                </p>
            </div>

            <!-- RIGHT -->
            <div style="
                flex:1 1 760px;
                min-width:320px;
                display:flex;
                justify-content:space-between;
                gap:70px;
                flex-wrap:wrap;
                align-items:flex-start;
            ">
                <!-- CONTACT + QUICK LINKS -->
                <div style="
                    min-width:260px;
                    display:flex;
                    flex-direction:column;
                    gap:34px;
                ">
                    <!-- contact -->
                    <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);
                        ">
                            <strong>Email:</strong>
                            <a href="mailto:<?= h($this->ContentBlock->text('contact-email')) ?>">
                                <?= h($this->ContentBlock->text('contact-email')) ?>
                            </a>
                        </p>
                    </div>

                    <!-- quick links -->
                    <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;
                        ">
                            <!-- left half -->
                            <div style="
                                display:flex;
                                flex-direction:column;
                                gap:12px;
                                min-width:140px;
                            ">
                                <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'">
                                   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>

                            <!-- right half -->
                            <div style="
                                display:flex;
                                flex-direction:column;
                                gap:12px;
                                min-width:180px;
                            ">
                                <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'">
                                   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>

                <!-- WAREHOUSE -->
                <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);
            ">
                <?= $this->ContentBlock->text('copyright-message'); ?>
            </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;
        -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    }

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

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

    .hero-section {
    position: relative;
    min-height: 980px;
    overflow: visible;
    padding-bottom: 120px;
    background: #000;
}

.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    transform: scale(1.02);
}

.hero-slide.active {
    opacity: 1;
}
.hero-navbar,
.hero-content-wrap,
.quick-panel-wrap {
    position: relative;
    z-index: 2;
}

    .hero-overlay {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.82) 0%,
                rgba(0, 0, 0, 0.60) 35%,
                rgba(0, 0, 0, 0.28) 68%,
                rgba(0, 0, 0, 0.14) 100%
            );
        z-index: 1;
    }

    .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-menu .nav-link:hover {
        color: #c62828 !important;
    }



    .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;
    }

    .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);
    }

    .hero-content-wrap {
        position: relative;
        z-index: 2;
        padding: 170px 54px 0 54px;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero-content h1 {
        margin: 0 0 24px 0;
        color: var(--white);
        font-size: 82px;
        line-height: 1.04;
        font-weight: 300;
        letter-spacing: -1.6px;
    }

    .hero-content p {
        margin: 0 0 34px 0;
        color: rgba(255,255,255,0.95);
        font-size: 21px;
        line-height: 1.6;
        max-width: 720px;
        font-weight: 300;
    }

    .quote-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 210px;
        height: 64px;
        padding: 0 28px;
        border-radius: 999px;
        text-decoration: none;
        background: #ffffff;
        color: #161616;
        font-size: 22px;
        font-weight: 400;
        transition: 0.2s ease;
    }

    .quote-btn:hover {
        background: #c62828;
        color: #161616;
    }

    .quick-panel-wrap {
        position: absolute;
        left: 50%;
        bottom: -100px;
        justify-content: center;
        transform: translateX(-50%);
        width: min(1100px, calc(100% - 55px));
        z-index: 4;

    }

    .quick-panel {
       width: 100%;
    max-width: 1140px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 22px;
    box-shadow: 0 20px 45px rgba(16, 24, 40, 0.14);
    overflow: visible;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    }

    .quick-tabs {
        display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    padding: 0 28px;
    min-height: 72px;
    background: #fff;
    border-bottom: 1px solid rgba(16, 24, 40, 0.10);
    }

    .quick-tabs-two .quick-tab {
    min-width: 160px;
    justify-content: center;
}

    .quick-tab {
        background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    min-height: 72px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #5f5f5f;
    font-size: 17px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.25s ease;
    }

    .quick-tab i {
        font-size: 20px;
    line-height: 1;
    }

    .quick-tab:hover {
    color: #c62828;
}

    .quick-tab.active {
        color: #111111;
    border-bottom-color: #c62828;
    }

    .quick-body {
        padding: 22px 22px 24px;
    background: #fff;
    overflow: visible;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    }

    .quick-pane label {
    display: block;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    margin-bottom: 10px;
}

.quick-tabs {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    overflow: visible;
}


.quick-address-autocomplete .input-icon-wrap {
    position: relative;
    overflow: visible;
}


.quick-form {
    display: grid;
    gap: 16px;
    align-items: end;
}

.quick-form-single {
    grid-template-columns: minmax(0, 1fr) 150px;
}

.quick-booking-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
}

.quick-address-field {
    display: flex;
    flex-direction: column;
}

.input-icon-wrap {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    font-size: 20px;
    color: #8a8a8a;
    pointer-events: none;
}

.input-icon-wrap input {
    width: 100%;
    height: 56px;
    border: 1px solid #d6d6d6;
    border-radius: 12px;
    padding: 0 18px 0 52px;
    font-size: 16px;
    font-weight: 400;
    color: #111;
    background: #fff;
    outline: none;
    transition: all 0.25s ease;
}

.input-icon-wrap input:focus,
.input-icon-wrap input:hover {
    border-color: #c62828;
    box-shadow: 0 0 0 0.12rem rgba(201, 28, 28, 0.08);
}

.track-submit-btn {
    height: 56px;
    border: 1px solid #d6d6d6;
    border-radius: 12px;
    background: #fff;
    color: #2e2e2e;
    font-size: 18px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 150px;
}

.track-submit-btn:hover {
    border-color: #c62828;
    color: #c62828;
    background: #fff8f8;
}

.quick-next-btn {
    width: 100%;
}

@media (max-width: 991px) {
    .quick-panel-wrap {
        margin-top: -40px;
    }

    .quick-form-single,
    .quick-booking-form {
        grid-template-columns: 1fr;
    }

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

    .quick-tabs {
        gap: 12px;
        padding: 0 14px;
    }

    .quick-tabs-two .quick-tab {
        min-width: 130px;
    }
}

@media (max-width: 767px) {
    .quick-panel {
        border-radius: 18px;
    }

    .quick-tabs {
        min-height: 64px;
    }

    .quick-tab {
        min-height: 64px;
        font-size: 16px;
    }

    .quick-body {
        padding: 18px;
    }
}

    .about-section {
        background: #ffffff;
        padding: 190px 44px 34px 44px;
    }

    .about-container {
        max-width: 1600px;
        background: #ffffff;
    }

    .about-left-label {
        font-size: 34px;
        line-height: 1.28;
        color: #2e2e2e;
        font-weight: 300;
        letter-spacing: 0.1px;
        padding-top: 8px;
    }

    .about-right-content {
        max-width: 840px;
    }

    .about-right-content h2 {
        margin: 0 0 26px 0;
        font-size: 80px;
        line-height: 1.03;
        color: #232323;
        font-weight: 500;
        letter-spacing: -1.2px;
    }

    .about-right-content p {
        margin: 0;
        font-size: 22px;
        line-height: 1.7;
        color: var(--text-gray);
        max-width: 840px;
        font-weight: 300;
    }

    .about-truck-wrap {
        margin-top: 50px;
        overflow: hidden;
        position: relative;
        min-height: 320px;
        background: #ffffff;
    }

    .about-truck-img {
        width: min(500px, 50%);
        max-width: 100%;
        height: auto;
        display: inline-block;
        will-change: transform;
        transition: transform 0.08s linear;
    }

    @media (max-width: 1400px) {
        .hero-content h1 {
            font-size: 70px;
        }

        .about-right-content h2 {
            font-size: 62px;
        }
    }

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

        .hero-content-wrap {
            padding: 120px 24px 0 24px;
        }

        .hero-content h1 {
            font-size: 58px;
        }

        .hero-content p {
            font-size: 19px;
        }

        .quick-panel-wrap {
            width: calc(100% - 30px);
        }

        .about-section {
            padding: 140px 24px 30px 24px;
        }

        .about-right-content h2 {
            font-size: 52px;
        }

        .about-right-content p {
            font-size: 19px;
        }
    }

    @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;
        }

        .hero-content-wrap {
            padding-top: 105px;
        }

        .hero-content h1 {
            font-size: 48px;
            line-height: 1.08;
        }

        .quick-panel-wrap {
            bottom: -86px;
        }

        .quick-tabs {
            gap: 30px;
        }

        .quick-body {
            padding: 20px;
        }

        .quick-form {
            flex-direction: column;
            align-items: stretch;
        }

        .quick-form button {
            width: 100%;
        }

        .about-section {
            padding-top: 150px;
        }

        .about-right-content h2 {
            font-size: 42px;
        }

        .about-left-label {
            margin-bottom: 20px;
            font-size: 21px;
        }
    }

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

        .hero-section {
            min-height: 840px;
        }

        .hero-content h1 {
            font-size: 40px;
        }

        .hero-content p {
            font-size: 18px;
        }

        .quote-btn {
            min-width: 180px;
            height: 58px;
            font-size: 20px;
        }

        .about-right-content h2 {
            font-size: 34px;
        }

        .about-right-content p {
            font-size: 18px;
        }

        .about-left-label {
            font-size: 19px;
        }
    }







    .company-about-section {
    background: #eef1f4;
    padding: 90px 50px 100px 50px;
}

.company-about-container {
    max-width: 1500px;
    margin: 0 auto;
}

.company-about-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.company-about-left {
    flex: 0 0 52%;
    max-width: 52%;
}

.company-mini-mark {
    display: inline-block;
    margin-bottom: 24px;
    color: #f2b400;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.company-about-left h2 {
    margin: 0 0 24px 0;
    color: #111111;
    font-family: var(--font-main);
    font-size: 56px;
    line-height: 1.08;
    font-weight: 500;
}

.company-about-left p {
    margin: 0;
    color: #666666;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 300;
}

.company-about-right {
    flex: 0 0 48%;
    max-width: 48%;
    position: relative;
    min-height: 620px;
}

.about-img-large {
    position: absolute;
    top: 0;
    right: 70px;
    width: 460px;
    height: 500px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
    background: #ddd;
}

.about-img-small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 330px;
    height: 290px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    background: #ddd;
}

.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1100px) {
    .company-about-section {
        padding: 70px 24px 80px 24px;
    }

    .company-about-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .company-about-left,
    .company-about-right {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .company-about-left h2 {
        font-size: 44px;
    }

    .company-about-left p {
        font-size: 18px;
    }

    .company-about-right {
        min-height: 520px;
    }

    .about-img-large {
        width: 420px;
        height: 430px;
        right: 60px;
    }

    .about-img-small {
        width: 280px;
        height: 220px;
    }
}

@media (max-width: 767px) {
    .company-about-left h2 {
        font-size: 36px;
    }

    .company-about-left p {
        font-size: 17px;
        line-height: 1.7;
    }

    .company-about-right {
        min-height: 420px;
    }

    .about-img-large {
        width: 78%;
        height: 280px;
        right: 30px;
    }

    .about-img-small {
        width: 56%;
        height: 170px;
    }
}

.feedback-pop {
    opacity: 0;
    transform: translateY(50px) scale(0.96);
    filter: blur(6px);
    transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
}

.feedback-pop.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.feedback-pop-delay-1 {
    transition-delay: 0.18s;
}

.feedback-pop-delay-2 {
    transition-delay: 0.34s;
}

.contact-pop {
    opacity: 0;
    transform: translateY(45px);
    filter: blur(6px);
    transition: opacity 0.85s ease, transform 0.85s ease, filter 0.85s ease;
}

.contact-pop.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
 .indicator-bounce {
     animation: bounce 2s infinite;
 }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}
.contact-delay-1 { transition-delay: 0.10s; }
.contact-delay-2 { transition-delay: 0.20s; }
.contact-delay-3 { transition-delay: 0.30s; }
.contact-delay-4 { transition-delay: 0.40s; }

.vol-pop {
    opacity: 0;
    transform: translateY(45px) scale(0.98);
    filter: blur(6px);
    transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
}

.vol-pop.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.vol-pop-delay-1 {
    transition-delay: 0.18s;
}

.hero-pop {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

html {
    scroll-behavior: smooth;
}

.hero-pop,
.section-pop,
.card-pop {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    will-change: opacity, transform;
}

.hero-pop.is-visible,
.section-pop.is-visible,
.card-pop.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-pop-text {
    transition-delay: 0.12s;
}

.hero-pop-panel {
    transition-delay: 0.35s;
}

.section-pop-delay-1 {
    transition-delay: 0.12s;
}

.section-pop-delay-2 {
    transition-delay: 0.24s;
}

.section-pop-delay-3 {
    transition-delay: 0.36s;
}

.section-pop-delay-4 {
    transition-delay: 0.48s;
}

.about-truck-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 200px;
    margin-top: 50px;
}

.about-truck-img {
    position: relative;
    width: min(520px, 65vw);
    max-width: 100%;
    height: auto;
    display: block;
    transform: translateX(0);
    transition: transform 0.15s linear;
    will-change: transform;
}

.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.address-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
    z-index: 99999;
    display: none;
    max-height: 280px;
    overflow-y: auto;
}

.address-suggestion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f3f3f3;
    border-bottom: 1px solid #e6e6e6;
    color: #424242;
    font-size: 15px;
    font-weight: 500;
}

.address-suggestion-item {
    padding: 14px 16px;
    border-bottom: 1px solid #ececec;
    background: #fff;
    cursor: pointer;
    transition: background 0.18s ease;
}

.address-suggestion-item:last-child {
    border-bottom: none;
}

.address-suggestion-item:hover,
.address-suggestion-item.active {
    background: #f7f7f7;
}

.address-suggestion-primary {
    font-size: 16px;
    line-height: 1.45;
    color: #2a2a2a;
    font-weight: 600;
}

.address-suggestion-secondary {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #6a6a6a;
}


</style>
<?php $this->end(); ?>

<?php $this->start('script'); ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const truck = document.getElementById('scrollTruck');
    const section = document.querySelector('.about-section');

    const whyChooseSection = document.getElementById('whyChooseSection');
    const whyChooseBg = document.getElementById('whyChooseBg');
    const whyLeftBox = document.getElementById('whyLeftBox');
    const whyRightStats = document.getElementById('whyRightStats');

    const counters = document.querySelectorAll('.count-up');

    const feedbackSection = document.getElementById('feedbackSection');
const feedbackTrack = document.getElementById('feedbackTrack');
const feedbackDots = document.querySelectorAll('.feedback-dot');
const feedbackPops = document.querySelectorAll('.feedback-pop');

const contactSection = document.getElementById('contactSection');
const contactPops = document.querySelectorAll('.contact-pop');

const volumetricSection = document.getElementById('volumetricSection');
const volumetricPops = document.querySelectorAll('.vol-pop');
const calcVolumetricBtn = document.getElementById('calcVolumetricBtn');
const boxLength = document.getElementById('boxLength');
const boxHeight = document.getElementById('boxHeight');
const boxWidth = document.getElementById('boxWidth');
const volumetricResult = document.getElementById('volumetricResult');

let countersStarted = false;

function formatNumber(num) {
    return num.toLocaleString('en-US');
}

function animateCounter(el) {
    const target = parseInt(el.getAttribute('data-target'), 10);
    const duration = 1800;
    const startTime = performance.now();

    function updateCounter(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);

        const easeOut = 1 - Math.pow(1 - progress, 3);
        const currentValue = Math.floor(target * easeOut);

        el.textContent = formatNumber(currentValue);

        if (progress < 1) {
            requestAnimationFrame(updateCounter);
        } else {
            el.textContent = formatNumber(target);
        }
    }

    requestAnimationFrame(updateCounter);
}

if (truck && section) {
    function updateTruckPosition() {
        const sectionRect = section.getBoundingClientRect();
        const sectionTop = window.scrollY + sectionRect.top;
        const sectionHeight = section.offsetHeight;
        const viewportHeight = window.innerHeight;

        const startScroll = sectionTop - viewportHeight;
        const endScroll = sectionTop + sectionHeight;

        const progress = Math.min(
            Math.max((window.scrollY - startScroll) / (endScroll - startScroll), 0),
            1
        );

        const truckWidth = truck.offsetWidth;
const startX = window.innerWidth;
const endX = -truckWidth;
const currentX = startX + (endX - startX) * progress;

truck.style.transform = `translateX(${currentX}px)`;
    }

    window.addEventListener('scroll', updateTruckPosition);
    window.addEventListener('resize', updateTruckPosition);
    updateTruckPosition();
}

    if (whyChooseSection && whyChooseBg && whyLeftBox && whyRightStats) {
        const whyObserver = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    whyChooseBg.style.opacity = '0.28';
                    whyChooseBg.style.transform = 'scale(1)';
                    whyLeftBox.style.opacity = '1';
                    whyLeftBox.style.transform = 'translateY(0)';
                    whyRightStats.style.opacity = '1';
                    whyRightStats.style.transform = 'translateY(0)';

                    if (!countersStarted) {
                        counters.forEach((counter) => animateCounter(counter));
                        countersStarted = true;
                    }
                } else {
                    whyChooseBg.style.opacity = '0.18';
                    whyChooseBg.style.transform = 'scale(1.08)';
                    whyLeftBox.style.opacity = '0';
                    whyLeftBox.style.transform = 'translateY(60px)';
                    whyRightStats.style.opacity = '0';
                    whyRightStats.style.transform = 'translateY(60px)';
                }
            });
        }, {
            threshold: 0.22
        });

        whyObserver.observe(whyChooseSection);
    }

    const heroNavbar = document.querySelector('.hero-navbar');

window.addEventListener('scroll', function () {
    if (!heroNavbar) return;

    if (window.scrollY > 50) {
        heroNavbar.classList.add('scrolled');
    } else {
        heroNavbar.classList.remove('scrolled');
    }
});

if (feedbackSection && feedbackTrack && feedbackDots.length) {
    let feedbackStarted = false;
    let feedbackIndex = 0;
    const totalSlides = 3;

    const showFeedbackSlide = (index) => {
        feedbackTrack.style.transform = `translateX(-${index * (100 / totalSlides)}%)`;

        feedbackDots.forEach((dot, i) => {
            dot.style.background = i === index ? '#c91c1c' : '#d0d5dd';
        });
    };

    const startFeedbackSlider = () => {
        if (feedbackStarted) return;
        feedbackStarted = true;

        feedbackPops.forEach((item) => item.classList.add('is-visible'));
        showFeedbackSlide(feedbackIndex);

        setInterval(() => {
            feedbackIndex = (feedbackIndex + 1) % totalSlides;
            showFeedbackSlide(feedbackIndex);
        }, 2000);
    };

    const feedbackObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                startFeedbackSlider();
            }
        });
    }, {
        threshold: 0.2
    });

    feedbackObserver.observe(feedbackSection);

    feedbackDots.forEach((dot) => {
        dot.addEventListener('click', function () {
            feedbackIndex = parseInt(this.getAttribute('data-slide'), 10);
            showFeedbackSlide(feedbackIndex);
        });
    });
}

if (contactSection && contactPops.length) {
    const contactObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                contactPops.forEach((item) => item.classList.add('is-visible'));
            }
        });
    }, {
        threshold: 0.18
    });

    contactObserver.observe(contactSection);
}

if (volumetricSection && volumetricPops.length) {
    const volumetricObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                volumetricPops.forEach((item) => item.classList.add('is-visible'));
            }
        });
    }, {
        threshold: 0.18
    });

    volumetricObserver.observe(volumetricSection);
}

if (calcVolumetricBtn && boxLength && boxHeight && boxWidth && volumetricResult) {
    calcVolumetricBtn.addEventListener('click', function () {
        const length = parseFloat(boxLength.value);
        const height = parseFloat(boxHeight.value);
        const width = parseFloat(boxWidth.value);

        if (!length || !height || !width || length <= 0 || height <= 0 || width <= 0) {
            volumetricResult.textContent = 'Please enter valid dimensions in all 3 fields.';
            return;
        }

        const volumetricKg = (length * height * width) / 5000;
        const rounded = volumetricKg.toFixed(2);

        volumetricResult.textContent = `Estimated volumetric weight: ${rounded} kg`;
    });
}

const landingContactForm = document.getElementById('landingContactForm');
const landingSubmitBtn = document.getElementById('landingSubmitBtn');

if (landingContactForm && landingSubmitBtn) {
    landingContactForm.addEventListener('submit', function () {
        if (!landingContactForm.checkValidity()) {
            return;
        }

        landingSubmitBtn.disabled = true;
        landingSubmitBtn.innerHTML = 'Sending...';
    });
}

const heroPops = document.querySelectorAll('.hero-pop');

setTimeout(() => {
    heroPops.forEach((item) => item.classList.add('is-visible'));
}, 180);


const scrollPops = document.querySelectorAll('.section-pop, .card-pop');

const popObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            popObserver.unobserve(entry.target);
        }
    });
}, {
    threshold: 0.15
});

scrollPops.forEach((item) => {
    popObserver.observe(item);
});

const quickTabs = document.querySelectorAll('.quick-tab');
const quickPanes = document.querySelectorAll('.quick-pane');
const quickBookingNextBtn = document.getElementById('quickBookingNextBtn');
const quickFrom = document.getElementById('quickFrom');
const quickTo = document.getElementById('quickTo');

function switchQuickPane(tabName) {
    quickTabs.forEach((tab) => {
        tab.classList.toggle('active', tab.getAttribute('data-tab') === tabName);
    });

    quickPanes.forEach((pane) => {
        pane.style.display = pane.getAttribute('data-pane') === tabName ? 'block' : 'none';
    });
}

quickTabs.forEach((tab) => {
    tab.addEventListener('click', function () {
        const tabName = this.getAttribute('data-tab');
        switchQuickPane(tabName);
    });
});

switchQuickPane('booking');

if (quickBookingNextBtn) {
    quickBookingNextBtn.addEventListener('click', function () {
        const fromValue = quickFrom ? quickFrom.value.trim() : '';
        const toValue = quickTo ? quickTo.value.trim() : '';

        const bookingUrl = new URL('<?= $this->Url->build('/booking', ['fullBase' => false]) ?>', window.location.origin);
        bookingUrl.searchParams.set('shipper_address', fromValue);
        bookingUrl.searchParams.set('delivery_address', toValue);

        window.location.href = bookingUrl.toString();
    });
}

});

function debounce(fn, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

async function fetchAddressSuggestions(query) {
    const response = await fetch(`/locations/search?q=${encodeURIComponent(query)}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });

    if (!response.ok) {
        return [];
    }

    return await response.json();
}

function setupAddressAutocomplete(inputId, dropdownId, itemClassPrefix) {
    const input = document.getElementById(inputId);
    const dropdown = document.getElementById(dropdownId);

    if (!input || !dropdown) return;

    let results = [];
    let activeIndex = -1;

    function closeDropdown() {
        dropdown.style.display = 'none';
        dropdown.innerHTML = '';
        activeIndex = -1;
    }

    function openDropdown() {
        dropdown.style.display = 'block';
    }

    function renderSuggestions(items) {
        dropdown.innerHTML = '';

        if (!items.length) {
            closeDropdown();
            return;
        }

        const header = document.createElement('div');
        header.className = `${itemClassPrefix}-header`;
        header.innerHTML = `<i class="bi bi-geo-alt"></i><span>Address</span>`;
        dropdown.appendChild(header);

        items.forEach((item, index) => {
            const option = document.createElement('div');
            option.className = `${itemClassPrefix}-item`;
            option.innerHTML = `
                <div class="${itemClassPrefix}-primary">${item.primary || item.display_name}</div>
                <div class="${itemClassPrefix}-secondary">${item.secondary || ''}</div>
            `;

            option.addEventListener('click', function () {
                input.value = item.display_name;
                closeDropdown();
            });

            dropdown.appendChild(option);
        });

        openDropdown();
    }

    const searchAddresses = debounce(async function () {
        const query = input.value.trim();

        if (query.length < 2) {
            closeDropdown();
            return;
        }

        try {
            results = await fetchAddressSuggestions(query);
            activeIndex = -1;
            renderSuggestions(results);
        } catch (error) {
            closeDropdown();
        }
    }, 250);

    input.addEventListener('input', searchAddresses);

    input.addEventListener('keydown', function (e) {
        const items = dropdown.querySelectorAll(`.${itemClassPrefix}-item`);
        if (!items.length) return;

        if (e.key === 'ArrowDown') {
            e.preventDefault();
            activeIndex = (activeIndex + 1) % items.length;
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            activeIndex = (activeIndex - 1 + items.length) % items.length;
        } else if (e.key === 'Enter') {
            if (activeIndex >= 0 && results[activeIndex]) {
                e.preventDefault();
                input.value = results[activeIndex].display_name;
                closeDropdown();
            }
            return;
        } else if (e.key === 'Escape') {
            closeDropdown();
            return;
        } else {
            return;
        }

        items.forEach((item, index) => {
            item.classList.toggle('active', index === activeIndex);
        });
    });

    input.addEventListener('focus', function () {
        if (dropdown.innerHTML.trim() !== '') {
            openDropdown();
        }
    });

    document.addEventListener('click', function (e) {
        if (!input.contains(e.target) && !dropdown.contains(e.target)) {
            closeDropdown();
        }
    });
}

setupAddressAutocomplete('quickFrom', 'quickFromSuggestions', 'address-suggestion');
setupAddressAutocomplete('quickTo', 'quickToSuggestions', 'address-suggestion');

const quickTrackBtn = document.querySelector('.track-submit-btn');
const quickTrackInput = document.getElementById('trackInput');
function executeQuickTrack() {
    const trackingNum = quickTrackInput.value.trim();
    if (trackingNum) {
        const baseUrl = "<?= $this->Url->build(['controller' => 'Tracking', 'action' => 'index']) ?>";
        window.location.href = baseUrl + '?tracking_number=' + encodeURIComponent(trackingNum);
    } else {
        quickTrackInput.focus();
    }
}
if (quickTrackBtn && quickTrackInput) {
    quickTrackBtn.addEventListener('click', executeQuickTrack);
    quickTrackInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            executeQuickTrack();
        }
    });
}

</script>
<?php $this->end(); ?>
