<style>
  @media screen and (min-width:768px) {
     #heroButton {
      padding-left: 30px;
      padding-right: 30px;

    }
  }

   @media screen and (max-width:767px) {
     #heroButton {
      padding-left: 30px;
      padding-right: 30px;

    }
    .object-cover-mobile-condition {
      height: 70vh !important;
    }

    #textIntro {
      position: relative !important;
      bottom: 120px !important;
    }
  }
 
</style>
<div class="w-full mb-20 md:mb-0">
<!-- hero -->
<div class="mb-20">
  <div
    id="default-carousel"
    class="relative w-full"
    data-carousel="slide"
  >
    <!-- Carousel wrapper -->
    <div class="relative">
    <div class="relative h-screen overflow-hidden rounded-lg">
    <?php if (count($slideshows) == 1) : ?>
        <!-- Single Slide, No Carousel -->
        <?php $item = $slideshows[0]; ?>
        <div class="block">
            <img
                src="<?= base_url() . 'uploads/banners/' . $item->image; ?>"  
                class="h-screen w-full object-cover object-cover-mobile-condition"
            />
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <div id="heroButton" class="border-1 p-2" style="border: 1px solid <?= $item->text_content; ?>">
                    <a href="<?= $item->banner_link; ?>">
                        <h1 class="text-2xla font-custom" style="color:<?= $item->text_content; ?>">
                            <?= strtoupper($item->title); ?>
                        </h1>
                    </a>
                </div>
            </div>
        </div>
    <?php else : ?>
        <!-- Carousel Mode -->
        <?php $first = true; foreach($slideshows as $item) : ?>
            <div class="<?= $first ? 'block' : 'hidden'; ?> duration-700 ease-in-out" data-carousel-item>
                <img
                    src="<?= base_url() . 'uploads/banners/' . $item->image; ?>"  
                    class="h-screen w-full object-cover object-cover-mobile-condition"
                />
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <div class="border-1 p-2 px-9" style="border: 1px solid <?= $item->text_content; ?>">
                        <a href="<?= $item->banner_link; ?>">
                            <h1 class="text-2xla font-custom" style="color:<?= $item->text_content; ?>">
                                <?= strtoupper($item->title); ?>
                            </h1>
                        </a>
                    </div>
                </div>
            </div>
            <?php $first = false; ?>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

    </div>
    <div
      class="relative flex space-x-3 top-5 justify-center mt-[-60px]"
      style="z-index: 999"
    >
    <?php foreach($slideshows as $index => $item) : ?>
        <button
          type="button"
          class="w-10 h-1"
          aria-current="true"
          aria-label="Slide <?= $index+1 ?>"
          data-carousel-slide-to="<?= $index ?>"
        ></button>
    <?php endforeach ?> 
    </div>
    <!-- Slider indicators -->
    <!-- Slider controls -->
    <!-- <button type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
              <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                  <svg class="w-4 h-4 text-white dark:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
                  </svg>
                  <span class="sr-only">Previous</span>
              </span>
          </button>
          <button type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
              <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                  <svg class="w-4 h-4 text-white dark:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
                  </svg>
                  <span class="sr-only">Next</span>
              </span>
          </button> -->
  </div>
</div>

<section id="textIntro" class="container mx-auto xs:px-4 md:px-8 xs:mt-18 md:mt-36 mb-36 md:mb-20">
  <div class="text-center">
    <h2 class="font-custom text-secondary xs:text-2xl md:text-3xl">
      <?= strtoupper($home->title1); ?>
    </h2>
    <p class="font-custom xs:text-md md:text-lg text-primary max-w-2xl mx-auto mt-4 mb-4">
      <?= ucfirst($home->text1); ?> 
    </p>
  </div>
</section>

<section class="bg-primary mx-auto px-4 md:px-8 py-10 md:py-20">
  <div class="text-center">
    <h2 class="font-custom text-secondary xs:text-2xl md:text-3xl">
      <?= strtoupper($home->title2); ?>
    </h2>
    <p
      class="text-secondary font-light xs:text-md md:text-lg font-custom max-w-2xl mx-auto mt-4"
      style="color: #c4c4c4"
    >
      <?= ucfirst($home->text2); ?>
    </p>
  </div>

  <!-- product -->
  <div class="max-w-3xl mx-auto mt-8">
    <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
      <?php foreach($new_products as $product) : ?> 
        <a href="<?= base_url() . 'product/' . strtolower($product->alias); ?>">
          <div class="text-center"> 
            <img
              src="<?= base_url() . 'uploads/product/' . $product->image1; ?>"
              alt="<?= $product->title; ?>"
              class="xs:h-72 md:h-[35vh] object-contain w-full mx-auto"
            />
            <div class="text-center mt-3">
              <p class="text-secondary text-xl font-custom"><?= strtoupper($product->title); ?></p>
              <p class="text-[#C4C4C4] font-custom">Rp <?= number_format($product->price); ?></p>
              <p
                class="text-[#C4C4C4] italic font-tinosItalic xs:text-xs md:text-md"
              >
                <?= $product->preorder_message; ?> 
              </p>
            </div>
          </div>
        </a>
      <?php endforeach; ?>  
    </div>
  </div>

  <!-- more button -->
  <div class="p-2 border border-secondary w-80 text-center mx-auto mt-8">
    <a href="<?= base_url() . 'category/show-all'; ?>"><span class="font-custom text-secondary text-xl">EXPLORE MORE</span></a>
  </div>
</section>

<!-- section 3 -->
<section class="w-full">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-0">
    <div
      id="customizeBlock1"  
      class="bg-secondary text-center h-[40vh] md:h-[60vh] flex justify-center items-center"
    >
      <img
        src="<?= base_url() . 'uploads/product-2.png'; ?>"
        alt=""
        class="absolute w-full md:w-1/2 h-[40vh] md:h-[80vh] object-cover md:hidden"
      />
      <div
        class="w-full mx-auto md:max-w-md bg-secondary/30 w-full h-full p-10 md:p-4 flex flex-col justify-center items-center"
        style="z-index: 999"
      >
        <h1 class="font-custom text-primary md:text-[#F4F4F1] text-3xl w-72 mx-auto">
          <?= strtoupper($home->title3); ?>
        </h1>

        <p 
          class="text-secondary font-light xs:text-md md:text-lg font-custom max-w-2xl mx-auto mt-4 hidden md:block" style="color:white;"
        >
          <?= ucfirst($home->text3); ?>
        </p>
        <div class="p-2 border border-primary md:border-[#F4F4F1] w-80 text-center mx-auto mt-8">
          <a href="<?= $home->link3; ?>"><span class="font-custom text-primary md:text-[#F4F4F1]"><?= strtoupper($home->label3); ?></span></a>
        </div>
      </div>
    </div>
    <div class="text-center hidden md:block" id="customizeBlock2" >
        <a href="<?= $home->banner1_link; ?>">
          <img
            src="<?= base_url() . 'uploads/page/' . $home->banner1_image;?>"
            alt=""
            class="w-full h-[60vh] md:h-[100vh] object-cover"
          />
        </a>
    </div>
  </div>
</section>

<!-- section 4 -->
<section class="w-full pb-15">
  <p
    class="text-secondary font-custom text-2xl md:text-3xl text-center my-8"
  >
    YOU MAY ALSO LIKE
  </p>
  <div class="grid grid-cols-3 gap-4">
    <!-- Kolom 1 -->
    <div class="text-center">
      <a href="<?= $home->banner2_link; ?>">
        <img src="<?= base_url() . 'uploads/page/' . $home->banner2_image;?>" alt="" />
      </a>
    </div>

    <!-- Kolom 2 (2 kolom tumpuk) -->
    <div class="grid md:grid-rows-2 gap-4">
      <div class="text-center">
        <a href="<?= $home->banner3_link; ?>">
          <img
            src="<?= base_url() . 'uploads/page/' . $home->banner3_image;?>"
            alt=""
            class="block md:hidden"
          />
        </a>
        <a href="<?= $home->banner3_link; ?>">
          <img
            src="<?= base_url() . 'uploads/page/' . $home->banner3_image;?>"
            alt=""
            class="h-full hidden md:block"
          />
        </a>
      </div>
      <div class="text-center">
        <a href="<?= $home->banner4_link; ?>">
          <img
            src="<?= base_url() . 'uploads/page/' . $home->banner4_image;?>"
            alt=""
            class="block md:hidden"
          />
        </a>
        <a href="<?= $home->banner4_link; ?>">
          <img
            src="<?= base_url() . 'uploads/page/' . $home->banner4_image;?>"
            alt=""
            class="h-full hidden md:block"
          />
        </a>
      </div>
     
    </div>

    <!-- Kolom 3 -->
    <div class="text-center">
      <a href="<?= $home->banner5_link; ?>">
        <img src="<?= base_url() . 'uploads/page/' . $home->banner5_image;?>" alt="" />
      </a>
    </div>
  </div>
</section>