<?php
declare(strict_types=1);

/**
 * @var \App\View\AppView $this
 * @var \Cake\Collection\CollectionInterface<\App\Model\Entity\Benefit> $benefits
 * @var \Cake\Collection\CollectionInterface<\App\Model\Entity\JourneyStep> $journeySteps
 * @var \Cake\Collection\CollectionInterface<\App\Model\Entity\Program> $programs
 * @var \Cake\Collection\CollectionInterface<\App\Model\Entity\Testimonial> $testimonials
 * @var \Cake\Collection\CollectionInterface<\App\Model\Entity\LandingStat> $stats
 * @var \Cake\Collection\CollectionInterface<\App\Model\Entity\Teacher> $teachers
 */

$programList = $programs->toList();
$testimonialList = $testimonials->toList();
$statList = $stats->toList();
$benefitList = $benefits->toList();
$journeyList = $journeySteps->toList();
$teacherList = $teachers->toList();

$contactUrl = $this->Url->build(['_name' => 'contact_add']);
$bookUrl = $this->Url->build(['_name' => 'booking_index']);
$valueIconClasses = ['', 'cc-value__icon--moss', 'cc-value__icon--amber'];
$valueIcons = ['🤲', '🌿', '✦'];

$categories = [
    ['all', 'All classes', '✶'],
    ['pottery', 'Pottery', '🏺'],
    ['knitting', 'Knitting', '🧶'],
    ['beginner', 'Beginner-friendly', '🌱'],
    ['kids', 'Kids', '🧒'],
    ['weekend', 'Weekend', '🗓️'],
    ['private', 'Private 1-on-1', '✦'],
    ['gift', 'Gift cards', '🎁'],
];

$faqs = [
    ['Do I need any experience?', "No. Most people who come to us have never touched clay or yarn before. Every class is structured to take you from zero to making something you actually like."],
    ['What if I can\'t make it?', "Reschedule for free up to 24 hours before your slot — just reply to your confirmation email. After that we'll do our best, but can't always promise."],
    ['What should I wear?', "Something you don't mind getting dusty (clay) or covered in fluff (knitting). We have aprons. Hands work better than nails — you may want to take rings off."],
    ['Can kids join?', "Children 10+ are welcome with an adult in the same class. We do separate kid-only sessions in school holidays — check the booking page for those."],
    ['Do you sell gift cards?', "Yes — any value, sent by email, no expiry. Click 'Book a class' and choose 'Gift card' from the categories at the top."],
    ['Where are you?', "A small studio in Melbourne. The exact address goes out with your booking confirmation, along with parking notes and the door code."],
];
?>
<?php $this->assign('title', 'CandleCraft Academy — Pottery & knitting classes you\'ll actually finish'); ?>

<section class="cc-hero" id="hero">
    <div class="cc-container">
        <div class="cc-hero__grid">
            <div class="cc-reveal">
                <div class="cc-eyebrow" style="margin-bottom: 18px;">A small studio · Melbourne</div>
                <h1 class="cc-hero__title">
                    Make something <em>with your hands</em> this weekend.
                </h1>
                <p class="cc-hero__copy">
                    Beginner-friendly pottery and knitting classes in a calm, unhurried studio. Pick a teacher, pick a time, and turn up — we'll handle the rest.
                </p>
                <div class="cc-hero__ctas">
                    <a class="cc-btn cc-btn--primary cc-btn--lg" href="<?= h($bookUrl) ?>">
                        Book a class
                        <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true">
                            <path d="M1,5 L 13,5 M 9,1 L 13,5 L 9,9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </a>
                    <a class="cc-btn cc-btn--outline cc-btn--lg" href="<?= h($contactUrl) ?>">Send an enquiry</a>
                </div>
                <?php if (!empty($statList)): ?>
                    <div class="cc-hero__stats" role="list">
                        <?php foreach ($statList as $stat): $tone = (string)($stat->tone ?? 'ink'); ?>
                            <div role="listitem">
                                <div class="cc-hero__stat-value<?= $tone !== 'ink' ? ' cc-hero__stat-value--' . h($tone) : '' ?>">
                                    <span data-cc-counter data-cc-counter-to="<?= (int)$stat->value ?>"><?= (int)$stat->value ?></span><?= h((string)($stat->suffix ?? '')) ?>
                                </div>
                                <div class="cc-hero__stat-label"><?= h((string)$stat->label) ?></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

            <div class="cc-hero__figure cc-reveal" style="--cc-reveal-delay: 120ms;">
                <?= $this->Html->image('studio/hero-hands.jpg', [
                    'alt' => 'Hands shaping clay on a potter\'s wheel in soft afternoon light',
                    'loading' => 'eager',
                    'fetchpriority' => 'high',
                    'onerror' => "this.style.display='none';this.parentNode.style.background='linear-gradient(135deg,var(--cc-clay-tint),var(--cc-amber-tint))';",
                ]) ?>
                <div class="cc-hero__figure-overlay">
                    <div class="cc-hero__figure-overlay-emoji" aria-hidden="true">★</div>
                    <div class="cc-hero__figure-overlay-text">
                        <strong>4.9 average rating</strong>
                        <span>from 120+ classes this year</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="cc-cats" data-cc-cat-rail aria-label="Class categories">
    <div class="cc-cats__scroll">
        <?php foreach ($categories as $i => [$value, $label, $emoji]): ?>
            <button type="button" class="cc-cat<?= $i === 0 ? ' is-on' : '' ?>"
                    data-cc-cat data-cat="<?= h($value) ?>" data-target="#cc-program-grid">
                <span class="cc-cat__emoji" aria-hidden="true"><?= h($emoji) ?></span>
                <?= h($label) ?>
            </button>
        <?php endforeach; ?>
    </div>
</section>

<section class="cc-section" id="programs">
    <div class="cc-container">
        <div class="cc-sec-head cc-reveal">
            <div>
                <div class="cc-eyebrow">What you can learn</div>
                <h2 style="margin-top: 14px;">Two crafts. One quiet studio.</h2>
            </div>
            <p>Browse classes by craft, or hop into the booking page to see who's teaching what this week.</p>
        </div>

        <div class="cc-grid-3" id="cc-program-grid">
            <?php
            $programTags = [
                'pottery' => 'pottery,beginner,weekend,private',
                'knitting' => 'knitting,beginner,weekend,private',
                'unsure' => 'all,beginner,gift',
            ];
            foreach ($programList as $i => $program):
                $tags = $programTags[$program->slug] ?? 'all';
                $emoji = match ($program->slug) {
                    'pottery' => '🏺',
                    'knitting' => '🧶',
                    default => '✶',
                };
            ?>
                <a class="cc-listing cc-reveal" data-cc-cat-item data-cat-tags="<?= h($tags) ?>"
                   href="<?= h($contactUrl) ?>?interest_area=<?= h($program->slug === 'unsure' ? 'not_sure' : $program->slug) ?>"
                   style="--cc-reveal-delay: <?= $i * 80 ?>ms;">
                    <div class="cc-listing__media">
                        <?php if (!empty($program->image_path)): ?>
                            <?= $this->Html->image($program->image_path, [
                                'alt' => $program->label . ' at CandleCraft Academy',
                                'loading' => 'lazy',
                                'onerror' => "this.style.display='none';",
                            ]) ?>
                        <?php else: ?>
                            <div class="cc-teacher__photo-fallback"><?= h($emoji) ?></div>
                        <?php endif; ?>
                        <span class="cc-listing__tag"><?= h($program->label) ?></span>
                    </div>
                    <div class="cc-listing__body">
                        <div class="cc-listing__title">
                            <span><?= h($program->headline) ?></span>
                            <span class="cc-listing__title-rating">★ 4.9</span>
                        </div>
                        <div class="cc-listing__sub"><?= h($program->body) ?></div>
                        <div class="cc-listing__price"><strong>From A$65</strong> · 90 min · 1-on-1</div>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="cc-section" id="why" style="background: var(--cc-bg-soft);">
    <div class="cc-container">
        <div class="cc-sec-head cc-reveal">
            <div>
                <div class="cc-eyebrow">Why learners choose us</div>
                <h2 style="margin-top: 14px;">Calm, craft-focused, and genuinely beginner-safe.</h2>
            </div>
            <p>No production lines, no rush, no pressure. We hire teachers who like teaching, not just teachers who happen to be available.</p>
        </div>

        <div class="cc-grid-3">
            <?php foreach ($benefitList as $i => $benefit): ?>
                <article class="cc-value cc-reveal" style="--cc-reveal-delay: <?= $i * 100 ?>ms;">
                    <div class="cc-value__icon <?= $valueIconClasses[$i % 3] ?>" aria-hidden="true"><?= h($valueIcons[$i % 3]) ?></div>
                    <h3><?= h($benefit->title) ?></h3>
                    <p><?= h($benefit->summary) ?></p>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?php if (!empty($teacherList)): ?>
<section class="cc-section" id="team">
    <div class="cc-container">
        <div class="cc-sec-head cc-reveal">
            <div>
                <div class="cc-eyebrow">Meet the team</div>
                <h2 style="margin-top: 14px;">Real people, who've taught real beginners.</h2>
            </div>
            <p>Pick a teacher who fits your style — or let us match you. Every teacher has been on the other side of the wheel themselves.</p>
        </div>

        <div class="cc-team">
            <?php foreach ($teacherList 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', 'onerror' => "this.parentNode.innerHTML='<div class=\"cc-teacher__photo-fallback\">" . h($t->getInitials()) . "</div>'"]) ?>
                        <?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>
                        <?php $tags = $t->getSpecialtyList(); if ($tags): ?>
                            <div class="cc-teacher__tags">
                                <?php foreach (array_slice($tags, 0, 3) as $tag): ?>
                                    <span class="cc-chip"><?= h($tag) ?></span>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
        <div style="text-align: center; margin-top: 32px;">
            <a class="cc-btn cc-btn--outline" href="<?= $this->Url->build(['_name' => 'teacher_apply']) ?>">Want to teach with us? →</a>
        </div>
    </div>
</section>
<?php endif; ?>

<section class="cc-section" id="howitworks" style="background: var(--cc-bg-soft);">
    <div class="cc-container">
        <div class="cc-sec-head cc-reveal">
            <div>
                <div class="cc-eyebrow">How it works</div>
                <h2 style="margin-top: 14px;">Three small steps, no pressure.</h2>
            </div>
            <p>From your first message to your first finished mug. Most people are in the studio within a week.</p>
        </div>
        <div class="cc-steps">
            <?php foreach ($journeyList as $i => $step): ?>
                <div class="cc-step cc-reveal" style="--cc-reveal-delay: <?= $i * 120 ?>ms;">
                    <div class="cc-step__num"><?= sprintf('%02d', $i + 1) ?></div>
                    <h3><?= h($step->title) ?></h3>
                    <p><?= h($step->summary) ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?php if (!empty($testimonialList)): ?>
<section class="cc-section" id="reviews">
    <div class="cc-container">
        <div class="cc-sec-head cc-reveal">
            <div>
                <div class="cc-eyebrow">What learners say</div>
                <h2 style="margin-top: 14px;">★ 4.9 average from 120+ class reviews.</h2>
            </div>
            <p>Honest words from people who came in nervous and left with something they made.</p>
        </div>
        <div class="cc-reviews">
            <?php foreach ($testimonialList as $i => $t):
                $name = explode(',', (string)$t->attribution)[0] ?? '';
                $initials = strtoupper(mb_substr(trim($name), 0, 1));
            ?>
                <article class="cc-review cc-reveal" style="--cc-reveal-delay: <?= $i * 120 ?>ms;">
                    <div class="cc-review__stars" aria-label="5 stars">★★★★★</div>
                    <div class="cc-review__quote">"<?= h($t->quote) ?>"</div>
                    <div class="cc-review__who">
                        <div class="cc-review__avatar"><?= h($initials) ?></div>
                        <div>
                            <div class="cc-review__who-name"><?= h(trim($name)) ?></div>
                            <div class="cc-review__who-meta"><?= h(trim((string)(explode(',', (string)$t->attribution)[1] ?? 'Verified learner'))) ?></div>
                        </div>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<section class="cc-section" id="faq" style="background: var(--cc-bg-soft);">
    <div class="cc-container">
        <div class="cc-sec-head cc-reveal" style="justify-content: center; text-align: center; flex-direction: column; align-items: center;">
            <div class="cc-eyebrow">FAQ</div>
            <h2 style="margin-top: 14px; text-align: center;">Common questions, plain answers.</h2>
        </div>
        <div class="cc-faq cc-reveal">
            <?php foreach ($faqs as $i => [$q, $a]): ?>
                <div class="cc-faq__item">
                    <button class="cc-faq__q" type="button" data-cc-faq aria-expanded="false">
                        <span><?= h($q) ?></span>
                        <span class="cc-faq__q-icon" aria-hidden="true">+</span>
                    </button>
                    <div class="cc-faq__a"><?= h($a) ?></div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section style="padding: 0 24px;">
    <div class="cc-final-cta cc-reveal">
        <h2>Ready when you are.</h2>
        <p>Book a class, send an enquiry, or just ask the assistant a question. No drip campaigns, no pressure — promise.</p>
        <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
            <a class="cc-btn cc-btn--primary cc-btn--lg" href="<?= h($bookUrl) ?>">Book a class</a>
            <a class="cc-btn cc-btn--outline cc-btn--lg" href="<?= h($contactUrl) ?>">Send an enquiry</a>
        </div>
    </div>
</section>
