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

<?php
// Fetch Mission & Vision
$mission = $conn->query("SELECT * FROM mission_vision LIMIT 1")->fetch_assoc();
?>

<section class="mission-section">
    <div class="mission-container">
        <div class="mission-text">
            <?= $mission ? $mission['body_text'] : '<p>No content available.</p>'; ?>
        </div>
        <div class="mission-image">
            <?php if($mission && !empty($mission['image'])): ?>
            <img src="<?= $mission['image'] ?>" alt="Mission & Vision">
            <?php else: ?>
            <img src="assets/images/default.jpg" alt="Placeholder">
            <?php endif; ?>
        </div>
    </div>
</section>

<style>
.mission-section { padding: 60px 20px; background:#f9f9f9; }
.mission-container { display:flex; flex-wrap:nowrap; align-items:center; max-width:1200px; margin:auto; }
.mission-text { width:55%; padding-right:20px; font-size:1rem; color:#333; }
.mission-image { width:35%; }
.mission-image img { width:100%; height:auto; display:block; border-radius:8px; }
@media(max-width:900px){
    .mission-container { flex-wrap:wrap; text-align:center; }
    .mission-text, .mission-image { width:100%; padding:10px 0; }
    .mission-text { padding-right:0; }
}
</style>

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