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

<section class="team-section">
    <div class="team-container">
        <?php
        $team = $conn->query("SELECT * FROM team_members ORDER BY id ASC");
        if($team->num_rows > 0):
            while($member = $team->fetch_assoc()):
        ?>
        <div class="member">
            <div class="member-text">
                <h3><?= htmlspecialchars($member['name']); ?></h3>
                <h4><?= htmlspecialchars($member['position']); ?></h4>
                <p><?= $member['description']; ?></p>
            </div>
            <div class="member-image">
                <img src="<?= !empty($member['photo']) ? $member['photo'] : 'assets/images/default.jpg'; ?>" alt="<?= htmlspecialchars($member['name']); ?>">
            </div>
        </div>
        <?php
            endwhile;
        else:
            echo "<p class='no-member'>No team members found.</p>";
        endif;
        ?>
    </div>
</section>

<style>
.team-section { padding:60px 20px; background:#f9f9f9; }
.member { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: space-between; /* evenly space text and image */
    max-width: 1200px; 
    margin: 0 auto 40px; 
}

.member-text, .member-image {
    flex: 1 1 45%; /* each takes roughly half width */
}

.member-text { 
    padding: 0 20px 0 0; 
    font-size: 1rem; 
    color: #333; 
}
.member-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.member-image img {
    max-width: 80%; /* smaller than before, adjust as needed */
    height: auto;
    border-radius: 8px;
    display: block;
}


.member-image img { width:100%; height:auto; display:block; border-radius:8px; }
.no-member { text-align:center; color:#555; }
@media(max-width:900px){
    .member { 
        flex-direction: column; 
        text-align: center; 
        margin-bottom: 30px; 
    }
    .member-text, .member-image { 
        flex: 1 1 100%; 
        padding: 10px 0; 
    }
    .member-text { padding-right:0; }
}

</style>

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