@extends('layouts.app')

@section('content')

<link rel="stylesheet" href="https://unpkg.com/swiper@9/swiper-bundle.min.css">
<style>
  .swiper { width: 100%; max-width: 100%; }
  .swiper-slide img { width: 100%; height: auto; display: block; }
  /* চাইলে নির্দিষ্ট অনুপাত চান:
  .mySwiper { aspect-ratio: 16 / 6; }
  .mySwiper .swiper-slide { height: 100%; }
  .mySwiper img { height: 100%; object-fit: cover; }
  */
</style>
  {{-- Tailwind via CDN (already included? then remove this) --}}
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

  <style>
    :root {
      --brand: #2BA2A2;
      /* main brand */
      --brand-700: #208b8b;
      /* darker */
      --brand-500: #37B3B3;
      /* lighter */
      --brand-400: #57C3C3;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(16px) scale(.98)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-6px)
      }
    }

    .in {
      animation: rise .6s cubic-bezier(.21, 1, .21, 1) both
    }

    .floaty {
      animation: float 5.5s ease-in-out infinite
    }

    .no-scrollbar::-webkit-scrollbar {
      display: none
    }
  </style>

  <main class="relative min-h-screen overflow-x-hidden bg-gradient-to-b from-[#ECF8F8] via-[#F3FBFB] to-white">
    {{-- background blobs --}}
    <div class="pointer-events-none absolute -top-24 -right-24 h-72 w-72 rounded-full bg-[var(--brand-400)]/20 blur-3xl">
    </div>
    <div
      class="pointer-events-none absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-[var(--brand-500)]/20 blur-3xl">
    </div>

    <div class="mx-auto w-full max-w-md px-4 py-6">
      {{-- Intro / CTA --}}
      <section class="in relative overflow-hidden rounded-3xl bg-[var(--brand)] p-5 text-white shadow-2xl">
        <div class="absolute -right-14 -top-16 h-56 w-56 rounded-full bg-white/10 blur-2xl"></div>

      <div class="flex items-center gap-4 relative z-10">
  <div class="floaty grid h-14 w-14 place-items-center rounded-2xl bg-white/20 backdrop-blur">
    {{-- shield icon --}}
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2.25l7.5 3v6.75c0 5.25-3.82 8.64-7.5 9.75-3.68-1.11-7.5-4.5-7.5-9.75v-6.75l7.5-3z"/>
    </svg>
  </div>

  <div class="flex-1">
    @php $companySetup = \App\Models\CompanySetup::first(); @endphp
    <h1 class="text-2xl font-extrabold tracking-tight">{{ $companySetup->company_name ?? 'N/A' }}</h1>
    <p class="text-xs/5 opacity-90">দ্রুত, নিরাপদ ও স্বচ্ছ লেনদেন</p>
  </div>
 

 @php $upload_app = \App\Models\UploadApp::first(); @endphp
  <a href="{{ asset('storage/'.$upload_app->upload_apk) }}"
     class="group inline-flex items-center gap-1 rounded-full bg-white/95 px-4 py-2 text-sm font-semibold text-[var(--brand-700)] shadow hover:shadow-lg transition relative z-10 cursor-pointer"
     download
     target="_blank" rel="noopener">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition group-hover:translate-x-0.5"
         viewBox="0 0 20 20" fill="currentColor">
      <path d="M3 10a1 1 0 011-1h9.586l-3.293-3.293A1 1 0 0111 4.293l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 01-1-1z"/>
    </svg>
    ইনস্টল (APK)
  </a>
</div>


        {{-- mini stats --}}
        <div class="mt-4 grid grid-cols-3 gap-2 text-center">
          <div class="rounded-xl bg-white/15 px-2 py-2">
            <div class="text-sm font-bold">1M+</div>
            <div class="text-[10px] opacity-90">লেনদেন</div>
          </div>
          <div class="rounded-xl bg-white/15 px-2 py-2">
            <div class="text-sm font-bold">120+</div>
            <div class="text-[10px] opacity-90">পার্টনার</div>
          </div>
          <div class="rounded-xl bg-white/15 px-2 py-2">
            <div class="text-sm font-bold">24/7</div>
            <div class="text-[10px] opacity-90">সাপোর্ট</div>
          </div>
        </div>
      </section>

      <div class="swiper mySwiper" style="display: inline-block; margin-bottom: 10px !important; margin-top: 30px!important;">
            <div class="swiper-wrapper">
                @php
                    $banners = \App\Models\Banner::get();
                  @endphp
                @foreach ($banners as $banner)
                    <div class="swiper-slide">
                        <img style="height: 200px!important;" src="{{ asset('storage/' . $banner->image_path) }}" alt="banner">
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>

      {{-- OUR BENEFITS — SINGLE COLUMN --}}
      <section class="in mt-6 rounded-3xl bg-gradient-to-b from-[#E8F6F6] to-white p-4 ring-1 ring-[var(--brand-400)]/30">
        <h3 class="mb-3 text-center text-base font-semibold text-[var(--brand-700)]">আমাদের সুবিধা</h3>

        @php
          $services = [
            ['title' => 'ইনস্ট্যান্ট ট্রান্সফার', 'desc' => 'সেকেন্ডেই টাকা পৌঁছে দিন।', 'grad' => 'from-[var(--brand-500)] to-[var(--brand-700)]', 'path' => 'M13 2L3 14h7l-1 8 10-12h-7l1-8z'],
            ['title' => 'ব্যাংক-গ্রেড নিরাপত্তা', 'desc' => 'এন্ড-টু-এন্ড এনক্রিপশন।', 'grad' => 'from-amber-400 to-orange-500', 'path' => 'M12 2l8 3v6c0 5-3.6 8.2-8 9-4.4-.8-8-4-8-9V5l8-3z'],
            ['title' => 'রিপোর্ট & স্টেটমেন্ট', 'desc' => 'ডাউনলোড/ফিল্টার সহ।', 'grad' => 'from-violet-500 to-fuchsia-500', 'path' => 'M4 19h16v2H4zM6 10h3v7H6zM11 6h3v11h-3zM16 13h3v4h-3z'],
            ['title' => 'রিয়েল-টাইম অ্যালার্ট', 'desc' => 'পেমেন্ট স্ট্যাটাস আপডেট।', 'grad' => 'from-sky-400 to-cyan-500', 'path' => 'M12 22a2.5 2.5 0 002.45-2h-4.9A2.5 2.5 0 0012 22zM18 16v-5a6 6 0 10-12 0v5l-2 2h16l-2-2z'],
          ];
        @endphp

        <div class="space-y-3">
          @foreach($services as $s)
            <div
              class="group flex items-start gap-3 rounded-2xl bg-white p-4 shadow ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-lg">
              <div
                class="floaty grid h-12 w-12 flex-none place-items-center rounded-xl bg-gradient-to-br {{ $s['grad'] }} text-white shadow">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                  <path d="{{ $s['path'] }}" />
                </svg>
              </div>
              <div class="min-w-0">
                <h4 class="truncate text-sm font-semibold text-slate-900">{{ $s['title'] }}</h4>
                <p class="text-xs text-slate-600">{{ $s['desc'] }}</p>
              </div>
              <div class="ml-auto hidden sm:block">
                <span
                  class="inline-flex items-center rounded-full bg-gradient-to-r from-[var(--brand-400)]/20 to-[var(--brand-500)]/20 px-2 py-1 text-[10px] font-medium text-[var(--brand-700)]">Details</span>
              </div>
            </div>
          @endforeach
        </div>
      </section>

      {{-- STORE BUTTONS --}}
      <section class="in mt-6">
        <h3 class="mb-2 text-center text-sm font-semibold text-slate-700">অফিশিয়াল স্টোর</h3>
        <div class="grid grid-cols-2 gap-3">
          <a href="#"
            class="group inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-700 px-4 py-3 text-white shadow-lg ring-1 ring-black/10 transition hover:translate-y-[-1px]">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
              <path d="M8 5v14l11-7L8 5z" />
            </svg>
            <div class="text-left">
              <div class="text-[10px] opacity-80">GET IT ON</div>
              <div class="text-sm font-semibold -mt-0.5">Google Play</div>
            </div>
          </a>
          <a href="#"
            class="group inline-flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-br from-white to-slate-100 px-4 py-3 text-slate-900 shadow-lg ring-1 ring-black/5 transition hover:translate-y-[-1px]">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M16.4 1.43a5 5 0 01-1.54 3.49 4.3 4.3 0 01-3.26 1.48 4.67 4.67 0 011.57-3.58A4.35 4.35 0 0116.4 1.43zM20.4 17.08c-.38.88-.84 1.7-1.37 2.47-.72 1.04-1.31 1.76-1.77 2.14-.7.64-1.45.97-2.25.99-.58 0-1.28-.17-2.11-.52-.83-.35-1.6-.53-2.33-.53-.77 0-1.57.18-2.41.53-.83.35-1.51.53-2.04.54-.78.03-1.56-.3-2.33-.99-.5-.44-1.12-1.14-1.86-2.11C-1.01 12.76 1.91 6.83 6.19 6.64c.9-.05 1.65.17 2.27.66.5.39 1.09.59 1.75.6.62 0 1.2-.2 1.72-.6.77-.61 1.55-.86 2.34-.74.87.14 1.61.48 2.21 1.04-.88.53-1.31 1.27-1.31 2.22 0 .88.33 1.62.98 2.22.43.41.9.62 1.42.63.55.02 1.1-.18 1.65-.61.49-.39 1.06-.59 1.71-.6.13 0 .27.01.41.04.1.02.26.06.48.12.01 1.02-.2 2.01-.63 2.96z" />
            </svg>
            <div class="text-left">
              <div class="text-[10px] opacity-70">Download on the</div>
              <div class="text-sm font-semibold -mt-0.5">App Store</div>
            </div>
          </a>
        </div>
      </section>

      {{-- SCAN / QR — RESPONSIVE (two-column on md+) --}}
      <section class="in mt-6 rounded-3xl bg-white/95 p-5 shadow-xl ring-1 ring-slate-100">
        <h3 class="text-center text-base font-semibold text-slate-800">স্ক্যান করে ডাউনলোড করুন</h3>

        <div class="mx-auto mt-4 grid max-w-xl grid-cols-1 items-center gap-5 md:max-w-none md:grid-cols-2">
          {{-- QR --}}
          <div class="grid place-items-center">
            <div
              class="rounded-2xl bg-gradient-to-br from-[var(--brand-400)]/15 to-[var(--brand-500)]/15 p-3 ring-1 ring-[var(--brand-400)]/30">
              <img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https%3A%2F%2Fexample.com"
                alt="App QR" class="size-40 rounded-md shadow-inner sm:size-48 md:size-56 lg:size-64 object-contain" />
            </div>
          </div>

          {{-- Text + actions --}}
          <div class="text-center md:text-left">
            <p class="text-sm text-slate-600">
              ক্যামেরা দিয়ে স্ক্যান করুন অথবা নিচের স্টোর বাটনে ক্লিক করুন। ধীর নেটওয়ার্কে ইমেজ লোড হতে সময় লাগতে পারে।
            </p>
            <div class="mt-3 flex flex-col items-center gap-2 sm:flex-row md:justify-start">
              <a href="#"
                class="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-br from-slate-900 to-slate-700 px-4 py-2 text-white shadow ring-1 ring-black/10 transition hover:translate-y-[-1px]">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7L8 5z" />
                </svg>
                <span class="text-sm font-semibold">Google Play</span>
              </a>
              <a href="#"
                class="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-br from-white to-slate-100 px-4 py-2 text-slate-900 shadow ring-1 ring-black/5 transition hover:translate-y-[-1px]">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                  <path
                    d="M16.4 1.43a5 5 0 01-1.54 3.49 4.3 4.3 0 01-3.26 1.48 4.67 4.67 0 011.57-3.58A4.35 4.35 0 0116.4 1.43zM20.4 17.08c-.38.88-.84 1.7-1.37 2.47-.72 1.04-1.31 1.76-1.77 2.14-.7.64-1.45.97-2.25.99-.58 0-1.28-.17-2.11-.52-.83-.35-1.6-.53-2.33-.53-.77 0-1.57.18-2.41.53-.83.35-1.51.53-2.04.54-.78.03-1.56-.3-2.33-.99-.5-.44-1.12-1.14-1.86-2.11C-1.01 12.76 1.91 6.83 6.19 6.64c.9-.05 1.65.17 2.27.66.5.39 1.09.59 1.75.6.62 0 1.2-.2 1.72-.6.77-.61 1.55-.86 2.34-.74.87.14 1.61.48 2.21 1.04-.88.53-1.31 1.27-1.31 2.22 0 .88.33 1.62.98 2.22.43.41.9.62 1.42.63.55.02 1.1-.18 1.65-.61.49-.39 1.06-.59 1.71-.6.13 0 .27.01.41.04.1.02.26.06.48.12.01 1.02-.2 2.01-.63 2.96z" />
                </svg>
                <span class="text-sm font-semibold">App Store</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {{-- FOOTER --}}
      <footer class="mt-6 grid place-items-center gap-2">
        <p class="text-[11px] text-slate-500">© 2025 {{ $companySetup->company_name ?? 'N/A' }}. সর্বস্বত্ব সংরক্ষিত।</p>
        <div class="flex items-center gap-3">
          @php $icons = ['twitter', 'facebook', 'instagram']; @endphp
          @foreach($icons as $s)
            <a href="#"
              class="rounded-full bg-gradient-to-br from-slate-100 to-slate-200 p-2 text-slate-700 shadow transition hover:-translate-y-0.5">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
                @if($s === 'twitter')
                  <path
                    d="M22.46 6c-.77.35-1.6.58-2.46.69a4.29 4.29 0 001.88-2.37 8.59 8.59 0 01-2.72 1.04 4.28 4.28 0 00-7.29 3.9A12.15 12.15 0 013 4.67a4.28 4.28 0 001.33 5.71c-.65-.02-1.27-.2-1.8-.5v.05a4.28 4.28 0 003.43 4.19c-.56.15-1.14.18-1.71.07a4.29 4.29 0 004 2.97A8.6 8.6 0 012 19.54a12.14 12.14 0 006.56 1.92c7.88 0 12.2-6.53 12.2-12.2 0-.18 0-.36-.01-.54A8.7 8.7 0 0022.46 6z" />
                @elseif($s === 'facebook')
                  <path
                    d="M12 2.04c-5.5 0-9.96 4.46-9.96 9.96 0 4.41 3.6 8.06 8.28 8.94v-6.32H7.9V12h2.42V9.8c0-2.4 1.43-3.73 3.62-3.73 1.05 0 2.15.19 2.15.19v2.36h-1.21c-1.19 0-1.56.74-1.56 1.49V12h2.66ল-.42 2.62h-2.24v6.32c4.68-.88 8.28-4.53 8.28-8.94 0-5.5-4.46-9.96-9.96-9.96z" />
                @else
                  <path
                    d="M12 2C6.48 2 2 6.48 2 12a10 10 0 006.84 9.5v-6.72H7.1V12h1.74V9.86c0-1.72 1.02-2.67 2.57-2.67.74 0 1.51.13 1.51.13v1.66h-.85c-.84 0-1.1.52-1.1 1.05V12h1.87l-.3 2.78h-1.57V21.5A10 10 0 0022 12c0-5.52-4.48-10-10-10z" />
                @endif
              </svg>
            </a>
          @endforeach
        </div>
      </footer>
    </div>
  </main>

  <script>
    // Slider: autoplay + thumbnail jump
    const slider = document.getElementById('promo');
    const dots = document.querySelectorAll('.dot');
    const thumbs = document.querySelectorAll('[data-slide]');
    let i = 0;
    function go(n) {
      const total = slider.children.length;
      i = (n + total) % total;
      slider.scrollTo({ left: slider.clientWidth * i, behavior: 'smooth' });
      dots.forEach((d, idx) => d.className = 'dot ' + (idx === i ? 'h-1.5 w-6 rounded-full bg-[var(--brand-500)]' : 'h-1.5 w-1.5 rounded-full bg-slate-300'));
    }
    let t = setInterval(() => go(i + 1), 3200);
    slider.addEventListener('pointerdown', () => clearInterval(t));
    thumbs.forEach(btn => btn.addEventListener('click', () => { clearInterval(t); go(+btn.dataset.slide); }));
    window.addEventListener('resize', () => go(i));
  </script>



    <script src="https://unpkg.com/swiper@9/swiper-bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // যদি পেজে একটাই স্লাইডার থাকে:
    const swiper = new Swiper('.mySwiper', {
      slidesPerView: 1,
      spaceBetween: 12,
      loop: true,
      autoplay: { delay: 4000, disableOnInteraction: false },
      pagination: { el: '.swiper-pagination', clickable: true },
      // চাইলে effect: 'fade',
      // navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
    });
  });
</script>
@endsection