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

// Fetch about data
$about = $conn->query("SELECT * FROM about_page LIMIT 1")->fetch_assoc();

// Fetch team members
$team = $conn->query("SELECT * FROM team_members ORDER BY id ASC");
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Us | Sigal Medical Lab</title>
<link rel="stylesheet" href="assets/css/style.css">

<style>
.about-section {
  max-width: 900px;
  margin: 50px auto;
  line-height: 1.8;
  text-align: center;
}

/* CEO Section */
.ceo-section {
  margin-top: 40px;
}

.ceo-section img {
  width: 180px;
  height: 180px;
  border-radius: 50%;      /* makes it round */
  object-fit: cover;
  border: 4px solid #004aad;
  margin-bottom: 20px;
}

.ceo-section h3 {
  color: #004aad;
  margin-bottom: 15px;
}

.ceo-section p {
  max-width: 700px;
  margin: 0 auto 30px auto;
  line-height: 1.6;
  color: #555;
  font-size: 16px;
}

/* Team Section */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.team-card {
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.team-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.team-card h3 {
  margin: 10px 0 5px;
  color: #004aad;
}

.team-card p {
  color: #555;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 600px) {
  .ceo-section img {
    width: 140px;
    height: 140px;
  }

  .team-card img {
    width: 100px;
    height: 100px;
  }
}
</style>
</head>
<body>

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

<div class="about-section">
  <h2>About Sigal Medical Lab</h2>
  <p><?= nl2br($about['about_text']) ?></p>

  <!-- CEO Section -->
  <div class="ceo-section">
    <img src="<?= ltrim($about['ceo_photo'], './') ?>" alt="CEO">
    <h3>CEO Message — <?= htmlspecialchars($about['ceo_name']) ?></h3>
    <p><?= $about['ceo_message'] ?></p>
  </div>

  <!-- Team Section -->
  <h2 style="margin-top:50px;">Our Team</h2>
  <div class="team-grid">
    <?php while($row = $team->fetch_assoc()): ?>
      <div class="team-card">
        <img src="<?= ltrim($row['photo'], './') ?>" alt="Member">
        <h3><?= htmlspecialchars($row['name']) ?></h3>
        <strong><?= htmlspecialchars($row['position']) ?></strong>
        <p><?= nl2br($row['description']) ?></p>
      </div>
    <?php endwhile; ?>
  </div>

</div>

</body>
</html>
