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

<?php
// Fetch Who We Are
$who = $conn->query("SELECT * FROM who_we_are LIMIT 1")->fetch_assoc();
?>

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

<style>
.who-section {
    padding: 60px 20px;
    background: #f9f9f9;
}

.who-container {
    display: flex;
    flex-wrap: nowrap; /* stay side by side */
    align-items: center;
    max-width: 1200px;
    margin: auto;
}

/* Make text slightly bigger than image */
.who-text {
    width: 55%; /* more space for text */
    padding-right: 20px;
    font-size: 1rem;
    color: #333;
}

.who-image {
    width: 35%; /* slightly smaller image */
}

.who-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Mobile Friendly */
@media(max-width:900px){
    .who-container {
        flex-wrap: wrap;
        text-align: center;
    }
    .who-text, .who-image {
        width: 100%;
        padding: 10px 0;
    }
    .who-text { padding-right: 0; }
}
</style>

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