<?php snippet('header') ?>

<main class="portfolio">
  <!-- Intro Section -->
  <section class="portfolio__intro">
    <?php if ($page->intro_title()->isNotEmpty()): ?>
      <h1 class="portfolio__title"><?= $page->intro_title() ?></h1>
    <?php endif ?>

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

  <!-- Projects Grid -->
  <section class="portfolio__projects">
    <?php
    $projects = $page->children()->listed();
    $total = $projects->count();
    $index = 0;
    ?>

    <?php foreach ($projects as $project): ?>
      <?php $index++ ?>
      <article class="project-card" data-index="<?= $index ?>">
        <!-- Project Gallery -->
        <div class="project-card__gallery">
          <?php if ($cover = $project->cover()->toFile()): ?>
            <img src="<?= $cover->url() ?>" alt="<?= $project->title() ?>" class="project-card__cover">
          <?php endif ?>

          <?php foreach ($project->files()->filterBy('template', 'image')->limit(5) as $image): ?>
            <img src="<?= $image->url() ?>" alt="" class="project-card__image">
          <?php endforeach ?>
        </div>

        <!-- Project Info -->
        <div class="project-card__info">
          <h2 class="project-card__title"><?= $project->title() ?></h2>

          <?php if ($project->tagline()->isNotEmpty()): ?>
            <p class="project-card__tagline"><?= $project->tagline() ?></p>
          <?php endif ?>

          <?php if ($project->description()->isNotEmpty()): ?>
            <p class="project-card__description"><?= $project->description() ?></p>
          <?php endif ?>

          <!-- Meta -->
          <div class="project-card__meta">
            <?php if ($project->impact()->isNotEmpty()): ?>
              <div class="project-card__impact">
                <span class="label">Impact:</span>
                <?= $project->impact()->join(', ') ?>
              </div>
            <?php endif ?>

            <?php if ($project->category()->isNotEmpty()): ?>
              <div class="project-card__category">
                <span class="label">Catégorie:</span>
                <?= $project->category()->value() ?>
              </div>
            <?php endif ?>

            <?php if ($project->platforms()->isNotEmpty()): ?>
              <div class="project-card__platforms">
                <span class="label">Plateformes:</span>
                <?= $project->platforms()->join(' / ') ?>
              </div>
            <?php endif ?>
          </div>

          <!-- Links -->
          <div class="project-card__links">
            <?php if ($project->apple_link()->isNotEmpty()): ?>
              <a href="<?= $project->apple_link() ?>" class="btn btn--apple" target="_blank">
                Apple
              </a>
            <?php endif ?>

            <?php if ($project->android_link()->isNotEmpty()): ?>
              <a href="<?= $project->android_link() ?>" class="btn btn--android" target="_blank">
                Android
              </a>
            <?php endif ?>
          </div>
        </div>

        <!-- Counter -->
        <div class="project-card__counter">
          <?= str_pad($index, 2, '0', STR_PAD_LEFT) ?>/<?= str_pad($total, 2, '0', STR_PAD_LEFT) ?>
        </div>
      </article>
    <?php endforeach ?>
  </section>

  <!-- Thumbnails Navigation -->
  <nav class="portfolio__thumbnails">
    <?php foreach ($projects as $project): ?>
      <a href="#<?= $project->slug() ?>" class="portfolio__thumbnail">
        <?php if ($cover = $project->cover()->toFile()): ?>
          <img src="<?= $cover->thumb(['width' => 100])->url() ?>" alt="<?= $project->title() ?>">
        <?php endif ?>
      </a>
    <?php endforeach ?>
  </nav>
</main>

<?php snippet('footer') ?>
