<?php /* Page d'accueil — variables fournies par le routeur : $titre */
$photosCampus = [
    ['labo.jpg', 'Salle informatique équipée d\'ordinateurs', 'Salle informatique', true],
    ['classe.jpg', 'Salle de cours avec tables neuves', 'Salle de cours', false],
    ['ruban.jpg', 'Coupure du ruban inaugural', 'Coupure du ruban', false],
    ['admin.jpg', 'Discours devant le bâtiment administratif', 'Bâtiment administratif', false],
    ['visite.jpg', 'Visite des invités à l\'entrée du campus', 'Visite des officiels', false],
    ['equipe.jpg', 'L\'équipe ISIT Groupe devant l\'entrée', 'L\'équipe ISIT', true],
    ['discours.jpg', 'Allocution lors de l\'inauguration', 'Allocution', false],
    ['labo2.jpg', 'Visite de la salle informatique', 'Visite de la salle informatique', false],
    ['couloir.jpg', 'Invités dans les couloirs du campus', 'Portes ouvertes', true],
];
$filieresQuiz = [];
foreach (filieres() as $code => $f) {
    $filieresQuiz[$code] = ['nom' => $f['nom'], 'resume' => $f['resume']];
}
?>
<section class="ecran" id="ecran">
  <div class="diapos" aria-hidden="true">
    <?php foreach ([['gate.jpg', "L'entrée du campus, route de Kapélé"], ['equipe.jpg', "L'équipe ISIT le jour de l'inauguration"], ['labo.jpg', 'La salle informatique'], ['promo.jpg', 'La première promotion'], ['classe.jpg', 'Une salle de cours climatisée']] as $i => [$photo, $legende]): ?>
      <figure class="diapo<?= $i === 0 ? ' active' : '' ?>" data-legende="<?= htmlspecialchars($legende) ?>"><img src="/assets/img/<?= $photo ?>" alt=""<?= $i ? ' loading="lazy"' : '' ?>></figure>
    <?php endforeach; ?>
  </div>
  <div class="wrap ecran-contenu">
    <span class="pill pill-verre"><i></i>Inscriptions ouvertes · Rentrée 2026-2027</span>
    <h1 class="titre-anime">Former à Korhogo les <span class="mot-tournant" data-mots="professionnels|développeurs|gestionnaires|agronomes|bâtisseurs|comptables">professionnels</span> de demain.</h1>
    <p class="lead">Huit filières de niveau BTS en gestion, technologie, services et agronomie, pour le Nord, toute la Côte d'Ivoire et la sous-région.</p>
    <div class="groupe-btn">
      <a class="btn btn-blanc" href="/admission#formulaire">Déposer mon dossier</a>
      <a class="btn btn-verre" href="#filieres">Découvrir les filières</a>
    </div>
  </div>
  <div class="wrap ecran-bas">
    <div class="chiffres-verre">
      <div><b data-compteur="8">8</b><span>filières BTS</span></div>
      <div><b data-compteur="140000" data-suffixe=" F">140 000 F</b><span>par an</span></div>
      <div><b>3 à 6</b><span>mois pour payer</span></div>
      <div><b data-compteur="14" data-suffixe=" h">14 h</b><span>fin des cours</span></div>
    </div>
    <div class="diapo-nav">
      <span class="diapo-legende" id="diapoLegende">L'entrée du campus, route de Kapélé</span>
      <div class="diapo-barres" id="diapoBarres"><?php for ($i = 0; $i < 5; $i++): ?><button type="button" aria-label="Photo <?= $i + 1 ?>"><i></i></button><?php endfor; ?></div>
    </div>
  </div>
</section>

<section class="sec">
  <div class="wrap">
    <div class="sec-head">
      <span class="sur-titre">Pourquoi l'ISIT</span>
      <h2>Une école née à Korhogo, pensée pour l'emploi</h2>
      <p class="sub">Des formations concrètes dans un cadre neuf, à un coût accessible pour les familles.</p>
    </div>
    <div class="atouts">
      <div class="atout reveal"><span class="ico">💼</span><h3>Des métiers concrets</h3><p>Des filières qui répondent aux besoins des entreprises et des exploitations, du Nord jusqu'à Abidjan et au-delà.</p></div>
      <div class="atout reveal"><span class="ico">💳</span><h3>Une scolarité accessible</h3><p>140 000 F par an, payables en une fois ou sur 3 à 6 mois.</p></div>
      <div class="atout reveal"><span class="ico">❄️</span><h3>Un cadre moderne</h3><p>Un campus neuf, une salle informatique équipée, des salles climatisées et une table-banc par étudiant.</p></div>
      <div class="atout reveal"><span class="ico">🎓</span><h3>Une identité forte</h3><p>Tenue officielle, carte d'étudiant et esprit d'école dès le premier jour.</p></div>
    </div>
  </div>
</section>

<section id="ambition" class="sec sec-ambition">
  <div class="wrap">
    <div class="sec-head">
      <span class="sur-titre">Notre ambition</span>
      <h2>De Korhogo à toute l'Afrique de l'Ouest</h2>
      <p class="sub">L'ISIT est né à Korhogo, au cœur du Nord. Son ambition dépasse la région : former des talents pour toute la Côte d'Ivoire et accueillir les étudiants de la sous-région.</p>
    </div>
    <div class="trajet" id="trajet">
      <svg class="trajet-ligne" viewBox="0 0 1000 120" preserveAspectRatio="none" aria-hidden="true"><path d="M20,90 C180,10 300,110 500,60 S820,10 980,40"/></svg>
      <ol>
        <li style="--i:0"><span class="point"></span><b>Korhogo</b><small>Le campus, la première promotion, les partenaires locaux</small></li>
        <li style="--i:1"><span class="point"></span><b>Tout le Nord</b><small>Poro, Tchologo, Bagoué, Hambol, Folon, Kabadougou, Worodougou, Béré</small></li>
        <li style="--i:2"><span class="point"></span><b>Toute la Côte d'Ivoire</b><small>Bouaké, Yamoussoukro, Abidjan, San-Pédro, Man</small></li>
        <li style="--i:3"><span class="point"></span><b>La sous-région</b><small>Mali, Burkina Faso, Guinée, Ghana, Niger et au-delà</small></li>
      </ol>
    </div>
  </div>
</section>

<?php
$panneaux = [
    'gestion' => ['admin.jpg', 'Bureaux, entreprises, commerces'],
    'tech' => ['labo.jpg', 'Ordinateurs, chantiers, plans'],
    'services' => ['visite.jpg', 'Accueil, hôtels, voyages'],
    'agro' => ['ruban.jpg', 'Cultures, élevages, exploitations'],
];
$filieresParDomaine = [];
foreach (filieres() as $code => $f) $filieresParDomaine[$f['domaine']][$code] = $f;
?>
<section id="filieres" class="sec sec-doux">
  <div class="wrap">
    <div class="sec-head">
      <span class="sur-titre">Nos filières</span>
      <h2>Quatre domaines, huit métiers</h2>
      <p class="sub">Survole ou touche un domaine pour découvrir ses filières.</p>
    </div>
    <div class="panneaux" id="panneaux">
      <?php $premier = true; foreach (domaines_filieres() as $cle => $libelle): [$photo, $accroche] = $panneaux[$cle]; ?>
        <div class="panneau<?= $premier ? ' ouvert' : '' ?>" tabindex="0">
          <img src="/assets/img/<?= $photo ?>" alt="" loading="lazy">
          <div class="panneau-contenu">
            <span class="panneau-nombre"><?= count($filieresParDomaine[$cle]) ?> filière<?= count($filieresParDomaine[$cle]) > 1 ? 's' : '' ?></span>
            <h3><?= htmlspecialchars($libelle) ?></h3>
            <p class="panneau-accroche"><?= htmlspecialchars($accroche) ?></p>
            <ul>
              <?php foreach ($filieresParDomaine[$cle] as $code => $f): ?>
                <li><a href="/filieres/<?= $code ?>"><?= htmlspecialchars(preg_replace('/^[A-Z]+ · /', '', $f['nom'])) ?> <span>→</span></a></li>
              <?php endforeach; ?>
            </ul>
          </div>
        </div>
      <?php $premier = false; endforeach; ?>
    </div>
    <div class="groupe-btn"><a class="btn btn-ghost" href="/filieres">Toutes les filières en détail</a></div>
  </div>
</section>

<section id="orientation" class="sec">
  <div class="wrap orientation">
    <div class="sec-head">
      <span class="sur-titre">Test d'orientation · 1 minute</span>
      <h2>Quelle filière est faite pour toi ?</h2>
      <p class="sub">Trois questions, une recommandation, et tu peux en parler directement avec l'école sur WhatsApp.</p>
    </div>
    <div class="quiz" id="quiz" aria-live="polite" data-filieres="<?= htmlspecialchars(json_encode($filieresQuiz, JSON_UNESCAPED_UNICODE)) ?>"></div>
  </div>
</section>

<section id="frais" class="sec sec-doux">
  <div class="wrap">
    <div class="sec-head">
      <span class="sur-titre">Frais de scolarité</span>
      <h2>Des frais clairs, un paiement souple</h2>
      <p class="sub">Choisis ta formule de paiement pour voir le montant à prévoir.</p>
    </div>
    <div class="fees">
      <div class="fee-box fee-main">
        <span class="sur-titre">Scolarité annuelle</span>
        <div class="big">140 000 <small>FCFA</small></div>
        <label class="curseur-mois" for="moisPaiement">
          <span>Je paie en <b id="moisLibelle">3 fois</b></span>
          <input type="range" id="moisPaiement" min="1" max="6" step="1" value="3">
          <span class="graduations" aria-hidden="true"><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i></span>
        </label>
        <div class="calc" id="calc"><b>46 667 F / mois</b>pendant 3 mois</div>
      </div>
      <div class="fee-box fee-side">
        <span class="sur-titre">Frais annexes · à l'inscription</span>
        <div class="big">60 000 <small>FCFA</small></div>
        <ul class="inc"><li>Tenue officielle</li><li>Chaussures</li><li>Polo ISIT</li><li>Carte d'étudiant</li></ul>
        <div class="total"><span>Total première année</span><span>200 000 F</span></div>
      </div>
    </div>
  </div>
</section>

<section class="sec">
  <div class="wrap">
    <div class="sec-head">
      <span class="sur-titre">Admission</span>
      <h2>S'inscrire en 4 étapes</h2>
      <p class="sub">Tout se fait en ligne, depuis un téléphone.</p>
    </div>
    <ol class="etapes">
      <li><b>Je choisis ma filière</b><span>Avec l'aide du test d'orientation si besoin.</span></li>
      <li><b>Je remplis le formulaire</b><span>En trois étapes, je reçois aussitôt mon numéro de dossier.</span></li>
      <li><b>Je joins mes pièces</b><span>Photos ou scans des documents demandés.</span></li>
      <li><b>L'école me rappelle</b><span>Pour confirmer l'inscription et le paiement.</span></li>
    </ol>
    <div class="groupe-btn"><a class="btn btn-primary" href="/admission#formulaire">Commencer ma pré-inscription</a></div>
  </div>
</section>

<?php require __DIR__ . '/_carte.php'; ?>

<section id="campus" class="sec sec-doux">
  <div class="wrap">
    <div class="sec-head">
      <span class="sur-titre">Le campus en images</span>
      <h2>Des espaces modernes pour apprendre</h2>
      <p class="sub">Salle informatique, salles de cours et administration ont été inaugurées en présence des autorités et des familles. Touche une photo pour l'agrandir.</p>
    </div>
    <div class="carrousel">
      <div class="piste" id="piste">
        <?php foreach ($photosCampus as $i => [$fichier, $alt, $legende, $large]): ?>
          <button type="button" class="g" data-src="/assets/img/<?= $fichier ?>"><img src="/assets/img/<?= $fichier ?>" alt="<?= htmlspecialchars($alt) ?>" loading="lazy" draggable="false"><span><em><?= str_pad((string)($i + 1), 2, '0', STR_PAD_LEFT) ?></em><?= htmlspecialchars($legende) ?></span></button>
        <?php endforeach; ?>
      </div>
      <div class="carrousel-nav">
        <button type="button" id="pistePrec" aria-label="Photos précédentes">←</button>
        <div class="piste-progres"><i id="pisteProgres"></i></div>
        <button type="button" id="pisteSuiv" aria-label="Photos suivantes">→</button>
      </div>
    </div>
  </div>
</section>

<div class="lb" id="lb" hidden>
  <button type="button" class="lb-close" id="lbClose" aria-label="Fermer">×</button>
  <button type="button" class="lb-nav lb-prev" id="lbPrev" aria-label="Photo précédente">‹</button>
  <figure><img id="lbImg" alt=""><figcaption id="lbCap"></figcaption></figure>
  <button type="button" class="lb-nav lb-next" id="lbNext" aria-label="Photo suivante">›</button>
</div>

<section class="sec">
  <div class="wrap duo">
    <div class="duo-photos">
      <figure class="reveal"><img src="/assets/img/tenue.jpg" alt="Tenue officielle ISIT : blazer bordeaux et pantalon beige"></figure>
      <figure class="reveal"><img src="/assets/img/promo.jpg" alt="Étudiants de l'ISIT en polo aux couleurs de l'école"></figure>
    </div>
    <div>
      <span class="sur-titre">Vie à l'ISIT</span>
      <h2>Une tenue, une fierté</h2>
      <p>Blazer bordeaux, pantalon beige et polo au col en pagne : à l'ISIT, on porte ses couleurs avec élégance. La tenue est obligatoire dès la première semaine de cours.</p>
      <p class="citation">« ISIT, le défi de l'excellence. »<small>La devise de l'école, portée par chaque étudiant</small></p>
    </div>
  </div>
</section>

<section id="communiques" class="sec sec-doux">
  <div class="wrap">
    <div class="sec-head">
      <span class="sur-titre">Communiqués</span>
      <h2>Toutes les informations de l'ISIT, au bon moment</h2>
      <p class="sub">Examens, scolarité, congés, rentrée : les annonces officielles de l'administration, à partager en un clic sur WhatsApp.</p>
    </div>
    <?php require __DIR__ . '/_communiques.php'; ?>
  </div>
</section>

<?php // Revue Task 12 : pas d'actualité publiée => pas de section vide sur l'accueil.
$actusAccueil = function_exists('cms_actualites_recentes') ? cms_actualites_recentes(db(), 3) : []; ?>
<?php if ($actusAccueil) : ?>
<section id="actualites" class="sec">
  <div class="wrap">
    <div class="sec-head">
      <span class="sur-titre">Actualités</span>
      <h2>Ça bouge à l'ISIT</h2>
    </div>
    <div class="grid-f">
      <?php foreach ($actusAccueil as $a): ?>
        <article class="card"><div class="corps">
          <?php if (!empty($a['date'])): ?><span class="dom"><?= htmlspecialchars($a['date']) ?></span><?php endif; ?>
          <h3><?= htmlspecialchars($a['titre'] ?? '') ?></h3>
          <p><?= htmlspecialchars($a['resume'] ?? '') ?></p>
        </div></article>
      <?php endforeach; ?>
    </div>
    <div class="groupe-btn"><a class="btn btn-ghost" href="/actualites">Toutes les actualités</a></div>
  </div>
</section>
<?php endif; ?>

<section class="sec">
  <div class="wrap">
    <div class="cta-band">
      <div>
        <h2>Prêt à rejoindre la première promotion ?</h2>
        <p>Dépose ta pré-inscription en quelques minutes, ou pose tes questions à l'école sur WhatsApp.</p>
      </div>
      <div class="groupe-btn">
        <a class="btn btn-primary" href="/admission#formulaire">Je m'inscris</a>
        <a class="btn btn-ghost" href="/contact">Nous contacter</a>
      </div>
    </div>
  </div>
</section>
