<?php
declare(strict_types=1);

/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\Teacher $teacher
 * @var \Cake\Collection\CollectionInterface<\App\Model\Entity\AvailabilitySlot> $slots
 */
$slotList = $slots->toList();
$bookUrl = $this->Url->build(['_name' => 'booking_teacher', 'slug' => $teacher->slug]);
$specs = $teacher->getSpecialtyList();
?>
<?php $this->assign('title', h($teacher->full_name) . ' · CandleCraft Academy'); ?>

<section class="cc-section">
    <div class="cc-container" style="max-width: 1080px;">
        <a class="cc-msg-back" href="<?= $this->Url->build(['_name' => 'teachers_index']) ?>">← All teachers</a>

        <div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; margin-top: 24px;">
            <div class="cc-reveal">
                <div style="aspect-ratio: 1/1; border-radius: var(--r-4); overflow: hidden; background: var(--cc-bg-2); box-shadow: var(--e-2);">
                    <?php if (!empty($teacher->photo_path)): ?>
                        <?= $this->Html->image($teacher->photo_path, ['alt' => $teacher->full_name, 'style' => 'width:100%;height:100%;object-fit:cover;', 'loading' => 'eager']) ?>
                    <?php else: ?>
                        <div class="cc-teacher__photo-fallback" style="height: 100%;"><?= h($teacher->getInitials()) ?></div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="cc-reveal" style="--cc-reveal-delay: 100ms;">
                <div class="cc-eyebrow"><?= h($teacher->role) ?></div>
                <h1 style="font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.025em; margin: 14px 0 18px;"><?= h($teacher->full_name) ?></h1>

                <?php if ($specs): ?>
                    <div class="cc-teacher__tags" style="margin-bottom: 20px;">
                        <?php foreach ($specs as $tag): ?><span class="cc-chip cc-chip--clay"><?= h($tag) ?></span><?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <p style="font-size: 17px; line-height: 1.65; color: var(--cc-ink-2); margin-bottom: 20px;"><?= nl2br(h($teacher->bio)) ?></p>

                <div style="display: flex; align-items: baseline; gap: 16px; margin: 28px 0; padding: 16px 20px; background: var(--cc-bg-soft); border-radius: var(--r-3);">
                    <div>
                        <div style="font-size: 12px; color: var(--cc-ink-3); text-transform: uppercase; letter-spacing: 0.06em;">From</div>
                        <div style="font-size: 24px; font-weight: 800;">A$<?= h($teacher->getHourlyDollars()) ?></div>
                    </div>
                    <div style="font-size: 13px; color: var(--cc-ink-3);">per class · 90 min · 1-on-1</div>
                </div>

                <a class="cc-btn cc-btn--primary cc-btn--lg" href="<?= h($bookUrl) ?>">Book with <?= h(explode(' ', $teacher->full_name)[0]) ?> →</a>
            </div>
        </div>

        <?php if (!empty($slotList)): ?>
            <div style="margin-top: 64px;">
                <h2 style="font-size: 22px; font-weight: 700; margin-bottom: 20px;">Next available times</h2>
                <div class="cc-slot-picker">
                    <?php foreach (array_slice($slotList, 0, 8) as $s): ?>
                        <a class="cc-slot" href="<?= h($bookUrl) ?>">
                            <div class="cc-slot__date"><?= h($s->starts_at->format('D · d M')) ?></div>
                            <div class="cc-slot__time"><?= h($s->starts_at->format('g:i A')) ?></div>
                        </a>
                    <?php endforeach; ?>
                </div>
                <div style="margin-top: 16px;">
                    <a class="cc-arrowlink" href="<?= h($bookUrl) ?>">See all open times →</a>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>

<?php $this->start('css'); ?>
<style>
@media (max-width: 820px) {
    section.cc-section .cc-container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}
</style>
<?php $this->end(); ?>
