<?php
declare(strict_types=1);

/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\ContactMessage $contactMessage
 * @var array<string, string> $interestOptions
 * @var array<string, string> $experienceOptions
 * @var string $turnstileSiteKey
 */
$turnstileErrors = $contactMessage->getErrors()['turnstile'] ?? [];
$turnstileConfigured = $turnstileSiteKey !== '';

$prefillName = trim((string)($contactMessage->full_name ?? $this->getRequest()->getQuery('full_name', '')));
$prefillInterest = (string)($contactMessage->interest_area ?? $this->getRequest()->getQuery('interest_area', ''));
if (!array_key_exists($prefillInterest, $interestOptions)) {
    $prefillInterest = '';
}
$prefillExperience = (string)($contactMessage->experience_level ?? '');
?>
<?php $this->assign('title', 'Send an enquiry · 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">Send an enquiry</div>
            <h1>Tell us a little about yourself.</h1>
            <p class="cc-contact-story__intro">
                A few details are all we need to point you somewhere useful. Every enquiry is read by a real person — usually within two working days.
            </p>
            <div class="cc-contact-story__list">
                <ul>
                    <?php foreach ([
                        ['Interest area', 'Pottery, knitting, both, or unsure'],
                        ['Experience level', 'Brand new is the most common answer'],
                        ['Your goals', 'A keepsake, a hobby, a gift, time away from screens'],
                    ] 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($contactMessage, ['novalidate' => true, 'data-cc-contact-form' => '1']) ?>
                <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',
                            'value' => $prefillName,
                        ]) ?>
                    </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 class="cc-field-helper">Only used to reply to your enquiry.</div>
                    </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">Interest area<span class="cc-required">*</span></label>
                        <div class="cc-pill-group" role="radiogroup" aria-label="Interest area" data-cc-pill-group>
                            <?php foreach ($interestOptions as $value => $label):
                                $on = $prefillInterest === $value;
                            ?>
                                <button type="button"
                                        class="cc-pill-group__btn<?= $on ? ' is-on' : '' ?>"
                                        data-cc-pill
                                        data-target="interest_area"
                                        data-value="<?= h($value) ?>"
                                        aria-pressed="<?= $on ? 'true' : 'false' ?>"><?= h($label) ?></button>
                            <?php endforeach; ?>
                        </div>
                        <?= $this->Form->control('interest_area', [
                            'type' => 'hidden',
                            'value' => $prefillInterest,
                            'data-cc-pill-value' => 'interest_area',
                        ]) ?>
                    </div>
                </div>

                <div class="cc-section-h" style="margin-top: 28px;">Your starting point</div>

                <div class="cc-form-row cc-form-row--single">
                    <div>
                        <label class="cc-label">Experience level</label>
                        <div class="cc-pill-group" role="radiogroup" aria-label="Experience level" data-cc-pill-group>
                            <?php foreach ($experienceOptions as $value => $label):
                                $on = $prefillExperience === $value;
                            ?>
                                <button type="button"
                                        class="cc-pill-group__btn<?= $on ? ' is-on' : '' ?>"
                                        data-cc-pill
                                        data-target="experience_level"
                                        data-value="<?= h($value) ?>"
                                        aria-pressed="<?= $on ? 'true' : 'false' ?>"><?= h($label) ?></button>
                            <?php endforeach; ?>
                        </div>
                        <?= $this->Form->control('experience_level', [
                            'type' => 'hidden',
                            'value' => $prefillExperience,
                            'data-cc-pill-value' => 'experience_level',
                        ]) ?>
                    </div>
                </div>

                <div class="cc-form-row cc-form-row--single">
                    <div>
                        <label class="cc-label" for="goals">What do you hope to get out of it?</label>
                        <?= $this->Form->control('goals', [
                            'label' => false,
                            'class' => 'cc-textarea',
                            'id' => 'goals',
                            'type' => 'textarea',
                            'rows' => 3,
                            'placeholder' => 'e.g. a keepsake mug, time away from screens, a gift for someone, a new hobby…',
                            'required' => false,
                        ]) ?>
                        <div class="cc-field-helper">Optional, but helps us match you with the right teacher.</div>
                    </div>
                </div>

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

                <div class="cc-form-row cc-form-row--single">
                    <div>
                        <label class="cc-label" for="subject">Subject</label>
                        <?= $this->Form->control('subject', [
                            'label' => false,
                            'class' => 'cc-input',
                            'id' => 'subject',
                            'placeholder' => 'What is your enquiry about?',
                            'required' => false,
                        ]) ?>
                    </div>
                </div>

                <div class="cc-form-row cc-form-row--single">
                    <div>
                        <label class="cc-label" for="message_body">Message<span class="cc-required">*</span></label>
                        <?= $this->Form->control('message_body', [
                            'label' => false,
                            'class' => 'cc-textarea',
                            'id' => 'message_body',
                            'type' => 'textarea',
                            'rows' => 5,
                            'placeholder' => "A sentence or two about where you're starting from is plenty.",
                        ]) ?>
                    </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>

                <label class="cc-consent-box">
                    <?= $this->Form->hidden('consent_to_contact', ['value' => 0]) ?>
                    <input type="checkbox" name="consent_to_contact" value="1" <?= $contactMessage->consent_to_contact ? 'checked' : '' ?>>
                    <span>
                        <span class="cc-consent-box__label">I'm happy to be contacted about this enquiry.<span class="cc-required">*</span></span>
                        <span class="cc-consent-box__helper">We'll use your details to respond to this message only.</span>
                    </span>
                </label>

                <label class="cc-consent-box">
                    <?= $this->Form->hidden('marketing_opt_in_email', ['value' => 0]) ?>
                    <input type="checkbox" name="marketing_opt_in_email" value="1" <?= !empty($contactMessage->marketing_opt_in_email) ? 'checked' : '' ?>>
                    <span>
                        <span class="cc-consent-box__label">Email me about upcoming classes and workshops.</span>
                        <span class="cc-consent-box__helper">Maybe one a month at most. Unsubscribe with one click.</span>
                    </span>
                </label>

                <label class="cc-consent-box">
                    <?= $this->Form->hidden('marketing_opt_in_sms', ['value' => 0]) ?>
                    <input type="checkbox" name="marketing_opt_in_sms" value="1" <?= !empty($contactMessage->marketing_opt_in_sms) ? 'checked' : '' ?>>
                    <span>
                        <span class="cc-consent-box__label">Text me when last-minute slots open up.</span>
                        <span class="cc-consent-box__helper">Only useful if you provided a phone number above. Reply STOP anytime.</span>
                    </span>
                </label>

                <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="contact_form"></div>
                    <?php else: ?>
                        <p class="cc-field-error">Security verification is unavailable right now. Please configure Turnstile before accepting submissions.</p>
                    <?php endif; ?>
                    <?php if ($turnstileErrors !== []): ?>
                        <p class="cc-field-error"><?= h((string)$turnstileErrors[0]) ?></p>
                    <?php endif; ?>
                    <noscript>
                        <p class="cc-field-error">JavaScript is required to complete the security check on this form.</p>
                    </noscript>
                </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 enquiry</button>
                </div>
            <?= $this->Form->end() ?>
        </div>
    </div>
</section>
