@extends('website.partials.app')
@section('canonical', route('home'))
@push('css')
<style>
/* Full-page loader for address check → plans flow */
.address-check-loader {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
}
/* Address check loader (hero card) */
.hero-card .address-check-loader {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    z-index: 10;
}
.address-check-loader--visible {
    display: flex;
}
/* Address check loader (three symbols: circle, triangle, rect) */
.address-check-loader .loader-scene {
    width: 100%;
    max-width: 320px;
    min-height: 140px;
    background: transparent;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.address-check-loader .loader-scene .loader-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.address-check-loader .loader-scene .loader {
    --path: #2F3545;
    --dot: #5628EE;
    --duration: 3s;
    width: 44px;
    height: 44px;
    position: relative;
    display: inline-block;
}
.address-check-loader .loader-scene .loader:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    display: block;
    background: var(--dot);
    top: 37px;
    left: 19px;
    transform: translate(-18px, -18px);
    animation: addressLoaderDotCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-triangle {
    width: 48px;
}
.address-check-loader .loader-scene .loader-triangle:before {
    left: 21px;
    transform: translate(-10px, -18px);
    animation: addressLoaderDotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader svg {
    display: block;
    width: 100%;
    height: 100%;
}
.address-check-loader .loader-scene .loader svg circle,
.address-check-loader .loader-scene .loader svg polygon,
.address-check-loader .loader-scene .loader svg rect {
    fill: none;
    stroke: var(--path);
    stroke-width: 10px;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.address-check-loader .loader-scene .loader-circle:before {
    animation: addressLoaderDotCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-circle svg circle {
    stroke-dasharray: 150 50 150 50;
    stroke-dashoffset: 75;
    animation: addressLoaderPathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-triangle svg polygon {
    stroke-dasharray: 145 76 145 76;
    stroke-dashoffset: 0;
    animation: addressLoaderPathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-rect:before {
    animation: addressLoaderDotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.address-check-loader .loader-scene .loader-rect svg rect {
    stroke-dasharray: 192 64 192 64;
    stroke-dashoffset: 0;
    animation: addressLoaderPathRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
@keyframes addressLoaderPathCircle {
    25% { stroke-dashoffset: 125; }
    50% { stroke-dashoffset: 175; }
    75% { stroke-dashoffset: 225; }
    100% { stroke-dashoffset: 275; }
}
@keyframes addressLoaderDotCircle {
    25% { transform: translate(0, 0); }
    50% { transform: translate(18px, -18px); }
    75% { transform: translate(0, -36px); }
    100% { transform: translate(-18px, -18px); }
}
@keyframes addressLoaderPathTriangle {
    33% { stroke-dashoffset: 74; }
    66% { stroke-dashoffset: 147; }
    100% { stroke-dashoffset: 221; }
}
@keyframes addressLoaderDotTriangle {
    33% { transform: translate(0, 0); }
    66% { transform: translate(10px, -18px); }
    100% { transform: translate(-10px, -18px); }
}
@keyframes addressLoaderPathRect {
    25% { stroke-dashoffset: 64; }
    50% { stroke-dashoffset: 128; }
    75% { stroke-dashoffset: 192; }
    100% { stroke-dashoffset: 256; }
}
@keyframes addressLoaderDotRect {
    25% { transform: translate(0, 0); }
    50% { transform: translate(18px, -18px); }
    75% { transform: translate(0, -36px); }
    100% { transform: translate(-18px, -18px); }
}
.address-check-loader .loader-scene .loader-label {
    position: relative;
    bottom: auto;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 500;
}
.address-check-loader .loader-scene .loader-label span:nth-child(1) { color: #F7941D; }
.address-check-loader .loader-scene .loader-label span:nth-child(2) { color: #374151; }
.address-check-loader .loader-scene .loader-label span:nth-child(3) { color: #00B5CC; }
</style>
@endpush
@section('content')
    <!-- HERO -->
    <section id="home" class="hero container rounded-5" data-plans-url="{{ route('website.plans') }}" data-lookup-url="{{ route('website.lookup-address') }}" data-csrf="{{ csrf_token() }}"
        data-check-label="{{ e($home['hero']['check_button_label']) }}"
        data-checking-label="{{ e($home['hero']['checking_label']) }}"
        data-hero-address-empty="{{ e($home['hero']['address_error_empty']) }}">
        <div class="row  justify-content-center ">
            <h1 class="hero-title mb-2 text-center">{{ $home['hero']['title'] }}</h1>
            <div class="hero-underline mx-auto"></div>
            <p class="hero-sub mb-4 text-center">{{ $home['hero']['subtitle'] }}</p>
            <div class="hero-card">
                {{-- Inline loading patti (same page) - replaces form while checking address --}}
                @include('website.partials.address-check-loader')
                <div id="heroFormWrap">
                    <input type="text" id="heroAddressInput" name="address" autocomplete="off" placeholder="{{ $home['hero']['address_placeholder'] }}" />
                    <div id="heroAddressError" style="display:none; color:#dc3545; font-size:0.875rem; margin-top:8px; margin-bottom:4px;">
                        <i class="fas fa-exclamation-circle me-1"></i> {{ $home['hero']['address_error_empty'] }}
                    </div>
                    <button type="button" class="btn-check-addr" id="heroAddressBtn">{{ $home['hero']['check_button_label'] }}</button>
                    <div class="hero-badges">
                        <span><i class="fas fa-check-circle"></i> {{ $home['hero']['badge_1'] }}</span>
                        <span><i class="fas fa-check-circle"></i> {{ $home['hero']['badge_2'] }}</span>
                        <span><i class="fas fa-check-circle"></i> {{ $home['hero']['badge_3'] }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- STEPS -->
    <section class="steps-section" id="steps">
        <div class="container text-center">
            <div class="section-pill">{{ $home['steps']['pill'] }}</div>
            <h2 class="section-title mt-1 mb-2">{{ $home['steps']['title'] }}</h2>
            <p class="section-sub mb-5">{{ $home['steps']['subtitle'] }}</p>
            <div class="row justify-content-center align-items-stretch g-4">
                @foreach($home['steps']['items'] as $idx => $step)
                <div class="col-12 col-md-4 col-lg-3 step-col">
                    <div class="step-card">
                        <div class="step-num">{{ $idx + 1 }}</div>
                        <div class="step-icon-wrap {{ ['red', 'orange', 'green'][$idx] ?? 'red' }}"><i class="fas {{ ['fa-map-marker-alt', 'fa-bolt', 'fa-check-circle'][$idx] ?? 'fa-check-circle' }}"></i></div>
                        <div class="step-title">{{ $step['title'] }}</div>
                        <p class="step-desc">{{ $step['description'] }}</p>
                    </div>
                    @if($idx < count($home['steps']['items']) - 1)
                    <div class="step-arrow"><i class="fas fa-chevron-right"></i></div>
                    @endif
                </div>
                @endforeach
            </div>
            {{-- <button onclick="goToContact()" class="btn-gives mt-5 d-flex align-items-center justify-content-center mx-auto">
                Get Started Today →
            </button>
            <p style="color: #6A7282; font-size: 14px;" class="text-center mt-2">Setup takes less than 5 minutes • No credit card required</p> --}}
        </div>
    </section>

    <!-- PRICING -->
    <section class="pricing-section" id="pricing" data-nbn-url="{{ route('website.products.nbn') }}" data-community-fibre-url="{{ route('website.products.community-fibre') }}">
        <div class="container">
            <div class="text-center mb-2">
                <h2 class="section-title">{{ $home['pricing']['title'] }}</h2>
                <p class="section-sub">{{ $home['pricing']['subtitle'] }}</p>
            </div>
            <div class="pricing-toggle-wrap">
                <div class="pricing-toggle">
                    <button class="toggle-btn active" id="nbnBtn" onclick="switchServiceType('nbn')">{{ $home['pricing']['toggle_nbn'] }}</button>
                    <button class="toggle-btn" id="communityFibreBtn" onclick="switchServiceType('community_fibre')">{{ $home['pricing']['toggle_community_fibre'] }}</button>
                </div>
            </div>
            <div class="position-relative min-h-200">
                <div id="packagesLoading" class="packages-loading" style="display: none;">
                    <div class="packages-loading-spinner"></div>
                    <span class="packages-loading-text">{{ $home['pricing']['packages_loading_text'] }}</span>
                </div>
                <div id="nbnPlans" class="products-carousel-wrapper" data-carousel="nbn">
                    <button type="button" class="products-carousel-btn products-carousel-btn--prev" aria-label="Previous plans" style="display: none;"><i class="fas fa-chevron-left"></i></button>
                    <div class="products-carousel-viewport">
                        <div class="products-carousel-track align-items-stretch"></div>
                    </div>
                    <button type="button" class="products-carousel-btn products-carousel-btn--next" aria-label="Next plans" style="display: none;"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div id="communityFibrePlans" class="products-carousel-wrapper" data-carousel="community-fibre" style="display: none;">
                    <button type="button" class="products-carousel-btn products-carousel-btn--prev" aria-label="Previous plans" style="display: none;"><i class="fas fa-chevron-left"></i></button>
                    <div class="products-carousel-viewport">
                        <div class="products-carousel-track align-items-stretch"></div>
                    </div>
                    <button type="button" class="products-carousel-btn products-carousel-btn--next" aria-label="Next plans" style="display: none;"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div id="packagesEmpty" class="packages-empty text-center py-5" style="display: none;">
                    <p class="text-muted mb-0">{{ $home['pricing']['packages_empty_message'] }}</p>
                </div>
            </div>
            <div class="pricing-note row justify-content-center text-center mt-5 w-50 mx-auto">
                <div><i class="fas fa-check-circle"></i> <span>{{ $home['pricing']['note_line'] }}</span></div>
                <span><a href="#contact">{{ $home['pricing']['help_link_text'] }}</a></span>
            </div>
        </div>
    </section>
    <!-- <div id="homeCheckoutBar" class="checkout-bar" aria-hidden="true">
        <span class="checkout-bar-label">Plan selected</span>
        <a href="#" id="homeCheckoutBtn" class="btn-checkout" data-checkout-url="{{ route('website.checkout') }}"><i class="fas fa-shopping-cart me-2"></i> Checkout</a>
    </div> -->

    <!-- GIVES BACK -->
    <section class="gives-back-section" id="about">
        <div class="container">
            <div class="row align-items-center p-0 g-5">
                <div class="col-lg-6 order-2 order-lg-1">
                    <p class="section-label">{{ $home['about']['label'] }}</p>
                    <h2 class="gives-title">{{ $home['about']['title'] }}</h2>
                    <p class="gives-desc">{{ $home['about']['description'] }}</p>
                    @foreach($home['about']['features'] as $fi => $feature)
                    @php
                        $iconWrap = ['red-bg', 'green-bg', 'teal-bg'][$fi] ?? 'red-bg';
                        $iconClass = ['fa-hand-holding-heart', 'fa-lock-open', 'fa-users'][$fi] ?? 'fa-hand-holding-heart';
                    @endphp
                    <div class="gives-feature">
                        <div class="gives-feature-icon {{ $iconWrap }}"><i class="fas {{ $iconClass }}"></i></div>
                        <div class="gives-feature-text">
                            <h6>{{ $feature['title'] }}</h6>
                            <p>{{ $feature['text'] }}</p>
                        </div>
                    </div>
                    @endforeach
                    <button onclick="goToHome()" class="btn-gives check-avail mt-2">{{ $home['about']['check_button_label'] }}</button>
                </div>
                <div class="col-lg-6 order-1 order-lg-2">
                    <div class="gives-img-card position-relative">
                        <img class="rounded-2" src="{{ asset('website/assets/images/making-difference.png') }}" alt="{{ $home['about']['image_alt'] }}" />
                        <div class="gives-stat-row">
                            <div class="gives-stat-icon"><i class="fas fa-chart-line"></i></div>
                            <div>
                                <div class="gives-stat-num">{{ $home['about']['stat_families_num'] }}</div>
                                <div class="gives-stat-label">{{ $home['about']['stat_families_label'] }}</div>
                            </div>
                        </div>
                        <div class="gives-location-badge">
                            <img src="{{ asset('website/assets/images/tick.png') }}" alt="" style="width: 40px;">
                            <div class="gives-location-text">
                                <div class="loc-title">{{ $home['about']['stat_donation_amount'] }}</div>
                                <div class="loc-sub">{{ $home['about']['stat_donation_label'] }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- SERVING GREATER SYDNEY -->
    <section class="sydney-section" id="coverage">
        <div class="container">
            <div class="text-center mb-5">
                <div class="section-pill-blue">{{ $home['coverage']['pill'] }}</div>
                <h2 class="section-title mt-1 mb-2">{{ $home['coverage']['title'] }}</h2>
                <p class="section-sub">{{ $home['coverage']['subtitle'] }}</p>
            </div>
            <div class="row p-0 g-5 align-items-center">
                <div class="col-lg-5">
                    <div class="sydney-map-card position-relative">
                        <div class="sydney-map-inner rounded-3">
                            <img src="{{ asset('website/assets/images/sydney-wide.png') }}" alt="Sydney Map" onerror="this.style.display='none'" />
                            <div class="sydney-wide-badge">
                                <img src="{{ asset('website/assets/images/loc.png') }}" alt="" class="w-25">
                                <div>
                                    <div class="badge-text">{{ $home['coverage']['map_top_badge_title'] }}</div>
                                    <div class="badge-sub text-white">{{ $home['coverage']['map_top_badge_subtitle'] }}</div>
                                </div>
                            </div>
                            <div class="w-35 bg-white p-2 rounded-3 d-flex items-center nbn-cover gap-2 large-shadow" style="bottom: -20px; right: -20px; position: absolute; box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px;">
                                <img src="{{ asset('website/assets/images/check-green.png') }}" alt="" style="width: 30px;">
                                <div>
                                    <strong class="badge-text">{{ $home['coverage']['map_stat_value'] }}</strong> <br>
                                    <small>{{ $home['coverage']['map_stat_label'] }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <h5 class="coverage-header">{{ $home['coverage']['coverage_header'] }}</h5>
                    <div class="mb-3">
                        <div class="row mt-2 mb-2 g-2" >
                            @php
                                $coverageAreas = $home['coverage']['areas'] ?? [];
                                $coverageAreasCount = count($coverageAreas);
                            @endphp
                            @foreach($coverageAreas as $areaIdx => $area)
                                @php
                                    if ($areaIdx === 0) {
                                        $areaIcon = 'website/assets/images/sydney.png';
                                    } elseif ($areaIdx === $coverageAreasCount - 1) {
                                        $areaIcon = 'website/assets/images/add-more-icon.png';
                                    } else {
                                        $areaIcon = 'website/assets/images/location-icon.png';
                                    }
                                @endphp
                                <div class="col-12 col-md-4 col-lg-6">
                                    <div class="coverage-lists large-shadow"><img src="{{ asset($areaIcon) }}" alt=""><p class="sydney-list-name">{{ $area['name'] ?? '' }}</p></div>
                                </div>
                            @endforeach
                        </div>
                       
                    </div>
                    <div class="hot-note">
                        <div class="d-flex align-items-start mb-3">
                            <img src="{{ asset('website/assets/images/wifi-icon.png') }}" alt="" style="width: 40px;" class="me-2 mt-1">
                            <div>
                                <h6 class="mt-2">{{ $home['coverage']['hot_title'] }}</h6>
                                <small class="text-muted">{{ $home['coverage']['hot_subtitle'] }}</small>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap align-items-center">
                            <button onclick="goToHome()" class="btn-hot">{{ $home['coverage']['hot_button'] }}</button>
                        </div>
                    </div>
                </div>
            <div class="row g-3 p-3  mb-2 justify-content-center">
                @php
                    $coverageCardIcons = [
                        'website/assets/images/wifi.png',
                        'website/assets/images/fast-install.png',
                        'website/assets/images/local-support.png',
                    ];
                @endphp
                @foreach($home['coverage']['cards'] as $idx => $card)
                <div class="col-12 col-lg-4">
                    <div style="box-shadow: rgba(100,100,111,0.2) 0px 7px 29px 0px;" class="bg-white rounded-3 p-3 d-flex align-items-center">
                        <div style="border-radius: 12px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;" class="me-3">
                            <img src="{{ asset($coverageCardIcons[$idx] ?? $coverageCardIcons[0]) }}" alt="" style="width: 100%;">
                        </div>
                        <div>
                            <p class="mb-0 fw-semibold" style="font-size: 15px; color: #1a1a2e;">{{ $card['title'] }}</p>
                            <p class="mb-0" style="font-size: 13px; color: #888;">{{ $card['subtitle'] }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            </div>
        </div>
    </section>

    <!-- CONTACT FORM -->
    <section class="contact-section" id="contact" data-contact-url="{{ parse_url(route('contact.store'), PHP_URL_PATH) ?? '/contact' }}" data-csrf="{{ csrf_token() }}">
        <div class="container">
            <div class="text-center mb-5">
                <div class="section-pill">{{ $home['contact']['pill'] }}</div>
                <h2 class="section-title mt-1 mb-2">{{ $home['contact']['title'] }}</h2>
                <p class="section-sub">{{ $home['contact']['subtitle'] }}</p>
            </div>
            <div class="row g-4 align-items-stretch justify-content-center">
                <div class="col-lg-10">
                    <div class="contact-form-card">
                        <div id="contactFormBody">
                            <h4 class="contact-form-title">{{ $home['contact']['form_title'] }}</h4>
                            <p class="contact-form-sub">{{ $home['contact']['form_sub'] }}</p>
                            <div class="form-field-group">

                                {{-- <div class="contact-reason-grid" id="reasonGrid">
                                    <div class="reason-option selected" onclick="selectReason(this)"><i class="fas fa-wifi"></i> Plan enquiry</div>
                                    <div class="reason-option" onclick="selectReason(this)"><i class="fas fa-tools"></i> Technical support</div>
                                    <div class="reason-option" onclick="selectReason(this)"><i class="fas fa-exchange-alt"></i> Switch provider</div>
                                    <div class="reason-option" onclick="selectReason(this)"><i class="fas fa-question-circle"></i> General question</div>
                                </div> --}}
                            </div>
                            <div class="row g-3">
                                <div class="col-sm-6">
                                    <div class="form-field-group mb-0">
                                        <label class="form-field-label">First name <span>*</span></label>
                                        <div class="form-input-icon-wrap">
                                            <i class="fas fa-user field-icon"></i>
                                            <input type="text" class="contact-input" placeholder="e.g. Sarah" id="firstName" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-field-group mb-0">
                                        <label class="form-field-label">Last name <span>*</span></label>
                                        <div class="form-input-icon-wrap">
                                            <i class="fas fa-user field-icon"></i>
                                            <input type="text" class="contact-input" placeholder="e.g. Johnson" id="lastName" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row g-3 mt-0">
                                <div class="col-sm-6">
                                    <div class="form-field-group mb-0">
                                        <label class="form-field-label">Email address <span>*</span></label>
                                        <div class="form-input-icon-wrap">
                                            <i class="fas fa-envelope field-icon"></i>
                                            <input type="email" class="contact-input" placeholder="you@example.com" id="emailInput" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-field-group mb-0">
                                        <label class="form-field-label">Phone number</label>
                                        <div class="form-input-icon-wrap">
                                            <i class="fas fa-phone field-icon"></i>
                                            <input type="number" class="contact-input" placeholder="0412 345 678" id="phoneInput" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-field-group mt-3">
                                <label class="form-field-label">Your address (optional)</label>
                                <div class="form-input-icon-wrap">
                                    <i class="fas fa-map-marker-alt field-icon"></i>
                                    <input type="text" class="contact-input" placeholder="123 George St, Sydney NSW" id="addressInput" />
                                </div>
                            </div>
                            <div class="form-field-group">
                                <label class="form-field-label">Message <span>*</span></label>
                                <textarea class="contact-textarea" placeholder="Tell us how we can help…" id="messageInput"></textarea>
                            </div>
                            <div id="formError" style="display:none; background:#fff0f0; border:1.5px solid #ffd0d0; border-radius:10px; padding:10px 14px; font-size:.83rem; color:var(--red); margin-bottom:14px;">
                                <i class="fas fa-exclamation-circle me-1"></i> <span id="formErrorText"></span>
                            </div>
                            <button class="btn-submit-contact" onclick="submitContactForm()">
                                <i class="fas fa-paper-plane"></i> Send Message
                            </button>
                        </div>
                        <div class="form-success-overlay" id="formSuccess">
                            <div class="success-icon-ring"><i class="fas fa-check"></i></div>
                            <div class="success-title">{{ $home['contact']['success_title'] }}</div>
                            <p class="success-sub">{{ $home['contact']['success_sub'] }}</p>
                            <button class="btn-gives" onclick="resetForm()">Send Another Message</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="faq-section" id="faq">
        <div class="container">
            <div class="text-center mb-5">
                <div class="section-pill-teal">{{ $home['faq']['pill'] }}</div>
                <h2 class="section-title mt-1 mb-2">{{ $home['faq']['title'] }}</h2>
                <p class="section-sub">{{ $home['faq']['subtitle'] }}</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="accordion" id="faqAccordion">
                        @foreach($home['faq']['items'] as $index => $item)
                        @php $collapseId = 'faq-collapse-'.$index; @endphp
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button {{ $index > 0 ? 'collapsed' : '' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}">{{ $item['question'] }}</button>
                            </h2>
                            <div id="{{ $collapseId }}" class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    @if($index === 0)
                                        <div class="faq-first-answer">{{ $item['answer'] }}</div>
                                    @else
                                        {{ $item['answer'] }}
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="cta-section">
        <div class="container">
            <div class="cta-box">
                <h2 class="cta-title">{{ $home['cta']['title'] }}</h2>
                <p class="cta-sub">{{ $home['cta']['subtitle'] }}</p>
                <div class="d-flex gap-3 justify-content-center flex-wrap">
                    <button class="btn-cta-white" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})"><i class="fas fa-phone me-2"></i> {{ $home['cta']['contact_button'] }}</button>
                    <button onclick="goToHome()" class="btn-cta-outline"><i class="fas fa-map-marker-alt me-2"></i> {{ $home['cta']['availability_button'] }}</button>
                </div>
            </div>
        </div>
    </section>
@push('css')
<style>
  @media (min-width: 320px) and (max-width: 767px) {
    .plan-name {
    font-size: 0.9rem !important;
    }
    .plan-price .amount {
    font-size: 2.2rem !important;
    }

}
</style>
@endpush
@push('scripts')
<script>
    (function () {
        var apiKey = @json(config('services.google.maps_api_key'));
        if (!apiKey) return;
        var input = document.getElementById('heroAddressInput');
        if (!input) return;
        function initPlaces() {
            if (typeof google === 'undefined' || !google.maps || !google.maps.places) return;
            var autocomplete = new google.maps.places.Autocomplete(input, {
                types: ['address'],
                componentRestrictions: { country: 'au' },
                fields: ['formatted_address', 'address_components', 'place_id', 'geometry']
            });
            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
                if (place.formatted_address) input.value = place.formatted_address;
                if (place.address_components && place.address_components.length) {
                    var addr = {};
                    place.address_components.forEach(function (c) {
                        if (c.types.indexOf('street_number') !== -1) addr.street_number = c.long_name || '';
                        if (c.types.indexOf('route') !== -1) addr.street_name = c.long_name || '';
                        if (c.types.indexOf('locality') !== -1) addr.suburb = c.long_name || '';
                        if (c.types.indexOf('sublocality') !== -1 && !addr.suburb) addr.suburb = c.long_name || '';
                        if (c.types.indexOf('administrative_area_level_1') !== -1) addr.state = c.short_name || c.long_name || '';
                        if (c.types.indexOf('postal_code') !== -1) addr.postcode = c.long_name || '';
                        if (c.types.indexOf('subpremise') !== -1) addr.unit = c.long_name || '';
                        if (c.types.indexOf('floor') !== -1) addr.level = c.long_name || '';
                        if (c.types.indexOf('premise') !== -1 && !addr.lot_no) addr.lot_no = c.long_name || '';
                    });
                    if (place.formatted_address) {
                        var firstPart = place.formatted_address.split(',')[0] || '';
                        if (!addr.unit) {
                            var slashParts = firstPart.split('/');
                            if (slashParts.length > 1) {
                                var maybeUnit = slashParts[0].trim();
                                if (maybeUnit) addr.unit = maybeUnit;
                            }
                        }
                        if (!addr.level) {
                            var levelMatch = place.formatted_address.match(/\bLevel\s+([A-Za-z0-9-]+)/i);
                            if (levelMatch && levelMatch[1]) addr.level = levelMatch[1].trim();
                        }
                        if (!addr.lot_no) {
                            var lotMatch = place.formatted_address.match(/\bLot\s+([A-Za-z0-9-]+)/i);
                            if (lotMatch && lotMatch[1]) addr.lot_no = lotMatch[1].trim();
                        }
                    }
                    if (addr.street_name && addr.suburb && addr.state && addr.postcode) {
                        input.dataset.serviceAddress = JSON.stringify(addr);
                    } else {
                        delete input.dataset.serviceAddress;
                    }
                } else {
                    delete input.dataset.serviceAddress;
                }
            });
        }
        if (typeof google !== 'undefined' && google.maps && google.maps.places) {
            initPlaces();
            return;
        }
        var s = document.createElement('script');
        s.src = 'https://maps.googleapis.com/maps/api/js?key=' + encodeURIComponent(apiKey) + '&libraries=places&callback=window.__gcPlacesInit';
        s.async = true;
        s.defer = true;
        window.__gcPlacesInit = function () { initPlaces(); };
        document.head.appendChild(s);
    })();
</script>
<script>
    function getProductUrl(type) {
        var section = document.getElementById('pricing');
        if (!section) return '';
        return type === 'nbn' ? (section.getAttribute('data-nbn-url') || '') : (section.getAttribute('data-community-fibre-url') || '');
    }

    var packagesCache = { nbn: null, community_fibre: null };

    function setLoading(show) {
        var el = document.getElementById('packagesLoading');
        var emptyEl = document.getElementById('packagesEmpty');
        if (el) el.style.display = show ? 'flex' : 'none';
        if (emptyEl) emptyEl.style.display = 'none';
    }

    var carouselIndex = { nbnPlans: 0, communityFibrePlans: 0 };
    var PRODUCTS_PER_SLIDE = 4;

    function parseAdditionalInfoFeatures(p) {
        var ai = p && p.additional_info;
        if (!ai || typeof ai !== 'object') ai = {};
        return {
            data_limit: ai.data_limit != null ? String(ai.data_limit).trim() : '',
            fee: ai.fee != null ? String(ai.fee).trim() : '',
            contract: ai.contract != null ? String(ai.contract).trim() : ''
        };
    }

    function buildPlanCardHtml(p, tierLabel, serviceType) {
        var price = typeof p.sale_price === 'number' ? p.sale_price : parseFloat(p.sale_price) || 0;
        var speed = (p.service_speed || '').toString();
        var tech = (p.technology || '').toString().trim();
        var id = (p.id != null) ? p.id : '';
        var desc = (p.description || 'Plan').toString();
        var typeVal = (serviceType === 'community_fibre') ? 'community_fibre' : 'nbn';
        var cardClass = 'plan-card h-100 position-relative';
        var aiF = parseAdditionalInfoFeatures(p);
        return '<div class="' + cardClass + '" style="padding-bottom: 70px;" data-product-id="' + escapeHtml(String(id)) + '" data-description="' + escapeHtml(desc) + '" data-price="' + escapeHtml(String(Math.round(price))) + '" data-type="' + typeVal + '">' +
            '<div class="text-center mb-2 mt-2">' +
            '<div class="plan-name">' + escapeHtml(p.description || 'Plan') + '</div>' +
            '<div class="plan-tier">' + escapeHtml(tierLabel || speed || '') + '</div>' +
            '<div class="plan-price"><span class="dollar">$</span><span class="amount">' + Math.round(price) + '</span><span class="mo">/month</span></div>' +
            '</div>' +
            '<ul class="plan-features">' +
            // (tech ? '<li><i class="fas fa-network-wired feat-icon-teal"></i> ' + escapeHtml(tech) + '</li>' : '') +
            (speed ? '<li><i class="fas fa-wifi feat-icon-teal"></i> ' + escapeHtml(speed) + '</li>' : '') +
            (aiF.data_limit ? '<li><i class="fas fa-infinity feat-icon-teal"></i> ' + escapeHtml(aiF.data_limit) + '</li>' : '') +
            (aiF.fee ? '<li><i class="fas fa-shield-alt feat-icon-teal"></i> ' + escapeHtml(aiF.fee) + '</li>' : '') +
            (aiF.contract ? '<li><i class="fas fa-lock-open feat-icon-teal"></i> ' + escapeHtml(aiF.contract) + '</li>' : '') +
            '</ul>' +
            '<button type="button" class="btn-select btn-select-outline w-75 d-flex justify-content-center position-absolute bottom-0 start-50 translate-middle-x mb-3">Check Address</button>' +
            '</div>';
    }
    function updateHomePlanSelection(selectedCard) {
        var pricing = document.getElementById('pricing');
        var checkoutBar = document.getElementById('homeCheckoutBar');
        if (!pricing) return;

        var cards = pricing.querySelectorAll('.plan-card');

        cards.forEach(function (card) {
            var btn = card.querySelector('.btn-select');
            if (!btn) return;

            // Remove any previous click handlers
            btn.onclick = null;

            btn.addEventListener('click', function handleClick() {
                // Mark selection visually
                cards.forEach(function (c) {
                    var b = c.querySelector('.btn-select');
                    if (c === card) {
                        c.classList.add('plan-card--selected');
                        if (b) { b.classList.add('btn-select--selected'); b.textContent = 'Selected'; }
                    } else {
                        c.classList.remove('plan-card--selected');
                        if (b) { b.classList.remove('btn-select--selected'); b.textContent = 'Check Address'; }
                    }
                });

                // Show checkout bar if exists
                if (checkoutBar) {
                    checkoutBar.classList.add('is-visible');
                    checkoutBar.setAttribute('aria-hidden', 'false');
                }

                // Scroll to #home and focus the heroAddressInput
                var homeSection = document.getElementById('home');
                if (homeSection) {
                    homeSection.scrollIntoView({ behavior: 'smooth', block: 'start' });

                    // Focus the specific input after a short delay
                    setTimeout(function () {
                        var addressInput = document.getElementById('heroAddressInput');
                        if (addressInput) {
                            addressInput.focus({ preventScroll: true });
                        }
                    }, 300); // delay matches scroll
                }

                // Remove listener to prevent duplicates
                btn.removeEventListener('click', handleClick);
            });
        });
    }

    function updateCarouselNav(wrapper, currentIndex, totalSlides) {
        var prev = wrapper.querySelector('.products-carousel-btn--prev');
        var next = wrapper.querySelector('.products-carousel-btn--next');
        if (totalSlides <= 1) {
            if (prev) prev.style.display = 'none';
            if (next) next.style.display = 'none';
            return;
        }
        if (prev) { prev.style.display = 'flex'; prev.classList.toggle('disabled', currentIndex === 0); }
        if (next) { next.style.display = 'flex'; next.classList.toggle('disabled', currentIndex >= totalSlides - 1); }
    }

    function goCarousel(wrapper, direction) {
        var track = wrapper.querySelector('.products-carousel-track');
        var slides = wrapper.querySelectorAll('.products-carousel-slide');
        var total = slides.length;
        if (total <= 1) return;
        var key = wrapper.id;
        var idx = carouselIndex[key] !== undefined ? carouselIndex[key] : 0;
        idx += direction;
        if (idx < 0) idx = 0;
        if (idx >= total) idx = total - 1;
        carouselIndex[key] = idx;
        track.style.transform = 'translateX(-' + (idx * 100) + '%)';
        updateCarouselNav(wrapper, idx, total);
    }

    function renderProductCards(products, containerId, tierLabel, serviceType) {
        var wrapper = document.getElementById(containerId);
        if (!wrapper) return;
        var track = wrapper.querySelector('.products-carousel-track');
        if (!track) return;
        track.innerHTML = '';
        track.style.transform = '';
        if (!products || products.length === 0) {
            var emptyEl = document.getElementById('packagesEmpty');
            if (emptyEl) emptyEl.style.display = 'block';
            wrapper.querySelectorAll('.products-carousel-btn').forEach(function (b) { b.style.display = 'none'; });
            return;
        }
        var emptyEl = document.getElementById('packagesEmpty');
        if (emptyEl) emptyEl.style.display = 'none';
        var serviceTypeVal = serviceType === 'community_fibre' ? 'community_fibre' : 'nbn';
        // Show 1 product per slide on mobile for better appearance
        var isMobile = window.innerWidth <= 767;
        var productsPerSlide = isMobile ? 1 : PRODUCTS_PER_SLIDE;
        
        // Create slides with consistent behavior across all screen sizes
        var chunks = [];
        for (var i = 0; i < products.length; i += productsPerSlide) {
            chunks.push(products.slice(i, i + productsPerSlide));
        }
        chunks.forEach(function (chunk) {
            var slide = document.createElement('div');
            slide.className = 'products-carousel-slide';
            chunk.forEach(function (p) {
                var col = document.createElement('div');
                col.className = isMobile ? 'col-12' : 'col-6 col-md-3';
                col.innerHTML = buildPlanCardHtml(p, tierLabel, serviceTypeVal);
                slide.appendChild(col);
            });
            track.appendChild(slide);
        });
        var totalSlides = Math.ceil(products.length / productsPerSlide);
        carouselIndex[containerId] = 0;
        updateCarouselNav(wrapper, 0, totalSlides);
        
        // Show carousel navigation on mobile for horizontal scrolling
        // No need to hide arrows - users can swipe or use arrows
        
        attachHomePlanSelectListeners(wrapper);
    }

    function attachHomePlanSelectListeners(wrapper) {
        if (!wrapper) return;
        var cards = wrapper.querySelectorAll('.plan-card');
        cards.forEach(function (card) {
            var btn = card.querySelector('.btn-select');
            if (!btn) return;
            btn.addEventListener('click', function () {
                var isSelected = card.classList.contains('plan-card--selected');
                updateHomePlanSelection(isSelected ? null : card);
            });
        });
    }

    function escapeHtml(text) {
        if (!text) return '';
        var div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function loadPackages(type) {
        var isNbn = type === 'nbn';
        var containerId = isNbn ? 'nbnPlans' : 'communityFibrePlans';
        var tierLabel = isNbn ? 'NBN' : 'Community Fibre';
        var url = getProductUrl(type);
        if (!url) {
            var emptyEl = document.getElementById('packagesEmpty');
            if (emptyEl) emptyEl.style.display = 'block';
            return;
        }
        // Avoid mixed content: use same origin/protocol as the page (HTTPS when page is HTTPS)
        try {
            var u = new URL(url);
            url = window.location.origin + u.pathname + (u.search || '');
        } catch (e) {}

        document.getElementById('nbnPlans').style.display = isNbn ? '' : 'none';
        document.getElementById('communityFibrePlans').style.display = isNbn ? 'none' : '';
        document.getElementById('nbnBtn').classList.toggle('active', isNbn);
        document.getElementById('communityFibreBtn').classList.toggle('active', !isNbn);

        if (packagesCache[type]) {
            renderProductCards(packagesCache[type], containerId, tierLabel, type);
            return;
        }

        setLoading(true);
        fetch(url)
            .then(function (res) { return res.json(); })
            .then(function (data) {
                setLoading(false);
                var products = (data && data.products) ? data.products : [];
                if (!Array.isArray(products)) products = [];
                packagesCache[type] = products;
                renderProductCards(products, containerId, tierLabel, type);
            })
            .catch(function (err) {
                setLoading(false);
                var emptyEl = document.getElementById('packagesEmpty');
                if (emptyEl) emptyEl.style.display = 'block';
            });
    }

    function switchServiceType(type) {
        loadPackages(type);
    }

    document.addEventListener('DOMContentLoaded', function () {
        loadPackages('nbn');
        var pricing = document.getElementById('pricing');
        if (pricing) {
            pricing.addEventListener('click', function (e) {
                var prev = e.target.closest('.products-carousel-btn--prev');
                var next = e.target.closest('.products-carousel-btn--next');
                if (prev && !prev.classList.contains('disabled')) {
                    var w = prev.closest('.products-carousel-wrapper');
                    if (w) goCarousel(w, -1);
                }
                if (next && !next.classList.contains('disabled')) {
                    var w = next.closest('.products-carousel-wrapper');
                    if (w) goCarousel(w, 1);
                }
            });
        }
        var homeCheckoutBtn = document.getElementById('homeCheckoutBtn');
        if (homeCheckoutBtn) {
            homeCheckoutBtn.addEventListener('click', function (e) {
                e.preventDefault();
                var pricing = document.getElementById('pricing');
                var sel = pricing ? pricing.querySelector('.plan-card--selected') : null;
                if (!sel) return;
                var productId = sel.getAttribute('data-product-id') || '';
                var description = sel.getAttribute('data-description') || '';
                var price = sel.getAttribute('data-price') || '';
                var type = sel.getAttribute('data-type') || 'nbn';
                var baseUrl = homeCheckoutBtn.getAttribute('data-checkout-url') || '';
                if (!baseUrl) return;
                var params = new URLSearchParams({ product_id: productId, type: type, description: description, price: price });
                window.location.href = baseUrl + '?' + params.toString();
            });
        }
        var heroSection = document.getElementById('home');
        var heroBtn = document.getElementById('heroAddressBtn');
        var heroInput = document.getElementById('heroAddressInput');
        if (heroSection && heroBtn && heroInput) {
            var addressError = document.getElementById('heroAddressError');
            var heroFormWrap = document.getElementById('heroFormWrap');
            var checkLabel = heroSection.getAttribute('data-check-label') || 'Check My Address';
            var checkingHtml = '<span class="hero-btn-loader" aria-hidden="true"></span> ' + (heroSection.getAttribute('data-checking-label') || 'Checking...');
            var emptyAddressMsg = heroSection.getAttribute('data-hero-address-empty') || 'Please enter your address';
            function inferUnitFromAddressText(addressText) {
                var value = (addressText || '').trim();
                if (!value) return '';
                var firstPart = value.split(',')[0] || '';
                var slashParts = firstPart.split('/');
                if (slashParts.length > 1) {
                    var unitCandidate = (slashParts[0] || '').trim();
                    if (unitCandidate) return unitCandidate.toUpperCase();
                }
                var unitMatch = value.match(/\b(?:Unit|U)\s*([A-Za-z0-9-]+)/i);
                if (unitMatch && unitMatch[1]) {
                    return unitMatch[1].trim().toUpperCase();
                }
                return '';
            }
            function showAddressError() {
                if (addressError) {
                    addressError.style.display = 'block';
                }
            }
            function hideAddressError() {
                if (addressError) {
                    addressError.style.display = 'none';
                }
            }
            function resetHeroAddressState() {
                var loaderEl = document.getElementById('fullAddressCheckLoader');
                if (loaderEl) { loaderEl.style.display = 'none'; loaderEl.setAttribute('aria-hidden', 'true'); }
                if (heroFormWrap) heroFormWrap.style.display = '';
                hideAddressError();
                heroBtn.disabled = false;
                heroBtn.classList.remove('is-loading');
                heroBtn.innerHTML = checkLabel;
            }
            resetHeroAddressState();
            window.addEventListener('pageshow', function (e) {
                resetHeroAddressState();
            });
            // Clear error message when user starts typing
            heroInput.addEventListener('input', function () {
                hideAddressError();
            });
            heroBtn.addEventListener('click', function () {
                var address = (heroInput.value || '').trim();
                if (!address) {
                    heroInput.focus();
                    if (addressError) addressError.innerHTML = '<i class="fas fa-exclamation-circle me-1"></i> ' + emptyAddressMsg;
                    showAddressError();
                    return;
                }
                hideAddressError();
                var serviceAddressJson = heroInput.dataset.serviceAddress;
                var serviceAddress = null;
                if (serviceAddressJson) {
                    try {
                        serviceAddress = JSON.parse(serviceAddressJson);
                    } catch (e) {}
                }
                if (!serviceAddress || !serviceAddress.street_name || !serviceAddress.suburb || !serviceAddress.state || !serviceAddress.postcode) {
                    showAddressError();
                    addressError.innerHTML = '<i class="fas fa-exclamation-circle me-1"></i> Please select your address from the dropdown suggestions so we can check both NBN and Community Fibre availability.';
                    return;
                }
                var lookupUrl = heroSection.getAttribute('data-lookup-url');
                if (!lookupUrl) {
                    window.location.href = (heroSection.getAttribute('data-plans-url') || '') + '?address=' + encodeURIComponent(address);
                    return;
                }
                try {
                    var u = new URL(lookupUrl);
                    lookupUrl = window.location.origin + u.pathname + (u.search || '');
                } catch (e) {}
                heroBtn.disabled = true;
                heroBtn.classList.add('is-loading');
                heroBtn.innerHTML = checkingHtml;
                if (typeof window.__startAddressCheckLoader === 'function') {
                    window.__startAddressCheckLoader();
                }
                var csrf = heroSection.getAttribute('data-csrf') || '';
                var inferredUnit = inferUnitFromAddressText(address);
                var payload = {
                    service_address: {
                        lot_no: serviceAddress.lot_no || '',
                        unit: serviceAddress.unit || inferredUnit || '',
                        level: serviceAddress.level || '',
                        street_number: serviceAddress.street_number || '',
                        street_name: serviceAddress.street_name,
                        suburb: serviceAddress.suburb,
                        state: serviceAddress.state,
                        postcode: serviceAddress.postcode
                    }
                };
                var nbnPayload = Object.assign({ service_provider: 'nbn' }, payload);
                var communityFibrePayload = Object.assign({ service_provider: 'community_fibre' }, payload);
                if (typeof console !== 'undefined') {
                    console.log('[Check My Address] NBN payload:', nbnPayload);
                    console.log('[Check My Address] Community Fibre payload:', communityFibrePayload);
                }
                var plansBaseUrl = heroSection.getAttribute('data-plans-url') || '';
                Promise.all([
                    fetch(lookupUrl, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf },
                        body: JSON.stringify(nbnPayload)
                    }).then(function (res) { return res.json().then(function (data) { return { ok: res.ok, data: data }; }); }),
                    fetch(lookupUrl, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf },
                        body: JSON.stringify(communityFibrePayload)
                    }).then(function (res) { return res.json().then(function (data) { return { ok: res.ok, data: data }; }); })
                ]).then(function (results) {
                    heroBtn.disabled = false;
                    heroBtn.classList.remove('is-loading');
                    heroBtn.innerHTML = checkLabel;
                    var locNbn = (results[0].ok && results[0].data.location_id) ? results[0].data.location_id : null;
                    var locCf = (results[1].ok && results[1].data.location_id) ? results[1].data.location_id : null;
                    var displayAddressNbn = (results[0].ok && results[0].data && results[0].data.display_address) ? String(results[0].data.display_address).trim() : '';
                    var displayAddressCf = (results[1].ok && results[1].data && results[1].data.display_address) ? String(results[1].data.display_address).trim() : '';
                    var resolvedDisplayAddress = displayAddressCf || displayAddressNbn || address;
                    if (!locNbn && !locCf) {
                        var msg = (results[0].data && results[0].data.message) ? results[0].data.message : ((results[1].data && results[1].data.message) ? results[1].data.message : 'Service not available at this address. Please try another address.');
                        if (typeof window.__addressCheckApiFailed === 'function') {
                            window.__addressCheckApiFailed(msg);
                        } else {
                            if (heroFormWrap) heroFormWrap.style.display = '';
                            alert(msg);
                        }
                        return;
                    }
                    var params = new URLSearchParams({ address: resolvedDisplayAddress });
                    if (locNbn) params.set('loc_nbn', locNbn);
                    if (locCf) params.set('loc_cf', locCf);
                    if (displayAddressNbn) params.set('address_nbn', displayAddressNbn);
                    if (displayAddressCf) params.set('address_cf', displayAddressCf);
                    var redirectUrl = plansBaseUrl + '?' + params.toString();
                    if (typeof window.__addressCheckApiReady === 'function') {
                        window.__addressCheckApiReady(redirectUrl);
                    } else {
                        window.location.href = redirectUrl;
                    }
                }).catch(function () {
                    heroBtn.disabled = false;
                    heroBtn.classList.remove('is-loading');
                    heroBtn.innerHTML = checkLabel;
                    if (typeof window.__addressCheckApiFailed === 'function') {
                        window.__addressCheckApiFailed('Could not check availability. Please try again.');
                    } else {
                        if (heroFormWrap) heroFormWrap.style.display = '';
                        alert('Could not check availability. Please try again.');
                    }
                });
            });
        }
    });

    function selectReason(el) {
        document.querySelectorAll('#reasonGrid .reason-option').forEach(o => o.classList.remove('selected'));
        el.classList.add('selected');
    }

    function submitContactForm() {
    const section = document.getElementById('contact');
    const url = section && section.dataset.contactUrl ? section.dataset.contactUrl : '';
    const csrf = section && section.dataset.csrf ? section.dataset.csrf : '';

    // ❌ Reason selection removed
    // const reasonEl = document.querySelector('#reasonGrid .reason-option.selected');
    // const reason = reasonEl ? reasonEl.textContent.trim() : '';

    const firstName = document.getElementById('firstName').value.trim();
    const lastName = document.getElementById('lastName').value.trim();
    const email = document.getElementById('emailInput').value.trim();
    const phoneEl = document.getElementById('phoneInput');
    const phone = phoneEl ? phoneEl.value.trim() : '';
    const addressEl = document.getElementById('addressInput');
    const address = addressEl ? addressEl.value.trim() : '';
    const message = document.getElementById('messageInput').value.trim();
    const errEl = document.getElementById('formError');
    const errText = document.getElementById('formErrorText');

    const showError = (msg) => {
        errText.textContent = msg;
        errEl.style.display = 'block';
        errEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
    };

    errEl.style.display = 'none';

    // ❌ Reason validation removed
    // if (!reason) return showError('Please select what we can help you with.');

    if (!firstName || !lastName) return showError('Please enter your full name.');
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return showError('Please enter a valid email address.');
    if (!message) return showError('Please add a message so we know how to help.');

    const btn = document.querySelector('.btn-submit-contact');
    if (btn) btn.disabled = true;

    const body = new URLSearchParams({
        _token: csrf,
        first_name: firstName,
        last_name: lastName,
        email: email,
        phone: phone,
        address: address,
        message: message
    });

    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: body.toString()
    })
    .then(function(r) {
        return r.json().then(function(data) {
            return { ok: r.ok, data: data };
        });
    })
    .then(function(result) {
        if (result.ok && result.data.success) {
            document.getElementById('contactFormBody').style.display = 'none';
            document.getElementById('formSuccess').classList.add('visible');
        } else {
            showError(
                result.data.message ||
                (result.data.errors ? (Object.values(result.data.errors)[0] || 'Something went wrong.') : 'Something went wrong.')
            );
        }
    })
    .catch(function() {
        showError('Something went wrong. Please try again.');
    })
    .finally(function() {
        if (btn) btn.disabled = false;
    });
}

    function resetForm() {
        document.getElementById('contactFormBody').style.display = 'block';
        document.getElementById('formSuccess').classList.remove('visible');
        document.getElementById('firstName').value = '';
        document.getElementById('lastName').value = '';
        document.getElementById('emailInput').value = '';
        // Clear optional fields
        const phoneInput = document.getElementById('phoneInput');
        if (phoneInput) phoneInput.value = '';
        const addressInput = document.getElementById('addressInput');
        if (addressInput) addressInput.value = '';
        document.getElementById('messageInput').value = '';
        document.getElementById('formError').style.display = 'none';
        // Reset reason selection to first option
        document.querySelectorAll('#reasonGrid .reason-option').forEach((o, i) => {
            o.classList.toggle('selected', i === 0);
        });
        // Clear any select/dropdown elements in the contact form (e.g., plan selection)
        const contactFormBody = document.getElementById('contactFormBody');
        if (contactFormBody) {
            const selectElements = contactFormBody.querySelectorAll('select');
            selectElements.forEach(function(select) {
                if (select.selectedIndex > 0) {
                    select.selectedIndex = 0;
                }
                if (select.value) {
                    select.value = '';
                }
            });
        }
    }

    function goToContact() {
        window.location.href = "#contact";
    }
    function goToHome() {
        window.location.href = "#home";
    }
</script>
@endpush

@endsection