<?php
declare(strict_types=1);
require_once __DIR__ . '/config.php';
require_once __DIR__ . '/includes/functions.php';
$pageTitle = 'About Us — ' . setting('company_name', SITE_NAME);
$current = 'about';
$breadcrumbTitle = 'About Us';
require __DIR__ . '/includes/head.php';
require __DIR__ . '/includes/preloader.php';
require __DIR__ . '/includes/offcanvas.php';
require __DIR__ . '/includes/header.php';
require __DIR__ . '/includes/breadcrumb.php';

?>
  <main>
    <style>
      .about-funfact-card {
        position: relative;
        justify-content: flex-start !important;
      }

      .about-funfact-card .ot-funfact-icon {
        position: relative;
        z-index: 2;
        margin-right: -18px;
      }

      .about-funfact-content {
        min-width: 190px;
        padding-left: 54px !important;
      }
    </style>

  


    <section class="ot-about-area ot-space about-inner-space">
      <div class="container">
        <div class="ot-title-area mb-40">
          <div class="row align-items-center justify-content-between">
            <div class="col-xl-8 col-lg-7 col-12 mb-4 mb-md-0">
              <div class="ot-about-titlebox me-5">
                <span class="ot-sec-subtitle">About Us</span>
                <h3 class="ot-sec-title text-uppercase ot-text-anime-3">
                  <span class="theme-text2">Empowering</span> Your Home With <span class="theme-text1">Sunshine</span>
                </h3>
              </div>
            </div>
            <div class="col-xl-4 col-lg-5 col-12">
              <div class="ot-about-right">
                <p class="ot-sec-text ms-xl-4 ms-xxl-5 ps-xxl-4">
                  Bhatt Enterprises provides complete solar energy solutions for homes and businesses, from planning to long-term support.
                </p>
                <div class="ot-about-userbox mt-30 d-sm-flex gap-3 align-items-center justify-content-xl-end">
                  <div class="ot-about-btn mb-3 mb-sm-0">
                    <a href="contact.php" class="ot-btn-primary btn-lg">ABOUT US</a>
                  </div>
                  <div class="ot-about-user d-flex gap-3 align-items-center">
                    <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 mb-1">Bhatt Enterprises</h4>
                      <p class="user-designation mb-0">Solar Solutions Provider</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="ot-about-wrapp">
          <div class="row gy-4">
            <div class="col-xl-5 col-lg-6 order-1 order-lg-0">
              <div class="ot-about-feature-box5 smoke-bg">
                <div class="ot-about-feature-item">
                  <span class="ot-about-feature-icon"><i class="flaticon-sustainability fs-1"></i></span>
                  <div class="ot-about-feature-content">
                    <h3 class="ot-about-feature-title">Sustainable & Cost-Efficient</h3>
                    <p class="ot-about-feature-text clamp-3">
                      We help customers reduce electricity costs with smart solar systems built for long-term performance.
                    </p>
                  </div>
                </div>
                <div class="ot-about-feature-item">
                  <span class="ot-about-feature-icon"><i class="flaticon-thunderbolt fs-1"></i></span>
                  <div class="ot-about-feature-content">
                    <h3 class="ot-about-feature-title">Reliable Power Solutions</h3>
                    <p class="ot-about-feature-text clamp-3">
                      From rooftop systems to inverters and batteries, we provide integrated solutions for stable energy.
                    </p>
                  </div>
                </div>
                <div class="ot-about-feature-item">
                  <span class="ot-about-feature-icon"><i class="flaticon-house-1 fs-1"></i></span>
                  <div class="ot-about-feature-content">
                    <h3 class="ot-about-feature-title">Residential & Commercial Expertise</h3>
                    <p class="ot-about-feature-text clamp-3">
                      Our team handles installation, wiring, and commissioning for homes, offices, and commercial sites.
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-7 col-lg-6 order-0 order-lg-1">
              <div class="ot-about-imgbox5 ms-lg-2 h-100 d-flex align-items-end justify-content-between ot-bg-style rounded-3"
                data-background="<?= asset('assets/img/bg/about-bg-3-1.png') ?>">
                <div class="ot-about-img5 ms-3">
                  <img src="<?= asset('assets/img/about/ab-img-3-1.jpg') ?>" alt="about image">
                </div>
                <div class="ot-about-img5 me-xl-5">
                  <img src="<?= asset('assets/img/about/ab-img-3-2.jpg') ?>" alt="about image">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="ot-funfact-area ot-funfact-space1 z-index-2">
      <div class="container">
        <div class="ot-funfact-wrapp3 theme-bg ot-bg-style" data-background="<?= asset('assets/img/bg/funfact-bg-3.png') ?>">
          <div class="row gy-30 justify-content-center">
            <div class="col-xl-3 col-lg-4 col-md-6">
              <div class="ot-funfact-card3 about-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 about-funfact-content p-relative bg-mask px-4 py-3" data-mask-src="<?= asset('assets/img/shape/funfact-mask1.png') ?>">
                  <h3 class="ot-funfact-number z-index-2"><span class="purecounter" data-purecounter-duration="1" data-purecounter-end="115">115</span>+</h3>
                  <p class="ot-sec-text mb-0 z-index-2">Team Support</p>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6">
              <div class="ot-funfact-card3 about-funfact-card d-flex align-items-center justify-content-center">
                <span class="ot-funfact-icon"><i class="flaticon-task"></i></span>
                <div class="ot-funfact-content about-funfact-content p-relative bg-mask px-4 py-3" data-mask-src="<?= asset('assets/img/shape/funfact-mask1.png') ?>">
                  <h3 class="ot-funfact-number z-index-2"><span class="purecounter" data-purecounter-duration="1" data-purecounter-end="250">250</span>+</h3>
                  <p class="ot-sec-text mb-0 z-index-2">Projects Plan</p>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6">
              <div class="ot-funfact-card3 about-funfact-card d-flex align-items-center justify-content-center">
                <span class="ot-funfact-icon"><i class="flaticon-medal"></i></span>
                <div class="ot-funfact-content about-funfact-content p-relative bg-mask px-4 py-3" data-mask-src="<?= asset('assets/img/shape/funfact-mask1.png') ?>">
                  <h3 class="ot-funfact-number z-index-2"><span class="purecounter" data-purecounter-duration="1" data-purecounter-end="360">360</span>+</h3>
                  <p class="ot-sec-text mb-0 z-index-2">Best Advise</p>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6">
              <div class="ot-funfact-card3 about-funfact-card d-flex align-items-center justify-content-center">
                <span class="ot-funfact-icon"><i class="flaticon-trophy"></i></span>
                <div class="ot-funfact-content about-funfact-content p-relative bg-mask px-4 py-3" data-mask-src="<?= asset('assets/img/shape/funfact-mask1.png') ?>">
                  <h3 class="ot-funfact-number z-index-2"><span class="purecounter" data-purecounter-duration="1" data-purecounter-end="390">390</span>+</h3>
                  <p class="ot-sec-text mb-0 z-index-2">Award winner</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <?php $testimonials = testimonials_all(); ?>
    <section class="ot-testimonial-area-5 theme-black ot-bg-style ot-testimonial-extra-space"
         data-background="assets/img/bg/testi-bg-2-1.png">
         <div class="container">
            <div class="ot-title-area ot-testimonial-titlebox3 text-center mb-30">
               <span class="ot-sec-subtitle style-2">Clients Testimonials</span>
               <h3 class="ot-sec-title">
                  <span class="theme-text2">We love hearing</span> <span class="text-white">feedback</span> <br>
                  <span class="theme-text1">our customers</span>
               </h3>
            </div>
        <div class="row align-items-center justify-content-center">
          <div class="col-xl-7 col-lg-7">
            <div class="swiper ot-testimonial-active">
              <div class="swiper-wrapper">
                <?php if ($testimonials): ?>
                  <?php foreach ($testimonials as $t): ?>
                    <div class="swiper-slide">
                      <div class="ot-testimonial-card3 text-center">
                        <div class="ot-testimonial-rating mb-20">
                          <?php $rating = max(1, min(5, (int)($t['rating'] ?? 5))); ?>
                          <?php for ($i = 0; $i < $rating; $i++): ?>
                            <span class="testi-rating-icon"><i class="fa-solid fa-star"></i></span>
                          <?php endfor; ?>
                        </div>
                        <p class="ot-sec-text mb-35 ms-md-3 me-md-3 text-white">
                          <?= h((string)($t['content'] ?? 'Excellent service and smooth solar installation experience.')) ?>
                        </p>
                        <div class="ot-testimonial-avatarbox2 d-flex flex-column gap-3 align-items-center">
                          <div class="ot-testimonial-avatar">
                            <img src="<?= asset('assets/img/about/ab-user-1-1.png') ?>" alt="testimonial avatar">
                          </div>
                          <div class="ot-testimonial-avatar-info">
                            <h3 class="ot-testimonial-avatar-title"><?= h((string)($t['client_name'] ?? 'Happy Customer')) ?></h3>
                            <p class="ot-testimonial-avatar-designation text-white mb-0">Customer</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  <?php endforeach; ?>
                <?php else: ?>
                  <div class="swiper-slide">
                    <div class="ot-testimonial-card3 text-center">
                      <div class="ot-testimonial-rating mb-20">
                        <span class="testi-rating-icon"><i class="fa-solid fa-star"></i></span>
                        <span class="testi-rating-icon"><i class="fa-solid fa-star"></i></span>
                        <span class="testi-rating-icon"><i class="fa-solid fa-star"></i></span>
                        <span class="testi-rating-icon"><i class="fa-solid fa-star"></i></span>
                        <span class="testi-rating-icon"><i class="fa-solid fa-star"></i></span>
                      </div>
                      <p class="ot-sec-text mb-35 ms-md-3 me-md-3 text-white">
                        Bhatt Enterprises delivered a professional solar installation with clear guidance and great after-sales support.
                      </p>
                      <div class="ot-testimonial-avatarbox2 d-flex flex-column gap-3 align-items-center">
                        <div class="ot-testimonial-avatar">
                          <img src="<?= asset('assets/img/about/ab-user-1-1.png') ?>" alt="testimonial avatar">
                        </div>
                        <div class="ot-testimonial-avatar-info">
                          <h3 class="ot-testimonial-avatar-title">Residential Client</h3>
                          <p class="ot-testimonial-avatar-designation text-white mb-0">Bilaspur</p>
                        </div>
                      </div>
                    </div>
                  </div>
                <?php endif; ?>
              </div>
            </div>
          </div>
           <div class="ot-testimonial-arrow-wrapp d-none d-lg-flex justify-content-between align-items-center">
                  <div class="ot-testimonial-arrow d-flex align-items-center justify-content-start">
                     <div class="ot-testimonial-arrow-shape">
                        <img src="assets/img/shape/arrow-shape-5-1.png" alt="arrow-shape">
                     </div>
                     <button class="ot-testimonial-left-btn ot-btn-primary yellow-btn ot-prev">
                        <i class="fa-solid fa-arrow-left"></i>
                     </button>
                  </div>
                  <div class="ot-testimonial-arrow d-flex  align-items-center justify-content-end">
                     <button class="ot-testimonial-right-btn ot-btn-primary ot-next">
                        <i class="fa-solid fa-arrow-right"></i>
                     </button>
                     <div class="ot-testimonial-arrow-shape">
                        <img src="assets/img/shape/arrow-shape-5-2.png" alt="arrow-shape">
                     </div>
                  </div>
               </div>
        </div>
      </div>
    </section>

    <section class="ot-choose-area ot-space">
         <div class="container">
            <div class="ot-title-area ot-choose-titlebox2 mb-40">
               <div class="row align-items-end justify-content-between">
                  <div class="col-xl-8 col-lg-8 col-md-9">
                     <span class="ot-sec-subtitle">Why we choose us</span>
                     <h3 class="ot-sec-title text-uppercase">
                        <span class="theme-text2">Empowering</span> Your with <span class="theme-text1">Sunshine</span>
                     </h3>
                  </div>
                  <div class="col-xl-4 col-lg-4 col-md-3 d-none d-md-block">
                     <div class="ot-battery-image ms-2 mb-20 text-center">
                        <img src="assets/img/choose/choose-5-1.png" alt="battery user">
                     </div>
                  </div>
               </div>
            </div>
            <div class="ot-choose-wrapp mt-0">
               <div class="row">
                  <div class="col-xl-8">
                     <div class="ot-choose-left d-flex align-items-center">
                        <div class="ot-review-box text-center theme-bg rounded">
                           <p class="review-text text-white mb-20">Explore Our Trust Score Customer's Reviews</p>
                           <div class="ot-user-imgbox mb-20 me-4">
                              <span class="ot-user-img">
                                 <img src="assets/img/hero/h-user-1-1.png" alt="hero review">
                              </span>
                              <span class="ot-user-img">
                                 <img src="assets/img/hero/h-user-1-2.png" alt="hero review">
                              </span>
                              <span class="ot-user-img">
                                 <img src="assets/img/hero/h-user-1-3.png" alt="hero review">
                              </span>
                              <span class="ot-user-img">
                                 <img src="assets/img/hero/h-user-1-4.png" alt="hero review">
                              </span>
                              <span class="ot-user-img p-relative">
                                 <span class="ot-user-plus"><i class="fa-solid fa-plus"></i></span>
                              </span>
                           </div>
                           <h3 class="review-count text-white mb-0">4.9/5</h3>
                        </div>
                        <div class="ot-choose-thumb-2 p-relative">
                           <img src="assets/img/choose/choose-5-2.png" alt="about image">
                           <div class="ot-video-icon2">
                              <a href="https://www.youtube.com/watch?v=LBZzNQLQgf0" class="popup-video">
                                 <img src="assets/img/icon/video-icon.png" alt="video icon">
                              </a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-xl-4">
                     <div class="ot-about-feature-box ot-choose-feature-box">
                        <div class="ot-choose-feature-item gap-4 d-flex">
                           <div class="ot-about-feature-content">
                              <h3 class="ot-box-title pb-10">01. Consultation & Site Survey</h3>
                              <p class="ot-sec-text mb-0">We analyze your usage and rooftop conditions to design the right system capacity. </p>
                           </div>
                        </div>
                        <div class="ot-choose-feature-item gap-4 d-flex">
                           <div class="ot-about-feature-content">
                              <h3 class="ot-box-title pb-10">02. Quality Installation</h3>
                              <p class="ot-sec-text mb-0">Safe mounting, professional wiring, and proper commissioning for reliable performance.

.</p>
                           </div>
                        </div>
                        <div class="ot-choose-feature-item gap-4 d-flex">
                           <div class="ot-about-feature-content">
                              <h3 class="ot-box-title pb-10">03. Ongoing Support</h3>
                              <p class="ot-sec-text mb-0">Maintenance, service assistance, and guidance to maximize long-term energy savings.</p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>

   
  </main>
<?php require __DIR__ . '/includes/footer.php'; ?>
