<?php snippet('header') ?>

<main class="about">
  <!-- Intro Section -->
  <section class="about__intro">
    <h1 class="about__title"><?= $page->intro_title() ?></h1>

    <?php if ($page->intro_text()->isNotEmpty()): ?>
      <p class="about__subtitle"><?= $page->intro_text() ?></p>
    <?php endif ?>
  </section>

  <!-- Mission Section -->
  <?php if ($page->mission_text()->isNotEmpty()): ?>
    <section class="about__mission">
      <h2 class="about__section-title"><?= $page->mission_title() ?></h2>
      <div class="about__section-content">
        <?= $page->mission_text()->toBlocks() ?>
      </div>
    </section>
  <?php endif ?>

  <!-- Manifesto Section -->
  <?php if ($page->manifesto_text()->isNotEmpty()): ?>
    <section class="about__manifesto">
      <h2 class="about__section-title"><?= $page->manifesto_title() ?></h2>
      <div class="about__section-content">
        <?= $page->manifesto_text()->toBlocks() ?>
      </div>
    </section>
  <?php endif ?>

  <!-- Team Section -->
  <?php if ($page->team_members()->isNotEmpty()): ?>
    <section class="about__team">
      <h2 class="about__section-title"><?= $page->team_title() ?></h2>

      <div class="about__team-grid">
        <?php foreach ($page->team_members()->toStructure() as $member): ?>
          <article class="team-card">
            <?php if ($photo = $member->photo()->toFile()): ?>
              <div class="team-card__photo">
                <img src="<?= $photo->url() ?>" alt="<?= $member->name() ?>">
              </div>
            <?php endif ?>

            <div class="team-card__info">
              <h3 class="team-card__name"><?= $member->name() ?></h3>
              <p class="team-card__role"><?= $member->role() ?></p>

              <?php if ($member->bio()->isNotEmpty()): ?>
                <p class="team-card__bio"><?= $member->bio() ?></p>
              <?php endif ?>

              <div class="team-card__social">
                <?php if ($member->linkedin()->isNotEmpty()): ?>
                  <a href="<?= $member->linkedin() ?>" target="_blank" class="team-card__social-link">
                    LinkedIn
                  </a>
                <?php endif ?>

                <?php if ($member->twitter()->isNotEmpty()): ?>
                  <a href="<?= $member->twitter() ?>" target="_blank" class="team-card__social-link">
                    Twitter
                  </a>
                <?php endif ?>
              </div>
            </div>
          </article>
        <?php endforeach ?>
      </div>

      <nav class="about__team-nav">
        <button class="about__team-prev">&larr; Précédent</button>
        <button class="about__team-next">Suivant &rarr;</button>
      </nav>
    </section>
  <?php endif ?>
</main>

<?php snippet('footer') ?>
