@extends('front.master')

@section('content')

<!-- =========================
  Banner / Slider
========================= -->
<div class="banner py-0">
  <p class="rs-p-wp-fix"></p>

  <rs-module-wrap id="rev_slider_14_1_wrapper" data-alias="home-4-1" data-source="gallery"
    style="visibility:hidden;background:transparent;padding:0;margin:0px auto;margin-top:0;margin-bottom:0;">
    <rs-module id="rev_slider_14_1" data-version="6.5.31">
            <rs-slides>
        @foreach ($Slider as $slider)
          <rs-slide style="position: absolute;" data-key="rs-4{{$Order}}" data-title="Slide"
            data-thumb="{{asset('html/rev/assets/Banner-1-2-50x100.jpg')}}" data-anim="adpr:false;ms:300;" data-in="o:0;"
            data-out="a:false;">

            <img alt="{{$slider->name}}" src="{{url('/')}}/uploads/slider/{{$slider->image}}" title="Banner-1"
              class="rev-slidebg tp-rs-img rs-lazyload"
              data-lazyload="{{url('/')}}/uploads/slider/{{$slider->image}}" data-no-retina>

            <rs-layer id="slider-14-slide-4{{$Order}}-layer-1" class="rs-title-font" data-type="text" data-rsp_ch="on"
              data-xy="x:l,l,c,c;xo:10px,10px,0,0;y:m;yo:145px,170px,140px,114px;"
              data-text="w:normal;s:52,48,42,32;l:70,56,50,40;ls:0,0,0,1px;fw:600;a:left,left,center,center;"
              data-dim="w:737px,613px,546px,434px;" data-frame_0="y:50,39,29,17;"
              data-frame_1="st:500;sp:1000;sR:500;"
              data-frame_999="y:50,39,29,17;o:0;st:9900;sp:1000;sR:8500;"
              style="
                z-index:9;font-family:'Plus Jakarta Sans';
                text-transform:capitalize;
                background-color: rgba(0,0,0,0.3);
                border:6px solid rgba(255,255,255,0.3);
                padding:10px;
                text-shadow: 0 0 4px rgba(0,0,0,.8);">
              {{$slider->name}}
            </rs-layer>

          </rs-slide>
                  @endforeach
      </rs-slides>
    </rs-module>
  </rs-module-wrap>
</div>

<!-- =========================
  Home Scoped CSS (NO CONFLICT)
  Everything prefixed "home-"
========================= -->
<style>
/* ===== Core helpers (scoped) ===== */
.home-sp{ padding-top:22px; padding-bottom:22px; }
.home-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:22px 20px;
  box-shadow:0 10px 25px rgba(0,0,0,.04);
  height:100%;
}
.home-kicker{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6b7280;
  margin-bottom:10px;
}
.home-title{
  color:#1c186c;
  font-weight:800;
  margin-bottom:12px;
  line-height:1.25;
}
.home-p{
  color:#4b5563;
  line-height:1.75;
  margin-bottom:18px;
}
.home-mini{
  margin:0;
  padding-left:18px;
  color:#4b5563;
  line-height:1.7;
}
.home-mini li{ margin-bottom:6px; }

.home-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* ===== Your existing image grids (kept, but safe) ===== */
.home-service-img{
  aspect-ratio: 1 / 1;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.home-service-img .home-ser-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-grid{
  display:flex;
  flex-wrap:wrap;
  margin:-12px;
}
.home-grid .home-grid-item{
  flex:0 0 33.333%;
  max-width:33.333%;
  padding:12px;
  box-sizing:border-box;
  display:flex;
}
.home-grid .pq-portfoliobox-3{ width:100%; height:100%; }
.home-grid .pq-portfolio-img{
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.home-grid .pq-portfolio-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ===== Swatch row (engineered wood) ===== */
.home-swatch-row{
  display:flex;
  flex-wrap:nowrap;
  overflow:auto;
  gap:14px;
  padding-bottom:8px;
  -webkit-overflow-scrolling: touch;
}
.home-swatch{
  flex: 0 0 auto;
  width: 130px;
}
.home-swatch .home-swatch-img{
  width:100%;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 25px rgba(0,0,0,.04);
}
.home-swatch .home-swatch-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.home-swatch .home-swatch-title{
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  margin-top:8px;
  color:#1c186c;
}
.home-swatch .home-swatch-code{
  font-size:12px;
  color:#6b7280;
}

/* ===== Mobile adjustments ===== */
@media (max-width: 576px){
  .rs-title-font{ font-size:22px !important; line-height:30px !important; padding:6px !important; border-width:3px !important; }
  .home-title{ font-size:20px; }
  .home-card{ padding:18px 16px; }
  .home-grid{ margin:-6px; }
  .home-grid .home-grid-item{ flex:0 0 50%; max-width:50%; padding:6px; }
  .home-swatch{ width: 118px; }
}

</style>

<!-- =========================
  Top intro row
========================= -->
<section class="sp-80 home-sp">
  <div class="container">
    <div class="row align-items-center g-3">
      <div class="col-lg-8">
        <h1 style="color:#1c186c; font-weight:800; line-height:1.15; margin-bottom:10px;">
          Quick-Step Flooring Kenya — Decomagna
        </h1>

        <p style="color:#4b5563; line-height:1.65; margin:0;">
          Kenya’s leading supplier & installer for premium laminate, engineered wood and click vinyl flooring.
          We handle site surveys, correct subfloor preparation, moisture control, precision installation and clean finishing —
          built for Nairobi living, coastal humidity, and high-traffic commercial spaces.
        </p>

        <div style="margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
          <a class="pq-button pq-button-flat" href="{{ url('/blogs/best-flooring-options-for-offices-commercial-spaces-in-kenya-2025') }}">
            <div class="pq-button-block">
              <span class="pq-button-text">Best flooring options for Kenya</span>
              <span class="pq-button-line-right"></span>
              <i class="ion ion-ios-arrow-right"></i>
            </div>
          </a>

          <a href="{{ url('/blogs/laminate-vs-spc-flooring-in-kenya-the-real-truth-choice') }}"
             style="font-weight:600; color:#1c186c; text-decoration:none;">
            Read our SPC vs Laminates guide to learn what's best for you
          </a>
        </div>
      </div>
      

      <div class="col-lg-4">
        <div style="border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:14px 14px; background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.04);">
          <div style="font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#6b7280; margin-bottom:8px;">
            Why Decomagna
          </div>
          <ul style="margin:0; padding-left:18px; color:#4b5563; line-height:1.65;">
            <li>Official Quick-Step partner</li>
            <li>Kenya-ready installation standards</li>
            <li>Residential & commercial projects</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="sp-80" style="background:#f8f9fb;">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 wow animated fadeInRight">
        <div class="home-card">
          <div class="home-kicker">Interactive Tool • Flooring Kenya</div>
          <h2 class="home-title">Preview Your Floor Before You Buy</h2>
          <p class="home-p">
            Compare walnut, oak, grey and rustic flooring colours in a realistic room setting using our Decomagna Floor Visualizer. A simple way to explore laminate and wood floor looks before choosing the right finish for your project in Kenya.
          </p>

          <ul class="home-mini">
            <li>Compare floor colours side by side</li>
            <li>Preview wood and laminate looks in a room</li>
            <li>Choose the right flooring tone before installation</li>
          </ul>

          <div class="divider pq-my-30"></div>

          <a class="pq-button pq-button-flat" href="{{ url('/floor-visualizer') }}">
            <div class="pq-button-block">
              <span class="pq-button-text">Open Floor Visualizer</span>
              <span class="pq-button-line-right"></span>
              <i class="ion ion-ios-arrow-right"></i>
            </div>
          </a>
        </div>
      </div>

      <div class="col-lg-6 mt-4 mt-lg-0 wow animated fadeInLeft">
        <div class="home-media">
          <a href="{{ url('/room-visualizer') }}">
            <img
              src="{{ asset('images/visualizer/rooms/walnut.jpg') }}"
              alt="Floor visualizer Kenya by Decomagna"
              loading="lazy"
              decoding="async"
              width="900"
              height="560"
              style="border-radius:12px;">
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
@php
  // ✅ Change this if your engineered wood explore slug differs
  $ewSlug = 'engineered-hardwood-flooring';
@endphp