<?php
/**
 * Render a comma-separated list of entries with links.
 * Entries joined with comma, last two joined with " & ".
 */
function renderEntries(array $entries): string
{
    if (empty($entries)) {
        return "";
    }
    $parts = [];
    foreach ($entries as $e) {
        $text = htmlspecialchars($e["text"] ?? "");
        $url = $e["url"] ?? "";
        if (!empty($url)) {
            $parts[] =
                '<span class="apropos-entry"><a href="' .
                htmlspecialchars($url) .
                '" target="_blank" rel="noopener">' .
                $text .
                "</a></span>";
        } else {
            $parts[] = '<span class="apropos-entry">' . $text . "</span>";
        }
    }
    $count = count($parts);
    if ($count === 1) {
        return $parts[0];
    }
    $prefix = implode(", ", array_slice($parts, 0, $count - 2));
    $suffix = implode(" & ", array_slice($parts, -2));
    return $prefix !== "" ? $prefix . ", " . $suffix : $suffix;
} ?>
<main class="apropos-main" id="main-content">
    <div class="apropos-layout">

        <!-- LEFT: sticky table of contents -->
        <nav class="apropos-toc" aria-label="Sections de la page">
            <p class="apropos-toc-label">Parties</p>
            <ul>
                <li><a href="#apropos-intro">À propos</a></li>
                <?php if (!empty($contacts)): ?>
                <li><a href="#apropos-contacts">Contacts</a></li>
                <?php endif; ?>
                <li><a href="#apropos-credits">Crédits</a></li>
            </ul>
            <div class="apropos-toc-erg">
                <a href="https://erg.be" target="_blank" rel="noopener">
                    Site de l'erg ↗
                </a>
            </div>
            <div class="apropos-toc-source">
                <a href="https://git.erg.school/PostERG/xamxam" target="_blank" rel="noopener">
                    Code source ↗
                </a>
            </div>
        </nav>

        <!-- MIDDLE: main prose + sections -->
        <div class="apropos-content">

            <!-- Intro text from DB -->
            <section class="apropos-section" id="apropos-intro">
                <div class="prose">
                    <?= $aboutHtml ?>
                </div>
            </section>

            <?php if (!empty($contacts)): ?>
            <!-- Contacts section -->
            <section class="apropos-section" id="apropos-contacts">
                <h2 class="apropos-section-title">Contacts</h2>
                <div class="apropos-contacts-grid">
                    <?php foreach ($contacts as $group): ?>
                    <address class="apropos-contact-card">
                        <?= renderEntries($group["entries"] ?? []) ?>
                        <?php if (!empty($group["role"])): ?>
                        <span><?= htmlspecialchars($group["role"]) ?></span>
                        <?php endif; ?>
                        <?php
                        $emails = array_filter(
                            array_column($group["entries"] ?? [], "email"),
                            fn($e) => !empty($e),
                        );
                        foreach ($emails as $email): ?>
                        <a href="<?= EmailObfuscator::mailto($email) ?>"><?= EmailObfuscator::email($email) ?></a>
                        <?php endforeach;
                        ?>
                    </address>
                    <?php endforeach; ?>
                </div>
            </section>
            <?php endif; ?>

            <!-- Credits section (hardcoded) -->
            <section class="apropos-section" id="apropos-credits">
                <h2 class="apropos-section-title">Crédits</h2>
                <dl class="apropos-credits-list">
                    <div class="apropos-credit-row">
                        <dt>Design & développement</dt>
                        <dd>
                            <a class="apropos-entry" target="_blank" href='&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6F;&#x6C;&#x69;&#x39;&#x38;&#x6D;&#x61;&#x72;&#x6C;&#x79;&#x40;&#x67;&#x6D;&#x61;&#x69;&#x6C;&#x2E;&#x63;&#x6F;&#x6D;&#xA;'>Olivia Marly</a>,
                            <a class="apropos-entry" target="_blank" href='https://tgm.happyngreen.fr'>Théophile Gerveau-Mercier</a> &
                            <a class="apropos-entry" target="_blank" href='https://theohennequin.com'>Théo Hennequin</a>
                        </dd>
                    </div>
                    <div class="apropos-credit-row">
                        <dt>Typographies</dt>
                        <dd>
                            <a class="apropos-entry" target="_blank" href='https://typotheque.genderfluid.space/fr/fontes/ductus'><b>Ductus</b> - Amélie Dumont</a> &
                            <a class="apropos-entry" target="_blank" href='https://typotheque.genderfluid.space/fr/fontes/bbb-dm-sans'><b>BBB DM Sans</b> - Camille Circlude, Eugénie Bidaut, Mariel Nils, Bérénice Bouin</a>
                        </dd>
                    </div>
                    <div class="apropos-credit-row">
                        <dt>Iconographie</dt>
                        <dd>
                            <a class="apropos-entry" target="_blank" href="https://phosphoricons.com/">Phosphor Icons</a> —
                            <a class="apropos-entry" target="_blank" href="https://mit-license.org/">MIT</a>,
                            par Helena Zhang et Tobias Fried
                        </dd>
                    </div>
                </dl>
            </section>

        </div>

    </div>
</main>
