@extends('website.partials.app')
@section('content')
      <!-- ADDRESS RESULTS PANEL -->
      <div class="py-4 py-lg-5" id="vxAddressPanel">
        <div class="container">
          <div class="d-flex flex-column align-items-center text-center">

            <span class="badge rounded-pill border border-primary border-opacity-50 text-white text-opacity-75 fw-semibold px-4 py-2 mb-4 bg-white bg-opacity-10 d-inline-flex align-items-center gap-2">
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
                <circle cx="5" cy="5" r="4" stroke="rgba(255,255,255,0.5)" stroke-width="1" />
                <circle cx="5" cy="5" r="2" fill="#38e5c4" />
              </svg>
              Dynamic Address Results Panel
            </span>

            <h2 class="display-3 fw-bold text-white mb-3 lh-sm col-12 col-md-10 col-lg-8 px-2">Suggested Packages For Your Address</h2>

            <p class="text-white fw-medium mb-4 d-flex align-items-center justify-content-center gap-2 small fs-6 fs-md-5">
              <img src="{{ url('website/assets/image/location.png') }}" alt="location" width="19" height="24" class="opacity-50 flex-shrink-0">
              <span id="vxAddressText">48 Harbour Road, Sydney NSW 2000</span>
            </p>

            <div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-3 col-12 col-lg-10 col-xl-8 mb-4">
              <div class="col">
                <div class="border border-info border-opacity-50 rounded-3 p-3 h-100 bg-white bg-opacity-10 text-start">
                  <div class="small fw-medium text-white text-uppercase mb-1">Status</div>
                  <div class="fs-3 fw-bold text-white mb-1 lh-sm">Available</div>
                  <div class="small text-white">10 Suggested Plans</div>
                </div>
              </div>
              <div class="col">
                <div class="border border-info border-opacity-50 rounded-3 p-3 h-100 bg-white bg-opacity-10 text-start">
                  <div class="small fw-medium text-white text-uppercase mb-1">Community Fibre</div>
                  <div class="fs-3 fw-bold text-white mb-1 lh-sm">Available</div>
                  <div class="small text-white">10 Suggested Plans</div>
                </div>
              </div>
              <div class="col">
                <div class="border border-info border-opacity-50 rounded-3 p-3 h-100 bg-white bg-opacity-10 text-start">
                  <div class="small fw-medium text-white text-uppercase mb-1">Fastest Speed</div>
                  <div class="fs-3 fw-bold text-white mb-1 lh-sm">5 Gbps</div>
                  <div class="small text-white">Where Fibre Is Ready</div>
                </div>
              </div>
              <div class="col">
                <div class="border border-info border-opacity-50 rounded-3 p-3 h-100 bg-white bg-opacity-10 text-start">
                  <div class="small fw-medium text-white text-uppercase mb-1">Packages</div>
                  <div class="fs-3 fw-bold text-white mb-1 lh-sm">10</div>
                  <div class="small text-white">NBN Packages</div>
                </div>
              </div>
            </div>

            <button class="btn btn-outline-light rounded-2 fw-semibold px-5 py-2" id="vxBtnChangeAddress">
              Change Address
            </button>

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

      <!-- HERO CONTENT (hidden until Change Address) -->
      <div class="container py-3 py-lg-4 d-none" id="vxHeroContent">
        <div class="row align-items-center g-4 g-lg-5 py-2 py-lg-3">

          <div class="col-lg-6 text-center text-lg-start">
            <div class="mb-4 d-inline-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">
                <svg width="11" height="15" viewBox="0 0 10 14" fill="none" aria-hidden="true">
                  <path d="M6 1L1 8H5.5L4 13L9 6H4.5L6 1Z" fill="#6366f1" />
                </svg>
                ADDRESS FIRST INTERNET SHOPPING
              </span>
            </div>

            <h1 class="display-4 fw-semibold text-white mb-4 lh-sm">
              Find the best NBN or<br class="d-none d-lg-block">
              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">
              <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>

          <div class="col-lg-6 d-flex justify-content-center justify-content-lg-end">
            <img src="{{ url('website/assets/image/hero-rightside-image.png') }}" alt="Search your address card"
              class="img-fluid rounded-4 shadow-lg border border-success border-2 col-11 col-md-10 col-lg-12">
          </div>

        </div>
      </div>

    </div>
  </div>

  <script>
    document.getElementById('vxBtnChangeAddress').addEventListener('click', function () {
      document.getElementById('vxAddressPanel').classList.add('d-none');
      document.getElementById('vxHeroContent').classList.remove('d-none');
    });
  </script>

  <!-- SECTION 4: NBN PACKAGES -->
  <section class="bg-white py-4 py-md-5">
    <div class="container">

      <div class="d-flex flex-column flex-lg-row justify-content-lg-between align-items-center align-items-lg-start gap-3 gap-lg-5 mb-4 mb-md-5">
        <div class="col-lg-6 text-center text-lg-start">
          <span class="badge rounded-pill bg-light border text-secondary fw-semibold px-3 py-1 mb-3">NBN Packages</span>
          <h1 class="display-5 fw-medium text-dark mb-0 lh-sm text-center text-lg-start mx-auto px-3 px-md-0">
            10 NBN Packages<br>For Everyday Homes
          </h1>
        </div>
        <div class="col-lg-5 pt-lg-2 text-center text-lg-start">
          <p class="text-dark mb-0 lh-base">
            Best For Standard Residential Connections, Family
            Streaming, Work From Home, Gaming, And High
            Speed NBN Upgrades Where Available.
          </p>
        </div>
      </div>

      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3 d-none d-md-flex mb-0 mb-lg-3">
        @foreach ($initialProductsNbn as $nbnProduct)  
        <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 text-black mb-1 lh-sm">{{ $nbnProduct['description'] ?? '—' }}</h5>
            <p class="text-secondary small mb-2 lh-sm">Speed: {!! parseSpeed($nbnProduct['service_speed']) !!}</p>
            <hr class="my-2 opacity-25">
            <div class="fs-4 fw-bold text-dark mb-3 lh-1">${{ $nbnProduct['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"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>Light browsing and emails</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>1-2 users, basic streaming</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>Unlimited data included</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><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="detail.html" class="d-inline-flex"><img src="{{ url('website/assets/image/arrow.png') }}" alt="arrow" width="30" height="30"></a>
            </div>
          </div>
        </div>
        @endforeach
      </div>
      <div class="d-block d-md-none">
        <div id="nbn2Carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2500">
          <div class="carousel-inner">
            @foreach ($initialProductsNbn as $nbnProduct)
            <div class="carousel-item{{ $loop->first ? ' active' : '' }}">
              <div class="px-3 pb-4 col-10 mx-auto">
          <div class="card border rounded-4 h-100 d-flex flex-column shadow-sm position-relative p-3">
            
            <h5 class="fw-bold text-black mb-1 lh-sm">{{ $nbnProduct['description'] ?? '—' }}</h5>
            <p class="text-secondary small mb-2 lh-sm">Speed: {!! parseSpeed($nbnProduct['service_speed']) !!}</p>
            <hr class="my-2 opacity-25">
            <div class="fs-4 fw-bold text-dark mb-3 lh-1">${{ $nbnProduct['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"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>Light browsing and emails</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>1-2 users, basic streaming</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>Unlimited data included</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><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="detail.html" class="d-inline-flex"><img src="{{ url('website/assets/image/arrow.png') }}" alt="arrow" width="30" height="30"></a>
            </div>
          </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
      </div>

    </div>
  </section>


  <!-- SECTION 5: COMMUNITY FIBRE PACKAGES -->
  <section style="background-color: #EFF5F8;" class=" py-4 py-md-5">
    <div class="container">

      <div class="d-flex flex-column flex-lg-row justify-content-lg-between align-items-start gap-3 gap-lg-5 mb-4 mb-md-5">
        <div class="col-lg-6 text-center text-lg-start">
          <span class="badge rounded-pill bg-light border text-secondary fw-semibold px-3 py-1 mb-3">Community Fibre Packages</span>
          <h1 class="display-5 fw-medium text-dark mb-0 lh-sm">10 Community Fibre Packages For Fibre Ready Addresses</h1>
        </div>
        <div class="col-lg-5 pt-lg-2 text-center text-lg-start">
          <p class="text-dark mb-0 lh-base">
            Best For Symmetrical Uploads, Premium Fibre Performance, Creators, Gaming
            Households, Remote Teams And Future Ready Homes.
          </p>
        </div>
      </div>

      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3 d-none d-md-flex mb-0 mb-lg-3">
      @foreach ($initialProductsCf as $product)
      <div class="col d-none d-md-block">
          <div class="card border rounded-4 h-100 d-flex flex-column shadow-sm position-relative p-3">
            <h5 class="fw-bold text-black mb-1 lh-sm">{{ $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"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>A reliable fibre starter</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>Better upload than entry NBN</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>Unlimited data included</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><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="detail.html" class="d-inline-flex"><img src="{{ url('website/assets/image/arrow.png') }}" alt="arrow" width="30" height="30"></a>
            </div>
          </div>
        </div>
        @endforeach
      </div>
      {{-- Mobile carousel must sit outside the d-none d-md-flex row or it stays hidden on small screens --}}
      <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 ($initialProductsCf as $product)
            <div class="carousel-item{{ $loop->first ? ' active' : '' }}">
              <div class="px-3 pb-4 col-10 mx-auto">
          <div class="card border rounded-4 h-100 d-flex flex-column shadow-sm position-relative p-3">
            
            <h5 class="fw-bold text-black mb-1 lh-sm">{{ $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"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>A reliable fibre starter</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>Better upload than entry NBN</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><span>Unlimited data included</span></li>
              <li class="d-flex align-items-start gap-2 mb-2"><i class="bi bi-check-lg bg-black text-white rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0 p-1 lh-1"></i><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="detail.html" class="d-inline-flex"><img src="{{ url('website/assets/image/arrow.png') }}" alt="arrow" width="30" height="30"></a>
            </div>
          </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
      </div>

    </div>
  </section>


  <!-- SECTION 8: FAQ -->
  <section class="bg-light py-4 py-md-5">
    <div class="container">
      <div class="bg-white rounded-4 shadow p-4 p-md-5">

        <div class="small text-primary fw-medium mb-1">FAQ's</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>
@endsection