@php
    $buttonLabel = $landing->primary_cta_label ?? 'Download App';

    $hasApk = !empty($landing->apk_path);
    $apkUrl = route('landing.downloadApk'); 
    $fallbackUrl = $landing->apk_cta_url ?? null; 

    $version = $landing->apk_version ?? null;
    $size = $landing->apk_size ?? null;
@endphp
<div class="landing-banner" id="home" 
    style="background: linear-gradient(135deg, {{ $landing->gradient_color_1 ?? '#5B46FF' }}, {{ $landing->gradient_color_2 ?? '#E651B3' }});">

  <section class="section">
    <div class="container main-banner-container pb-lg-0">
      <div class="row align-items-center pt-3">

        <div class="col-12 col-md-4 col-lg-5 col-xl-5 col-xxl-5 order-1 order-md-2 mb-4 mb-md-0">
          <div class="landing-main-image landing-heading-img d-flex justify-content-center justify-content-md-end">
            <figure class="phone-figure m-0" aria-hidden="false">

              @if($landing->hero_image)
                    <img src="{{ asset($landing->hero_image) }}" alt="Hero"
                     alt="Reward Point app preview showing dashboard and rewards"
                class="img-fluid phone-mockup"
                loading="lazy"
                width="420"
                height="840">
                @endif
              {{-- <img
                src="{{ asset('/uploads/landing/img1.png') }}"
                srcset="{{ asset('/uploads/landing/img1.png') }} 2x, {{ asset('/uploads/landing/img1.png') }} 1x"
                alt="Reward Point app preview showing dashboard and rewards"
                class="img-fluid phone-mockup"
                loading="lazy"
                width="420"
                height="840"
              > --}}
            </figure>
          </div>
        </div>

        <div class="col-12 col-md-8 col-lg-7 col-xl-7 col-xxl-7 order-2 order-md-1">
          <div class="pt-lg-5 pb-4 text-center text-md-start">
            <div class="mb-3">
              <marquee>
                @if($landing->subheadline)
                  <h6 class="fw-medium text-fixed-white op-9">{{ $landing->subheadline }}</h6>
                @endif
                </marquee>
            </div>

            <h1 class="landing-banner-heading mb-3 text-fixed-white">
              <span class="fw-semibold text-warning">{{ $landing->app_name }}</span>
              &nbsp;— {{ $landing->headline }}
            </h1>

            <p class="fs-16 mb-4 text-fixed-white op-8">
              {{ $landing->description }}
            </p>

            <div class="d-flex flex-column flex-sm-row gap-2 justify-content-center justify-content-md-start">
              {{-- <a href="{{ url('index') }}" id="download" class="btn btn-lg bg-white-transparent px-4 py-2" role="button">
                Download Now
                
              </a> --}}
              @if($hasApk)
                <a href="{{ $apkUrl }}" class="btn btn-light btn-lg" download>
                    {{ $buttonLabel }}
                </a>
            @elseif($fallbackUrl)
                <a href="{{ $fallbackUrl }}" target="_blank" rel="noopener" class="btn btn-light btn-lg">
                    {{ $buttonLabel }}
                </a>
            @else
                <button class="btn btn-light btn-lg" disabled>{{ $buttonLabel }}</button>
            @endif
              {{-- @if($landing->primary_cta_label && $landing->primary_cta_url)
                <a href="{{ $landing->primary_cta_url }}" class="btn btn-light btn-lg">
                  <i class="ri-download-line ms-2 align-middle" aria-hidden="true"></i>  {{ $landing->primary_cta_label }}
                </a>
                @endif --}}
            </div>
          </div>
        </div>

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

<style>
   .landing-banner-heading { font-size: 2rem; line-height: 1.05; font-weight: 700; margin: 0; }
  @media (min-width: 992px) {
    .landing-banner-heading { font-size: 2.6rem; }
  }
  .text-fixed-white { color: #ffffff; }
  .op-8 { opacity: .85; }
  .op-9 { opacity: .95; }

  .phone-figure { max-width: 420px; width: 85%; }
  .phone-mockup { width: 100%; height: auto; display: block; border-radius: 28px; object-fit: cover; box-shadow: 0 20px 60px rgba(28,20,60,0.25); }

  @media (min-width: 768px) {
    .phone-figure { width: 100%; max-width: 420px; }
    .landing-main-image { padding-right: 18px; }
  }

  .bg-white-transparent {
    background: rgba(255,255,255,0.92);
    color: #2b2b2b;
    border-radius: 12px;
    border: none;
  }
  .btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
  }

  #download h2 { font-size: 1.8rem; }
#download img { transition: transform .2s ease; }
#download img:hover { transform: scale(1.05); }
</style>