<?php
declare(strict_types=1);

/**
 * @var \App\View\AppView $this
 * @var \Cake\Collection\CollectionInterface<\App\Model\Entity\Teacher> $teachers
 */
$list = $teachers->toList();
?>
<?php $this->assign('title', 'Meet the team · CandleCraft Academy'); ?>

<section class="cc-section">
    <div class="cc-container">
        <div class="cc-sec-head cc-reveal">
            <div>
                <div class="cc-eyebrow">Our teachers</div>
                <h2 style="margin-top: 14px;">Real people, who've taught real beginners.</h2>
            </div>
            <p>Click any teacher to read their full profile, see their classes, and book directly.</p>
        </div>

        <div class="cc-team">
            <?php foreach ($list as $i => $t): ?>
                <a class="cc-teacher cc-reveal" style="--cc-reveal-delay: <?= $i * 80 ?>ms;"
                   href="<?= $this->Url->build(['_name' => 'teacher_profile', 'slug' => $t->slug]) ?>">
                    <div class="cc-teacher__photo">
                        <?php if (!empty($t->photo_path)): ?>
                            <?= $this->Html->image($t->photo_path, ['alt' => $t->full_name, 'loading' => 'lazy']) ?>
                        <?php else: ?>
                            <div class="cc-teacher__photo-fallback"><?= h($t->getInitials()) ?></div>
                        <?php endif; ?>
                    </div>
                    <div class="cc-teacher__body">
                        <div class="cc-teacher__name"><?= h($t->full_name) ?></div>
                        <div class="cc-teacher__role"><?= h($t->role) ?></div>
                        <p class="cc-teacher__bio"><?= h($t->bio) ?></p>
                        <div class="cc-teacher__tags">
                            <?php foreach (array_slice($t->getSpecialtyList(), 0, 3) as $tag): ?>
                                <span class="cc-chip"><?= h($tag) ?></span>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>

        <div style="text-align: center; margin-top: 48px;">
            <p class="cc-muted" style="margin-bottom: 16px;">Want to teach with us?</p>
            <a class="cc-btn cc-btn--outline" href="<?= $this->Url->build(['_name' => 'teacher_apply']) ?>">Apply to teach →</a>
        </div>
    </div>
</section>
