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

<!-- Custom CSS for Effects -->
<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);
        opacity: 0; /* For jQuery animation */
        transform: translateY(30px); /* For jQuery animation */
    }
    .message-card:hover {
        transform: translateY(-10px) !important;
        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>

<!-- Page Hero Banner -->
<div class="position-relative" style="background: linear-gradient(135deg, #A20E37 0%, #7b0a28 60%, #FBBC09 100%); padding: 60px 0; margin-bottom: 0;">
    <div class="container text-white text-center">
        <h1 class="fw-bold mb-2" style="font-size:2.5rem; letter-spacing:1px;">Our Messages</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a href="index.php" class="text-warning">Home</a></li>
                <li class="breadcrumb-item"><a href="about.php" class="text-warning">About Us</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Our Messages</li>
            </ol>
        </nav>
    </div>
</div>

<section class="py-5" style="background:#f8fafc; min-height: 80vh;">
<div class="container">
    <div class="text-center mb-5">
        <span class="badge px-3 py-2 mb-2" style="background:#fff3f6; color:#A20E37; font-size:0.9rem; border-radius:20px;">Leadership</span>
        <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>

    <!-- President Message -->
    <div class="row align-items-center mb-5 g-0 message-card message-anim">
        <!-- Photo Left Side -->
        <div class="col-lg-4 text-center p-4 p-lg-5" style="background: linear-gradient(135deg, #A20E37, #7b0a28);">
            <div class="leader-photo-container mb-3">
                <img src="https://ui-avatars.com/api/?name=Pallavi+Antawadiya&background=FBBC09&color=A20E37&size=200&bold=true&font-size=0.35" 
                     alt="Pallavi Antawadiya" 
                     class="leader-photo">
            </div>
            <h3 class="text-white fw-bold mb-1">PALLAVI ANTWADIYA</h3>
            <p class="text-warning fw-bold fs-5 mb-1">PRESIDENT</p>
            <p class="text-white-50 mb-3" style="font-size:0.9rem;">Bhartiya Seva Educational Sangthan Trust</p>
        </div>
        <!-- Message Right Side -->
        <div class="col-lg-8 p-4 p-lg-5 position-relative">
            <div class="d-flex align-items-center mb-4">
                <div class="me-3" style="width:5px; height:45px; background: linear-gradient(to bottom, #A20E37, #FBBC09); border-radius:3px;"></div>
                <div>
                    <h3 class="fw-bold mb-0" style="color:#A20E37;">अध्यक्ष का संदेश</h3>
                    <small class="text-muted fw-semibold">President's Message</small>
                </div>
            </div>
            <div class="position-relative ps-md-3">
                <i class="fas fa-quote-left quote-icon"></i>
                <p class="hindi-text mb-3">
                    <strong>प्रिय सदस्यों और शुभचिंतकों,</strong>
                </p>
                <p class="hindi-text mb-3">
                    भारतीय सेवा एजुकेशनल संगठन ट्रस्ट (BSES ट्रस्ट) के अध्यक्ष के रूप में आपको संबोधित करते हुए मुझे अत्यंत खुशी और गर्व की अनुभूति हो रही है। समाज सेवा, शिक्षा और स्वास्थ्य के क्षेत्र में हमारे संगठन को आगे ले जाने में आपका विश्वास, मेहनत और सहयोग ही हमारी असली ताकत है।
                </p>
                <p class="hindi-text mb-4">
                    हमारा उद्देश्य समाज के हर वर्ग को सशक्त बनाना और उन्हें उनके अधिकार दिलाना है। आइए, हम सब मिलकर एक ऐसे भारत के निर्माण के लिए कदम से कदम मिलाकर चलें, जहाँ शिक्षा और स्वास्थ्य सेवाएँ हर जरूरतमंद तक आसानी से पहुँच सकें।
                </p>
                <p class="text-muted mb-1" style="font-size:1.1rem;">धन्यवाद एवं शुभकामनाओं सहित,</p>
                <h5 class="fw-bold mb-0" style="color:#A20E37;">पल्लवी अंतवाड़िया (Pallavi Antwadiya)</h5>
                <small class="text-muted">अध्यक्ष (President)</small>
            </div>
        </div>
    </div>

    <!-- Secretary Message -->
    <div class="row align-items-center mb-5 g-0 message-card message-anim">
        <!-- Photo Left Side -->
        <div class="col-lg-4 text-center p-4 p-lg-5" style="background: linear-gradient(135deg, #1a4f8a, #0d3060);">
            <div class="leader-photo-container mb-3">
                <img src="https://ui-avatars.com/api/?name=Furkan+Saifi&background=FBBC09&color=1a4f8a&size=200&bold=true&font-size=0.35" 
                     alt="Furkan Saifi" 
                     class="leader-photo">
            </div>
            <h3 class="text-white fw-bold mb-1">FURKAN SAIFI</h3>
            <p class="text-warning fw-bold fs-5 mb-1">SECRETARY</p>
            <p class="text-white-50 mb-3" style="font-size:0.9rem;">Bhartiya Seva Educational Sangthan Trust</p>
        </div>
        <!-- Message Right Side -->
        <div class="col-lg-8 p-4 p-lg-5 position-relative">
            <div class="d-flex align-items-center mb-4">
                <div class="me-3" style="width:5px; height:45px; background: linear-gradient(to bottom, #1a4f8a, #FBBC09); border-radius:3px;"></div>
                <div>
                    <h3 class="fw-bold mb-0" style="color:#1a4f8a;">सचिव का संदेश</h3>
                    <small class="text-muted fw-semibold">Secretary's Message</small>
                </div>
            </div>
            <div class="position-relative ps-md-3">
                <i class="fas fa-quote-left quote-icon" style="color:#1a4f8a;"></i>
                <p class="hindi-text mb-3">
                    <strong>प्रिय साथियों एवं सहयोगियों,</strong>
                </p>
                <p class="hindi-text mb-3">
                    भारतीय सेवा एजुकेशनल संगठन ट्रस्ट के सचिव के रूप में, मैं आप सभी का हमारे इस नेक और परिवर्तनकारी मिशन में हृदय से स्वागत करता हूँ। हमारा उद्देश्य केवल एक संगठन को चलाना नहीं है, बल्कि समाज के हर उस जरूरतमंद व्यक्ति तक शिक्षा, न्याय और सहायता पहुँचाना है, जो मुख्यधारा से पीछे छूट गया है।
                </p>
                <p class="hindi-text mb-4">
                    आप सभी की अटूट मेहनत, समर्पण और एकजुटता ही हमारे इस सफर को सफल बनाएगी। मेरा आप सभी से अनुरोध है कि ट्रस्ट के कार्यों में बढ़-चढ़ कर हिस्सा लें। आइए, हम सब मिलकर समाज में एक सकारात्मक और स्थायी बदलाव लाएं।
                </p>
                <p class="text-muted mb-1" style="font-size:1.1rem;">सादर,</p>
                <h5 class="fw-bold mb-0" style="color:#1a4f8a;">फुरकान सैफी (Furkan Saifi)</h5>
                <small class="text-muted">सचिव (Secretary)</small>
            </div>
        </div>
    </div>

</div>
</section>

<!-- jQuery Animations -->
<script>
$(document).ready(function() {
    // Reveal animation on load and scroll
    function revealCards() {
        $('.message-anim').each(function(i) {
            var bottom_of_object = $(this).offset().top + 100; // Trigger slightly before it fully appears
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            if( bottom_of_window > bottom_of_object ){
                // Add a slight delay for staggered effect
                var $el = $(this);
                setTimeout(function(){
                    $el.css({
                        'opacity': '1',
                        'transform': 'translateY(0)'
                    });
                }, i * 200);
            }
        });
    }
    
    // Trigger on load
    revealCards();
    
    // Trigger on scroll
    $(window).scroll(function() {
        revealCards();
    });
});
</script>

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