<?php
/**
 * Formulaire de contact public.
 * @var array<string,string> $old
 * @var list<string> $errors
 * @var bool $sent
 * @var bool $recaptcha
 * @var string $recaptchaSite
 */

use App\Core\Csrf;
?>
<nav class="breadcrumb-nav" aria-label="Fil d'Ariane">
    <a href="<?= e(base_url('/')) ?>">Accueil</a>
    <span class="sep">&rsaquo;</span>
    <span class="current">Contact</span>
</nav>

<h1 class="gallery-title">Contact</h1>
<p class="contact-intro">Une question, un projet ou simplement l'envie d'échanger autour d'une œuvre&nbsp;? Écrivez-moi.</p>

<div class="contact-layout">
<div class="contact-main">
<?php if ($sent): ?>
    <p class="contact-success">Merci, votre message a bien été envoyé.</p>
<?php endif; ?>

<?php if (!empty($errors)): ?>
    <div class="contact-errors"><?php foreach ($errors as $er): ?><div><?= e($er) ?></div><?php endforeach; ?></div>
<?php endif; ?>

<form method="post" action="<?= e(base_url('contact')) ?>" class="contact-form">
    <?= Csrf::field() ?>
    <input type="hidden" name="ts" value="<?= time() ?>">

    <div class="hp" aria-hidden="true">
        <label>Ne pas remplir <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
    </div>

    <div class="field-grid">
        <div class="field-row">
            <label for="cname">Nom <span class="req">*</span></label>
            <input id="cname" type="text" name="name" value="<?= e($old['name'] ?? '') ?>" required autocomplete="name">
        </div>
        <div class="field-row">
            <label for="cemail">Email <span class="req">*</span></label>
            <input id="cemail" type="email" name="email" value="<?= e($old['email'] ?? '') ?>" required autocomplete="email">
        </div>
    </div>
    <div class="field-row">
        <label for="cphone">Téléphone <span class="opt">(facultatif)</span></label>
        <input id="cphone" type="tel" name="phone" value="<?= e($old['phone'] ?? '') ?>" autocomplete="tel">
    </div>
    <div class="field-row">
        <label for="cmsg">Message <span class="req">*</span></label>
        <textarea id="cmsg" name="message" rows="6" required><?= e($old['message'] ?? '') ?></textarea>
    </div>

    <?php if ($recaptcha): ?>
        <input type="hidden" name="g-recaptcha-response" id="recaptchaToken">
    <?php endif; ?>

    <div class="contact-actions">
        <button type="submit" class="contact-submit">Envoyer le message</button>
    </div>
</form>
</div>
<?php if (!empty($contactImage)): ?>
<aside class="contact-aside">
    <img src="<?= e($contactImage['url']) ?>" alt="<?= e($contactImage['alt']) ?>" loading="lazy">
</aside>
<?php endif; ?>
</div>

<?php if ($recaptcha): ?>
    <script src="https://www.google.com/recaptcha/api.js?render=<?= e($recaptchaSite) ?>"></script>
    <script>
    (function () {
        var form = document.querySelector('.contact-form');
        var field = document.getElementById('recaptchaToken');
        var siteKey = <?= json_encode($recaptchaSite) ?>;
        if (!form || !field) { return; }
        form.addEventListener('submit', function (e) {
            if (form.dataset.rcDone === '1') { return; } // jeton déjà obtenu : on laisse partir
            e.preventDefault();
            grecaptcha.ready(function () {
                grecaptcha.execute(siteKey, { action: 'contact' }).then(function (token) {
                    field.value = token;
                    form.dataset.rcDone = '1';
                    form.submit();
                });
            });
        });
    })();
    </script>
<?php endif; ?>
