<?php
require_once __DIR__ . '/_helpers.php';
$siteUrl = static fn (string$page = 'home', array$query = []): string => PublicSiteController::url($page, $query);
$theme = in_array($settings['public_site_theme'] ?? 'warm', ['warm','nature','minimal'], true) ? $settings['public_site_theme'] : 'warm';
$association = $settings['association_name'] ?: 'Association';
$viewFile = __DIR__ . '/' . $view;
$requestPath = rtrim((string)(parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?: '/'), '/') ?: '/';
$activePage = match($requestPath) {
    '/','/site' => 'home','/animaux','/site/animaux','/adoption','/site/animal' => 'animals','/presentation','/site/presentation' => 'about','/dons','/site/dons' => 'donation','/contact','/site/contact' => 'contact',default => ''
};
$activeSpecies = (string)($selectedSpecies ?? ($animal['species'] ?? ''));
$navClass = static fn (bool$active): string => $active ? ' class="active" aria-current="page"' : '';
$fullAddress = implode(', ', array_filter([$settings['association_address'] ?? '',trim(($settings['association_postal_code'] ?? '') . ' ' . ($settings['association_city'] ?? ''))]));
$hasContactMap = $activePage === 'contact' && is_numeric($settings['association_latitude'] ?? null) && is_numeric($settings['association_longitude'] ?? null);
if (!function_exists('public_age')) {
    function public_age(array$a): string
    {
        $months = null;
        if (!empty($a['birth_date'])) {
            $born = new DateTimeImmutable($a['birth_date']);
            $now = new DateTimeImmutable('today');
            $months = max(0, $born->diff($now)->y * 12 + $born->diff($now)->m);
        } elseif (($a['birth_estimated_months'] ?? '') !== '') {
            $months = (int)$a['birth_estimated_months'];
        }if ($months === null) {
            return t('public_site.age_unknown');
        }if ($months < 12) {
            return t('public_site.months', ['count' => $months]);
        }$years = intdiv($months, 12);
        $rest = $months % 12;
        return$rest ? t('public_site.years_months', ['years' => $years,'months' => $rest]) : t('public_site.years', ['count' => $years]);
    }
}
?>
<!doctype html>
<html lang="<?= h(I18n::locale()) ?>" data-theme="<?= h($theme) ?>">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title><?= h($title . ' — ' . $association) ?></title>
    <meta name="description"
        content="<?= h(mb_substr(strip_tags((string)($settings['public_site_home_text'] ?? '')), 0, 155)) ?>">
    <meta name="robots"
        content="<?= ($settings['public_site_enabled'] ?? '0') === '1' ? 'index,follow' : 'noindex,nofollow' ?>">
    <?php if ($hasContactMap): ?>
    <link rel="stylesheet" href="/assets/vendor/leaflet/leaflet.css"><?php endif; ?><style>
        :root {
            --accent: #d87945;
            --accent-dark: #a84f29;
            --ink: #2d2926;
            --muted: #756d67;
            --paper: #fffaf5;
            --surface: #fff;
            --line: #eadfd5;
            --radius: 20px;
            --shadow: 0 12px 34px rgba(74, 49, 34, .09)
        }

        [data-theme=nature] {
            --accent: #56856a;
            --accent-dark: #315e48;
            --ink: #24352c;
            --muted: #65756c;
            --paper: #f5f8f3;
            --surface: #fff;
            --line: #dce7dc;
            --radius: 14px;
            --shadow: 0 10px 28px rgba(38, 72, 51, .08)
        }

        [data-theme=minimal] {
            --accent: #202020;
            --accent-dark: #000;
            --ink: #171717;
            --muted: #6d6d6d;
            --paper: #f5f5f5;
            --surface: #fff;
            --line: #dedede;
            --radius: 4px;
            --shadow: none
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font: 16px/1.6 system-ui, -apple-system, Segoe UI, sans-serif
        }

        a {
            color: inherit
        }

        .wrap {
            width: min(1120px, calc(100% - 32px));
            margin: auto
        }

        .site-head {
            background: var(--surface);
            border-bottom: 1px solid var(--line);
            position: sticky;
            top: 0;
            z-index: 1000
        }

        .head-row {
            min-height: 96px;
            display: flex;
            align-items: center;
            gap: 24px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            font-weight: 800;
            font-size: 1.15rem
        }

        .brand img {
            width: auto;
            height: 72px;
            max-width: 150px;
            object-fit: contain
        }

        .nav {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap
        }

        .nav a {
            padding: 8px 11px;
            border-radius: 999px;
            text-decoration: none
        }

        .nav a:hover,
        .nav a.active {
            background: var(--paper);
            color: var(--accent-dark)
        }

        .nav a.active {
            font-weight: 800
        }

        .hero {
            padding: 72px 0 52px;
            background: linear-gradient(135deg, var(--surface), var(--paper))
        }

        .hero h1,
        .page-title {
            font-size: clamp(2rem, 6vw, 4rem);
            line-height: 1.05;
            margin: 0 0 18px
        }

        .hero p {
            max-width: 720px;
            font-size: 1.15rem;
            color: var(--muted)
        }

        .button {
            display: inline-block;
            border: 0;
            border-radius: 999px;
            padding: 11px 18px;
            background: var(--accent);
            color: #fff;
            text-decoration: none;
            font-weight: 700
        }

        .button.secondary {
            background: transparent;
            color: var(--accent-dark);
            border: 1px solid var(--accent)
        }

        main {
            min-height: 65vh
        }

        .section {
            padding: 52px 0
        }

        .section h2 {
            font-size: 2rem;
            margin: 0 0 22px
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 20px
        }

        .animal-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            text-decoration: none;
            transition: transform .18s
        }

        .animal-card:hover {
            transform: translateY(-3px)
        }

        .animal-card img,
        .photo-placeholder {
            display: block;
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            background: var(--line)
        }

        .photo-placeholder {
            display: grid;
            place-items: center;
            font-size: 3rem
        }

        .animal-card-body {
            padding: 15px
        }

        .animal-card h3 {
            margin: 0;
            font-size: 1.2rem
        }

        .meta {
            color: var(--muted);
            font-size: .92rem
        }

        .chips {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
            margin-top: 10px
        }

        .chip {
            padding: 3px 9px;
            border-radius: 999px;
            background: var(--paper);
            font-size: .8rem
        }

        .filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 25px
        }

        .content-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: clamp(22px, 5vw, 50px);
            box-shadow: var(--shadow)
        }

        .animal-detail {
            display: grid;
            grid-template-columns: minmax(280px, 1fr) 1fr;
            gap: 38px
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px
        }

        .gallery img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            border-radius: var(--radius)
        }

        .gallery img:first-child {
            grid-column: 1/-1
        }

        .facts {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 22px 0
        }

        .fact {
            padding: 12px;
            background: var(--paper);
            border-radius: 10px
        }

        .contact-list {
            display: grid;
            gap: 12px
        }

        .contact-item {
            padding: 14px 0;
            border-bottom: 1px solid var(--line)
        }

        .contact-obfuscated {
            direction: rtl;
            unicode-bidi: bidi-override;
            display: inline-block
        }

        .contact-map {
            height: 360px;
            margin-top: 28px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--paper)
        }

        footer {
            margin-top: 55px;
            border-top: 1px solid var(--line);
            padding: 32px 0;
            color: var(--muted)
        }

        .footer-row {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap
        }

        .footer-identity {
            max-width: 650px
        }

        .footer-meta {
            font-size: .9rem
        }

        .footer-powered a {
            color: var(--accent-dark);
            font-weight: 800
        }

        .empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--muted)
        }

        @media(max-width:900px) {
            .grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .animal-detail {
                grid-template-columns: 1fr
            }

            .head-row {
                align-items: flex-start;
                padding: 12px 0;
                flex-wrap: wrap
            }

            .brand img {
                height: 64px
            }

            .nav {
                width: 100%;
                margin: 0;
                overflow: auto;
                flex-wrap: nowrap
            }
        }

        @media(max-width:520px) {
            .grid {
                grid-template-columns: 1fr
            }

            .nav a {
                white-space: nowrap
            }

            .hero {
                padding: 45px 0
            }

            .facts {
                grid-template-columns: 1fr
            }

            .contact-map {
                height: 300px
            }
        }

    </style>
</head>

<body>
    <header class="site-head">
        <div class="wrap head-row"><a class="brand"
                href="<?= h($siteUrl()) ?>"><?php if (AssociationBrand::path()): ?><img src="<?= h($siteUrl('logo')) ?>"
                    alt=""><?php endif; ?><span><?= h($association) ?></span></a>
            <nav class="nav" aria-label="<?= h(t('public_site.navigation')) ?>">
                <a<?= $navClass($activePage === 'home') ?> href="<?= h($siteUrl()) ?>">
                    <?= h(t('public_site.home')) ?></a><?php foreach ($publicSpecies as $species): ?>
                    <a<?= $navClass($activePage === 'animals' && $activeSpecies === $species['code']) ?>
                        href="<?= h($siteUrl('animals', ['espece' => $species['code']])) ?>">
                        <?= h(($species['icon'] ?: '🐾') . ' ' . $species['name']) ?></a><?php endforeach; ?><?php if (($settings['public_site_about_enabled'] ?? '0') === '1'): ?>
                        <a<?= $navClass($activePage === 'about') ?> href="<?= h($siteUrl('about')) ?>">
                            <?= h($settings['public_site_about_title']) ?></a><?php endif; ?>
                            <a<?= $navClass($activePage === 'donation') ?> href="<?= h($siteUrl('donation')) ?>">
                                <?= h(t('public_site.donation')) ?></a>
                                <a<?= $navClass($activePage === 'contact') ?> href="<?= h($siteUrl('contact')) ?>">
                                    <?= h(t('public_site.contact')) ?></a>
            </nav>
        </div>
    </header>
    <main><?php require $viewFile; ?></main>
    <footer>
        <div class="wrap footer-row">
            <div class="footer-identity">
                <strong><?= h($association) ?></strong><?php if ($fullAddress !== ''): ?><br><?= h($fullAddress) ?><?php endif; ?>
                <div class="footer-meta">
                    <?php if (($settings['association_rna'] ?? '') !== ''): ?><span><?= h(t('public_site.rna')) ?> :
                        <?= h($settings['association_rna']) ?></span><?php endif; ?><?php if (($settings['association_rna'] ?? '') !== '' && ($settings['association_siret'] ?? '') !== ''): ?>
                    · <?php endif; ?><?php if (($settings['association_siret'] ?? '') !== ''): ?><span><?= h(t('public_site.siret')) ?>
                        : <?= h($settings['association_siret']) ?></span><?php endif; ?></div>
            </div>
            <div class="footer-powered"><?= h(t('public_site.powered_by')) ?> <a
                    href="https://nnsprod.com/git/oversu/Globinours" target="_blank"
                    rel="noopener noreferrer">Globinours</a></div>
        </div>
    </footer>
</body>

</html>
