<?php 
require_once 'includes/db.php';
require_once 'includes/header.php'; 

// Fetch Popup
$popup_query = "SELECT image FROM popup WHERE status = 1 ORDER BY id DESC LIMIT 1";
$popup_result = $conn->query($popup_query);
$popup_image = false;
if($popup_result && $popup_result->num_rows > 0) {
    $popup_row = $popup_result->fetch_assoc();
    $popup_image = "uploads/popups/" . $popup_row['image'];
} else {
    // Dummy fallback for demo
    $popup_image = "https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80";
}

// Fetch Sliders
$slider_query = "SELECT image FROM sliders ORDER BY id DESC";
$slider_result = $conn->query($slider_query);
$sliders = [];
if($slider_result && $slider_result->num_rows > 0) {
    while($row = $slider_result->fetch_assoc()) {
        $sliders[] = "uploads/sliders/" . $row['image'];
    }
} else {
    // 5 High Quality Free Stock Dummy Images for Slider
    $sliders = [
        "https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",
        "https://images.unsplash.com/photo-1593113589914-07599018dda0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",
        "https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",
        "https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80",
        "https://images.unsplash.com/photo-1509099836639-18ba1795216d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
    ];
}

// Fetch Notices
$notice_query = "SELECT id, title FROM notices ORDER BY id DESC LIMIT 10";
$notice_result = $conn->query($notice_query);
$notices = [];
if($notice_result && $notice_result->num_rows > 0) {
    while($row = $notice_result->fetch_assoc()) {
        $notices[] = $row;
    }
} else {
    $notices = [
        ['id' => 0, 'title' => "Welcome to Bhartiya Seva Educational Sangthan Trust."],
        ['id' => 0, 'title' => "New registrations for academic year 2026 are now open."],
        ['id' => 0, 'title' => "Join our legal aid camp next Sunday in Delhi."],
        ['id' => 0, 'title' => "Donate to support child education and welfare."]
    ];
}
?>

<!-- Entry Popup Modal -->
<?php if($popup_image): ?>
<div class="modal fade" id="entryPopup" tabindex="-1" aria-labelledby="entryPopupLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px;">
    <div class="modal-content">
      <div class="modal-header border-0 position-absolute w-100" style="z-index: 10; right: 0; padding: 10px;">
        <button type="button" class="btn-close bg-white rounded-circle p-2 border border-2 border-dark shadow opacity-100 ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <img src="<?php echo $popup_image; ?>" class="img-fluid w-100" alt="Important Announcement">
      </div>
    </div>
  </div>
</div>
<?php endif; ?>

<!-- Marquee Section -->
<div class="notice-section border-top border-bottom border-warning border-2" style="border-top: 3px solid #ffd700 !important; border-bottom: 3px solid #ffd700 !important;">
    <div class="container d-flex flex-column flex-md-row align-items-center overflow-hidden">
        <div class="notice-label mb-2 mb-md-0"><?php echo $lang == 'hi' ? 'ताज़ा समाचार' : 'LATEST NEWS'; ?></div>
        <marquee class="notice-marquee" onmouseover="this.stop();" onmouseout="this.start();">
            <?php foreach($notices as $index => $notice): ?>
                <a href="<?php echo  $notice['id'] > 0 ? 'notice-details.php?id='.$notice['id'] : '#' ?>" class="text-decoration-none text-white me-5">
                    <?php if($index < 2 && $notice['id'] > 0): ?>
                        <span class="badge bg-danger blink-me small me-1" style="font-size: 0.65rem; padding: 2px 4px;">NEW</span>
                    <?php endif; ?>
                    <i class="fas fa-bell me-2 text-warning"></i> <?php echo h($notice['title']); ?>
                </a>
            <?php endforeach; ?>
        </marquee>
    </div>
</div>

<!-- Hero Section with Floating Sidebars -->
<div class="hero-wrapper position-relative">
    <!-- Left Sidebar -->
    <div class="slider-sidebar sidebar-left d-none d-lg-block">
        <a href="membership.php" class="sidebar-item item-blue">Institutional Membership Benefits</a>
        <a href="docs.php" class="sidebar-item item-red">BSES Trust Forms</a>
        <a href="services.php" class="sidebar-item item-blue">APPROVED INSTITUTIONS</a>
        <a href="contact.php" class="sidebar-item item-red">Advocate Panel</a>
        <a href="registration.php" class="sidebar-item item-blue">Licence and accreditation</a>
    </div>

    <!-- Right Sidebar -->
    <div class="slider-sidebar sidebar-right d-none d-lg-block">
        <a href="board-members.php" class="sidebar-item item-red"><?php echo $lang == 'hi' ? 'संगठनात्मक संरचना' : 'Organisational Structure'; ?></a>
        <a href="membership.php" class="sidebar-item item-blue"><?php echo $lang == 'hi' ? 'सदस्यता क्यों लें?' : 'Why Join Us?'; ?></a>
        <a href="notice-details.php" class="sidebar-item item-red"><?php echo $lang == 'hi' ? 'राज्यों के मण्डलों की सूची' : 'State Board List'; ?></a>
        <a href="board-members.php" class="sidebar-item item-blue">Office Bearer Posts</a>
    </div>

<!-- Main Slider -->
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <?php foreach($sliders as $index => $slide): ?>
    <div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
      <div style="height: 550px; width: 100%; overflow: hidden;">
        <img src="<?php echo $slide; ?>" class="d-block w-100 h-100" alt="Slide <?php echo $index + 1; ?>" style="object-fit: cover;">
      </div>
      <div class="carousel-caption bg-dark bg-opacity-50 p-2 p-md-4 rounded">
        <h2 class="main-title text-white">Empowering Society Through Education</h2>
        <p class="d-none d-sm-block">Join Bhartiya Seva Educational Sangthan Trust to make a difference.</p>
        <a href="donation.php" class="btn btn-warning btn-sm btn-md-lg mt-1">Donate Now</a>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
</div>

<!-- Three Column Layout: Announcements, Notices, Documents -->
<div class="container my-5">
    <div class="row g-4">
        <!-- Announcements -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header text-center border-0 py-3" style="background-color: #A20C39; color: white;">
                    <h5 class="mb-0 fw-bold">Announcements</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush news-scroller" style="max-height: 500px; overflow-y: auto;">
                        <?php 
                        $ann = $conn->query("SELECT * FROM notices WHERE category='Announcements' ORDER BY id DESC LIMIT 10");
                        if($ann && $ann->num_rows > 0):
                        while($row = $ann->fetch_assoc()):
                        ?>
                        <li class="list-group-item py-3">
                            <small class="text-muted"><i class="far fa-calendar-alt"></i> <?php echo  date('d M, Y', strtotime($row['created_at'])) ?></small>
                            <div class="mt-2">
                                <a href="notice-details.php?id=<?php echo  $row['id'] ?>" class="text-decoration-none text-dark fw-bold d-block"><?php echo  h($row['title']) ?></a>
                                <?php if(!empty($row['image'])): ?>
                                <a href="notice-details.php?id=<?php echo  $row['id'] ?>"><img src="uploads/notices/<?php echo  $row['image'] ?>" class="img-fluid rounded mt-2 mb-2" style="max-height: 120px;"></a>
                                <?php endif; ?>
                                <?php if(!empty($row['pdf_file'])): ?>
                                <a href="uploads/notices/<?php echo  $row['pdf_file'] ?>" target="_blank" class="btn btn-sm btn-outline-danger mt-2"><i class="fas fa-file-pdf"></i> Download PDF</a>
                                <?php endif; ?>
                            </div>
                        </li>
                        <?php endwhile; else: ?>
                        <li class="list-group-item text-center py-5 text-muted small">No announcements yet</li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Notices -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header text-center border-0 py-3" style="background-color: #A20C39; color: white;">
                    <h5 class="mb-0 fw-bold">Notices / Circulars</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush news-scroller" style="max-height: 500px; overflow-y: auto;">
                        <?php 
                        $not = $conn->query("SELECT * FROM notices WHERE category='Notices / Circulars' ORDER BY id DESC LIMIT 10");
                        if($not && $not->num_rows > 0):
                        while($row = $not->fetch_assoc()):
                        ?>
                        <li class="list-group-item py-3">
                            <?php if(strtotime($row['created_at']) > strtotime('-7 days')): ?>
                                <span class="badge bg-danger mb-1">New</span>
                            <?php endif; ?>
                            <a href="notice-details.php?id=<?php echo  $row['id'] ?>" class="d-block text-decoration-none text-dark fw-bold"><?php echo  h($row['title']) ?></a>
                            <?php if(!empty($row['pdf_file'])): ?>
                            <a href="uploads/notices/<?php echo  $row['pdf_file'] ?>" target="_blank" class="text-danger small text-decoration-none fw-bold"><i class="fas fa-file-pdf me-1"></i> View Circular</a>
                            <?php endif; ?>
                        </li>
                        <?php endwhile; else: ?>
                        <li class="list-group-item text-center py-5 text-muted small">No notices yet</li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Govt Orders -->
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header text-center border-0 py-3" style="background-color: #A20C39; color: white;">
                    <h5 class="mb-0 fw-bold">All Govt Order and Acts</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush news-scroller" style="max-height: 500px; overflow-y: auto;">
                        <?php 
                        $gov = $conn->query("SELECT * FROM notices WHERE category='All Govt Order and Acts' ORDER BY id DESC LIMIT 10");
                        if($gov && $gov->num_rows > 0):
                        while($row = $gov->fetch_assoc()):
                        ?>
                        <li class="list-group-item py-3 d-flex justify-content-between align-items-start">
                            <div class="me-2">
                                <a href="notice-details.php?id=<?php echo  $row['id'] ?>" class="text-decoration-none text-dark d-block fw-bold" style="font-size: 0.9rem;"><?php echo  h($row['title']) ?></a>
                                <small class="text-muted"><?php echo  date('M Y', strtotime($row['created_at'])) ?></small>
                            </div>
                            <?php if(!empty($row['pdf_file'])): ?>
                            <a href="uploads/notices/<?php echo  $row['pdf_file'] ?>" target="_blank" class="btn btn-sm btn-danger shadow-sm"><i class="fas fa-file-pdf"></i></a>
                            <?php else: ?>
                            <i class="fas fa-link text-muted opacity-50"></i>
                            <?php endif; ?>
                        </li>
                        <?php endwhile; else: ?>
                        <li class="list-group-item text-center py-5 text-muted small">No government orders yet</li>
                        <?php endif; ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.news-scroller::-webkit-scrollbar { width: 6px; }
.news-scroller::-webkit-scrollbar-track { background: transparent; }
.news-scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
</style>

<!-- Video Gallery Section -->
<div class="container my-5">
    <div class="card">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Video Gallery</h5>
            <a href="media.php" class="text-white text-decoration-none btn btn-sm btn-outline-light">View All</a>
        </div>
        <div class="card-body">
            <div class="row g-4">
                <?php
                // Fetch videos
                $video_query = "SELECT title, youtube_code, created_at FROM videos ORDER BY id DESC LIMIT 3";
                $video_result = $conn->query($video_query);
                if($video_result && $video_result->num_rows > 0):
                    while($video = $video_result->fetch_assoc()):
                ?>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/<?php echo h($video['youtube_code']); ?>" title="YouTube video" allowfullscreen></iframe>
                        </div>
                        <div class="card-body">
                            <p class="card-text fw-bold"><?php echo h($video['title']); ?></p>
                            <small class="text-muted"><i class="far fa-calendar-alt"></i> <?php echo date('d-m-Y', strtotime($video['created_at'])); ?></small>
                        </div>
                    </div>
                </div>
                <?php 
                    endwhile; 
                else: 
                ?>
                <!-- Updated Videos -->
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/phIuP8XU9KQ" title="Sample Video" allowfullscreen></iframe>
                        </div>
                        <div class="card-body">
                            <p class="card-text fw-bold">Social Welfare & Education Drive</p>
                            <small class="text-muted"><i class="far fa-calendar-alt"></i> 26-04-2026</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/9RXKFoFb7jA" title="Sample Video" allowfullscreen></iframe>
                        </div>
                        <div class="card-body">
                            <p class="card-text fw-bold">Trust Annual Meet Highlights</p>
                            <small class="text-muted"><i class="far fa-calendar-alt"></i> 26-04-2026</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/wbwlmkORyH4" title="Sample Video" allowfullscreen></iframe>
                        </div>
                        <div class="card-body">
                            <p class="card-text fw-bold">Member Awareness Program</p>
                            <small class="text-muted"><i class="far fa-calendar-alt"></i> 26-04-2026</small>
                        </div>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- Executive Highlight Section with Messages -->
<style>
    .message-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .message-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(162, 14, 55, 0.2);
    }
    .leader-photo-container {
        position: relative;
        display: inline-block;
        padding: 10px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        transition: transform 0.5s ease;
    }
    .message-card:hover .leader-photo-container {
        transform: scale(1.05) rotate(3deg);
    }
    .leader-photo {
        width: 180px; 
        height: 180px; 
        object-fit: cover;
        border: 4px solid #FBBC09;
        border-radius: 50%;
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
    .quote-icon {
        font-size: 3.5rem;
        color: #A20E37;
        opacity: 0.1;
        position: absolute;
        top: -15px;
        left: -20px;
        transition: all 0.4s ease;
    }
    .message-card:hover .quote-icon {
        opacity: 0.2;
        transform: scale(1.1);
    }
    .hindi-text {
        font-family: 'Poppins', sans-serif;
        font-size: 1.1rem;
        line-height: 1.8;
        color: #475569;
    }
</style>

<div class="container-fluid py-5" style="background: linear-gradient(180deg, #e0e7ff 0%, #f8fafc 100%);">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold" style="color:#1e293b;">Messages from Our <span style="color:#A20E37;">Leadership</span></h2>
            <div style="width: 60px; height: 4px; background: #FBBC09; margin: 15px auto; border-radius: 2px;"></div>
        </div>

        <?php
        // Try to fetch images from DB if available
        $exec_query = "SELECT name, designation, image FROM board_members WHERE cell = 'STATE' ORDER BY sort_order ASC LIMIT 2";
        $exec_result = $conn->query($exec_query);
        $execs = [];
        if($exec_result && $exec_result->num_rows > 0) {
            while($row = $exec_result->fetch_assoc()) {
                $execs[] = $row;
            }
        }
        
        // Find President and Secretary images from DB, or use fallback avatars
        $president_img = 'https://ui-avatars.com/api/?name=Pallavi+Antawadiya&background=FBBC09&color=A20E37&size=200&bold=true&font-size=0.35';
        $secretary_img = 'https://ui-avatars.com/api/?name=Furkan+Saifi&background=FBBC09&color=1a4f8a&size=200&bold=true&font-size=0.35';

        foreach($execs as $ex) {
            $img = (isset($ex['image']) && $ex['image'] != '') ? ((strpos($ex['image'], 'http') === 0) ? $ex['image'] : 'uploads/members/'.$ex['image']) : '';
            if($img != '') {
                if(stripos($ex['designation'], 'President') !== false) {
                    $president_img = $img;
                }
                if(stripos($ex['designation'], 'Secratory') !== false || stripos($ex['designation'], 'Secretary') !== false) {
                    $secretary_img = $img;
                }
            }
        }
        ?>

        <!-- President Message -->
        <div class="row align-items-center mb-5 g-0 message-card mx-auto" style="max-width: 900px;">
            <div class="col-lg-4 text-center p-4" style="background: linear-gradient(135deg, #A20E37, #7b0a28);">
                <div class="leader-photo-container mb-3">
                    <img src="<?php echo $president_img; ?>" alt="PALLAVI ANTWADIYA" class="leader-photo">
                </div>
                <h4 class="text-white fw-bold mb-1">PALLAVI ANTWADIYA</h4>
                <p class="text-warning fw-bold mb-0">PRESIDENT</p>
            </div>
            <div class="col-lg-8 p-4 position-relative">
                <i class="fas fa-quote-left quote-icon"></i>
                <h4 class="fw-bold mb-3" style="color:#A20E37;">President's Message</h4>
                <p class="hindi-text mb-0">
                    "समाज सेवा, शिक्षा और स्वास्थ्य के क्षेत्र में हमारे संगठन को आगे ले जाने में आपका विश्वास, मेहनत और सहयोग ही हमारी असली ताकत है। आइए, हम सब मिलकर एक ऐसे भारत के निर्माण के लिए कदम से कदम मिलाकर चलें, जहाँ शिक्षा और स्वास्थ्य सेवाएँ हर जरूरतमंद तक आसानी से पहुँच सकें।"
                </p>
            </div>
        </div>

        <!-- Secretary Message -->
        <div class="row align-items-center g-0 message-card mx-auto" style="max-width: 900px;">
            <div class="col-lg-4 text-center p-4" style="background: linear-gradient(135deg, #1a4f8a, #0d3060);">
                <div class="leader-photo-container mb-3">
                    <img src="<?php echo $secretary_img; ?>" alt="FURKAN SAIFI" class="leader-photo">
                </div>
                <h4 class="text-white fw-bold mb-1">FURKAN SAIFI</h4>
                <p class="text-warning fw-bold mb-0">SECRATORY</p>
            </div>
            <div class="col-lg-8 p-4 position-relative">
                <i class="fas fa-quote-left quote-icon" style="color:#1a4f8a;"></i>
                <h4 class="fw-bold mb-3" style="color:#1a4f8a;">Secretary's Message</h4>
                <p class="hindi-text mb-0">
                    "हमारा उद्देश्य केवल एक संगठन को चलाना नहीं है, बल्कि समाज के हर उस जरूरतमंद व्यक्ति तक शिक्षा, न्याय और सहायता पहुँचाना है, जो मुख्यधारा से पीछे छूट गया है। आप सभी की अटूट मेहनत, समर्पण और एकजुटता ही हमारे इस सफर को सफल बनाएगी।"
                </p>
            </div>
        </div>
    </div>
</div>

<?php
// Function to render board members carousel
function renderMemberCarousel($conn, $cell, $title, $carouselId) {
    $query = "SELECT name, designation, image FROM board_members WHERE cell = '$cell' ORDER BY sort_order ASC, id DESC LIMIT 20";
    $result = $conn->query($query);
    $members = [];
    if($result && $result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $members[] = $row;
        }
    }
    
    // Dummy Fallback if database is empty
    if(empty($members)) {
        if($cell == 'STATE') {
            $members = [
                ['name' => 'Mr. Waseem Ahmad', 'designation' => 'PROPRIETOR', 'image' => 'indian_male_1.png'],
                ['name' => 'Dr. Devendra R', 'designation' => 'Dist President', 'image' => 'indian_male_1.png'],
                ['name' => 'Mr. Syed Azmat', 'designation' => 'Dist President', 'image' => 'indian_female_1.png'],
                ['name' => 'Dr. Onkar', 'designation' => 'Dist President', 'image' => 'indian_male_1.png'],
                ['name' => 'Mr. Chandan', 'designation' => 'Dist President', 'image' => 'indian_female_1.png']
            ];
        } else if($cell == 'LEGAL') {
            $members = [
                ['name' => 'Adv Meera', 'designation' => 'Advocate High Court', 'image' => 'adv_female.png'],
                ['name' => 'Adv Vikram', 'designation' => 'Advocate High Court', 'image' => 'adv_male.png'],
                ['name' => 'Adv Sneha', 'designation' => 'Advocate High Court', 'image' => 'adv_female.png'],
                ['name' => 'Adv Kunal', 'designation' => 'Advocate High Court', 'image' => 'adv_male.png'],
                ['name' => 'Adv Rahul', 'designation' => 'Advocate High Court', 'image' => 'adv_male.png']
            ];
        } else if($cell == 'MEDIA') {
            $members = [
                ['name' => 'Rajesh Kumar', 'designation' => 'Media In-charge', 'image' => 'indian_young_female.png'],
                ['name' => 'Sita Singh', 'designation' => 'Public Relations', 'image' => 'indian_young_male.png'],
                ['name' => 'Amit Verma', 'designation' => 'Social Media Manager', 'image' => 'indian_young_female.png'],
                ['name' => 'Priya Das', 'designation' => 'Content Writer', 'image' => 'indian_young_male.png'],
                ['name' => 'Rahul Jha', 'designation' => 'Graphic Designer', 'image' => 'indian_young_female.png']
            ];
        }
    }

    if(empty($members)) return '';

    $chunks = array_chunk($members, 5); // 5 members per slide

    $html = '<div class="container my-5 text-center">';
    $html .= '<h4 class="section-title text-center text-uppercase fw-bold" style="color: #A20E37; font-size: 1.2rem; display: inline-block; padding-bottom: 5px;">' . h($title) . '</h4>';
    $html .= '<div id="' . $carouselId . '" class="carousel slide mt-3" data-bs-ride="carousel">';
    
    // Inner
    $html .= '<div class="carousel-inner px-2">';
    foreach($chunks as $index => $chunk) {
        $activeClass = $index === 0 ? 'active' : '';
        $html .= '<div class="carousel-item ' . $activeClass . '"><div class="row justify-content-center g-3">';
        foreach($chunk as $member) {
            $img_src = (isset($member['image']) && $member['image'] != '') ? ((strpos($member['image'], 'http') === 0) ? $member['image'] : 'uploads/members/'.$member['image']) : 'https://ui-avatars.com/api/?name='.urlencode($member['name']).'&background=random';
            $html .= '<div class="col-12 col-sm-6 col-md-4 col-lg-2">';
            $html .= '<div class="card h-100 border-0 member-card" style="background: transparent;">';
            $html .= '<div class="card-img-top mx-auto d-flex align-items-center justify-content-center overflow-hidden" style="height: 180px; width: 100%; max-width: 150px; background-color: #e2e8f0; border: 2px solid #000; padding: 2px;">';
            $html .= '<img src="' . $img_src . '" alt="' . h($member['name']) . '" class="img-fluid" style="object-fit: cover; height: 100%; width: 100%;">';
            $html .= '</div>';
            $html .= '<div class="card-body p-2 text-center">';
            $html .= '<h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: #111827;">' . h($member['name']) . '</h6>';
            $html .= '<p class="text-muted mb-0" style="font-size: 0.75rem;">' . h($member['designation']) . '</p>';
            $html .= '</div></div></div>';
        }
        $html .= '</div></div>';
    }
    $html .= '</div>'; // close carousel-inner

    // Indicators (Dots below the carousel)
    $html .= '<div class="carousel-indicators position-relative mt-4" style="bottom: 0;">';
    foreach($chunks as $index => $chunk) {
        $active = $index === 0 ? 'class="active" aria-current="true"' : '';
        $html .= '<button type="button" data-bs-target="#' . $carouselId . '" data-bs-slide-to="' . $index . '" ' . $active . ' aria-label="Slide ' . ($index+1) . '" style="background-color: #888; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; border: none;"></button>';
    }
    $html .= '</div>';
    
    $html .= '</div></div>'; // close carousel and container
    
    return $html;
}

echo renderMemberCarousel($conn, 'STATE', 'STATE OFFICERS OF THE ASSOCIATION', 'stateOfficersCarousel');
echo renderMemberCarousel($conn, 'LEGAL', 'LEGAL CELL OF THE ASSOCIATION', 'legalCellCarousel');
echo renderMemberCarousel($conn, 'MEDIA', 'MEDIA CELL OF THE ASSOCIATION', 'mediaCellCarousel');
?>

<!-- Register & Constitution Blocks -->
<div class="container my-5">
    <div class="row g-4 justify-content-center">
        <div class="col-md-5">
            <div class="card h-100 border-0 text-center text-white shadow-lg register-login-block" style="background: linear-gradient(135deg, var(--primary-green), #8a0c2e); min-height: 220px; display: flex; align-items: center; justify-content: center; border-radius: 15px; position: relative; overflow: hidden;">
                <!-- Decorative Circle -->
                <div style="position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%;"></div>
                
                <div class="card-body py-5 position-relative z-1">
                    <div class="bg-white rounded-circle d-inline-flex justify-content-center align-items-center mb-3 shadow" style="width: 80px; height: 80px;">
                        <i class="fas fa-user-plus fa-3x" style="color: var(--primary-green);"></i>
                    </div>
                    <div class="mt-3">
                        <a href="signup.php" class="btn fw-bold px-5 py-3 text-dark uppercase shadow" style="background-color: var(--primary-saffron); border-radius: 30px; letter-spacing: 1px; transition: transform 0.3s; font-size: 1.1rem;">JOIN OR LOGIN</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="card h-100 border-0 text-center text-white shadow-lg register-login-block" style="background: linear-gradient(135deg, var(--primary-blue), #7a082b); min-height: 220px; display: flex; align-items: center; justify-content: center; border-radius: 15px; position: relative; overflow: hidden;">
                <!-- Decorative Circle -->
                <div style="position: absolute; bottom: -20px; left: -20px; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%;"></div>
                
                <div class="card-body py-5 position-relative z-1">
                    <div class="bg-white rounded-circle d-inline-flex justify-content-center align-items-center mb-3 shadow" style="width: 80px; height: 80px;">
                        <i class="fas fa-gavel fa-3x" style="color: var(--primary-blue);"></i>
                    </div>
                    <div class="mt-3">
                        <a href="constitution.php" class="btn fw-bold px-5 py-3 text-dark uppercase shadow" style="background-color: var(--primary-saffron); border-radius: 30px; letter-spacing: 1px; transition: transform 0.3s; font-size: 1.1rem;">CONSTITUTION</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
.register-login-block:hover .btn {
    transform: scale(1.05);
}
.register-login-block:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}
</style>

<!-- Important Sites Section -->
<div class="container-fluid bg-white py-4 mt-5 border-top border-bottom border-secondary border-opacity-25">
    <div class="container text-center">
        <div class="row g-3">
            <div class="col-12">
            <h3 class="fw-bold mb-4">Important Sites</h3>
            
            <!-- Load OwlCarousel CSS -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />

            <div class="owl-carousel owl-theme" id="importantSitesCarousel">
                <div class="item" style="padding:15px;">
                    <a href="https://dsel.education.gov.in/hi/ebsb" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/ujbl7VCkZZid9c7LwdCX0BeWMWKagIvEWVgERIQ8.jpg" alt="EBSB">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://www.makeinindia.com/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/UI2fUXZH44o6HTjaTDdyHCvHQ8lzzuuFSUS9GXtL.png" alt="Make in India">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://fitindia.gov.in/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/89Sn78LUHqfrkMF1c0KESkYjPsAIXtatVrMTkrzA.jpg" alt="Fit India">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://hindi.eci.gov.in/divisions-of-eci/it-application-nvsp/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/1GXrSognYM6iMfcKAyeRqAQuNVcOgYxk3WyxF5uR.png" alt="NVSP">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://rtionline.gov.in/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/3SANKFj2lkmUNEr6F0PYbYDj0iDxD8GAe1GjrQD6.png" alt="RTI Online">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://igod.gov.in/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/DAPbUwILEAVwiUWzvukfVKiGiUfgUgcuNj1vrflB.png" alt="IGOD">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://services.india.gov.in/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/bRb2rmTznMlSXU2orpVyPYDDsmf7F3LC2OjTJHap.png" alt="India Services">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://www.pmindia.gov.in/en/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/niNvHKqkLN6nti3FBbaytp1fSke9wp2rhfO5hIr0.png" alt="PM India">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://www.india.gov.in/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/vwvWlvAOAaoGgkfQ3YSJM2VmQMhosF6WbdcEx38V.png" alt="India Gov">
                        </div>
                    </a>
                </div>
                <div class="item" style="padding:15px;">
                    <a href="https://main.mohfw.gov.in/" target="_blank" class="text-decoration-none">
                        <div class="site-circle">
                            <img src="https://nahpa.in/storage/images/important_sites/v2Q0ov00or1d95wlalk6Czix3hbXdH9lyMydXNMx.png" alt="Health Ministry">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Registered Members Database Section -->
<div class="container-fluid py-5 mt-5" style="background-color: #f8fafc; border-top: 2px solid #e2e8f0; border-bottom: 2px solid #e2e8f0;">
    <div class="container">
        <h4 class="fw-bold mb-4 text-center text-md-start">Registered Trust Members</h4>
        <div class="row g-4 align-items-stretch">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm" style="background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); display: flex; align-items: center; justify-content: center; border-radius: 8px; min-height: 180px;">
                    <a href="signup.php" class="btn text-white fw-bold py-2 px-4 shadow" style="background-color: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.3);">Search Member Database</a>
                </div>
            </div>
            <div class="col-md-8">
                <div class="row g-3 h-100">
                    <div class="col-sm-4 h-100">
                        <a href="profile.php" class="text-decoration-none d-block h-100">
                            <div class="card h-100 border-0 shadow-sm text-center py-4 action-card">
                                <i class="fas fa-id-card fa-2x text-danger mb-3"></i>
                                <h6 class="fw-bold text-dark mb-0">Trust ID-card</h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-4 h-100">
                        <a href="profile.php" class="text-decoration-none d-block h-100">
                            <div class="card h-100 border-0 shadow-sm text-center py-4 action-card">
                                <i class="fas fa-certificate fa-2x text-danger mb-3"></i>
                                <h6 class="fw-bold text-dark mb-0">Trust Certificate</h6>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-4 h-100">
                        <a href="profile.php" class="text-decoration-none d-block h-100">
                            <div class="card h-100 border-0 shadow-sm text-center py-4 action-card">
                                <i class="fas fa-user-edit fa-2x text-danger mb-3"></i>
                                <h6 class="fw-bold text-dark mb-0">Update Your Profile</h6>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .site-circle {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border: 3px solid #f1f5f9;
        overflow: hidden;
        transition: all 0.3s;
    }
    .site-circle:hover {
        transform: scale(1.05);
        border-color: #1e3a8a;
    }
    .site-circle img {
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
    }
    .blink-me {
        animation: blinker 1s linear infinite;
    }
    @keyframes blinker {
        50% { opacity: 0; }
    }
    .action-card {
        transition: transform 0.2s, box-shadow 0.2s;
        border-radius: 8px;
    }
    .action-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important;
    }
</style>

<!-- Home Donation / Fee Deposit Area (similar to nahpa.in bottom right) -->
<div class="container my-5">
    <div class="row align-items-center bg-white p-4 rounded shadow-sm border-start border-5 border-success">
        <div class="col-md-8">
            <h2 class="section-title text-start mb-3" style="font-size: 1.8rem;">Support Our Cause</h2>
            <p class="fs-5">Your contribution helps us provide education and essential services to the needy.</p>
            <a href="donation.php" class="btn btn-warning btn-lg px-5">Make a Donation <i class="fas fa-arrow-right ms-2"></i></a>
        </div>
        <div class="col-md-4 text-center mt-4 mt-md-0">
            <div class="card border-success">
                <div class="card-header bg-success text-white">Fee Deposit Details</div>
                <div class="card-body">
                    <img src="https://i.ibb.co/QjC7Ykfq/7dc2ba15-cc33-4d8a-ba2c-1f2701979b99.jpg" alt="UPI QR Code" class="img-fluid" style="max-height: 250px;">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JS to force auto-run all carousels and entry popup -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    // 1. Force Initialize all carousels to auto-play every 3 seconds
    setTimeout(function() {
        var carousels = document.querySelectorAll('.carousel');
        carousels.forEach(function(c) {
            new bootstrap.Carousel(c, {
                interval: 3000,
                ride: 'carousel',
                pause: 'hover'
            }).cycle();
        });
    }, 500); // small delay to ensure Bootstrap JS is loaded
});
</script>

<?php require_once 'includes/footer.php'; ?>
