@extends('website.partials.app')
@section('content')
<!-- HERO CONTENT -->
      <div class="container py-4 py-lg-5">
        <div class="row align-items-center align-items-lg-start g-4 g-lg-5">

          <!-- Left col — aligns with navbar logo -->
          <div class="col-lg-6 text-center text-lg-start order-1 ps-lg-0">
            <div class="mb-3 mb-lg-4 d-inline-block d-lg-block">
              <span
                class="badge rounded-pill border border-success border-opacity-75 text-white fw-bold text-uppercase px-3 py-2 d-inline-flex align-items-center gap-2 bg-dark bg-opacity-50 shadow-sm">
                <i class="bi bi-geo-alt-fill text-primary d-none d-lg-inline"></i>
                Address First Internet Shopping
              </span>
            </div>

            <h1 class="display-4 fw-semibold text-white mb-3 mb-lg-4 lh-sm">
              Find the best NBN or<br>
              Community Fibre plan<br class="d-none d-lg-block">
              for your home.
            </h1>

            <p class="text-white text-opacity-75 mx-auto mx-lg-0 mb-4 small lh-base col-12 col-md-10 col-lg-9 px-0">
              <strong class="text-white">Veltrix</strong> makes broadband simple. Search your address,
              compare available NBN and Community Fibre packages,
              and choose the speed that fits your family, work,
              streaming, and gaming needs.
            </p>

            <div class="d-flex flex-wrap justify-content-center justify-content-lg-start gap-3 mb-2 mb-lg-0">
              <button class="btn btn-light rounded-pill fw-bold px-4 py-2">Check Availability Now</button>
              <button class="btn btn-outline-light rounded-pill fw-medium px-4 py-2 d-none d-lg-inline-block">See Plan
                Preview</button>
            </div>
          </div>

          <!-- Right col — Address Search Card -->
          <div class="col-lg-5 ms-lg-auto d-flex justify-content-center justify-content-lg-end order-2 mt-n4 mt-lg-0 pe-lg-0">

            <div class="card border border-success border-2 shadow-lg rounded-4 w-100 p-3 p-lg-4" id="w3AddressHero"
              data-plans-url="{{ route('website.plans') }}"
              data-lookup-url="{{ route('website.lookup-address') }}"
              data-csrf="{{ csrf_token() }}"
              data-check-label="Search plans"
              data-checking-label="Checking…"
              data-hero-address-empty="Please enter your address"
              data-places-autocomplete="{{ config('services.google.maps_api_key') ? '1' : '0' }}">

              <!-- Header -->
              <div class="d-flex justify-content-between align-items-start gap-2 mb-2 mb-lg-3">
                <div class="text-start">
                  <h5 class="fw-medium text-dark mb-0">Search your address</h5>
                  <p class="text-secondary fw-semibold mb-0 mt-1 small">View available NBN and Community Fibre packages.
                  </p>
                </div>
                <span
                  class="badge rounded-pill text-success bg-success-subtle d-inline-flex align-items-center gap-1 px-2 py-1 flex-shrink-0 small">
                  <i class="bi bi-circle-fill"></i>
                  Live check
                </span>
              </div>

              <!-- Search input (Google Places autocomplete when GOOGLE_MAPS_API_KEY is set) -->
              <div class="row g-2 mb-2 align-items-stretch">
                <div class="col-8">
                  <div class="input-group h-100">
                    <span class="input-group-text bg-light border text-secondary rounded-start-3">
                      <i class="bi bi-geo-alt"></i>
                    </span>
                    <input type="text" id="w3HeroAddressInput" name="address" autocomplete="off"
                      class="form-control bg-light border fw-semibold small rounded-end-0"
                      placeholder="Start typing your street address…">
                  </div>
                </div>
                <div class="col-4">
                  <button type="button" class="btn btn-dark fw-bold rounded-3 w-100 h-100 small py-2"
                    id="w3HeroAddressBtn">Search plans</button>
                </div>
              </div>
              <div id="w3HeroAddressError" class="text-danger small mb-2" style="display:none;" role="alert"></div>
              <p class="text-secondary small mb-3">Choose your address from the map suggestions, then tap Search plans to
                see available packages.</p>

              <!-- Stats -->
              <div class="row g-2 mb-3">
                <div class="col-4">
                  <div class="bg-light border rounded-3 p-2 p-lg-3 h-100">
                    <div class="fs-5 fw-bold text-dark lh-1">20</div>
                    <div class="text-secondary fw-medium small lh-sm mt-1">Suggested packages</div>
                  </div>
                </div>
                <div class="col-4">
                  <div class="bg-light border rounded-3 p-2 p-lg-3 h-100">
                    <div class="fs-5 fw-bold text-dark lh-1">2</div>
                    <div class="text-secondary fw-medium small lh-sm mt-1">Plan categories</div>
                  </div>
                </div>
                <div class="col-4">
                  <div class="bg-light border rounded-3 p-2 p-lg-3 h-100">
                    <div class="fs-5 fw-bold text-dark lh-1">$0</div>
                    <div class="text-secondary fw-medium small lh-sm mt-1">Setup options</div>
                  </div>
                </div>
              </div>

              <!-- Result preview -->
              <div class="bg-dark rounded-4 p-3">
                <div class="d-flex justify-content-between align-items-center gap-2 mb-3">
                  <span class="text-white fw-semibold small">Result preview after address search</span>
                  <span class="badge border border-secondary text-white-50 rounded-pill fw-bold small">EXAMPLE</span>
                </div>
                <div class="row g-2">
                  <div class="col-6">
                    <div
                      class="border border-secondary border-opacity-25 rounded-3 p-2 p-lg-3 bg-white bg-opacity-10 h-100 text-start">
                      <div class="text-white fw-bold text-uppercase small mb-1">NBN Packages</div>
                      <div class="text-white fw-bold fs-3 lh-1">10</div>
                      <div class="text-white small mt-1">25 Mbps to 1000 Mbps</div>
                    </div>
                  </div>
                  <div class="col-6">
                    <div
                      class="border border-secondary border-opacity-25 rounded-3 p-2 p-lg-3 bg-white bg-opacity-10 h-100 text-start">
                      <div class="text-white fw-bold text-uppercase small mb-1">Community Fibre</div>
                      <div class="text-white fw-bold fs-3 lh-1">10</div>
                      <div class="text-white small mt-1">100 Mbps to 5 Gbps</div>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>

        </div>
      </div>

    </div>
  </div>
  <!-- END SECTION 1: HERO -->


  <!-- ══════════════════════════════════════════
       SECTION 2: BRAND TRUST PILLARS
  ══════════════════════════════════════════ -->
  <section class="bg-white py-5">
    <div class="container">

      <!-- Top row -->
      <div class="row align-items-start mb-4 g-4">
        <div class="col-lg-5 text-center text-lg-start">
          <span
            class="d-inline-block badge rounded-pill border border-success border-2 fw-semibold text-dark px-3 py-1 mb-2 bg-light lh-base small">Brand
            Trust Pillars</span>
          <h2 class="display-5 fw-medium text-dark lh-sm mb-0">Fast Broadband With A Connected Heart</h2>
        </div>
        <div class="col-lg-6 offset-lg-1 d-flex align-items-center pt-0">
          <p class="mb-0 text-secondary small lh-base text-center text-lg-start mx-auto mx-lg-0">
            <strong class="text-dark">Veltrix</strong> makes residential broadband entirely effortless. We strip
            away the lock in contracts and hidden fees, delivering a high speed
            network designed for your daily streaming, gaming, and work while
            ensuring your connection leaves a positive local footprint.
          </p>
        </div>
      </div>

      <!-- Stat cards -->
      <div class="row g-3">
        <div class="col-10 col-sm-6 col-lg-3 mx-auto mx-sm-0">
          <div
            class="card border h-100 d-flex flex-row flex-sm-column align-items-center text-start text-sm-center shadow-sm rounded-4 p-4 gap-2 gap-sm-0">
            <div class="d-flex align-items-center justify-content-center flex-shrink-0 mb-0 mb-sm-3">
              <img src="{{ asset('website/assets/image/icon-reliability.png') }}" alt="Broadband Reliability" width="56" height="56"
                class="object-fit-contain">
            </div>
            <div>
              <div class="fs-1 fw-bold text-dark lh-1 mb-1">100%</div>
              <div class="small text-muted lh-sm">Broadband Reliability</div>
            </div>
          </div>
        </div>
        <div class="col-10 col-sm-6 col-lg-3 mx-auto mx-sm-0">
          <div
            class="card border h-100 d-flex flex-row flex-sm-column align-items-center text-start text-sm-center shadow-sm rounded-4 p-4 gap-2 gap-sm-0">
            <div class="d-flex align-items-center justify-content-center flex-shrink-0 mb-0 mb-sm-3">
              <img src="{{ asset('website/assets/image/icon-support.png') }}" alt="Expert Local Support" width="56" height="56"
                class="object-fit-contain">
            </div>
            <div>
              <div class="fs-1 fw-bold text-dark lh-1 mb-1">7/7</div>
              <div class="small text-muted lh-sm">Expert Local Support</div>
            </div>
          </div>
        </div>
        <div class="col-10 col-sm-6 col-lg-3 mx-auto mx-sm-0">
          <div
            class="card border h-100 d-flex flex-row flex-sm-column align-items-center text-start text-sm-center shadow-sm rounded-4 p-4 gap-2 gap-sm-0">
            <div class="d-flex align-items-center justify-content-center flex-shrink-0 mb-0 mb-sm-3">
              <img src="{{ asset('website/assets/image/icon-plans.png') }}" alt="Tailored Home Plans" width="56" height="56" class="object-fit-contain">
            </div>
            <div>
              <div class="fs-1 fw-bold text-dark lh-1 mb-1">20</div>
              <div class="small text-muted lh-sm">Tailored Home Plans</div>
            </div>
          </div>
        </div>
        <div class="col-10 col-sm-6 col-lg-3 mx-auto mx-sm-0">
          <div
            class="card border h-100 d-flex flex-row flex-sm-column align-items-center text-start text-sm-center shadow-sm rounded-4 p-4 gap-2 gap-sm-0">
            <div class="d-flex align-items-center justify-content-center flex-shrink-0 mb-0 mb-sm-3">
              <img src="{{ asset('website/assets/image/icon-contracts.png') }}" alt="Lock In Contracts" width="56" height="56"
                class="object-fit-contain">
            </div>
            <div>
              <div class="fs-1 fw-bold text-dark lh-1 mb-1">0</div>
              <div class="small text-muted lh-sm">Lock In Contracts</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>
  <!-- END SECTION 2 -->


  <!-- ══════════════════════════════════════════
       SECTION 3: DYNAMIC ADDRESS RESULTS PANEL
  ══════════════════════════════════════════ -->
  <section class="bg-light py-2  py-lg-5">
    <div class="container">
      <div class="position-relative overflow-hidden  rounded-4">

        <img src="{{ asset('website/assets/image/DYNAMIC ADDRESS RESULTS PANEL.png') }}" alt="" class="position-absolute top-0 start-0 w-100 h-100 " aria-hidden="true">
        

        <div class="position-relative p-4 p-lg-5">

          <div
            class="d-flex justify-content-center justify-content-lg-between align-items-center mb-4 flex-wrap gap-3">
            <span
              class="d-block d-lg-inline-block badge rounded-pill border border-white border-opacity-25 text-white text-opacity-75 fw-bold px-3 py-2 bg-white bg-opacity-10 text-center text-lg-start w-10 w-lg-auto">Dynamic
              Address Results Panel</span>
            <button class="btn btn-light rounded-pill fw-bold px-4 py-2 shadow d-none d-lg-inline-block">View
              Packages</button>
          </div>

          <h2 class="display-5 fw-medium text-white mb-3 lh-sm text-center text-lg-start">Suggested Packages For Your
            Address</h2>

          <p
            class="text-white small mb-0 text-center text-lg-start d-flex align-items-center justify-content-center justify-content-lg-start gap-1">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0">
              <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" />
              <circle cx="12" cy="9" r="2.5" />
            </svg>
            48 Harbour Road, Sydney NSW 2000
          </p>

          <div class="row row-cols-2 row-cols-lg-4 g-2 mt-2">
            <div class="col">
              <div class="border border-success rounded-3 p-3 h-100 bg-white bg-opacity-10">
                <div class="small fw-medium text-white mb-1">Non Status</div>
                <div class="fs-4 fw-bold text-white mb-1 lh-sm">Available</div>
                <div class="small text-white text-opacity-75">10 Suggested Plans</div>
              </div>
            </div>
            <div class="col">
              <div class="border border-success rounded-3 p-3 h-100 bg-white bg-opacity-10">
                <div class="small fw-medium text-white mb-1">Community Fibre</div>
                <div class="fs-4 fw-bold text-white mb-1 lh-sm">Available</div>
                <div class="small text-white text-opacity-75">10 Suggested Plans</div>
              </div>
            </div>
            <div class="col">
              <div class="border border-success rounded-3 p-3 h-100 bg-white bg-opacity-10">
                <div class="small fw-medium text-white mb-1">Fastest Speed</div>
                <div class="fs-4 fw-bold text-white mb-1 lh-sm">5 Gbps</div>
                <div class="small text-white text-opacity-75">Where Fibre Is Ready</div>
              </div>
            </div>
            <div class="col">
              <div class="border border-success rounded-3 p-3 h-100 bg-white bg-opacity-10">
                <div class="small fw-medium text-white mb-1">Setup</div>
                <div class="fs-4 fw-bold text-white mb-1 lh-sm">$0</div>
                <div class="small text-white text-opacity-75">Selected Package Options</div>
              </div>
            </div>
          </div>

          <div class="d-lg-none text-center mt-4">
            <button class="btn btn-light rounded-pill fw-bold px-5 py-2">View Packages</button>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- END SECTION 3 -->


  <!-- ══════════════════════════════════════════
       SECTION 4: NBN PACKAGES (10 Plans)
  ══════════════════════════════════════════ -->
  <section  class="bg-light py-4 py-md-5">
    <div class="container">

      <h1 class="display-5 fw-medium text-dark mb-3 lh-sm">10 NBN Packages For Everyday Homes</h1>
      <p class="text-dark fst-italic mb-4 lh-base">
        Best For Standard Residential Connections, Family Streaming, Work From Home,
        Gaming, And High Speed NBN Upgrades Where Available.
      </p>

      <!-- ── DESKTOP: normal grid (hidden on mobile) ── -->
      <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xxl-5 g-2 d-none d-md-flex">
        @foreach ($products as $product)  
        <div class="col">
          <div class="card border rounded-4 h-100 d-flex flex-column shadow-sm position-relative p-3">
            <h5 class="fw-bold mb-1 lh-sm plan-title">{{ $product->description }}</h5>
            <p class="text-secondary small mb-2 lh-sm">Speed: {!! parseSpeed($product->service_speed) !!}</p>
            <hr class="my-2 opacity-25">
            <div class="fs-4 fw-bold text-dark mb-3 lh-1">${{ $product->sale_price }} <span class="fs-6 fw-semibold text-secondary">/ Month</span></div>
              <ul class="list-unstyled small flex-grow-1 mb-0">
                <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>Light browsing and emails</span></li>
                <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>1-2 users, basic streaming</span></li>
                <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>Unlimited data included</span></li>
                <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>No lock in contract</span></li>
              </ul>
            <div class="d-flex justify-content-between align-items-center border-top pt-3 mt-3">
              <span class="text-secondary small fw-semibold">0$ Setup Options Available</span>
              <a href="#" onclick="return false;" class="d-inline-flex"><img src="{{ asset('website/assets/image/arrow.png') }}" alt="arrow" width="30" height="30"></a>
            </div>
          </div>
        </div>
        @endforeach
      </div>
      <!-- END DESKTOP GRID -->

      <!-- ── MOBILE: Bootstrap Carousel (hidden on md+) ── -->
      <div class="d-block d-md-none">
        <div id="nbnCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2500">

          <div class="carousel-inner">
            @foreach ($products as $product)
            <div class="carousel-item active">
              <div class="card border rounded-4 mx-auto h-100 d-flex flex-column shadow-sm position-relative p-3">
                <h5 class="fw-bold mb-1 lh-sm plan-title">{{ $product->description }}</h5>
                <p class="text-secondary small mb-2 lh-sm">Speed: {!! parseSpeed($product->service_speed) !!}</p>
          <hr class="my-2 opacity-25">
                <div class="fs-4 fw-bold text-dark mb-3 lh-1">${{ $product->sale_price }} <span class="fs-6 fw-semibold text-secondary">/ Month</span></div>
                <ul class="list-unstyled small flex-grow-1 mb-0">
                  <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>Light browsing and emails</span></li>
                  <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>1-2 users, basic streaming</span></li>
                  <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>Unlimited data included</span></li>
                  <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>No lock in contract</span></li>
                </ul>
                <div class="d-flex justify-content-between align-items-center border-top pt-3 mt-3">
            <span class="text-secondary small fw-semibold">0$ Setup Options Available</span>
                    <a href="#" onclick="return false;" class="d-inline-flex"><img src="{{ asset('website/assets/image/arrow.png') }}" alt="arrow" width="14"
                      height="14"></a>
                </div>
              </div>
            </div>
            @endforeach
          </div>
          <!-- END carousel-inner -->
        </div>
      </div>
      <!-- END MOBILE CAROUSEL -->
    </div>
  </section>
  <!-- END SECTION 4 -->


  <!-- ══════════════════════════════════════════
       SECTION 5: COMMUNITY FIBRE PACKAGES (10 Plans)
  ══════════════════════════════════════════ -->
  <section style="background-color: #DCE1EE;" class=" py-5">
    <div class="container">

      <h1 class="display-5 fw-medium text-dark mb-3 lh-sm">10 Community Fibre Packages For Fibre Ready Addresses</h1>
      <p class="text-dark fst-italic mb-4 lh-base">Best For Symmetrical Uploads, Premium Fibre Performance, Creators, Gaming Households,
        Remote Teams And Future Ready Homes.</p>

      <!-- ── DESKTOP: normal grid (hidden on mobile) ── -->
      <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xxl-5 g-2 d-none d-md-flex">
        @foreach ($communityFibreProducts as $product)
        <div class="col">
            <div class="card border rounded-4 h-100 d-flex flex-column shadow-sm position-relative p-3">
              <h5 class="fw-bold mb-1 lh-sm plan-title">{{ $product->description }}</h5>
              <p class="text-secondary small mb-2 lh-sm">Speed: {!! parseSpeed($product->service_speed) !!}</p>
              <hr class="my-2 opacity-25">
              <div class="fs-4 fw-bold text-dark mb-3 lh-1">${{ $product->sale_price }} <span class="fs-6 fw-semibold text-secondary">/ Month</span></div>
                <ul class="list-unstyled small flex-grow-1 mb-0">
                    <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>A reliable fibre starter</span></li>
                    <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>Better upload than entry NBN</span></li>
                    <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>Unlimited data included</span></li>
                    <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>No lock in contract</span></li>
                </ul>
              <div class="d-flex justify-content-between align-items-center border-top pt-3 mt-3">
                <span class="text-secondary small fw-semibold">0$ Setup Options Available</span>
                <a href="#" onclick="return false;" class="d-inline-flex"><img src="{{ asset('website/assets/image/arrow.png') }}" alt="arrow" width="30"
                    height="30"></a>
              </div>
            </div>
        </div>
        @endforeach
      </div>
      <!-- END DESKTOP GRID -->

      <!-- ── MOBILE: Bootstrap Carousel (hidden on md+) ── -->
      <div class="d-block d-md-none">
        <div id="fibreCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2500">
          <div class="carousel-inner">
            @foreach ($communityFibreProducts as $product)
            <div class="carousel-item active">
              <div class="card border rounded-4 mx-auto w-100 h-100 d-flex flex-column shadow-sm position-relative p-3">
                <h5 class="fw-bold mb-1 lh-sm plan-title">{{ $product->description }}</h5>
                <p class="text-secondary small mb-2 lh-sm">Speed: {!! parseSpeed($product->service_speed) !!}</p>
          <hr class="my-2 opacity-25">
                <div class="fs-4 fw-bold text-dark mb-3 lh-1">${{ $product->sale_price }} <span class="fs-6 fw-semibold text-secondary">/ Month</span></div>
                <ul class="list-unstyled small flex-grow-1 mb-0">
                  <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>A reliable fibre starter</span></li>
                  <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>Better upload than entry NBN</span></li>
                  <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>Unlimited data included</span></li>
                  <li class="d-flex align-items-start gap-2 mb-2"><span class="plan-check flex-shrink-0"><i class="bi bi-check"></i></span><span>No lock in contract</span></li>
                </ul>
                <div class="d-flex justify-content-between align-items-center border-top pt-3 mt-3">
            <span class="text-secondary small fw-semibold">0$ Setup Options Available</span>
                  <a href="#" onclick="return false;" class="d-inline-flex"><img src="{{ asset('website/assets/image/arrow.png') }}" alt="arrow" width="30"
                      height="30"></a>

                </div>
              </div>
            </div>
            @endforeach
          </div>
          <!-- END carousel-inner -->
        </div>
      </div>
      <!-- END MOBILE CAROUSEL -->
    </div>
  </section>
  <!-- END SECTION 5 -->
  <!-- ══════════════════════════════════════════
       SECTION 6: WHY CHOOSE VELTRIX (Mission)
  ══════════════════════════════════════════ -->
  <section class="position-relative overflow-hidden py-5 bg-light">
    <div class="container position-relative z-2">
      <div class="position-absolute top-0 start-0 w-100 display-1 fw-semibold text-secondary text-opacity-25 lh-1 mb-5 user-select-none pe-none text-nowrap ps-2 z-1"
        aria-hidden="true">Our Mission</div>

      <div class="row">
        <div class="col-12 mt-4">
          <h2 class="fw-bold text-dark mb-4 mt-5 text-center text-md-start">Why Australian Homes Choose Veltrix?</h2>
        </div>
      </div>
      <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-3 g-xl-4">
        <div class="col">
          <div class="bg-info bg-opacity-10 rounded-4 p-4 text-center shadow-sm h-100">
            <div class="d-flex align-items-center justify-content-center mb-3 py-2">
              <img src="{{ asset('website/assets/image/lightning-fast-speeds.png') }}" alt="Lightning Fast Speeds" width="64" height="64"
                class="object-fit-contain">
            </div>
            <h3 class="h6 fw-bold text-dark mb-2">Lightning Fast Speeds</h3>
            <p class="small text-secondary mb-0 lh-base">Say Goodbye To Buffering. Stream 4K Content On Multiple
              Screens Simultaneously With Absolute Ease.</p>
          </div>
        </div>

        <div class="col">
          <div class="bg-info bg-opacity-10 rounded-4 p-4 text-center shadow-sm h-100">
            <div class="d-flex align-items-center justify-content-center mb-3 py-2">
              <img src="{{ asset('website/assets/image/solid-reliability.png') }}" alt="Solid Reliability" width="64" height="64"
                class="object-fit-contain">
            </div>
            <h3 class="h6 fw-bold text-dark mb-2">Solid Reliability</h3>
            <p class="small text-secondary mb-0 lh-base">A Rock Solid Residential Network Engineered To Keep Your
              Entire Smart Home Online, 24/7.</p>
          </div>
        </div>

        <div class="col">
          <div class="bg-info bg-opacity-10 rounded-4 p-4 text-center shadow-sm h-100">
            <div class="d-flex align-items-center justify-content-center mb-3 py-2">
              <img src="{{ asset('website/assets/image/localised-support.png') }}" alt="Localised Support" width="64" height="64"
                class="object-fit-contain">
            </div>
            <h3 class="h6 fw-bold text-dark mb-2">Localised Support</h3>
            <p class="small text-secondary mb-0 lh-base">No Endless Phone Queues. Reach Real Network Experts Who
              Understand Your Connection Needs Instantly.</p>
          </div>
        </div>

        <div class="col">
          <div class="bg-info bg-opacity-10 rounded-4 p-4 text-center shadow-sm h-100">
            <div class="d-flex align-items-center justify-content-center mb-3 py-2">
              <img src="{{ asset('website/assets/image/zero-lockin-contracts.png') }}" alt="Zero Lock In Contracts" width="64" height="64"
                class="object-fit-contain">
            </div>
            <h3 class="h6 fw-bold text-dark mb-2">Zero Lock In Contracts</h3>
            <p class="small text-secondary mb-0 lh-base">Complete Freedom To Scale Your Speeds Up Or Down Month To
              Month With Total Transparency.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- END SECTION 6 -->


  <!-- ══════════════════════════════════════════
       SECTION 7: GET STARTED FORM
  ══════════════════════════════════════════ -->
  <section class="bg-light py-4 py-md-5">
    <div class="container">
      <div class="w-100 py-4 py-md-5">
        <div class="row align-items-center g-4">

          <!-- Left / Form Column -->
          <div class="col-md-7">

            <div class="d-none d-md-block mb-4">
              <h1 class="display-5 fw-bold text-dark mb-2 lh-sm">Ready to upgrade your home<br>network experience?
              </h1>
              <p class="text-secondary mb-0 lh-base">
                Take The First Step Toward Hassle Free, Ultra Fast Home<br>
                Internet With Zero Lock In Contracts.
              </p>
            </div>

            <div class="d-md-none overflow-hidden mb-4">
              <img src="{{ asset('website/assets/image/image 1065.png') }}" alt="Network technician" width="130" height="112"
                class="float-end ms-2 mb-2 rounded-3 object-fit-cover">
              <h1 class="h4 fw-normal text-dark mb-0 lh-sm">Ready to upgrade your home network experience?</h1>
            </div>

            <!-- Form -->
            <div class="row g-3">
              <div class="col-sm-6">
                <input type="text" class="form-control bg-white border rounded-3 py-3" placeholder="Full Name" />
              </div>
              <div class="col-sm-6">
                <input type="email" class="form-control bg-white border rounded-3 py-3" placeholder="Email" />
              </div>

              <div class="col-sm-6">
                <div class="input-group">
                  <select class="form-select w-auto flex-shrink-0 rounded-end-0" title="Country code">
                    <option value="+61">🇦🇺 +61</option>
                    <option value="+1">🇺🇸 +1</option>
                    <option value="+44">🇬🇧 +44</option>
                    <option value="+92">🇵🇰 +92</option>
                    <option value="+91">🇮🇳 +91</option>
                    <option value="+971">🇦🇪 +971</option>
                    <option value="+64">🇳🇿 +64</option>
                    <option value="+65">🇸🇬 +65</option>
                    <option value="+60">🇲🇾 +60</option>
                    <option value="+880">🇧🇩 +880</option>
                    <option value="+966">🇸🇦 +966</option>
                    <option value="+49">🇩🇪 +49</option>
                    <option value="+33">🇫🇷 +33</option>
                    <option value="+86">🇨🇳 +86</option>
                    <option value="+81">🇯🇵 +81</option>
                    <option value="+82">🇰🇷 +82</option>
                    <option value="+55">🇧🇷 +55</option>
                    <option value="+27">🇿🇦 +27</option>
                    <option value="+20">🇪🇬 +20</option>
                  </select>
                  <input type="tel" class="form-control rounded-start-0 py-3" placeholder="Phone Number" />
                </div>
              </div>

              <div class="col-sm-6">
                <input type="text" class="form-control bg-white border rounded-3 py-3"
                  placeholder="Home Street Address" />
              </div>

              <div class="col-sm-6">
                <select class="form-select bg-white border rounded-3 py-3">
                  <option value="" disabled selected>Preferred Internet Plan</option>
                  <option>Basic (25 Mbps)</option>
                  <option>Standard (50 Mbps)</option>
                  <option>Fast (100 Mbps)</option>
                  <option>Ultra (250 Mbps)</option>
                  <option>Gigabit (1000 Mbps)</option>
                </select>
              </div>

              <div class="col-sm-6">
                <input type="text" class="form-control bg-white border rounded-3 py-3"
                  placeholder="Current Provider (Optional)" />
              </div>

              <!-- DESKTOP: checkbox → textarea → button -->
              <div class="col-12 d-none d-md-block">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="privacyCheckDesktop" checked />
                  <label class="form-check-label small text-secondary" for="privacyCheckDesktop">
                    By selecting this you agree to our <a href="#" class="link-primary text-decoration-none">Privacy
                      Policy</a>.
                  </label>
                </div>
              </div>

              <div class="col-12">
                <textarea class="form-control bg-white border rounded-3 py-3" rows="4"
                  placeholder="Drop your message"></textarea>
              </div>

              <!-- MOBILE: checkbox below textarea -->
              <div class="col-12 d-block d-md-none">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="privacyCheckMobile" checked />
                  <label class="form-check-label small text-secondary" for="privacyCheckMobile">
                    By selecting this you agree to our <a href="#" class="link-primary text-decoration-none">Privacy
                      Policy</a>.
                  </label>
                </div>
              </div>

              <div class="col-12 text-md-start text-center">
                <button class="btn btn-dark fw-bold rounded-3 px-4 py-3 w-75 w-md-auto">Check Availability &amp; Get
                  Started</button>
              </div>
            </div>

          </div>

          <!-- Right Image (desktop only) -->
          <div class="col-md-5 d-none d-md-block">
            <img src="{{ asset('website/assets/image/image 1065.png') }}" alt="Network technician" class="img-fluid rounded-4 object-fit-cover w-100">
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- END SECTION 7 -->


  <!-- ══════════════════════════════════════════
     SECTION 8: FAQ
══════════════════════════════════════════ -->
  <div class="bg-white">
    <section class="bg-light pb-5">
      <div class="container">
        <div class="bg-white rounded-4 shadow p-4 p-md-5 mt-n4 mt-md-n5 position-relative z-2">

          <div class="small text-secondary fw-medium mb-1">Packages Questions</div>
          <h2 class="fw-bolder text-dark mb-4">Help Users Choose Faster</h2>

          <div class="accordion accordion-flush" id="faqAccordion">

            <div class="accordion-item border-bottom">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed fw-medium py-3 shadow-none bg-white" type="button"
                  data-bs-toggle="collapse" data-bs-target="#faq1">
                  What is the main difference between NBN and Community Fibre packages?
                </button>
              </h2>
              <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body pt-0 pb-4 text-secondary lh-base">
                  NBN packages utilize Australia's standard national broadband network infrastructure, which is
                  available
                  across most residential addresses. Community Fibre packages run on localized, premium fibre specific
                  infrastructure deployed by Veltrix, engineered specifically for ultra high performance and faster
                  upload capacities.
                </div>
              </div>
            </div>

            <div class="accordion-item border-bottom">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed fw-medium py-3 shadow-none bg-white" type="button"
                  data-bs-toggle="collapse" data-bs-target="#faq2">
                  Why are the Community Fibre upload speeds so much faster?
                </button>
              </h2>
              <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body pt-0 pb-4 text-secondary lh-base">
                  Our Community Fibre network offers symmetrical or near symmetrical speeds, meaning data uploads almost
                  as fast as it downloads. This is ideal for smooth video backups, intensive online gaming latency,
                  and
                  seamless remote professional workflows.
                </div>
              </div>
            </div>

            <div class="accordion-item border-bottom">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed fw-medium py-3 shadow-none bg-white" type="button"
                  data-bs-toggle="collapse" data-bs-target="#faq3">
                  Is there a penalty for changing my plan later on?
                </button>
              </h2>
              <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body pt-0 pb-4 text-secondary lh-base">
                  Not at all. Every single plan we offer features zero lock in contracts. This gives you the complete
                  flexibility to upgrade or downgrade your package speed tier as your family or workspace needs
                  evolve.
                </div>
              </div>
            </div>

            <div class="accordion-item border-bottom">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed fw-medium py-3 shadow-none bg-white" type="button"
                  data-bs-toggle="collapse" data-bs-target="#faq4">
                  Which speed tier is recommended for a standard family household?
                </button>
              </h2>
              <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body pt-0 pb-4 text-secondary lh-base">
                  For standard households with multiple devices streaming, working, and gaming simultaneously, we
                  recommend starting with our 100 Mbps plans, such as NBN Family 100. Power users and creators heavily
                  utilizing cloud uploads should look toward our 250 Mbps or 500 Mbps fibre options.
                </div>
              </div>
            </div>

            <div class="accordion-item border-bottom">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed fw-medium py-3 shadow-none bg-white" type="button"
                  data-bs-toggle="collapse" data-bs-target="#faq5">
                  Do I need a technician to visit my house to switch to Veltrix?
                </button>
              </h2>
              <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body pt-0 pb-4 text-secondary lh-base">
                  If your address has an existing active connection to the network line, the switch is handled
                  completely
                  remotely by our local support team. Once you select your plan, your service can typically be activated
                  online without requiring an on site technician appointment.
                </div>
              </div>
            </div>

            <div class="accordion-item border-0">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed fw-medium py-3 shadow-none bg-white" type="button"
                  data-bs-toggle="collapse" data-bs-target="#faq6">
                  How does my plan choice contribute to the local community?
                </button>
              </h2>
              <div id="faq6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body pt-0 pb-4 text-secondary lh-base">
                  Veltrix operates with a commercial experience built on a clear emotional purpose. A portion of our
                  net
                  profits directly funds local community initiatives, meaning every plan you choose serves as both a
                  high
                  performance connectivity decision and a proactive social decision to support your local area.
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- END SECTION 8 -->

@push('css')
<style>
  /* Google Places dropdown attaches to body */
  .pac-container { z-index: 10060 !important; font-family: inherit; }
</style>
@endpush

@push('scripts')
<script>
(function () {
  var apiKey = @json(config('services.google.maps_api_key'));
  if (!apiKey) return;
  var input = document.getElementById('w3HeroAddressInput');
  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&loading=async&callback=window.__w3GcPlacesInit';
  s.async = true;
  s.defer = true;
  window.__w3GcPlacesInit = function () { initPlaces(); };
  document.head.appendChild(s);
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var heroSection = document.getElementById('w3AddressHero');
  var heroBtn = document.getElementById('w3HeroAddressBtn');
  var heroInput = document.getElementById('w3HeroAddressInput');
  if (!heroSection || !heroBtn || !heroInput) return;

  var addressError = document.getElementById('w3HeroAddressError');
  var checkLabel = heroSection.getAttribute('data-check-label') || 'Search plans';
  var checkingHtml = '<span class="spinner-border spinner-border-sm me-1" role="status" 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() {
    hideAddressError();
    heroBtn.disabled = false;
    heroBtn.innerHTML = checkLabel;
  }
  resetHeroAddressState();
  window.addEventListener('pageshow', resetHeroAddressState);

  heroInput.addEventListener('input', function () {
    hideAddressError();
    delete heroInput.dataset.serviceAddress;
  });

  heroBtn.addEventListener('click', function () {
    var address = (heroInput.value || '').trim();
    if (!address) {
      heroInput.focus();
      if (addressError) {
        addressError.innerHTML = '<i class="bi bi-exclamation-circle me-1"></i>' + emptyAddressMsg;
      }
      showAddressError();
      return;
    }
    hideAddressError();
    var serviceAddress = null;
    try {
      if (heroInput.dataset.serviceAddress) {
        serviceAddress = JSON.parse(heroInput.dataset.serviceAddress);
      }
    } catch (e) {}
    if (!serviceAddress || !serviceAddress.street_name || !serviceAddress.suburb || !serviceAddress.state || !serviceAddress.postcode) {
      showAddressError();
      var mapsOff = heroSection.getAttribute('data-places-autocomplete') !== '1';
      var pickMsg = mapsOff
        ? 'Map address suggestions are not configured. Add GOOGLE_MAPS_API_KEY and enable Places API, then pick an address from the list.'
        : 'Please select your address from the dropdown suggestions so we can check NBN and Community Fibre availability.';
      if (addressError) {
        addressError.innerHTML = '<i class="bi bi-exclamation-circle me-1"></i>' + pickMsg;
      }
      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.innerHTML = checkingHtml;

    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);
    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) {
      resetHeroAddressState();
      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 (addressError) {
          addressError.innerHTML = '<i class="bi bi-exclamation-circle me-1"></i>' + msg;
        }
        showAddressError();
        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);
      window.location.href = plansBaseUrl + '?' + params.toString();
    }).catch(function () {
      resetHeroAddressState();
      if (addressError) {
        addressError.innerHTML = '<i class="bi bi-exclamation-circle me-1"></i>Could not check availability. Please try again.';
      }
      showAddressError();
    });
  });
});
</script>
@endpush
@endsection