<?php
declare(strict_types=1);

/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\TeacherApplication $application
 * @var array<string, string> $craftOptions
 * @var string $turnstileSiteKey
 */
$turnstileErrors = $application->getErrors()['turnstile'] ?? [];
$turnstileConfigured = $turnstileSiteKey !== '';
$prefillCraft = (string)($application->craft ?? '');
?>
<?php $this->assign('title', 'Teach with us · CandleCraft Academy'); ?>
<?php $this->Html->script('https://challenges.cloudflare.com/turnstile/v0/api.js', ['block' => true, 'defer' => true]); ?>

<section class="cc-contact-band">
    <div class="cc-contact-grid">
        <aside class="cc-contact-story cc-reveal">
            <div class="cc-eyebrow">Teach with us</div>
            <h1>We're always looking for warm, patient teachers.</h1>
            <p class="cc-contact-story__intro">
                We hire teachers who like teaching, not just teachers who happen to be available. Tell us about yourself — we'll be in touch within a week.
            </p>
            <div class="cc-contact-story__list">
                <ul>
                    <?php foreach ([
                        ['Your craft', 'Pottery, knitting, or both'],
                        ['Your style', 'Beginners welcome — patience matters more than years'],
                        ['Your availability', 'Even a few hours a week is plenty'],
                    ] as [$a, $b]): ?>
                        <li>
                            <strong><?= h($a) ?></strong>
                            <span><?= h($b) ?></span>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </aside>

        <div class="cc-card cc-contact-form cc-reveal" style="--cc-reveal-delay: 100ms;">
            <?= $this->Form->create($application, ['novalidate' => true]) ?>
                <div class="cc-section-h">About you</div>

                <div class="cc-form-row">
                    <div>
                        <label class="cc-label" for="full_name">Full name<span class="cc-required">*</span></label>
                        <?= $this->Form->control('full_name', ['label' => false, 'class' => 'cc-input', 'id' => 'full_name', 'placeholder' => 'Your full name', 'autocomplete' => 'name']) ?>
                    </div>
                    <div>
                        <label class="cc-label" for="email">Email<span class="cc-required">*</span></label>
                        <?= $this->Form->control('email', ['label' => false, 'class' => 'cc-input', 'id' => 'email', 'type' => 'email', 'placeholder' => 'you@example.com', 'autocomplete' => 'email']) ?>
                    </div>
                </div>

                <div class="cc-form-row">
                    <div>
                        <label class="cc-label" for="phone">Phone</label>
                        <?= $this->Form->control('phone', ['label' => false, 'class' => 'cc-input', 'id' => 'phone', 'placeholder' => '+61 …', 'required' => false, 'autocomplete' => 'tel']) ?>
                        <div class="cc-field-helper">Optional.</div>
                    </div>
                    <div>
                        <label class="cc-label">Craft<span class="cc-required">*</span></label>
                        <div class="cc-pill-group" role="radiogroup" aria-label="Craft" data-cc-pill-group>
                            <?php foreach ($craftOptions as $value => $label): $on = $prefillCraft === $value; ?>
                                <button type="button" class="cc-pill-group__btn<?= $on ? ' is-on' : '' ?>"
                                        data-cc-pill data-target="craft" data-value="<?= h($value) ?>"
                                        aria-pressed="<?= $on ? 'true' : 'false' ?>"><?= h($label) ?></button>
                            <?php endforeach; ?>
                        </div>
                        <?= $this->Form->control('craft', ['type' => 'hidden', 'value' => $prefillCraft, 'data-cc-pill-value' => 'craft']) ?>
                    </div>
                </div>

                <div class="cc-section-h" style="margin-top: 24px;">Your experience</div>

                <div class="cc-form-row">
                    <div>
                        <label class="cc-label" for="years_experience">Years of experience</label>
                        <?= $this->Form->control('years_experience', ['label' => false, 'class' => 'cc-input', 'id' => 'years_experience', 'type' => 'number', 'min' => 0, 'max' => 80, 'placeholder' => 'e.g. 5', 'required' => false]) ?>
                    </div>
                    <div>
                        <label class="cc-label" for="specialties">Specialties</label>
                        <?= $this->Form->control('specialties', ['label' => false, 'class' => 'cc-input', 'id' => 'specialties', 'placeholder' => 'wheel throwing, glazing, beginners', 'required' => false]) ?>
                        <div class="cc-field-helper">Comma-separated.</div>
                    </div>
                </div>

                <div class="cc-form-row cc-form-row--single">
                    <div>
                        <label class="cc-label" for="portfolio_url">Portfolio link</label>
                        <?= $this->Form->control('portfolio_url', ['label' => false, 'class' => 'cc-input', 'id' => 'portfolio_url', 'type' => 'url', 'placeholder' => 'https://instagram.com/your-handle', 'required' => false]) ?>
                        <div class="cc-field-helper">Optional. Instagram, personal site, anything that shows your work.</div>
                    </div>
                </div>

                <div class="cc-form-row cc-form-row--single">
                    <div>
                        <label class="cc-label" for="about">Tell us about yourself<span class="cc-required">*</span></label>
                        <?= $this->Form->control('about', ['label' => false, 'class' => 'cc-textarea', 'id' => 'about', 'type' => 'textarea', 'rows' => 5, 'placeholder' => 'Why you want to teach here, who you like teaching, anything we should know.']) ?>
                    </div>
                </div>

                <div class="cc-form-row cc-form-row--single">
                    <div>
                        <label class="cc-label" for="availability_summary">Availability</label>
                        <?= $this->Form->control('availability_summary', ['label' => false, 'class' => 'cc-textarea', 'id' => 'availability_summary', 'type' => 'textarea', 'rows' => 3, 'placeholder' => "e.g. Weekday evenings, all day Saturday, never Sundays.", 'required' => false]) ?>
                        <div class="cc-field-helper">Optional, but helpful — even a rough sketch.</div>
                    </div>
                </div>

                <div class="cc-honeypot" aria-hidden="true">
                    <?= $this->Form->control('website', ['label' => 'Leave this field blank', 'required' => false, 'autocomplete' => 'off', 'tabindex' => '-1']) ?>
                </div>

                <div class="cc-captcha-box">
                    <div class="cc-captcha-box__head">
                        <div class="cc-captcha-box__label">Security check</div>
                        <div class="cc-captcha-box__meta">Cloudflare Turnstile</div>
                    </div>
                    <?php if ($turnstileConfigured): ?>
                        <div class="cf-turnstile" data-sitekey="<?= h($turnstileSiteKey) ?>" data-theme="light" data-size="flexible" data-action="teacher_application"></div>
                    <?php else: ?>
                        <p class="cc-field-error">Security verification is unavailable right now.</p>
                    <?php endif; ?>
                    <?php if ($turnstileErrors !== []): ?>
                        <p class="cc-field-error"><?= h((string)$turnstileErrors[0]) ?></p>
                    <?php endif; ?>
                </div>

                <div class="cc-form-footer">
                    <div class="cc-form-footer__required"><span class="cc-required">*</span> Required</div>
                    <button class="cc-btn cc-btn--primary cc-btn--lg" type="submit"<?= $turnstileConfigured ? '' : ' disabled' ?>>Send application</button>
                </div>
            <?= $this->Form->end() ?>
        </div>
    </div>
</section>
