@extends('frontend.app')

@section('content')

@php
use App\Models\Information;
$info = \Cache::remember('info_home', 3600, function () {
return Information::first();
});


$whatsappNumber = preg_replace('/[^0-9]/', '', $info->whats_num ?? '');

$encodedMessage = urlencode(
'আসসালামু আলাইকুম, আমি আপনার সার্ভিস সম্পর্কে বিস্তারিত জানতে চাই।'
);
@endphp


<style>
  :root {
    --primary-foreground: hsl(0, 0%, 100%);
    --accent: #f59f0a;
    --accent-foreground: hsl(0, 0%, 100%);

  }

  .text-accent {
    color: #f59f0a;
  }

  /* Popular Product Header */
  .popular_product {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin: 5% 0 2%;
    color: rgb(220 108 9 / 15%);
  }

  .popular_product b {
    background-color: currentColor;
    display: block;
    flex: 1;
    height: 2px;
    opacity: .1;
  }

  .popular_product span {
    font-size: 24px;
    font-family: 'Hind Siliguri', sans-serif;
    margin: 0 15px;
    color: #00276C;
    font-weight: 800;
  }

  /* Hero Slider Styles */
  .hero-banner {
    position: relative;
    overflow: hidden;
  }

  .hero-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
  }

  .bg-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(48px);
  }

  .bg-blob-1 {
    top: 40px;
    left: 40px;
    width: 128px;
    height: 128px;
    background: var(--accent);
  }

  .bg-blob-2 {
    bottom: 40px;
    right: 40px;
    width: 192px;
    height: 192px;
    background: var(--primary-foreground);
  }

  .bg-blob-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 384px;
    height: 384px;
    background: hsla(38, 92%, 50%, 0.5);
  }

  .embla {
    overflow: hidden;
    position: relative;
  }

  .embla__container {
    display: flex;
  }

  .embla__slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
  }

  .hero-content {
    padding: 4rem 0;
    position: relative;
    z-index: 10;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }

  .hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }

  .hero-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    font-family: 'Hind Siliguri', sans-serif;
  }

  .btn-lg {
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
  }

  .gradient-accent {
    background: linear-gradient(135deg, #f59f0a 0%, #d97706 100%);
    color: white;
  }

  .btn-ghost-light {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
  }
  a{
    text-decoration: none;
  }

  /* Floating Animations */
  @keyframes float {

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

    50% {
      transform: translateY(-15px);
    }
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  /* Category Card Styles */
  .hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-scale:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  /* Category Horizontal Scroll */
  .cat-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
  }

  .cat-scroll {
    gap: 1rem;
    scroll-snap-type: x proximity;
  }

  .cat-item {
    flex: 0 0 auto;
    width: 110px;
    scroll-snap-align: start;
  }

  .cat-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .cat-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  .cat-scroll-wrapper::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
  }

  .cat-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #d97706;
  }

  .cat-scroll-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #f1f1f1;
  }

  @media (min-width: 768px) {
    .cat-item {
      width: 140px;
    }
  }

  @media (min-width: 1200px) {
    .cat-item {
      width: 150px;
    }
  }

  /* Database Image Slider Styles */
  .db-slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* new */
  .embla__slide {
    flex: 0 0 100%;
    min-width: 0;
  }

  .hero-content {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 10;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }

  .hero-text {
    text-align: center;
  }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background-color: hsla(38, 92%, 50%, 0.2);
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .hero-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-foreground);
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    color: hsla(0, 0%, 100%, 0.8);
    font-size: 1.125rem;
    margin-bottom: 2rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2.5rem;
  }

  .btn-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
  }

  .btn-lg.gradient-accent {
    color: var(--accent-foreground);
  }

  .btn-lg.gradient-accent:hover {
    opacity: 0.9;
  }

  .btn-ghost-light {
    border: 2px solid hsla(0, 0%, 100%, 0.5);
    background-color: hsla(0, 0%, 100%, 0.1);
    color: var(--primary-foreground);
  }

  .btn-ghost-light:hover {
    background-color: hsla(0, 0%, 100%, 0.2);
  }

  .hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  .stat-item {
    text-align: center;
  }

  .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
  }

  .stat-label {
    font-size: 0.875rem;
    color: hsla(0, 0%, 100%, 0.7);
  }

  .hero-visual {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
  }

  .floating-card {
    position: absolute;
    background: white;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 8px 32px hsla(263, 70%, 50%, 0.16);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 10;
  }

  .card-1 {
    top: -32px;
    left: -32px;
  }

  .card-2 {
    bottom: -16px;
    right: -16px;
  }

  .floating-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }

  .floating-card-text {
    display: flex;
    flex-direction: column;
  }

  .floating-card-title {
    font-weight: 700;
    color: hsl(270, 50%, 10%);
  }

  .floating-card-subtitle {
    font-size: 0.875rem;
  }

  .card-1 .floating-card-subtitle {
    color: var(--accent);
    font-weight: 700;
  }

  .card-2 .floating-card-subtitle {
    color: hsl(270, 10%, 45%);
  }

  .visual-circle {
    width: 288px;
    height: 288px;
    border-radius: 9999px;
    background: linear-gradient(to bottom right,
        hsla(38, 92%, 50%, 0.3),
        hsla(263, 70%, 60%, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
  }

  .visual-circle.shipping {
    background: linear-gradient(to bottom right,
        hsla(0, 84%, 60%, 0.2),
        hsla(263, 70%, 50%, 0.3));
  }

  .visual-circle.fashion {
    background: linear-gradient(to bottom right,
        hsla(328, 85%, 70%, 0.2),
        hsla(263, 70%, 50%, 0.3));
  }

  .visual-inner {
    width: 224px;
    height: 224px;
    border-radius: 9999px;
    background: linear-gradient(to bottom right,
        hsla(38, 92%, 50%, 0.5),
        hsla(263, 70%, 50%, 0.5));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .visual-inner-shipping {
    width: 224px;
    height: 224px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shipping-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    color: var(--accent);
  }

  .shipping-icon.icon-1 {
    top: 20%;
    left: 10%;
  }

  .shipping-icon.icon-2 {
    top: 10%;
    right: 20%;
    color: var(--primary-foreground);
    width: 64px;
    height: 64px;
  }

  .shipping-icon.icon-3 {
    bottom: 30%;
    right: 15%;
    color: hsl(38, 92%, 60%);
    width: 56px;
    height: 56px;
  }

  .visual-emoji {
    font-size: 4rem;
  }

  .btn-primary {
    background: linear-gradient(135deg, rgb(245, 159, 10), rgb(220, 108, 9));
    color: white;
    border: none;

  }

  @media (max-width: 768px) {
    .hero-grid {
      text-align: center;
      padding-left: 20px;
      padding-right: 20px
    }

    .hero-title {
      font-size: 1.8rem;
    }

    .hero-visual {
      display: none;
    }

    /* .db-slider-img { height: 250px; } */
    .hero-buttons {
      flex-direction: column;
    }

    .btn-lg {

      font-size: 1rem;

    }


  }



  @media (min-width: 768px) {

    .hero-content {
      padding: 5rem 0;
    }

    .hero-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .hero-text {
      text-align: left;
    }

    .hero-title {
      font-size: 3rem;
    }

    .hero-subtitle {
      max-width: 450px;
      margin-left: 0;
    }

    .hero-buttons {
      flex-direction: row;
      justify-content: flex-start;
    }

    .hero-stats {
      justify-content: flex-start;
    }

    .hero-visual {
      display: flex;
    }


  }

  @media (min-width: 992px) {

    .hero-grid {
      grid-template-columns: 1fr 1fr;
    }

    .hero-title {
      font-size: 3.5rem;
    }

    .col-xl-custom {
      flex: 0 0 12.5%;
      max-width: 12.5%;
    }
  }

  @media (min-width: 1024px) {
    .hero-title {
      font-size: 3.75rem;
    }

    .visual-circle {
      width: 384px;
      height: 384px;
    }

    .visual-inner {
      width: 288px;
      height: 288px;
    }

    .visual-inner-shipping {
      width: 288px;
      height: 288px;
    }

    .visual-emoji {
      font-size: 5rem;
    }
  }
</style>

<main class="main-wrapper">
  <section class="hero-banner hero-bg">
    <div class="hero-bg-pattern">
      <div class="bg-blob bg-blob-1"></div>
      <div class="bg-blob bg-blob-2"></div>
      <div class="bg-blob bg-blob-3"></div>
    </div>

    <div class="embla" id="mainEmbla">
      <div class="embla__container">

        <!-- <div class="embla__slide">
  <div class="container hero-content">
    <div class="hero-grid">
      <div class="hero-text">
        <div class="hero-badge">
          <i data-lucide="zap" class="icon-sm"></i>
          <span class="font-bengali">সরাসরি চীন থেকে আমদানিকৃত</span>
        </div>

        <h2 class="hero-title">
          স্মার্ট <span class="text-accent">আল্ট্রা-থিন</span><br />
          সিলভার <span class="text-accent">সেন্সর লাইট</span>
        </h2>

        <p class="hero-subtitle font-bengali">
          অন্ধকারে আপনার পা ফেলার আগেই জ্বলে উঠবে এই ম্যাজিক লাইট! প্রিমিয়াম সিলভার ফিনিশ এবং আল্ট্রা-থিন ডিজাইন আপনার ঘরকে দেবে রাজকীয় আভিজাত্য। কোনো তারের ঝামেলা নেই, দীর্ঘস্থায়ী ব্যাটারি ব্যাকআপ।
        </p>

        <div class="hero-buttons">
          
          <a href="https://rsallivio.com/product-show/381" class="w-100 btn-lg gradient-accent">
            <span class="font-bengali">অর্ডার&nbsp;করুন</span>
            <i data-lucide="shopping-cart" class="icon-md"></i>
        </a>
          
          <a href="https://wa.me/+88{{ $whatsappNumber }}?text={{ $encodedMessage }}" target="_blank"  class="btn-lg w-100 btn-ghost-light">
            <i data-lucide="info" class="icon-md"></i>
            <span class="font-bengali">বিস্তারিত&nbsp;জানুন</span>
          </a>
        </div>

        <div class="hero-stats">
          <div class="stat-item">
            <div class="stat-value">স্মার্ট</div>
            <div class="stat-label font-bengali">মোশন সেন্সর</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">৯৫%</div>
            <div class="stat-label font-bengali">বিদ্যুৎ সাশ্রয়ী</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">সিলভার</div>
            <div class="stat-label font-bengali">প্রিমিয়াম বডি</div>
          </div>
        </div>
      </div>

      <div class="hero-visual">
        <div class="floating-card card-1 animate-float">
          <div class="floating-card-icon gradient-accent">🔋</div>
          <div class="floating-card-text">
            <div class="floating-card-title font-bengali">
              রিচার্জেবল
            </div>
            <div class="floating-card-subtitle font-bengali">
              ইউএসবি চার্জিং
            </div>
          </div>
        </div>
        <div
          class="floating-card card-2 animate-float"
          style="animation-delay: 1s"
        >
          <div class="floating-card-icon gradient-primary">📏</div>
          <div class="floating-card-text">
            <div class="floating-card-title font-bengali">
              আল্ট্রা-থিন
            </div>
            <div class="floating-card-subtitle font-bengali">
              স্লিম ও লাক্সারি
            </div>
          </div>
        </div>
        <div class="visual-circle sensor-light">
          <div class="visual-inner animate-pulse-soft" style="background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(192,192,192,0.1) 100%);">
            <div class="visual-emoji" style="text-shadow: 0 0 20px rgba(255,255,255,0.8);">💡</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> -->

        <div class="embla__slide">
          <div class="container hero-content">
            <div class="hero-grid">
              <div class="hero-text">
                <div class="hero-badge">
                  <i data-lucide="wind" class="icon-sm"></i>
                  <span class="font-bengali">পোর্টেবল হাই-স্পিড টেকনোলজি</span>
                </div>

                <h2 class="hero-title">
                  টার্বো <span class="text-accent">পোর্টেবল</span><br />
                  হাই-স্পিড <span class="text-accent">ফ্যান</span>
                </h2>

                <p class="hero-subtitle font-bengali">
                  গরমে মুক্তি পান সেকেন্ডেই! ১১,০০০ RPM ব্রাশলেস মোটর এবং ৫ স্পিড কন্ট্রোল সহ এই স্মার্ট ফ্যান হাতে, গলায় বা ডেস্কে — যেকোনোভাবে ব্যবহার করুন। ডিজিটাল LED ডিসপ্লে ও Type-C চার্জিং সহ।
                </p>

                <div class="hero-buttons">

                  <a href="https://rsallivio.com/product-show/386" class="w-100 btn-lg gradient-accent">
                    <span class="font-bengali">অর্ডার&nbsp;করুন</span>
                    <i data-lucide="shopping-cart" class="icon-md"></i>
                  </a>

                  <a href="https://wa.me/+88{{ $whatsappNumber }}?text={{ $encodedMessage }}" target="_blank" class="btn-lg w-100 btn-ghost-light">
                    <i data-lucide="info" class="icon-md"></i>
                    <span class="font-bengali">বিস্তারিত&nbsp;জানুন</span>
                  </a>
                </div>

                <div class="hero-stats">
                  <div class="stat-item">
                    <div class="stat-value">১১K</div>
                    <div class="stat-label font-bengali">RPM মোটর</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">১৮০০</div>
                    <div class="stat-label font-bengali">mAh ব্যাটারি</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">৩-ইন-১</div>
                    <div class="stat-label font-bengali">ভার্সেটাইল ব্যবহার</div>
                  </div>
                </div>
              </div>

              <div class="hero-visual">
                <div class="floating-card card-1 animate-float">
                  <div class="floating-card-icon gradient-accent">🔋</div>
                  <div class="floating-card-text">
                    <div class="floating-card-title font-bengali">
                      ৩-৬ ঘণ্টা
                    </div>
                    <div class="floating-card-subtitle font-bengali">
                      ব্যাটারি ব্যাকআপ
                    </div>
                  </div>
                </div>
                <div
                  class="floating-card card-2 animate-float"
                  style="animation-delay: 1s">
                  <div class="floating-card-icon gradient-primary">⚡</div>
                  <div class="floating-card-text">
                    <div class="floating-card-title font-bengali">
                      ৫ স্পিড গিয়ার
                    </div>
                    <div class="floating-card-subtitle font-bengali">
                      Type-C চার্জিং
                    </div>
                  </div>
                </div>
                <div class="visual-circle turbo-fan">
                  <div class="visual-inner animate-pulse-soft" style="background: radial-gradient(circle, rgba(0,198,255,0.2) 0%, rgba(123,92,255,0.1) 100%);">
                    <div class="visual-emoji" style="text-shadow: 0 0 20px rgba(0,198,255,0.8);">🌀</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="embla__slide ">
          <div class="container hero-content">
            <div class="hero-grid">
              <div class="hero-text">
                <div class="hero-badge">
                  <i data-lucide="sparkles" class="icon-sm"></i>
                  <span class="font-bengali">সীমিত সময়ের অফার!</span>
                </div>

                <h2 class="hero-title">
                  কোয়ালিটি <span class="text-accent">সেরা হলে,</span><br />
                  ব্যবসায় হবে <span class="text-accent">জয় জয়কার</span>
                </h2>

                <p class="hero-subtitle font-bengali">
                  আমরা শুধু প্রোডাক্ট বিক্রি করি না, দিচ্ছি দীর্ঘস্থায়ী সম্পর্কের নিশ্চয়তা। সরাসরি ইমপোর্ট করা সেরা প্রোডাক্টটি পান আপনার দোরগোড়ায়।
                </p>

                <div class="hero-buttons">
                  <a href="https://rsallivio.com/product-show/386" class="w-100 btn-lg gradient-accent">
                    <span class="font-bengali">এখনই&nbsp;কিনুন</span>
                    <i data-lucide="arrow-right" class="icon-md"></i>
                  </a>

                  <a href="https://wa.me/+88{{ $whatsappNumber }}?text={{ $encodedMessage }}" target="_blank" class="btn-lg w-100 btn-ghost-light">
                    <i data-lucide="message-square" class="icon-md"></i>
                    <span class="font-bengali">সরাসরি&nbsp;প্রশ্ন&nbsp;করুন</span>
                  </a>
                </div>

                <div class="hero-stats">
                  <div class="stat-item">
                    <div class="stat-value">১০০%</div>
                    <div class="stat-label font-bengali">নিরাপদ শপিং</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">২৪/৭</div>
                    <div class="stat-label font-bengali">সাপোর্ট</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">০৫</div>
                    <div class="stat-label font-bengali">স্টার রেটিং</div>
                  </div>
                </div>
              </div>

              <div class="hero-visual">
                <div class="floating-card card-1 animate-float">
                  <div class="floating-card-icon gradient-accent">⚡</div>
                  <div class="floating-card-text">
                    <div class="floating-card-title font-bengali">
                      দ্রুত ডেলিভারি
                    </div>
                    <div class="floating-card-subtitle font-bengali">
                      সারা বাংলাদেশে
                    </div>
                  </div>
                </div>
                <div
                  class="floating-card card-2 animate-float"
                  style="animation-delay: 1s">
                  <div class="floating-card-icon gradient-primary">🤝</div>
                  <div class="floating-card-text">
                    <div class="floating-card-title font-bengali">
                      সন্তুষ্টির গ্যারান্টি
                    </div>
                    <div class="floating-card-subtitle font-bengali">পণ্য দেখে নেওয়ার সুযোগ</div>
                  </div>
                </div>
                <div class="visual-circle">
                  <div class="visual-inner animate-pulse-soft">
                    <div class="visual-emoji">🛒</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="embla__slide ">
          <div class="container hero-content">
            <div class="hero-grid">
              <div class="hero-text">
                <div class="hero-badge">
                  <i data-lucide="sparkles" class="icon-sm"></i>
                  <span class="font-bengali">সরাসরি চীন থেকে আমদানিকৃত</span>
                </div>

                <h2 class="hero-title">
                  <span class="text-accent">প্রিমিয়াম</span> কোয়ালিটি<br />
                  উইনিং <span class="text-accent">প্রোডাক্ট</span>
                </h2>

                <p class="hero-subtitle font-bengali">
                  চীন থেকে সরাসরি আমদানিকৃত সেরা মানের পণ্য। কোয়ালিটি খারাপ হলে বিনা শর্তে পণ্য ফেরত দেওয়ার শতভাগ নিশ্চয়তা দিচ্ছি আমরা!
                </p>

                <div class="hero-buttons">
                  <a href="https://rsallivio.com/product-show/386" class="w-100 btn-lg gradient-accent">
                    <span class="font-bengali">অর্ডার&nbsp;করুন</span>
                    <i data-lucide="arrow-right" class="icon-md"></i>
                  </a>

                  <a href="https://wa.me/+88{{ $whatsappNumber }}?text={{ $encodedMessage }}" target="_blank" class="btn-lg w-100 btn-ghost-light">
                    <i data-lucide="phone" class="icon-md"></i>
                    <span class="font-bengali">যোগাযোগ&nbsp;করুন</span>
                  </a>
                </div>

                <div class="hero-stats">
                  <div class="stat-item">
                    <div class="stat-value">১০০%</div>
                    <div class="stat-label font-bengali">অরিজিনাল পণ্য</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">গ্যারান্টি</div>
                    <div class="stat-label font-bengali">সহজ ফেরত</div>
                  </div>
                  <div class="stat-item">
                    <div class="stat-value">বেস্ট</div>
                    <div class="stat-label font-bengali">মার্কেট প্রাইজ</div>
                  </div>
                </div>
              </div>

              <div class="hero-visual">
                <div class="floating-card card-1 animate-float">
                  <div class="floating-card-icon gradient-accent">🛡️</div>
                  <div class="floating-card-text">
                    <div class="floating-card-title font-bengali">
                      মান নিশ্চিত
                    </div>
                    <div class="floating-card-subtitle font-bengali">
                      যাচাইকৃত পণ্য
                    </div>
                  </div>
                </div>
                <div
                  class="floating-card card-2 animate-float"
                  style="animation-delay: 1s">
                  <div class="floating-card-icon gradient-primary">📞</div>
                  <div class="floating-card-text">
                    <div class="floating-card-title font-bengali">
                      সার্পোট
                    </div>
                    <div class="floating-card-subtitle font-bengali">
                      সরাসরি যোগাযোগ
                    </div>
                  </div>
                </div>
                <div class="visual-circle shipping">
                  <div class="visual-inner-shipping">
                    <i
                      data-lucide="ship"
                      class="shipping-icon icon-1 animate-bounce-soft"></i>
                    <i
                      data-lucide="plane"
                      class="shipping-icon icon-2 animate-float"></i>
                    <i data-lucide="package" class="shipping-icon icon-3"></i>
                    <div class="visual-emoji">🇨🇳</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- @foreach($sliders as $s)
                <div class="embla__slide">
                    <a href="{{ $s->link }}">
                        <picture>
                            <source media="(max-width: 767px)" srcset="{{ getImage('mobile_sliders', $s->mobile_image) }}">
                            <img src="{{ getImage('sliders', $s->image) }}" class="db-slider-img" alt="Slider Image">
                        </picture>
                    </a>
                </div>
                @endforeach -->

      </div>

      <button class="carousel-control-prev" id="prevBtn" type="button" aria-label="Previous Slide" style="z-index: 20; border: none; ">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" id="nextBtn" type="button" aria-label="next Slide" style="z-index: 20; border: none; ">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </section>


  <!-- category -->
  <div class="container-fluid my-5">
    <div class="popular_product" style="text-align:center;margin-bottom:2.5rem;">
      <h2 style="font-size:1.5rem;font-weight:700;margin-bottom:.5rem; color: #f59f0a;">
        জনপ্রিয় ক্যাটাগরি
      </h2>
      <p style="color:hsl(270,10%,45%);">
        আপনার পছন্দের ক্যাটাগরি থেকে পণ্য বাছাই করুন
      </p>
    </div>

 <div class="cat-scroll-wrapper">
  <div class="d-flex flex-nowrap cat-scroll">
    @foreach($cats as $cat)
    <div class="cat-item">
      <a href="{{ route('front.subCategories1', [$cat->url]) }}" class="text-decoration-none text-center d-block border rounded-3 bg-white p-3 h-100 shadow-sm hover-scale">
        <img src="{{ getImage('categories', $cat->image) }}"
          alt="{{ $cat->name }} - ID: {{ $cat->id }}"
          class="img-fluid mb-2"
          style="max-height: 80px; object-fit: contain;"
          loading="lazy"
          width="80"
          height="80">
        <p class="mb-0 fw-bold text-dark small font-bengali">{{ $cat->name }}</p>
      </a>
    </div>
    @endforeach
  </div>
</div>
  </div>

  @foreach ($homeProducts as $categoryId => $products)
  <div class="container-fluid mb-5">
    <div class="d-flex justify-content-between align-items-center border-bottom border-2 border-primary mb-4 pb-2">
      <h3 class="m-0 font-bengali text-primary">{{ $products->first()->category->name ?? 'Category' }}</h3>
      <a href="{{ route('front.subCategories1', [$products->first()->category->url ?? '#']) }}" class="btn btn-primary btn-sm rounded-lg font-bengali">সবগুলো দেখুন

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right icon-md">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </a>
    </div>
    <div class="row g-3">
      @foreach($products as $product)
      <div class="col-6 col-md-4 col-lg-2">
        @include('frontend.products.partials.product_section')
      </div>
      @endforeach
    </div>
  </div>
  @endforeach

</main>

@endsection

@push('js')
<script defer src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
<script defer src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const emblaNode = document.querySelector('#mainEmbla');
    const options = {
      loop: true
    };
    const autoplay = EmblaCarouselAutoplay({
      delay: 3000,
      stopOnInteraction: false
    });

    const emblaApi = EmblaCarousel(emblaNode, options, [autoplay]);

    document.querySelector('#prevBtn').addEventListener('click', emblaApi.scrollPrev);
    document.querySelector('#nextBtn').addEventListener('click', emblaApi.scrollNext);
  });
</script>

<script>
  // Google Analytics view_item logic (Original maintained)
  $(document).on('click', 'a#product_show', function(e) {
    let sell_price = parseFloat($(this).closest('.axil-product').find('.current-price').text().replace(/[^\d.]/g, '')) || 0;

    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      event: "view_item",
      ecommerce: {
        currency: "BDT",
        value: sell_price,
        items: [{
          item_id: $(this).data('productid'),
          item_name: $(this).data('productname'),
          price: sell_price,
          quantity: 1
        }]
      }
    });
  });
</script>
@endpush