 
<?php 
header('Content-Type: text/html; charset=UTF-8');
mb_internal_encoding('UTF-8');

include 'includes/header.php';
include_once __DIR__ . '/admin/config/db.php';
/* FETCH TESTIMONIAL IMAGES */
$images = [];
$q = mysqli_query($conn, "SELECT image FROM testimonials ORDER BY id DESC");
if ($q) {
  while ($r = mysqli_fetch_assoc($q)) {
    if (!empty($r['image'])) {
      $images[] = "admin/uploads/testimonials/" . $r['image'];
    }
  }
}

/* FETCH GALLERY IMAGES */
$galleryImages = [];
$gq = mysqli_query($conn, "SELECT image FROM case_studies ORDER BY id DESC");
while ($gr = mysqli_fetch_assoc($gq)) {
  $galleryImages[] = "admin/uploads/case_studies/" . $gr['image'];
}

/* Safety check */
if (!isset($conn) || !$conn) {
    die("Database connection failed");
}

/* Fetch blogs */
$sql = "SELECT id, image, title, description FROM blogs ORDER BY id DESC LIMIT 3";
$blogs = mysqli_query($conn, $sql);

error_reporting(E_ALL);
ini_set('display_errors', 1);
 
include_once __DIR__ . '/admin/config/db.php';

/*
  Supports ALL:
  - youtube.com/watch?v=VIDEOID
  - youtu.be/VIDEOID
  - youtube.com/embed/VIDEOID
  - youtube.com/shorts/VIDEOID
  - youtube.com/live/VIDEOID   ✅ FIX
*/
function getYoutubeId($url) {

    $parsed = parse_url($url);

    // LIVE, SHORTS, EMBED → /live/ID, /shorts/ID, /embed/ID
    if (!empty($parsed['path'])) {
        $parts = explode('/', trim($parsed['path'], '/'));
        if (in_array($parts[0], ['live', 'shorts', 'embed']) && isset($parts[1])) {
            return $parts[1];
        }
    }

    // youtu.be short link
    if (isset($parsed['host']) && strpos($parsed['host'], 'youtu.be') !== false) {
        return trim($parsed['path'], '/');
    }

    // watch?v=ID
    if (!empty($parsed['query'])) {
        parse_str($parsed['query'], $vars);
        if (isset($vars['v'])) {
            return $vars['v'];
        }
    }

    return '';
}

$videoQuery = mysqli_query($conn, "SELECT title, youtube_link FROM videos ORDER BY id DESC LIMIT 3");

if (!$videoQuery) {
    die("Video DB Error: " . mysqli_error($conn));
}
?>
 

<style>
/* ===============================
   HERO – PERFECT DESKTOP + MOBILE
================================ */

#hero{
  width:100%;
  height:65vh;                 /* DESKTOP HEIGHT */
  min-height:460px;
  position:relative;
  overflow:hidden;
  background:#000;
}

/* SLIDER */
.hero-slider{
  display:flex;
  width:100%;
  height:100%;
  transition:transform 0.8s ease-in-out;
}

/* SLIDE */
.hero-slide{
  flex:0 0 100%;
  height:100%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 30%;  /* 🔥 DESKTOP FIX */
}

/* OVERLAY */
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:2;
}

/* CONTENT */
#hero .container{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:0 15px;
}

#hero h2{
  font-size:38px;
  font-weight:900;
  background:linear-gradient(90deg,#ff9933,#ff6a00);
  -webkit-background-clip:text;
   
}

#hero p{
  font-size:17px;
  font-weight:600;
  color:#eaffea;
}

.btn-get-started{
  padding:13px 32px;
  border-radius:30px;
  background:linear-gradient(90deg,#ff6a00,#ff9933);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  margin-top:14px;
}

/* ===============================
   LARGE DESKTOP (WIDE SCREENS)
================================ */
@media(min-width:1400px){
  #hero{
    height:100vh;
    min-height:520px;
  }

  .hero-slide{
    background-position:center 25%;
  }
}

/* ===============================
   TABLET
================================ */
@media(max-width:991px){
  #hero{
    height:55vh;
    min-height:380px;
  }

  #hero h2{font-size:30px;}
}

/* ===============================
   MOBILE – KEEP PERFECT
================================ */
@media(max-width:768px){
  #hero{
    height:45vh;
    min-height:300px;
  }

  .hero-slide{
    background-position:center top;   /* 🔥 MOBILE PERFECT */
  }

  #hero h2{font-size:24px;}
  #hero p{font-size:14px;}
}
</style>


<section id="hero">

  <div class="hero-slider" id="heroSlider">
    <?php
    $q = mysqli_query($conn,"SELECT image FROM slider ORDER BY id DESC");
    while($r = mysqli_fetch_assoc($q)):
      $img = "admin/uploads/slider/" . htmlspecialchars($r['image']);
    ?>
      <div class="hero-slide" style="background-image:url('<?= $img ?>');"></div>
    <?php endwhile; ?>
  </div>

  <div class="container">
    <div>
      <h2>श्री अमित प्रताप सिंह (प्रधान)</h2>
      <p>भारतीय जनता पार्टी – गोवर्धन विधानसभा</p>
      <a href="about.php" class="btn-get-started">और जानें</a>
    </div>
  </div>

</section>

<script>
/* AUTO SLIDER */
const slider = document.getElementById("heroSlider");
const slides = slider.children.length;
let index = 0;

setInterval(()=>{
  index = (index + 1) % slides;
  slider.style.transform = `translateX(-${index * 100}%)`;
},5000);
</script>
<hr>

<style>
/* ===== ABOUT PAGE BJP THEME ===== */

.about-page {
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 100%);
  
}

/* ===== SECTION TITLE ===== */
.about .section-title h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 42px;              /* ðŸ”¥ BIGGER */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #ff9933, #ff6a00);
  -webkit-background-clip: text;
 
}

.about .section-title p {
  color: #1faa06;
  font-weight: 700;
  font-size: 18px;              /* ðŸ”¥ BIGGER */
}

/* IMAGE */
.about img {
  border-radius: 12px;
  border: 5px solid #ff9933;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* ===== CONTENT ===== */
.about .content h2 {
  font-size: 32px;              /* ðŸ”¥ BIGGER */
  font-weight: 900;
  color: #ff6a00;
  margin-bottom: 15px;
}

.about .content .fst-italic {
  color: #333;
  font-weight: 600;
  font-size: 18px;              /* ðŸ”¥ BIGGER */
  line-height: 1.8;
}

/* LIST */
.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding: 10px 0;
  font-size: 17px;              /* ðŸ”¥ BIGGER */
  font-weight: 600;
  color: #222;
}

.about ul li i {
  color: #ff9933;
  margin-right: 6px;
}

.about ul li strong {
  color: #1faa06;
}

.about .content p:last-child {
  color: #444;
  line-height: 1.9;
  font-weight: 600;
  font-size: 17px;              /* ðŸ”¥ BIGGER */
}

/* =========================
   MOBILE â€“ EXTRA READABLE
========================= */
@media (max-width: 768px) {

  .about .section-title h2 {
    font-size: 32px;            /* ðŸ”¥ BIG */
  }

  .about .section-title p {
    font-size: 16px;
  }

  #aboutImage {
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 25px;
  }

  .about .content h2 {
    font-size: 26px;
    text-align: center;
  }

  .about .content .fst-italic {
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
  }

  .about ul li {
    font-size: 15.5px;
  }

  .about .content p:last-child {
    font-size: 15.5px;
  }
}
</style>

<main class="main">
  <div class="about-page">

    <section id="about" class="about section">

      <div class="container section-title text-center" data-aos="fade-up">
        <h2 style="padding-top:30px">परिचय</h2>
        <p>सामाजिक सेवा और विकास के लिए समर्पित जनप्रतिनिधि</p>
      </div>

      <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="row gy-4 justify-content-center align-items-center">

          <!-- IMAGE -->
          <div class="col-lg-4 text-center">
            <img
              src="<?= !empty($images) ? $images[0] : 'assets/img/1.jpeg' ?>"
              class="img-fluid"
              alt="Shri Amit Pratap Singh"
              id="aboutImage"
              style="max-width:420px;width:100%;transition:opacity 1.2s ease-in-out;">
          </div>

          <!-- CONTENT -->
          <div class="col-lg-8 content">
            <h2>जनप्रतिनिधि एवं समाज</h2>

            <p class="fst-italic py-3">
             श्री अमित प्रताप सिंह (प्रधान) एक समर्पित समाजसेवी एवं भारतीय जनता पार्टी के सक्रिय सदस्य हैं, जो जनकल्याण और जमीनी स्तर के विकास के लिए निरंतर कार्य कर रहे हैं।
            </p>

            <div class="row">
  <div class="col-lg-6">
    <ul>
      <li><i class="bi bi-chevron-right"></i> <strong>पद:</strong> प्रधान</li>
      <li><i class="bi bi-chevron-right"></i> <strong>दल:</strong> भारतीय जनता पार्टी (भाजपा)</li>
      <li><i class="bi bi-chevron-right"></i> <strong>फोन:</strong> 7248555999</li>
      <li><i class="bi bi-chevron-right"></i> <strong>निर्वाचन क्षेत्र:</strong> गोवर्धन, मथुरा</li>
    </ul>
  </div>

  <div class="col-lg-6">
    <ul>
      <li><i class="bi bi-chevron-right"></i> <strong>राज्य:</strong> उत्तर प्रदेश</li>
      <li><i class="bi bi-chevron-right"></i> <strong>कार्यालय:</strong> नानपुर, औरंगाबाद</li>
      <li><i class="bi bi-chevron-right"></i> <strong>भूमिका:</strong> जनसेवा</li>
      <li><i class="bi bi-chevron-right"></i> <strong>उपलब्धता:</strong> जनसमस्याओं के समाधान हेतु</li>
    </ul>
  </div>
</div>


            <p class="py-3">
  वह पारदर्शी शासन, समावेशी विकास और सशक्त सामुदायिक भागीदारी में विश्वास रखते हैं।
  उनका कार्य स्थानीय विकास, जनकल्याणकारी योजनाओं के प्रभावी क्रियान्वयन तथा
  जनसमस्याओं के समाधान पर समर्पण और ईमानदारी के साथ केंद्रित है।
</p>

          </div>

        </div>
      </div>

    </section>

  </div>
</main>

<script>
const images = <?= json_encode($images) ?>;
let index = 0;
const img = document.getElementById("aboutImage");

if (images.length > 1) {
  setInterval(() => {
    img.style.opacity = 0;
    setTimeout(() => {
      index = (index + 1) % images.length;
      img.src = images[index];
      img.style.opacity = 1;
    }, 700);
  }, 4000);
}
</script>

 

<hr>
<style>
/* ===== LEADER PROFILE SECTION ===== */

.leader-profile {
  padding: 90px 0;
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 100%);
}

/* LEFT CONTENT */
.leader-profile .content-box h2 {
  font-size: 40px;
  font-weight: 900;
  color: #ff6a00;
  margin-bottom: 8px;
}

.leader-profile .content-box h2 span {
  color: #1faa06;
  font-size: 22px;
}

.leader-profile .content-box h4 {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 18px;
}

.leader-profile .intro,
.leader-profile .vision {
  font-size: 16.5px;
  line-height: 1.85;
  color: #444;
  margin-bottom: 18px;
  font-weight: 500;
}

/* RIGHT IMAGE BOX */
.leader-profile .image-box {
  display: flex;
  justify-content: center;
}

/* IMAGE – FULL BOX (NO BLANK SPACE) */
.leader-profile .image-box img {
  width: 100%;
  max-width: 520px;
  height: 360px;
  object-fit: cover;          /* 🔥 NO BLACK SPACE */
  object-position: center;
  border-radius: 18px;
  border: 5px solid #ff9933;
  box-shadow: 0 14px 35px rgba(0,0,0,0.25);
  transition: opacity 1s ease-in-out;
}

/* MOBILE */
@media (max-width: 768px) {

  .leader-profile {
    padding: 60px 0;
  }

  .leader-profile .content-box h2 {
    font-size: 30px;
    text-align: center;
  }

  .leader-profile .content-box h4,
  .leader-profile .intro,
  .leader-profile .vision {
    text-align: center;
  }

  .leader-profile .image-box img {
    height: 260px;
    max-width: 100%;
  }
}
</style>

<section class="leader-profile">
  <div class="container">
    <div class="section-title text-center mb-5">
      <h2>गैलरी</h2>
      <p>हमारी हाल की गतिविधियाँ</p>
    </div>

    <div class="row align-items-center">

      <!-- LEFT CONTENT -->
      <div class="col-lg-6 content-box">
        <h2>श्री अमित प्रताप सिंह <span>(प्रधान)</span></h2>
        <h4>नेताजी भारतीय जनता पार्टी (भाजपा)</h4>

        <p class="intro">
          श्री अमित प्रताप सिंह एक समर्पित जनप्रतिनिधि एवं
          भारतीय जनता पार्टी के सक्रिय नेता हैं। एक निर्वाचित प्रधान के रूप में
          वे ग्रामीण विकास और जनकल्याण के लिए निरंतर कार्य करते हैं।
        </p>

        <p class="vision">
          उनका दृष्टिकोण पारदर्शी शासन, सरकारी योजनाओं के प्रभावी
          क्रियान्वयन, बुनियादी ढांचे के विकास तथा
          प्रत्येक नागरिक तक योजनाओं का लाभ सुनिश्चित करने पर केंद्रित है।
        </p>
      </div>

      <!-- RIGHT IMAGE (AUTO SLIDE FROM case_studies) -->
      <div class="col-lg-6 image-box">
        <img
          id="leaderImage"
          src="<?= !empty($galleryImages) ? htmlspecialchars($galleryImages[0]) : 'assets/img/placeholder.jpg' ?>"
          alt="श्री अमित प्रताप सिंह">
      </div>

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


<script>
/* AUTO IMAGE CHANGE FROM case_studies */
const leaderImages = <?= json_encode($galleryImages) ?>;
let leaderIndex = 0;
const leaderImg = document.getElementById("leaderImage");

if (leaderImages.length > 1 && leaderImg) {
  setInterval(() => {
    leaderImg.style.opacity = 0;

    setTimeout(() => {
      leaderIndex = (leaderIndex + 1) % leaderImages.length;
      leaderImg.src = leaderImages[leaderIndex];
      leaderImg.style.opacity = 1;
    }, 700);

  }, 4000);
}
</script>

<hr>

<style>
/* PAGE BACKGROUND */
.blog-page {
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 100%);
}

/* SECTION TITLE */
.section-title h2 {
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff9933, #ff6a00);
  -webkit-background-clip: text;
 
}

.section-title p {
  color: #1faa06;
  font-weight: 600;
}

/* BLOG CARD */
.blog-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 4px solid #ff9933;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  transition: 0.3s;

  height: 100%;
  display: flex;
  flex-direction: column;
}

/* IMAGE CONTAINER */
.blog-img-box {
  width: 100%;
  height: 220px;          /* DESKTOP */
  overflow: hidden;
  background: #f2f2f2;
}

/* IMAGE */
.blog-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CONTENT */
.blog-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* TITLE */
.blog-content h4 {
  color: #ff6a00;
  font-weight: 800;
  margin-bottom: 10px;
}

/* DESCRIPTION */
.blog-content p {
  font-size: 14px;
  color: #444;
  margin-bottom: 15px;
  flex-grow: 1;
}

/* READ MORE */
.read-more {
  font-weight: 700;
  color: #1faa06;
  text-decoration: none;
}

.read-more:hover {
  color: #ff6a00;
}

/* =========================
   MOBILE RESPONSIVE FIX
========================= */
@media (max-width: 768px) {

  .section-title h2 {
    font-size: 28px;
  }

  .section-title p {
    font-size: 14px;
  }

  .blog-img-box {
    height: 180px;   /* MOBILE IMAGE HEIGHT */
  }

  .blog-content h4 {
    font-size: 18px;
  }

  .blog-content p {
    font-size: 13px;
  }
}
</style>

<main class="main">
  <div class="blog-page">

    <section class="section py-5">
      <div class="container">

        <!-- SECTION TITLE -->
        <div class="section-title text-center mb-5">
          <h2>ब्लॉग</h2>
          <p>नवीनतम अपडेट और गतिविधियाँ</p>
        </div>

        <!-- BLOG GRID -->
        <div class="row g-4">

          <?php if (mysqli_num_rows($blogs) > 0): ?>
            <?php while ($blog = mysqli_fetch_assoc($blogs)): ?>

              <div class="col-lg-4 col-md-6 col-12 d-flex">
                <div class="blog-card w-100">

                  <!-- IMAGE -->
                  <div class="blog-img-box">
                    <img
                      src="admin/uploads/blogs/<?= htmlspecialchars($blog['image']) ?>"
                      alt="<?= htmlspecialchars($blog['title']) ?>">
                  </div>

                  <!-- CONTENT -->
                  <div class="blog-content">
                    <h4><?= htmlspecialchars($blog['title']) ?></h4>

                    <p>
                  <?php
$desc = trim(strip_tags($blog['description']));

if (mb_strlen($desc, 'UTF-8') > 120) {
  echo htmlspecialchars(mb_substr($desc, 0, 120, 'UTF-8')) . '...';
} else {
  echo htmlspecialchars($desc);
}
?>

                    </p>

                    <a href="blog-details.php?id=<?= $blog['id'] ?>" class="read-more">
                      और पढ़ें →
                    </a>
                  </div>

                </div>
              </div>

            <?php endwhile; ?>
          <?php else: ?>
            <div class="col-12 text-center text-muted">
              कोई ब्लॉग उपलब्ध नहीं है
            </div>
          <?php endif; ?>

        </div>

      </div>
    </section>

  </div>
</main>
 <!---video section -->
<!-- VIDEO SECTION -->
<style>
.video-section{
    width:92%;
    margin:50px auto;
}
.video-section h2{
    font-size:32px;
    margin-bottom:30px;
    font-weight:700;
    border-left:6px solid #ff7a18;
    padding-left:15px;
}
.video-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.video-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.video-card iframe{
    width:100%;
    height:280px;
    border:none;
}
.video-card h4{
    padding:15px;
    margin:0;
    font-size:18px;
    font-weight:600;
}
@media(max-width:1024px){
    .video-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
    .video-grid{grid-template-columns:1fr;}
    .video-card iframe{height:220px;}
}
</style>

<div class="video-section">
  <h2>नवीनतम वीडियो</h2>

  <div class="video-grid">

    <?php if (mysqli_num_rows($videoQuery) > 0): ?>
      <?php while ($row = mysqli_fetch_assoc($videoQuery)): ?>
        <?php
          $videoId = getYoutubeId($row['youtube_link']);
          if ($videoId == '') continue;
        ?>

        <div class="video-card">
          <iframe
            src="https://www.youtube.com/embed/<?= htmlspecialchars($videoId) ?>"
            allowfullscreen>
          </iframe>

          <h4><?= htmlspecialchars($row['title']) ?></h4>
        </div>

      <?php endwhile; ?>
    <?php else: ?>
      <p style="grid-column:1/-1;text-align:center;color:#777;">
        कोई वीडियो उपलब्ध नहीं है
      </p>
    <?php endif; ?>

  </div>
</div>
<!-- VIDEO SECTION -->

 <!---video section -->
<?php include 'includes/footer.php'; ?>
