<?php
/**
 * EMOGO.CH — Page unique
 *
 * Ce fichier construit la page à partir de content.php.
 * Pour changer un texte : ouvrir content.php, pas celui-ci.
 */

declare(strict_types=1);

$c = require __DIR__ . '/content.php';

/** Échappement HTML — évite toute injection dans les textes. */
function e(?string $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}

/* Bornes d'altitude de l'échelle latérale, déduites des territoires. */
$altitudes = [];
foreach ($c['territoires']['items'] as $t) {
    $altitudes[] = (int) $t['alt_min'];
    $altitudes[] = (int) $t['alt_max'];
}
$altTop    = $altitudes ? max($altitudes) : 1500;
$altBottom = $altitudes ? min($altitudes) : 470;

/* Message affiché après un envoi sans JavaScript. */
$notice = '';
$noticeOk = false;
if (isset($_GET['envoi'])) {
    $noticeOk = ($_GET['envoi'] === 'ok');
    $notice   = $noticeOk
        ? $c['contact']['form']['success']
        : $c['contact']['form']['error'];
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= e($c['meta']['title']) ?></title>
<meta name="description" content="<?= e($c['meta']['description']) ?>">
<link rel="canonical" href="<?= e($c['meta']['url']) ?>">
<meta name="theme-color" content="#011A3D">
<meta name="author" content="<?= e($c['contact']['person']) ?>">

<meta property="og:type" content="website">
<meta property="og:site_name" content="<?= e($c['brand']['name']) ?>">
<meta property="og:title" content="<?= e($c['meta']['title']) ?>">
<meta property="og:description" content="<?= e($c['meta']['description']) ?>">
<meta property="og:url" content="<?= e($c['meta']['url']) ?>">
<meta property="og:locale" content="<?= e($c['meta']['locale']) ?>">
<meta name="twitter:card" content="summary">

<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@200..700&family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">

<!-- Marque la page comme « JavaScript actif » avant le premier affichage :
     sans JS, les contenus restent simplement visibles. -->
<script>document.documentElement.classList.add('js', 'reveal-ready');</script>

<script type="application/ld+json">
<?= json_encode([
    '@context' => 'https://schema.org',
    '@type'    => 'RealEstateAgent',
    'name'     => $c['footer']['legal_entity'],
    'alternateName' => $c['brand']['name'],
    'description'   => $c['meta']['description'],
    'url'      => $c['meta']['url'],
    'email'    => $c['contact']['email'],
    'founder'  => ['@type' => 'Person', 'name' => $c['contact']['person']],
    'foundingDate' => '2019',
    'address'  => [
        '@type'           => 'PostalAddress',
        'addressLocality' => 'Fully',
        'addressRegion'   => 'Valais',
        'addressCountry'  => 'CH',
    ],
    'areaServed' => array_map(
        static fn(array $t): array => ['@type' => 'Place', 'name' => $t['name']],
        $c['territoires']['items']
    ),
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_PRETTY_PRINT) ?>
</script>
</head>

<body data-alt-top="<?= (int) $altTop ?>" data-alt-bottom="<?= (int) $altBottom ?>">

<a class="skip" href="#contenu">Aller au contenu</a>

<!-- ══ Échelle d'altitude : l'élément signature du site ══ -->
<aside class="rail" aria-hidden="true">
    <div class="rail__line"><span class="rail__marker" data-rail-marker></span></div>
    <div class="rail__read">
        <span class="rail__value" data-rail-value><?= (int) $altTop ?></span>
        <span class="rail__unit">m</span>
    </div>
    <div class="rail__caption">altitude</div>
</aside>

<header class="head" data-head>
    <a class="head__mark" href="#top">
        <span class="head__wordmark"><?= e($c['brand']['name']) ?></span>
        <span class="head__sub"><?= e($c['brand']['tagline']) ?></span>
    </a>
    <nav class="head__nav" aria-label="Navigation principale">
        <?php foreach ($c['nav'] as $link): ?>
            <a href="<?= e($link['href']) ?>"><?= e($link['label']) ?></a>
        <?php endforeach; ?>
    </nav>
    <a class="head__mail" href="mailto:<?= e($c['contact']['email']) ?>"><?= e($c['contact']['email']) ?></a>
</header>

<main id="contenu">

<!-- ══ 1. Haut de page ══════════════════════════════════════════════════ -->
<section class="hero" id="top">
    <div class="topo" data-topo="hero" data-seed="7"><canvas data-topo-canvas></canvas></div>

    <div class="hero__inner">
        <p class="eyebrow eyebrow--light" data-reveal><?= e($c['hero']['eyebrow']) ?></p>

        <h1 class="hero__title">
            <span class="line" data-reveal><?= e($c['hero']['title_1']) ?></span>
            <span class="line line--em" data-reveal><?= e($c['hero']['title_2']) ?></span>
        </h1>

        <p class="hero__lede" data-reveal><?= e($c['hero']['lede']) ?></p>

        <dl class="facts" data-reveal>
            <?php foreach ($c['hero']['facts'] as $f): ?>
                <div class="facts__item">
                    <dt><?= e($f['label']) ?></dt>
                    <dd><?= e($f['value']) ?></dd>
                </div>
            <?php endforeach; ?>
        </dl>
    </div>

    <a class="hero__scroll" href="#approche">
        <span><?= e($c['hero']['scroll']) ?></span>
        <svg viewBox="0 0 12 30" aria-hidden="true"><path d="M6 0v24M1.5 19.5 6 24l4.5-4.5"/></svg>
    </a>
</section>

<!-- ══ 2. Approche ══════════════════════════════════════════════════════ -->
<section class="band band--cream" id="approche">
    <div class="wrap">
        <header class="lede-block">
            <p class="eyebrow" data-reveal><?= e($c['approche']['eyebrow']) ?></p>
            <h2 class="h2" data-reveal>
                <?= e($c['approche']['title']) ?>
                <em><?= e($c['approche']['title_em']) ?></em>
            </h2>
        </header>

        <ul class="specs">
            <?php foreach ($c['approche']['items'] as $item): ?>
                <li class="specs__item" data-reveal>
                    <h3 class="specs__name"><?= e($item['name']) ?></h3>
                    <p class="specs__text"><?= e($item['text']) ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
</section>

<!-- ══ 3. Territoires ═══════════════════════════════════════════════════ -->
<section class="band band--navy" id="territoires">
    <div class="topo topo--soft" data-topo="territoires" data-seed="23"><canvas data-topo-canvas></canvas></div>

    <div class="wrap">
        <header class="lede-block">
            <p class="eyebrow eyebrow--light" data-reveal><?= e($c['territoires']['eyebrow']) ?></p>
            <h2 class="h2 h2--light" data-reveal>
                <?= e($c['territoires']['title']) ?>
                <em><?= e($c['territoires']['title_em']) ?></em>
            </h2>
        </header>

        <div class="plots">
            <?php foreach ($c['territoires']['items'] as $t): ?>
                <article class="plot" data-reveal>
                    <div class="plot__scale" aria-hidden="true">
                        <span class="plot__tick"></span>
                        <span class="plot__tick"></span>
                        <span class="plot__tick"></span>
                    </div>
                    <div class="plot__body">
                        <p class="plot__alt">
                            <span class="plot__num"><?= (int) $t['alt_min'] ?></span>
                            <span class="plot__dash">–</span>
                            <span class="plot__num"><?= (int) $t['alt_max'] ?></span>
                            <span class="plot__unit">m</span>
                        </p>
                        <h3 class="plot__name"><?= e($t['name']) ?></h3>
                        <p class="plot__text"><?= e($t['text']) ?></p>
                        <p class="plot__status"><span class="dot" aria-hidden="true"></span><?= e($t['status']) ?></p>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>

        <p class="plots__note" data-reveal><?= e($c['territoires']['note']) ?></p>
    </div>
</section>

<!-- ══ 4. Parcours ══════════════════════════════════════════════════════ -->
<section class="band band--sand" id="parcours">
    <div class="wrap wrap--narrow">
        <p class="eyebrow" data-reveal><?= e($c['parcours']['eyebrow']) ?></p>
        <blockquote class="statement" data-reveal>
            <p><?= e($c['parcours']['text']) ?></p>
            <footer class="statement__sign">
                <span class="statement__name"><?= e($c['parcours']['signature_name']) ?></span>
                <span class="statement__role"><?= e($c['parcours']['signature_role']) ?></span>
            </footer>
        </blockquote>
    </div>
</section>

<!-- ══ 5. Contact ═══════════════════════════════════════════════════════ -->
<section class="band band--deep" id="contact">
    <div class="wrap">
        <div class="contact">

            <div class="contact__side">
                <p class="eyebrow eyebrow--light" data-reveal><?= e($c['contact']['eyebrow']) ?></p>
                <h2 class="h2 h2--light" data-reveal><em><?= e($c['contact']['title']) ?></em></h2>
                <p class="contact__text" data-reveal><?= e($c['contact']['text']) ?></p>

                <dl class="card" data-reveal>
                    <dt>Interlocuteur</dt>
                    <dd><?= e($c['contact']['person']) ?></dd>
                    <dt>E-mail</dt>
                    <dd><a href="mailto:<?= e($c['contact']['email']) ?>"><?= e($c['contact']['email']) ?></a></dd>
                    <dt>Lieu</dt>
                    <dd><?= e($c['contact']['place']) ?></dd>
                </dl>
            </div>

            <div class="contact__form" data-reveal>
                <?php if ($notice !== ''): ?>
                    <p class="note note--<?= $noticeOk ? 'ok' : 'err' ?>"><?= e($notice) ?></p>
                <?php endif; ?>

                <form class="form" action="send.php" method="post" novalidate data-form
                      data-sending="<?= e($c['contact']['form']['sending']) ?>"
                      data-success="<?= e($c['contact']['form']['success']) ?>"
                      data-error="<?= e($c['contact']['form']['error']) ?>">

                    <div class="field">
                        <label for="nom"><?= e($c['contact']['form']['name']) ?></label>
                        <input type="text" id="nom" name="nom" autocomplete="name" required maxlength="120">
                        <span class="field__err" data-err="nom"></span>
                    </div>

                    <div class="field-row">
                        <div class="field">
                            <label for="email"><?= e($c['contact']['form']['email']) ?></label>
                            <input type="email" id="email" name="email" autocomplete="email" required maxlength="190">
                            <span class="field__err" data-err="email"></span>
                        </div>
                        <div class="field">
                            <label for="telephone"><?= e($c['contact']['form']['phone']) ?></label>
                            <input type="tel" id="telephone" name="telephone" autocomplete="tel" maxlength="40">
                            <span class="field__err" data-err="telephone"></span>
                        </div>
                    </div>

                    <div class="field">
                        <label for="objet"><?= e($c['contact']['form']['subject']) ?></label>
                        <div class="select">
                            <select id="objet" name="objet">
                                <?php foreach ($c['contact']['subjects'] as $s): ?>
                                    <option value="<?= e($s) ?>"><?= e($s) ?></option>
                                <?php endforeach; ?>
                            </select>
                            <svg viewBox="0 0 12 8" aria-hidden="true"><path d="M1 1.5 6 6.5l5-5"/></svg>
                        </div>
                    </div>

                    <div class="field">
                        <label for="message"><?= e($c['contact']['form']['message']) ?></label>
                        <textarea id="message" name="message" rows="5" required maxlength="5000"></textarea>
                        <span class="field__err" data-err="message"></span>
                    </div>

                    <div class="check">
                        <input type="checkbox" id="consentement" name="consentement" value="1" required>
                        <label for="consentement"><?= e($c['contact']['form']['consent']) ?></label>
                        <span class="field__err" data-err="consentement"></span>
                    </div>

                    <!-- Champ piège anti-robot : masqué, doit rester vide. -->
                    <div class="trap" aria-hidden="true">
                        <label for="site_web">Site web</label>
                        <input type="text" id="site_web" name="site_web" tabindex="-1" autocomplete="off">
                    </div>
                    <input type="hidden" name="ouvert_a" value="<?= time() ?>">

                    <button class="btn" type="submit" data-submit>
                        <span data-submit-label><?= e($c['contact']['form']['submit']) ?></span>
                        <svg viewBox="0 0 20 12" aria-hidden="true"><path d="M0 6h18M13 1l5 5-5 5"/></svg>
                    </button>

                    <p class="form__status" role="status" aria-live="polite" data-status></p>
                </form>
            </div>

        </div>
    </div>
</section>

</main>

<footer class="foot">
    <div class="wrap foot__inner">
        <p class="foot__legal">
            <strong><?= e($c['footer']['legal_entity']) ?></strong>
            <span><?= e($c['footer']['legal_status']) ?></span>
            <span><?= e($c['footer']['legal_place']) ?></span>
        </p>
        <p class="foot__note"><?= e($c['footer']['note']) ?></p>
        <p class="foot__copy">© <?= date('Y') ?> <?= e($c['footer']['legal_entity']) ?></p>
    </div>
</footer>

<a class="jump" href="#contact" data-jump><?= e($c['contact']['eyebrow']) ?></a>

<script src="assets/js/main.js" defer></script>
</body>
</html>
