<?php include('db.php'); ?>
<?php include('includes/header.php'); ?>

<!-- Hero Carousel Section -->
<!-- Hero Carousel Section -->
<section class="hero position-relative" style="height: 80vh; overflow: hidden;">
  <div id="heroCarousel" class="carousel slide carousel-fade h-100" data-bs-ride="carousel" data-bs-interval="3000">
    <div class="carousel-inner h-100">

      <!-- Slide 1 -->
      <div class="carousel-item active h-100 position-relative">
        <img src="https://images.unsplash.com/photo-1639247306848-76a60ff8d54e?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block w-100 h-100" style="object-fit: cover;" alt="Slide 1">

        <!-- Dark Overlay -->
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(0,0,0,0.5); z-index: 1;"></div>

        <!-- Centered Hero Text -->
        <div class="container d-flex flex-column justify-content-center align-items-center h-100 text-center position-absolute top-0 start-0 w-100" style="z-index: 2;">
          <h1 class="display-4 fw-bold text-white">Welcome to Global Gardenia</h1>
          <p class="lead bg-success px-3 py-2 rounded text-white">Your eco-friendly gardening partner</p>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item h-100 position-relative">
        <img src="https://images.unsplash.com/photo-1699165050528-5a4f601efd55?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0" class="d-block w-100 h-100" style="object-fit: cover;" alt="Slide 2">
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(0,0,0,0.5); z-index: 1;"></div>
        <div class="container d-flex flex-column justify-content-center align-items-center h-100 text-center position-absolute top-0 start-0 w-100" style="z-index: 2;">
          <h1 class="display-4 fw-bold text-white">Welcome to Global Gardenia</h1>
          <p class="lead bg-success px-3 py-2 rounded text-white">Your eco-friendly gardening partner</p>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item h-100 position-relative">
        <img src="https://images.unsplash.com/photo-1587145329690-0ff7ac651282?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0" class="d-block w-100 h-100" style="object-fit: cover;" alt="Slide 3">
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: rgba(0,0,0,0.5); z-index: 1;"></div>
        <div class="container d-flex flex-column justify-content-center align-items-center h-100 text-center position-absolute top-0 start-0 w-100" style="z-index: 2;">
          <h1 class="display-4 fw-bold text-white">Welcome to Global Gardenia</h1>
          <p class="lead bg-success px-3 py-2 rounded text-white">Your eco-friendly gardening partner</p>
        </div>
      </div>

    </div>

    <!-- Carousel Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
    </button>
  </div>
</section>


<?php include('includes/abouthome.php'); ?>

<!-- Product Heading Style -->
<style>
  .product-heading {
    background-color: #0b6623;
    color: white;
    font-size: 28px;
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .text-white {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  }
</style>

<!-- Product Categories Title -->
<div class="container text-center mt-5">
  <h2 class="product-heading d-inline-block px-4 py-2 rounded">Product Categories</h2>
</div>

<!-- Product Section -->

<section class="py-5">
  <div class="container">
    <div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">

        <!-- Slide 1 -->
        <div class="carousel-item active">
          <div class="row justify-content-center align-items-stretch">
            <!-- Card 1 -->
            <div class="col-md-4 mb-4">
              <div class="card border-0 shadow h-100">
                <img src="https://images.unsplash.com/photo-1676410408633-79228457cec4?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0" class="card-img-top" alt="Product" style="height: 250px; object-fit: cover;">
                <div class="card-body text-center">
                  <h5 class="card-title">Flower Seeds</h5>
                  <p class="card-text">Eco-friendly indoor plant.</p>
                  <a href="shop.php" class="btn btn-success">Shop Now</a>
                </div>
              </div>
            </div>

            <!-- Card 2 -->
            <div class="col-md-4 mb-4">
              <div class="card border-0 shadow-lg h-100" style="transform: scale(1.05); border: 2px solid #28a745;">
                <img src="https://images.unsplash.com/photo-1731970820302-09e3c6b2d016?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0" class="card-img-top" alt="Product" style="height: 250px; object-fit: cover;">
                <div class="card-body text-center">
                  <h5 class="card-title text-success fw-bold">Vegetables Seeds</h5>
                  <p class="card-text">Plants and vegetable seeds</p>
                  <a href="shop.php" class="btn btn-success">Shop Now</a>
                </div>
              </div>
            </div>

            <!-- Card 3 -->
            <div class="col-md-4 mb-4">
              <div class="card border-0 shadow h-100" style="border: 2px solid #28a745;">
                <img src="https://images.unsplash.com/photo-1515670112266-c6d33ec59d6b?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.1.0" class="card-img-top" alt="Product" style="height: 250px; object-fit: cover;">
                <div class="card-body text-center">
                  <h5 class="card-title">Fruit Seeds</h5>
                  <p class="card-text">Papaya, Watermelon and other plants.</p>
                  <a href="shop.php" class="btn btn-success">Shop Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-item">
          <div class="row justify-content-center align-items-stretch">
            <!-- Card 4 -->
            <div class="col-md-4 mb-4">
              <div class="card border-0 shadow h-100">
                <img src="https://plus.unsplash.com/premium_photo-1661636049335-ef680fbea0fe?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="card-img-top" alt="Product" style="height: 250px; object-fit: cover;">
                <div class="card-body text-center">
                  <h5 class="card-title">Herbs Seeds</h5>
                  <p class="card-text">Eco-friendly indoor or outdoor plant.</p>
                  <a href="shop.php" class="btn btn-success">Shop Now</a>
                </div>
              </div>
            </div>

            <!-- Card 5 -->
            <div class="col-md-4 mb-4">
              <div class="card border-0 shadow-lg h-100" style="transform: scale(1.05); border: 2px solid #28a745;">
                <img src="https://plus.unsplash.com/premium_photo-1705516190869-1af55b4887c1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="card-img-top" alt="Product" style="height: 250px; object-fit: cover;">
                <div class="card-body text-center">
                  <h5 class="card-title text-success fw-bold">Grass Seeds</h5>
                  <p class="card-text">Trees & Grass seeds</p>
                  <a href="shop.php" class="btn btn-success">Shop Now</a>
                </div>
              </div>
            </div>

            <!-- Card 6 -->
            <div class="col-md-4 mb-4">
              <div class="card border-0 shadow-lg h-100" style="transform: scale(1.05); border: 2px solid #28a745;">
                <img src="https://images.unsplash.com/photo-1632537852507-41a27f9dc7a2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="card-img-top" alt="Product" style="height: 250px; object-fit: cover;">
                <div class="card-body text-center">
                  <h5 class="card-title text-success fw-bold">Seeds Kit</h5>
                  <p class="card-text">Plants,herbs & vegetable seeds</p>
                  <a href="shop.php" class="btn btn-success">Shop Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- Carousel Controls -->
      <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bg-dark rounded-circle" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon bg-dark rounded-circle" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


<?php include('includes/gallery.php'); ?>
<?php include('includes/testimonialsection.php'); ?>
<?php include('includes/footer.php'); ?>
