<?php
/** Static home sections from index.html (hero is includes/home-hero.php). */
declare(strict_types=1);
?>

<!-- text-slider-area start -->
    <div class="ot-text-slider-area ot-text-slider-curve slider-transparent overflow-hidden">
      <div class="container-fluid p-0">
        <div class="row gx-0">
          <div class="col-12">
            <div class="ot-text-slider style-3 theme-bg z-index-3 ot-text-slider-space">
              <div class="swiper rolling-active">
                <div class="swiper-wrapper slide-transtion">
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-1.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-2.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-3.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-4.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-5.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-6.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-7.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-1.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-2.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="ot-text-slider-brand">
                      <a href="#">
                        <img src="<?= asset('assets/img/brand/brand-1-3.png') ?>" alt="brand">
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- text-slider-area end -->

    <!-- about-area start -->
    <section class="ot-about-3-area ot-about-space-3 theme-black ot-bg-style"
      data-background="<?= asset('assets/img/bg/about-bg-3-1.png') ?>">
      <div class="container">
        <div class="ot-about-content-wrapp">
          <div class="row justify-content-center">
            <div class="col-xl-5 col-lg-8 col-md-9 order-0" data-cue="slideInLeft">
              <div class="ot-about-img-box3 p-relative">
                <div class="ot-about-img overflow-hidden p-relative">
                  <img src="<?= asset('assets/img/about/ab-img-3-1.jpg') ?>" alt="about image">
                  <div class="ot-about-img-line d-none d-sm-block">
                    <img src="<?= asset('assets/img/shape/ab-3-line-shape.png') ?>" alt="about image">
                  </div>
                </div>
                <div class="ot-about-img4 p-relative d-none d-sm-block">
                  <img src="<?= asset('assets/img/about/ab-img-3-2.jpg') ?>" alt="about image">
                </div>
                <div class="ot-pattern d-none d-md-block">
                  <img src="<?= asset('assets/img/shape/pattern.png') ?>" alt="pattern">
                </div>
                <div class="ot-about-dot-line d-none d-sm-block"></div>
              </div>
            </div>
            <div class="col-xl-7">
              <div class="ot-about-wrapp ms-xxl-4 ps-xxl-5">
                <div class="ot-title-area mb-30 ot-about-titlebox3">
                  <span class="ot-sec-subtitle style-2" data-cue="flipInX" data-delay="300">About Us</span>
                  <h3 class="ot-sec-title text-white mb-15 ot-text-anime-3">
                    Bhatt Enterprises - Trusted Solar Energy Solutions Partner
                  </h3>
                  <p class="ot-sec-text ot-text-anime-1 text-white me-xl-5 pe-xl-4">
                    Bhatt Enterprises is a solar energy solutions provider specializing in solar panel installations,
                    inverters, and sustainable energy systems. As an authorized partner of Tata Power Solar, we
                    deliver reliable solutions for residential and commercial properties to reduce electricity costs
                    and support long-term clean energy adoption.
                  </p>
                </div>
                <div class="ot-about-content">
                  <div class="ot-about-tab-button mb-40 me-xl-4 pe-xl-3" data-cue="slideInUp" data-delay="200">
                    <nav>
                      <div class="nav nav-tab gap-3 ot-about-tab" role="tablist">
                        <button class="nav-link ot-about-tab-btn" data-bs-toggle="tab" data-bs-target="#nav-First">
                          Our Mission
                        </button>
                        <button class="nav-link active ot-about-tab-btn" data-bs-toggle="tab"
                          data-bs-target="#nav-Second">
                          Our Strategy
                        </button>
                        <button class="nav-link ot-about-tab-btn" data-bs-toggle="tab" data-bs-target="#nav-Third">
                          Our Vision
                        </button>
                      </div>
                    </nav>
                  </div>
                  <div class="tab-content" id="nav-tabContent" data-cue="slideInUp" data-delay="500">
                    <div class="tab-pane fade" id="nav-First" role="tabpanel" tabindex="0">
                      <div class="ot-about-tab-content d-flex-column d-sm-flex align-items-center">
                        <div class="ot-about-tab-listbox">
                          <ul class="ot-about-tab-list">
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Deliver clean, affordable, and reliable solar power for every property.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Provide one-stop solar panel installation services from planning to commissioning.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Support customers with maintenance, repair, and performance-focused service.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Enable sustainable living through practical renewable energy solutions.
                            </li>
                          </ul>
                        </div>
                        <div class="ot-about-tab-video p-relative">
                          <img src="<?= asset('assets/img/about/ab-v-img.jpg') ?>" alt="video image">
                          <div class="ot-video-play-btn">
                            <a href="https://www.youtube.com/watch?v=LBZzNQLQgf0" class="ot-video-icon popup-video">
                              <i class="fa-solid fa-play"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade active show" id="nav-Second" role="tabpanel" tabindex="0">
                      <div class="ot-about-tab-content d-flex-column d-sm-flex align-items-center">
                        <div class="ot-about-tab-listbox">
                          <ul class="ot-about-tab-list">
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Design tailored on-grid rooftop and solar power systems for each customer.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Supply quality equipment including solar panels, inverters, batteries, and controllers.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Execute precise mounting, wiring, and installation with safety-first standards.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Deliver end-to-end consultation, installation, and lifecycle support.
                            </li>
                          </ul>
                        </div>
                        <div class="ot-about-tab-video p-relative">
                          <img src="<?= asset('assets/img/about/ab-v-img.jpg') ?>" alt="video image">
                          <div class="ot-video-play-btn">
                            <a href="https://www.youtube.com/watch?v=LBZzNQLQgf0" class="ot-video-icon popup-video">
                              <i class="fa-solid fa-play"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="tab-pane fade" id="nav-Third" role="tabpanel" tabindex="0">
                      <div class="ot-about-tab-content d-flex-column d-sm-flex align-items-center">
                        <div class="ot-about-tab-listbox">
                          <ul class="ot-about-tab-list">
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Become the most trusted solar solutions brand for homes and businesses.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Build energy-independent communities through clean and smart solar adoption.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Lead with innovation, quality, and service excellence in every project.
                            </li>
                            <li class="ot-about-tab-list-item">
                              <span class="ot-about-tab-list-icon"><i class="flaticon-checked"></i></span>
                              Power a greener future while lowering long-term electricity costs.
                            </li>
                          </ul>
                        </div>
                        <div class="ot-about-tab-video p-relative">
                          <img src="<?= asset('assets/img/about/ab-v-img.jpg') ?>" alt="video image">
                          <div class="ot-video-play-btn">
                            <a href="https://www.youtube.com/watch?v=LBZzNQLQgf0" class="ot-video-icon popup-video">
                              <i class="fa-solid fa-play"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ot-about-userbox mt-40 d-sm-flex gap-4 align-items-center" data-cue="slideInUp"
                    data-delay="700">
                    <div class="ot-about-btn">
                      <a href="about.php" class="ot-btn-primary">learn more</a>
                    </div>
                    <div class="ot-about-user d-flex gap-3 align-items-center gap-2">
                      <div class="user-img">
                        <img src="<?= asset('assets/img/about/ab-user-1-1.png') ?>" alt="about user">
                      </div>
                      <div class="user-content">
                        <h4 class="user-title text-white">
                          BHATT Enterprises
                        </h4>
                        <p class="user-designation text-white">Solar Energy Solutions Provider</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- about-area end -->

    <!-- service-3-area start -->
    <section class="ot-service-3-area ot-space ot-service-overlay-3 ot-bg-style"
      data-background="<?= asset('assets/img/bg/service-bg-3-1.jpg') ?>">
      <div class="container">
        <div class="ot-title-area ot-service-titlebox3 z-index-2">
          <div class="row">
            <div class="col-xl-6">
              <span class="ot-sec-subtitle" data-cue="flipInX" data-delay="300">Our Service</span>
              <h3 class="ot-sec-title ot-text-anime-3 mb-0 text-white">
                We Provide best Service
              </h3>
            </div>
          </div>
        </div>
        <?php $homeServices = services_all(); ?>
        <div class="ot-service-wrapp z-index-2">
          <div class="row align-items-center">
            <div class="col-xl-8">
              <div class="swiper ot-slider service-slider-style-3 z-index-3" id="Servicelider"
                data-slider-options='{"loop":true,"effect":"slide","autoHeight":false,"autoplay":{"delay":3000,"disableOnInteraction":false},"thumbs":{"swiper":".service-tab-slider3"}}'>
                <div class="swiper-wrapper">
                  <?php if ($homeServices): ?>
                    <?php foreach ($homeServices as $index => $service): ?>
                      <?php
                        $serviceUrl = 'service-detail.php?slug=' . urlencode((string)($service['slug'] ?? ''));
                        $serviceTitle = trim((string)($service['title'] ?? ''));
                        if ($serviceTitle === '') {
                            $serviceTitle = 'Solar Service';
                        }
                        $serviceDescription = trim((string)($service['short_description'] ?? ''));
                        if ($serviceDescription === '') {
                            $serviceDescription = 'Reliable solar solutions for residential and commercial energy needs.';
                        }
                        $serviceIcon = trim((string)($service['icon_class'] ?? ''));
                        if ($serviceIcon === '') {
                            $serviceIcon = 'flaticon-solar-panel';
                        }
                      ?>
                      <div class="swiper-slide">
                        <div class="ot-service-card-3 d-md-flex gap-xl-3 gap-xxl-5 align-items-center">
                          <div class="ot-service-img1 ot-img-hover">
                            <a href="<?= h($serviceUrl) ?>">
                              <img src="<?= h(img_url($service['image_path'] ?? null, 'assets/img/service/sv-img-3-1.jpg')) ?>" alt="<?= h($serviceTitle) ?>">
                            </a>
                          </div>
                          <div class="ot-service-content">
                            <div class="ot-service-top mb-30 d-flex align-items-center justify-content-between">
                              <div class="ot-service-icon">
                                <i class="<?= h($serviceIcon) ?>"></i>
                              </div>
                              <span class="ot-service-number"><?= h(str_pad((string)($index + 1), 2, '0', STR_PAD_LEFT)) ?></span>
                            </div>
                            <h3 class="ot-box-title mb-20 ot-line-hover text-white">
                              <a href="<?= h($serviceUrl) ?>"><?= h($serviceTitle) ?></a>
                            </h3>
                            <p class="ot-sec-text text-white mb-20">
                              <?= h($serviceDescription) ?>
                            </p>
                            <div class="ot-service-btn mt-30">
                              <a href="<?= h($serviceUrl) ?>" class="ot-btn-arrow-primary">
                                <span class="arrow-icon">
                                  <i class="flaticon-right-arrow"></i>
                                </span>
                                Read More
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    <?php endforeach; ?>
                  <?php else: ?>
                    <div class="swiper-slide">
                      <div class="ot-service-card-3 d-md-flex gap-xl-3 gap-xxl-5 align-items-center">
                        <div class="ot-service-img1 ot-img-hover">
                          <a href="services.php">
                            <img src="<?= asset('assets/img/service/sv-img-3-1.jpg') ?>" alt="service image">
                          </a>
                        </div>
                        <div class="ot-service-content">
                          <div class="ot-service-top mb-30 d-flex align-items-center justify-content-between">
                            <div class="ot-service-icon">
                              <i class="flaticon-solar-panel"></i>
                            </div>
                            <span class="ot-service-number">01</span>
                          </div>
                          <h3 class="ot-box-title mb-20 ot-line-hover text-white">
                            <a href="services.php">Solar Installation Services</a>
                          </h3>
                          <p class="ot-sec-text text-white mb-20">
                            Add services from the admin panel to display dynamic service cards on this section.
                          </p>
                          <div class="ot-service-btn mt-30">
                            <a href="services.php" class="ot-btn-arrow-primary">
                              <span class="arrow-icon">
                                <i class="flaticon-right-arrow"></i>
                              </span>
                              Read More
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  <?php endif; ?>
                </div>
              </div>
            </div>
            <div class="col-xl-4" data-cue="slideInRight">
              <div class="ot-service-tab-slider ot-service-3-tab-wrapp z-index-3 d-none d-sm-block">
                <button data-slider-prev="#Servicelider" class="sv-slider-arrow mb-20 ms-xxl-3">
                  <i class="fa-solid fa-arrow-up-long"></i>
                </button>
                <div class="swiper ot-slider service-tab-slider3 slider-tab"
                  data-slider-options='{"loop":true,"direction":"vertical","spaceBetween":20,"autoplay":{"delay":3000,"disableOnInteraction":false},"centeredSlides":true,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true,"centeredSlidesBounds":true,"breakpoints":{"0":{"slidesPerView":4},"576":{"slidesPerView":4}}}'>
                  <div class="swiper-wrapper">
                    <?php if ($homeServices): ?>
                      <?php foreach ($homeServices as $service): ?>
                        <?php
                          $serviceTitle = trim((string)($service['title'] ?? ''));
                          if ($serviceTitle === '') {
                              $serviceTitle = 'Solar Service';
                          }
                        ?>
                        <div class="swiper-slide">
                          <div class="tab-btn sv-tab-btn d-flex gap-2 align-items-center">
                            <div class="sv-tab-slider-img">
                              <img src="<?= h(img_url($service['image_path'] ?? null, 'assets/img/service/sv-tab-3-1.jpg')) ?>" alt="<?= h($serviceTitle) ?>">
                            </div>
                            <h3 class="sv-tab-slider-title">
                              <?= h($serviceTitle) ?>
                            </h3>
                          </div>
                        </div>
                      <?php endforeach; ?>
                    <?php else: ?>
                      <div class="swiper-slide">
                        <div class="tab-btn sv-tab-btn d-flex gap-2 align-items-center">
                          <div class="sv-tab-slider-img">
                            <img src="<?= asset('assets/img/service/sv-tab-3-1.jpg') ?>" alt="service tab image">
                          </div>
                          <h3 class="sv-tab-slider-title">
                            Solar Installation Services
                          </h3>
                        </div>
                      </div>
                    <?php endif; ?>
                  </div>
                </div>
                <button data-slider-prev="#Servicelider" class="sv-slider-arrow mt-20 ms-xxl-3">
                  <i class="fa-solid fa-arrow-down-long"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- service-3-area end -->

    <?php
    $pricingPlans = pricing_plans_for_home();
    $homePricingSubtitle = setting('home_pricing_subtitle', 'Pricing Plan');
    $homePricingTitle = setting('home_pricing_title', 'Our Pricing Plan For you');
    ?>
    <!-- price-area start -->
    <?php if ($pricingPlans): ?>
    <section class="ot-price-2-area ot-space-extra theme-black ot-bg-style overflow-hidden"
      data-background="<?= asset('assets/img/bg/price-bg-2-1.png') ?>">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-8">
            <div class="ot-title-area ot-price-titlebox text-center mb-50">
              <span class="ot-sec-subtitle style-2" data-cue="flipInX" data-delay="300"><?= h($homePricingSubtitle) ?></span>
              <h3 class="ot-sec-title text-white ot-text-anime-3">
                <?= h($homePricingTitle) ?>
              </h3>
            </div>
          </div>
        </div>
        <div class="ot-price-2-wrapp">
          <div class="row gy-30 justify-content-center">
            <?php foreach ($pricingPlans as $pp): ?>
              <?php
              $fClass = !empty($pp['is_featured']) ? ' active' : '';
              $waUrl = pricing_whatsapp_inquiry_url($pp);
              $btnBase = 'ot-btn-primary text-center w-100' . (!empty($pp['cta_yellow']) ? ' yellow-btn' : '');
              $inWrap = !empty($pp['cta_in_wrapper']);
              $features = $pp['features'] ?? [];
              ?>
            <div class="col-xl-4 col-lg-6 col-md-6" data-cue="slideInUp">
              <div class="ot-price-card<?= h($fClass) ?> p-relative">
                <div class="ot-price-title-body">
                  <h3 class="ot-box-title text-white">
                    <?= h((string)($pp['card_title'] ?? '')) ?>
                  </h3>
                </div>
                <div class="ot-price-content z-index-2 ml-55">
                  <div class="ot-price-header text-md-center ot-home-price-block">
                    <p class="ot-price-value text-white mb-0 ot-home-price-figure"><?= h((string)($pp['price_display'] ?? '')) ?></p>
                    <p class="ot-price-category text-white mb-0 ot-home-price-label"><?= h((string)($pp['plan_name'] ?? '')) ?></p>
                  </div>
                  <div class="ot-price-body">
                    <ul class="ot-price-list-box ms-xxl-4 mb-30">
                      <?php foreach ($features as $f): ?>
                        <?php
                        $icon = (isset($f['icon_style']) && (string)$f['icon_style'] === 'mark') ? 'flaticon-check-mark' : 'flaticon-check';
                        ?>
                      <li class="ot-price-list">
                        <i class="<?= h($icon) ?>"></i><?= h((string)($f['label'] ?? '')) ?>
                      </li>
                      <?php endforeach; ?>
                    </ul>
                    <?php
                    $link = '<a href="' . h($waUrl) . '" class="' . h($btnBase) . '" target="_blank" rel="noopener noreferrer">' . h((string)($pp['cta_label'] ?? 'Choose Packages')) . '</a>';
                    if ($inWrap) {
                        echo '<div class="ot-price-btn">' . $link . '</div>';
                    } else {
                        echo $link;
                    }
                    ?>
                  </div>
                </div>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    </section>
    <?php endif; ?>
    <!-- price-area end -->

    <!-- funfact-area start -->
    <section class="ot-funfact-area ot-funfact-space1 z-index-2">
      <div class="container">
        <div class="row gy-30 justify-content-center">
          <div class="col-xl-3 col-lg-4 col-md-6" data-cue="flipInX">
            <div class="ot-funfact-card d-flex align-items-center justify-content-center">
              <span class="ot-funfact-icon">
                <i class="flaticon-review"></i>
              </span>
              <div class="ot-funfact-content p-relative bg-mask" data-mask-src="<?= asset('assets/img/shape/funfact-mask1.png') ?>">
                <div class="ot-funfact-bdr">
                  <img src="<?= asset('assets/img/shape/fct-border-mask1.png') ?>" alt="funfact border">
                </div>
                <h3 class="ot-funfact-number z-index-2">
                  <span class="purecounter" data-purecounter-duration="1" data-purecounter-end="20">20</span>+
                </h3>
                <p class="ot-sec-text mb-0 z-index-2">Years Of Experience</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6" data-cue="flipInX">
            <div class="ot-funfact-card d-flex align-items-center justify-content-center">
              <span class="ot-funfact-icon">
                <i class="flaticon-collaboration-1"></i>
              </span>
              <div class="ot-funfact-content p-relative bg-mask" data-mask-src="<?= asset('assets/img/shape/funfact-mask1.png') ?>">
                <div class="ot-funfact-bdr">
                  <img src="<?= asset('assets/img/shape/fct-border-mask1.png') ?>" alt="funfact border">
                </div>
                <h3 class="ot-funfact-number z-index-2">
                  <span class="purecounter" data-purecounter-duration="1" data-purecounter-end="10">10</span>K
                </h3>
                <p class="ot-sec-text mb-0 z-index-2">Project Done</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6" data-cue="flipInX">
            <div class="ot-funfact-card d-flex align-items-center justify-content-center">
              <span class="ot-funfact-icon">
                <i class="flaticon-satisfaction"></i>
              </span>
              <div class="ot-funfact-content p-relative bg-mask" data-mask-src="<?= asset('assets/img/shape/funfact-mask1.png') ?>">
                <div class="ot-funfact-bdr">
                  <img src="<?= asset('assets/img/shape/fct-border-mask1.png') ?>" alt="funfact border">
                </div>
                <h3 class="ot-funfact-number z-index-2">
                  <span class="purecounter" data-purecounter-duration="1" data-purecounter-end="8">8</span>K+
                </h3>
                <p class="ot-sec-text mb-0 z-index-2">Clients Satisfy</p>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-6" data-cue="flipInX">
            <div class="ot-funfact-card d-flex align-items-center justify-content-center">
              <span class="ot-funfact-icon">
                <i class="flaticon-completed-task"></i>
              </span>
              <div class="ot-funfact-content p-relative bg-mask" data-mask-src="<?= asset('assets/img/shape/funfact-mask1.png') ?>">
                <div class="ot-funfact-bdr">
                  <img src="<?= asset('assets/img/shape/fct-border-mask1.png') ?>" alt="funfact border">
                </div>
                <h3 class="ot-funfact-number z-index-2">
                  <span class="purecounter" data-purecounter-duration="1" data-purecounter-end="25">25</span>+
                </h3>
                <p class="ot-sec-text mb-0 z-index-2">Company Trusted</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- funfact-area end -->

    <!-- skill-area start -->
    <section class="ot-skill-area ot-skill-space1 ot-skill-overlay ot-bg-top-center"
      data-background="<?= asset('assets/img/bg/skill-bg.jpg') ?>">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-8 col-lg-8">
            <div class="ot-title-area ot-skill-titlebox text-center z-index-2 mb-50">
              <span class="ot-sec-subtitle style-2" data-cue="flipInX" data-delay="300">Our Skills Now</span>
              <h3 class="ot-sec-title ot-text-anime-3 text-white">
                Proven Expertise In End-to-End Solar Solutions
              </h3>
            </div>
          </div>
        </div>
        <div class="ot-skill-wrapp z-index-2" data-cue="zoomIn">
          <div class="row">
            <div class="col-xl-12">
              <div class="ot-skill-main ot-skill-box1 theme-bg">
                <div class="ot-skill-item">
                  <div class="ot-skill-name">Solar Panel Installation (Residential & Commercial)</div>
                  <div class="ot-skill-bar">
                    <div class="ot-skill-per" data-per="95%"></div>
                  </div>
                </div>
                <div class="ot-skill-item">
                  <div class="ot-skill-name">On-Grid Rooftop Solar Solutions</div>
                  <div class="ot-skill-bar">
                    <div class="ot-skill-per" data-per="92%"></div>
                  </div>
                </div>
                <div class="ot-skill-item">
                  <div class="ot-skill-name">Inverters, Batteries & Energy Storage</div>
                  <div class="ot-skill-bar">
                    <div class="ot-skill-per" data-per="90%"></div>
                  </div>
                </div>
                <div class="ot-skill-item">
                  <div class="ot-skill-name">Maintenance, Repair & System Performance Support</div>
                  <div class="ot-skill-bar">
                    <div class="ot-skill-per" data-per="88%"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- skill-area end -->

    <!-- case-study area start  -->
    <section class="ot-case-study-area pb-120 ot-casestudy-space ot-bg-style theme-black"
      data-background="<?= asset('assets/img/bg/case-study-bg.png') ?>">
      <div class="container">
        <div class="ot-title-area z-index-2 mb-50">
          <div class="row align-items-end">
            <div class="col-xxl-6 col-xl-7 col-lg-6 col-md-8">
              <div class="ot-casestudy-titlebox z-index-2">
                <span class="ot-sec-subtitle style-2" data-cue="flipInX" data-delay="300">OUR PORTFOLIO</span>
                <h3 class="ot-sec-title ot-text-anime-3 text-white">
                  Recent Solar Projects & Installations
                </h3>
              </div>
            </div>
            <div class="col-xxl-6 col-xl-5 col-lg-6 col-md-4">
              <div class="ot-casestudy-btn text-md-end mb-25" data-cue="flipInX" data-delay="600">
                <a href="portfolio.php" class="ot-btn-primary">Explore All</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <?php $homeProjects = projects_all(); ?>
      <div class="ot-casestudy-wrapp">
        <div class="swiper ot-casestudy-active mb-60" data-real-total="<?= (int)count($homeProjects) ?>">
          <div class="swiper-wrapper">
            <?php if ($homeProjects): ?>
              <?php foreach ($homeProjects as $p): ?>
                <?php
                  $projectUrl = 'project-detail.php?slug=' . urlencode((string)($p['slug'] ?? ''));
                  $projectTitle = trim((string)($p['title'] ?? ''));
                  if ($projectTitle === '') {
                      $projectTitle = 'Solar Project';
                  }
                  $projectCategory = trim((string)($p['category'] ?? ''));
                  if ($projectCategory === '') {
                      $projectCategory = 'Solar';
                  }
                  $tag1 = $projectCategory;
                  $tag2 = 'Installation';
                  $tag3 = 'Support';
                ?>
                <div class="swiper-slide">
                  <div class="ot-casestudy-card p-relative">
                    <div class="ot-casestudy-img1">
                      <a href="<?= h($projectUrl) ?>">
                        <img src="<?= h(img_url($p['image_path'] ?? null, 'assets/img/about/ab-img-3-1.jpg')) ?>" alt="<?= h($projectTitle) ?>">
                      </a>
                    </div>
                    <div class="ot-casestudy-content">
                      <span class="ot-casestudy-categorie mb-15"><?= h($projectCategory) ?></span>
                      <h3 class="ot-box-title text-white mb-30">
                        <a href="<?= h($projectUrl) ?>" class="ot-line-hover"><?= h($projectTitle) ?></a>
                      </h3>
                      <div class="ot-card-tagbox d-sm-flex gap-2 align-items-center">
                        <a href="portfolio.php" class="ot-card-tag"><?= h($tag1) ?></a>
                        <a href="portfolio.php" class="ot-card-tag"><?= h($tag2) ?></a>
                        <a href="portfolio.php" class="ot-card-tag"><?= h($tag3) ?></a>
                      </div>
                    </div>
                  </div>
                </div>
              <?php endforeach; ?>
            <?php else: ?>
              <div class="swiper-slide">
                <div class="ot-casestudy-card p-relative">
                  <div class="ot-casestudy-img1">
                    <a href="portfolio.php">
                      <img src="<?= asset('assets/img/about/ab-img-3-1.jpg') ?>" alt="portfolio image">
                    </a>
                  </div>
                  <div class="ot-casestudy-content">
                    <span class="ot-casestudy-categorie mb-15">Solar</span>
                    <h3 class="ot-box-title text-white mb-30">
                      <a href="portfolio.php" class="ot-line-hover">Add projects from Admin Panel</a>
                    </h3>
                    <div class="ot-card-tagbox d-sm-flex gap-2 align-items-center">
                      <a href="portfolio.php" class="ot-card-tag">Portfolio</a>
                      <a href="portfolio.php" class="ot-card-tag">Projects</a>
                      <a href="portfolio.php" class="ot-card-tag">Solar</a>
                    </div>
                  </div>
                </div>
              </div>
            <?php endif; ?>
          </div>
        </div>
        <div class="ot-casestudy-controll-wrapp">
          <div class="container">
            <div class="ot-pagination-controll-box d-flex align-items-center justify-content-between">
              <div class="ot-casestudy-pagination number-pagination"></div>
              <div class="ot-pagination-arrow d-flex gap-3 align-items-center">
                <button class="ot-slide-arrow ot-prev text-white">
                  <i class="fa-solid fa-arrow-left"></i>
                </button>
                <button class="ot-slide-arrow ot-next text-white">
                  <i class="fa-solid fa-arrow-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- case-study area end  -->

    <!-- choose-area start -->
    <section class="ot-choose-2-area ot-choose-space ot-choose-overlay overflow-hidden p-relative ot-bg-style"
      data-background="<?= asset('assets/img/bg/choose-bg-2-1.jpg') ?>">
      <div class="ot-choose-triangle-shape top"></div>
      <div class="ot-choose-triangle-shape bottom"></div>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-5 col-lg-5">
            <div class="ot-title-area text-center z-index-2">
              <span class="ot-sec-subtitle style-2" data-cue="flipInX" data-delay="300">Why we Choose us</span>
              <h3 class="ot-sec-title ot-text-anime-3 text-white">
                Why Choose Bhatt Enterprises
              </h3>
            </div>
          </div>
        </div>
        <div class="ot-choose-wrapp z-index-2">
          <div class="row row align-items-center align-items-xl-start">
            <div class="col-xl-4 col-lg-4 order-1 order-lg-0">
              <div class="ot-choose-item d-flex gap-1 gap-sm-3 align-items-start" data-cue="slideInUp" data-delay="200">
                <span class="ot-choose-icon">
                  <img src="<?= asset('assets/img/icon/choose-img-3-1.svg') ?>" alt="tree leaves icon">
                </span>
                <div class="ot-choose-content">
                  <h3 class="ot-box-title mb-20 text-white">
                    Authorized Tata Power Solar Partner
                  </h3>
                  <p class="ot-sec-text text-white me-xxl-5 pe-xxl-5">
                    Trusted products and processes backed by a leading solar brand partnership.
                  </p>
                </div>
              </div>
              <div class="ot-choose-item d-flex gap-1 gap-sm-3 align-items-start" data-cue="slideInUp" data-delay="400">
                <span class="ot-choose-icon">
                  <img src="<?= asset('assets/img/icon/choose-img-3-2.svg') ?>" alt="tree leaves icon">
                </span>
                <div class="ot-choose-content">
                  <h3 class="ot-box-title mb-20 text-white">
                    Quality Equipment & Workmanship
                  </h3>
                  <p class="ot-sec-text text-white me-xxl-5 pe-xxl-5">
                    Genuine solar panels, inverters and accessories with safe, neat installation.
                  </p>
                </div>
              </div>
              <div class="ot-choose-item d-flex gap-1 gap-sm-3 align-items-start" data-cue="slideInUp" data-delay="600">
                <span class="ot-choose-icon">
                  <img src="<?= asset('assets/img/icon/choose-img-3-3.svg') ?>" alt="tree leaves icon">
                </span>
                <div class="ot-choose-content">
                  <h3 class="ot-box-title mb-20 text-white">
                    Transparent Pricing & Savings Focus
                  </h3>
                  <p class="ot-sec-text text-white me-xxl-5 pe-xxl-5">
                    Clear proposals and system sizing that prioritizes performance and bill reduction.
                  </p>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 order-0 order-lg-1 align-self-xl-end">
              <div class="ot-choose-thumb mt-65 text-center text-lg-start">
                <img id="reload" src="<?= asset('assets/img/choose/earth-2.png') ?>" alt="earth image">
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 order-2 order-lg-2">
              <div class="ot-choose-item d-flex flex-lg-row-reverse gap-1 gap-sm-3 align-items-start"
                data-cue="slideInUp" data-delay="200">
                <span class="ot-choose-icon">
                  <img src="<?= asset('assets/img/icon/choose-img-3-4.svg') ?>" alt="tree leaves icon">
                </span>
                <div class="ot-choose-content text-lg-end">
                  <h3 class="ot-box-title mb-20 text-white">
                    Expert Solar Installation Team
                  </h3>
                  <p class="ot-sec-text text-white ms-xxl-5 ps-xxl-5">
                    Skilled technicians for mounting, wiring and commissioning with safety-first standards.
                  </p>
                </div>
              </div>
              <div class="ot-choose-item d-flex flex-lg-row-reverse gap-1 gap-sm-3 align-items-start"
                data-cue="slideInUp" data-delay="400">
                <span class="ot-choose-icon">
                  <img src="<?= asset('assets/img/icon/choose-img-3-5.svg') ?>" alt="tree leaves icon">
                </span>
                <div class="ot-choose-content text-lg-end">
                  <h3 class="ot-box-title mb-20 text-white">
                    End-to-End Consultation & Planning
                  </h3>
                  <p class="ot-sec-text text-white ms-xxl-5 ps-xxl-5">
                    Site survey, load analysis and right system selection for homes and businesses.
                  </p>
                </div>
              </div>
              <div class="ot-choose-item d-flex flex-lg-row-reverse gap-1 gap-sm-3 align-items-start"
                data-cue="slideInUp" data-delay="600">
                <span class="ot-choose-icon">
                  <img src="<?= asset('assets/img/icon/choose-img-3-6.svg') ?>" alt="tree leaves icon">
                </span>
                <div class="ot-choose-content text-lg-end">
                  <h3 class="ot-box-title mb-20 text-white">
                    Maintenance, Repair & Support
                  </h3>
                  <p class="ot-sec-text text-white ms-xxl-5 ps-xxl-5">
                    Reliable after-sales service to keep your solar system performing year-round.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- choose-area end -->

    <!-- process-area start -->
    <section class="ot-process-area p-relative ot-space overflow-hidden theme-black ot-bg-style"
      data-background="<?= asset('assets/img/bg/process-bg.png') ?>">
      <div class="container">
        <div class="ot-process-wrapp z-index-2">
          <div class="ot-title-area ot-process-titlebox3 mb-60">
            <div class="row justify-content-between">
              <div class="col-xl-7 col-lg-7">
                <span class="ot-sec-subtitle style-2" data-cue="flipInX" data-delay="300">Working Process</span>
                <h3 class="ot-sec-title ot-text-anime-3 text-white">
                  Simple Solar Installation Process
                </h3>
              </div>
              <div class="col-xl-5 col-lg-5 d-flex justify-content-lg-end">
                <div class="ot-user-box ot-user-box3 d-inline-flex gap-5 align-items-center" data-cue="flipInX"
                  data-delay="300">
                  <div class="ot-user-imgbox d-flex">
                    <span class="ot-user-img">
                      <img src="<?= asset('assets/img/hero/h-user-2-1.png') ?>" alt="hero review">
                    </span>
                    <span class="ot-user-img">
                      <img src="<?= asset('assets/img/hero/h-user-2-2.png') ?>" alt="hero review">
                    </span>
                    <span class="ot-user-img">
                      <img src="<?= asset('assets/img/hero/h-user-2-3.png') ?>" alt="hero review">
                    </span>
                    <span class="ot-user-img">
                      <img src="<?= asset('assets/img/hero/h-user-2-4.png') ?>" alt="hero review">
                    </span>
                    <span class="ot-user-img p-relative">
                      <img src="<?= asset('assets/img/hero/h-user-1-6.png') ?>" alt="hero review">
                      <span class="ot-user-plus"><i class="fa-solid fa-plus"></i></span>
                    </span>
                  </div>
                  <div class="ot-user-3-content">
                    <h3 class="ot-user-counter-number">
                      <span class="purecounter" data-purecounter-duration="1" data-purecounter-end="200">200</span>+
                    </h3>
                    <p class="ot-user-text text-white">Happy Clients</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ot-process-box-wrapp2">
            <div class="row gx-60 gy-30 align-items-center justify-content-center">
              <div class="col-xl-4 col-lg-4 col-md-6" data-cue="slideInUp">
                <div class="ot-process-cardbox p-relative">
                  <div class="ot-process-dashed-right d-none d-lg-block">
                    <img src="<?= asset('assets/img/shape/dashe-right.png') ?>" alt="dashe-right">
                  </div>
                  <div class="ot-process-card card-style-2">
                    <div class="ot-process-content mb-20">
                      <h3 class="ot-box-title text-white">
                        <a href="services.php" class="ot-line-hover">Site Survey & Consultation</a>
                      </h3>
                      <p class="ot-sec-text mb-0 text-white">
                        We assess your location, energy needs, and rooftop space to recommend the right solar system.
                      </p>
                    </div>
                    <div class="ot-process-icon-box d-flex align-items-center justify-content-between">
                      <p class="ot-process-number">01</p>
                      <span class="ot-process-icon">
                        <i class="flaticon-solar-panel"></i>
                      </span>
                    </div>
                  </div>
                  <div class="ot-process-dashed-bottom d-none d-lg-block">
                    <img src="<?= asset('assets/img/shape/dashe-bottom.png') ?>" alt="dashe-bottom">
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-4 col-md-6" data-cue="slideInUp">
                <div class="ot-process-cardbox p-relative">
                  <div class="ot-process-dashed-bottom d-none d-lg-block">
                    <img src="<?= asset('assets/img/shape/dashe-up.png') ?>" alt="dashe-bottom">
                  </div>
                  <div class="ot-process-card card-style-2">
                    <div class="ot-process-content mb-20">
                      <h3 class="ot-box-title text-white">
                        <a href="services.php" class="ot-line-hover">Design, Installation & Commissioning</a>
                      </h3>
                      <p class="ot-sec-text mb-0 text-white">
                        Professional mounting, wiring, and inverter setup with safety checks for smooth activation.
                      </p>
                    </div>
                    <div class="ot-process-icon-box d-flex align-items-center justify-content-between">
                      <p class="ot-process-number">02</p>
                      <span class="ot-process-icon">
                        <i class="flaticon-electrician"></i>
                      </span>
                    </div>
                  </div>
                  <div class="dashed-bottom-right d-none d-lg-block">
                    <img src="<?= asset('assets/img/shape/dashe-right.png') ?>" alt="dashe-right">
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-lg-4 col-md-6" data-cue="slideInUp">
                <div class="ot-process-cardbox p-relative">
                  <div class="ot-process-dashed-right d-none d-lg-block">
                    <img src="<?= asset('assets/img/shape/dashe-right.png') ?>" alt="dashe-right">
                  </div>
                  <div class="ot-process-card card-style-2">
                    <div class="ot-process-content mb-20">
                      <h3 class="ot-box-title text-white">
                        <a href="services.php" class="ot-line-hover">Monitoring, Maintenance & Support</a>
                      </h3>
                      <p class="ot-sec-text mb-0 text-white">
                        We help maintain performance with guidance, servicing, and quick issue resolution when needed.
                      </p>
                    </div>
                    <div class="ot-process-icon-box d-flex align-items-center justify-content-between">
                      <p class="ot-process-number">03</p>
                      <span class="ot-process-icon">
                        <i class="flaticon-electrician"></i>
                      </span>
                    </div>
                  </div>
                  <div class="ot-process-dashed-bottom d-none d-lg-block">
                    <img src="<?= asset('assets/img/shape/dashe-bottom.png') ?>" alt="dashe-bottom">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- process-area end -->

   

    <!-- cta-area start -->
    <section class="ot-cta-area ot-space-sm2 ot-cta-overlay ot-bg-style" data-background="<?= asset('assets/img/bg/cta-bg-1-1.jpg') ?>">
      <div class="container">
        <div class="ot-cta-wrapp z-index-2">
          <div class="ot-title-area ot-cta-titlebox2">
            <h3 class="ot-sec-title ot-text-anime-3 text-white">
              Ready to Switch to Solar?
            </h3>
          </div>
          <div class="row align-items-center justify-content-between">
            <div class="col-xl-3 col-lg-3" data-cue="slideInLeft">
              <h3 class="ot-cta-title text-white">Bhatt Enterprises</h3>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-9 d-flex justify-content-center" data-cue="slideInUp">
              <div class="ot-cta-dscbox d-sm-flex gap-5 align-items-center">
                <span class="ot-cta-icon2">
                  <img src="<?= asset('assets/img/icon/star.svg') ?>" alt="star">
                </span>
                <p class="ot-sec-text text-white">
                  From rooftop solar installation to inverters, batteries, and complete
                  energy solutions, we help homes and businesses reduce electricity
                  costs with reliable and sustainable solar power systems.
                </p>
              </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3" data-cue="slideInRight">
              <div class="ot-cta-btn text-md-end">
                <a href="contact.php" class="ot-btn-primary white-yellow">Get Free Consultation</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- cta-area end -->
  