<?php ob_start(); ?>

<?php if (!empty($sections)): ?>
<?php foreach ($sections as $section): ?>
<?php if (!$section['is_active']) continue; ?>
<?php $data = json_decode($section['content'], true) ?: []; ?>

<?php if ($section['section_key'] === 'hero'): ?>
<?php
// ── Hero v2: Build presentation modifier classes from validated tokens ──
$_hero_classes = ['hero-section'];
if (!empty($data['text_color']) && $data['text_color'] !== 'auto') $_hero_classes[] = 'hero--text-' . $data['text_color'];
if (!empty($data['heading_size']))    $_hero_classes[] = 'hero--hsize-' . $data['heading_size'];
if (!empty($data['heading_weight']))  $_hero_classes[] = 'hero--hweight-' . $data['heading_weight'];
if (!empty($data['body_size']))       $_hero_classes[] = 'hero--body-' . $data['body_size'];
if (!empty($data['layout_mode']))     $_hero_classes[] = 'hero--layout-' . $data['layout_mode'];
if (!empty($data['text_align']))      $_hero_classes[] = 'hero--align-' . $data['text_align'];
if (!empty($data['overlay_strength']))$_hero_classes[] = 'hero--overlay-' . $data['overlay_strength'];
if (!empty($data['hero_height']) && $data['hero_height'] === 'tall') $_hero_classes[] = 'hero--tall';
if (!empty($data['portrait_style'])) $_hero_classes[] = 'hero--portrait-' . $data['portrait_style'];
if (!empty($data['portrait_shape'])) $_hero_classes[] = 'hero--portrait-' . $data['portrait_shape'];
if (!empty($data['cta_layout']) && $data['cta_layout'] === 'stacked') $_hero_classes[] = 'hero--cta-stacked';
// Hero v2: has-portrait flag for non-split portrait rendering
$_has_portrait = !empty($data['portrait_image']);
if ($_has_portrait) $_hero_classes[] = 'hero--has-portrait';
// Hero v2: has-bg flag for background-aware styling
if (!empty($data['image'])) $_hero_classes[] = 'hero--has-bg';
$_hero_class_str = implode(' ', $_hero_classes);
$_is_split = (!empty($data['layout_mode']) && $data['layout_mode'] === 'split' && $_has_portrait);
$_is_boxed = (!empty($data['layout_mode']) && $data['layout_mode'] === 'boxed');
// Hero v2: Background scope – boxed = on container, others = on section
$_bg_style = !empty($data['image']) ? "background-image: url('/uploads/" . e($data['image']) . "')" : '';
?>
<section class="<?= e($_hero_class_str) ?>"<?php if ($_bg_style && !$_is_boxed): ?> style="<?= $_bg_style ?>"<?php endif; ?>>
    <div class="container"<?php if ($_bg_style && $_is_boxed): ?> style="<?= $_bg_style ?>"<?php endif; ?>>
        <?php if ($_is_split): ?>
        <div class="hero-split-inner">
        <div class="hero-text">
        <?php endif; ?>
        <?php if ($_has_portrait && !$_is_split): ?>
        <div class="hero-portrait-wrap hero-portrait-inline">
            <img src="/uploads/<?= e($data['portrait_image']) ?>" alt="<?= e($data['portrait_alt'] ?? '') ?>" class="hero-portrait">
        </div>
        <?php endif; ?>
        <?php if (!empty($data['eyebrow'])): ?>
        <span class="hero-eyebrow"><?= e($data['eyebrow']) ?></span>
        <?php endif; ?>
        <h1 class="hero-title"><?= e($data['title'] ?? '') ?></h1>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="hero-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <?php if (!empty($data['cta_text']) || !empty($data['cta2_text'])): ?>
        <div class="hero-ctas">
            <?php if (!empty($data['cta_text'])): ?>
            <a href="<?= e($data['cta_url'] ?? '#') ?>" class="btn btn-hero"><?= e($data['cta_text']) ?></a>
            <?php endif; ?>
            <?php if (!empty($data['cta2_text'])): ?>
            <a href="<?= e($data['cta2_url'] ?? '#') ?>" class="btn btn-secondary"><?= e($data['cta2_text']) ?></a>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        <?php if ($_is_split): ?>
        </div><!-- /.hero-text -->
        <div class="hero-portrait-wrap">
            <img src="/uploads/<?= e($data['portrait_image']) ?>" alt="<?= e($data['portrait_alt'] ?? '') ?>" class="hero-portrait">
        </div>
        </div><!-- /.hero-split-inner -->
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php if ($section['section_key'] === 'intro'): ?>
<?php
$_s_classes = ['intro-section'];
if (!empty($data['color_scheme'])) $_s_classes[] = 'section--scheme-' . $data['color_scheme'];
if (!empty($data['text_align']))   $_s_classes[] = 'section--align-' . $data['text_align'];
if (!empty($data['max_width']))    $_s_classes[] = 'section--maxw-' . $data['max_width'];
?>
<section class="<?= e(implode(' ', $_s_classes)) ?>">
    <div class="container">
        <h2><?= e($data['title'] ?? '') ?></h2>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="section-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <?php if (!empty($data['text'])): ?>
        <div class="intro-text"><?= nl2br(e($data['text'])) ?></div>
        <?php endif; ?>
        <?php if (!empty($data['cta_text'])): ?>
        <div class="intro-cta">
            <a href="<?= e($data['cta_url'] ?? '#') ?>" class="btn btn-secondary"><?= e($data['cta_text']) ?></a>
        </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php if ($section['section_key'] === 'features'): ?>
<?php
$_s_classes = ['features-section'];
if (!empty($data['color_scheme'])) $_s_classes[] = 'section--scheme-' . $data['color_scheme'];
if (!empty($data['text_align']))   $_s_classes[] = 'section--align-' . $data['text_align'];
if (!empty($data['card_style']))   $_s_classes[] = 'section--card-' . $data['card_style'];
if (!empty($data['columns']))      $_s_classes[] = 'section--cols-' . $data['columns'];
?>
<section class="<?= e(implode(' ', $_s_classes)) ?>">
    <div class="container">
        <h2><?= e($data['title'] ?? '') ?></h2>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="section-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <?php if (!empty($data['items']) && is_array($data['items'])): ?>
        <div class="features-grid">
            <?php foreach ($data['items'] as $item): ?>
            <?php $fUrl = trim($item['url'] ?? ''); ?>
            <div class="feature-card">
                <?php if (!empty($item['icon'])): ?>
                <div class="feature-card-icon"><?= e($item['icon']) ?></div>
                <?php endif; ?>
                <h3><?= e($item['title'] ?? '') ?></h3>
                <p><?= e($item['text'] ?? '') ?></p>
                <?php if ($fUrl): ?>
                <a href="<?= e($fUrl) ?>" class="feature-card-link">Learn more →</a>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php if ($section['section_key'] === 'blog_preview' && !empty($latest_posts)): ?>
<?php
$_s_classes = ['blog-preview-section'];
if (!empty($data['color_scheme'])) $_s_classes[] = 'section--scheme-' . $data['color_scheme'];
if (!empty($data['text_align']))   $_s_classes[] = 'section--align-' . $data['text_align'];
$_show_date     = !empty($data['show_date']);
$_show_category = !empty($data['show_category']);
?>
<section class="<?= e(implode(' ', $_s_classes)) ?>">
    <div class="container">
        <h2><?= e($data['title'] ?? 'Latest News') ?></h2>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="section-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <div class="blog-grid">
            <?php foreach ($latest_posts as $post): ?>
            <article class="blog-card">
                <?php if (!empty($post['featured_image'])): ?>
                <?= picture_tag($post['featured_image'], $post['title'], 'blog-card-image', true) ?>
                <?php else: ?>
                <div class="blog-card-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg></div>
                <?php endif; ?>
                <div class="blog-card-body">
                    <?php if ($_show_category && !empty($post['category_name'])): ?>
                    <span class="blog-category"><?= e($post['category_name']) ?></span>
                    <?php endif; ?>
                    <h3><a href="/blog/<?= e($post['slug']) ?>"><?= e($post['title']) ?></a></h3>
                    <p><?= e(str_truncate($post['excerpt'] ?? '', 120)) ?></p>
                    <?php if ($_show_date && !empty($post['published_at'])): ?>
                    <div class="blog-meta">
                        <time datetime="<?= e(date('Y-m-d', strtotime($post['published_at']))) ?>"><?= e(date('d.m.Y', strtotime($post['published_at']))) ?></time>
                    </div>
                    <?php endif; ?>
                </div>
            </article>
            <?php endforeach; ?>
        </div>
        <?php if (!empty($data['cta_text'])): ?>
        <p class="blog-preview-cta">
            <a href="<?= e($data['cta_url'] ?? '/blog') ?>" class="btn btn-secondary">
                <?= e($data['cta_text']) ?>
            </a>
        </p>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php if ($section['section_key'] === 'gallery_preview' && !empty($gallery_preview_albums)): ?>
<?php
$_s_classes = ['gallery-preview-section'];
if (!empty($data['color_scheme'])) $_s_classes[] = 'section--scheme-' . $data['color_scheme'];
if (!empty($data['text_align']))   $_s_classes[] = 'section--align-' . $data['text_align'];
$_show_img_count = !empty($data['show_image_count']);
?>
<section class="<?= e(implode(' ', $_s_classes)) ?>">
    <div class="container">
        <h2><?= e($data['title'] ?? 'Our Work') ?></h2>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="section-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <div class="gallery-preview-grid">
            <?php foreach ($gallery_preview_albums as $album): ?>
            <a href="/gallery/<?= e($album['slug']) ?>" class="gallery-preview-card">
                <?php if (!empty($album['cover_image'])): ?>
                <?= picture_tag($album['cover_image'], $album['title'], '', true) ?>
                <?php else: ?>
                <div class="gallery-preview-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg></div>
                <?php endif; ?>
                <span><?= e($album['title']) ?><?php if ($_show_img_count && isset($album['image_count'])): ?> <small>(<?= (int)$album['image_count'] ?>)</small><?php endif; ?></span>
            </a>
            <?php endforeach; ?>
        </div>
        <?php if (!empty($data['cta_text'])): ?>
        <p class="gallery-preview-cta">
            <a href="<?= e($data['cta_url'] ?? '/gallery') ?>" class="btn btn-secondary">
                <?= e($data['cta_text']) ?>
            </a>
        </p>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php if ($section['section_key'] === 'events_preview' && !empty($upcoming_events)): ?>
<?php
$_s_classes = ['events-preview-section'];
if (!empty($data['color_scheme'])) $_s_classes[] = 'section--scheme-' . $data['color_scheme'];
if (!empty($data['text_align']))   $_s_classes[] = 'section--align-' . $data['text_align'];
$_show_image = !isset($data['show_image']) || !empty($data['show_image']);
?>
<section class="<?= e(implode(' ', $_s_classes)) ?>">
    <div class="container">
        <h2><?= e($data['title'] ?? 'Upcoming Events') ?></h2>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="section-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <div class="events-preview-grid">
            <?php foreach ($upcoming_events as $event): ?>
            <article class="event-card <?= $event['event_status'] !== 'scheduled' ? 'event-card--' . e($event['event_status']) : '' ?>">
                <?php if ($_show_image): ?>
                    <?php if (!empty($event['media_path'])): ?>
                    <?= picture_tag($event['media_path'], $event['media_alt'] ?? $event['title'], 'event-card-image', true) ?>
                    <?php else: ?>
                    <div class="event-card-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 9h18"/><path d="M10 14l2 2 4-4"/></svg></div>
                    <?php endif; ?>
                <?php endif; ?>
                <div class="event-card-body">
                    <?php if ($event['event_status'] !== 'scheduled'): ?>
                    <span class="event-status-badge event-status-badge--<?= e($event['event_status']) ?>">
                        <?= $event['event_status'] === 'postponed' ? 'Postponed' : 'Cancelled' ?>
                    </span>
                    <?php endif; ?>
                    <h3><a href="/events/<?= e($event['slug']) ?>"><?= e($event['title']) ?></a></h3>
                    <div class="event-card-meta">
                        <span class="event-date"><?= e(date('d.m.Y', strtotime($event['start_date']))) ?></span>
                        <?php if (!empty($event['start_time'])): ?>
                        <span class="event-time"><?= e(substr($event['start_time'], 0, 5)) ?></span>
                        <?php endif; ?>
                        <?php if (!empty($event['location'])): ?>
                        <span class="event-location"><?= e($event['location']) ?></span>
                        <?php endif; ?>
                    </div>
                    <a href="/events/<?= e($event['slug']) ?>" class="event-card-link">View details &rarr;</a>
                </div>
            </article>
            <?php endforeach; ?>
        </div>
        <?php if (!empty($data['cta_text'])): ?>
        <p class="events-preview-cta">
            <a href="<?= e($data['cta_url'] ?? '/events') ?>" class="btn btn-secondary">
                <?= e($data['cta_text']) ?>
            </a>
        </p>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php if ($section['section_key'] === 'topic_cards' && !empty($data['items'])): ?>
<?php
$_s_classes = ['topic-cards-section'];
if (!empty($data['color_scheme'])) $_s_classes[] = 'section--scheme-' . $data['color_scheme'];
if (!empty($data['text_align']))   $_s_classes[] = 'section--align-' . $data['text_align'];
if (!empty($data['card_style']))   $_s_classes[] = 'section--card-' . $data['card_style'];
if (!empty($data['columns']))      $_s_classes[] = 'section--cols-' . $data['columns'];
?>
<section class="<?= e(implode(' ', $_s_classes)) ?>">
    <div class="container">
        <?php if (!empty($data['title'])): ?>
        <h2><?= e($data['title']) ?></h2>
        <?php endif; ?>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="section-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <div class="topic-cards-grid">
            <?php foreach ($data['items'] as $card): ?>
            <?php $cardUrl = trim($card['url'] ?? ''); ?>
            <?php if ($cardUrl): ?>
            <a href="<?= e($cardUrl) ?>" class="topic-card">
            <?php else: ?>
            <div class="topic-card topic-card--plain">
            <?php endif; ?>
                <?php if (!empty($card['icon'])): ?>
                <div class="topic-card-icon"><?= e($card['icon']) ?></div>
                <?php endif; ?>
                <h3 class="topic-card-title"><?= e($card['title'] ?? '') ?></h3>
                <?php if (!empty($card['text'])): ?>
                <p class="topic-card-text"><?= e($card['text']) ?></p>
                <?php endif; ?>
                <?php if ($cardUrl): ?>
                <span class="topic-card-link">Learn more →</span>
                <?php endif; ?>
            <?php if ($cardUrl): ?>
            </a>
            <?php else: ?>
            </div>
            <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if ($section['section_key'] === 'highlight_grid' && !empty($data['items'])): ?>
<?php
$_s_classes = ['highlight-grid-section'];
if (!empty($data['color_scheme'])) $_s_classes[] = 'section--scheme-' . $data['color_scheme'];
if (!empty($data['text_align']))   $_s_classes[] = 'section--align-' . $data['text_align'];
if (!empty($data['card_style']))   $_s_classes[] = 'section--card-' . $data['card_style'];
if (!empty($data['columns']))      $_s_classes[] = 'section--cols-' . $data['columns'];
?>
<section class="<?= e(implode(' ', $_s_classes)) ?>">
    <div class="container">
        <?php if (!empty($data['title'])): ?>
        <h2><?= e($data['title']) ?></h2>
        <?php endif; ?>
        <?php if (!empty($data['subtitle'])): ?>
        <p class="section-subtitle"><?= e($data['subtitle']) ?></p>
        <?php endif; ?>
        <div class="highlight-grid">
            <?php foreach ($data['items'] as $item): ?>
            <?php $itemUrl = trim($item['url'] ?? ''); ?>
            <?php if ($itemUrl): ?>
            <a href="<?= e($itemUrl) ?>" class="highlight-card">
            <?php else: ?>
            <div class="highlight-card">
            <?php endif; ?>
                <?php if (!empty($item['icon'])): ?>
                <div class="highlight-card-icon"><?= e($item['icon']) ?></div>
                <?php endif; ?>
                <h3 class="highlight-card-title"><?= e($item['title'] ?? '') ?></h3>
                <?php if (!empty($item['text'])): ?>
                <p class="highlight-card-text"><?= e($item['text']) ?></p>
                <?php endif; ?>
                <?php if (!empty($item['source'])): ?>
                <p class="highlight-card-source"><?= e($item['source']) ?></p>
                <?php endif; ?>
                <?php if ($itemUrl): ?>
                <span class="highlight-card-link">Details →</span>
                <?php endif; ?>
            <?php if ($itemUrl): ?>
            </a>
            <?php else: ?>
            </div>
            <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if ($section['section_key'] === 'cta'): ?>
<?php
$_s_classes = ['cta-section'];
if (!empty($data['color_scheme']))    $_s_classes[] = 'section--scheme-' . $data['color_scheme'];
if (!empty($data['text_align']))      $_s_classes[] = 'section--align-' . $data['text_align'];
if (!empty($data['overlay_strength']))$_s_classes[] = 'cta--overlay-' . $data['overlay_strength'];
if (!empty($data['image']))           $_s_classes[] = 'cta--has-bg';
$_cta_bg = !empty($data['image']) ? "background-image: url('/uploads/" . e($data['image']) . "')" : '';
?>
<section class="<?= e(implode(' ', $_s_classes)) ?>"<?php if ($_cta_bg): ?> style="<?= $_cta_bg ?>"<?php endif; ?>>
    <div class="container">
        <?php if (!empty($data['eyebrow'])): ?>
        <span class="cta-eyebrow"><?= e($data['eyebrow']) ?></span>
        <?php endif; ?>
        <h2><?= e($data['title'] ?? '') ?></h2>
        <?php if (!empty($data['text'])): ?>
        <div class="cta-text"><?= nl2br(e($data['text'])) ?></div>
        <?php endif; ?>
        <?php if (!empty($data['cta_text']) || !empty($data['cta2_text'])): ?>
        <div class="cta-buttons">
            <?php if (!empty($data['cta_text'])): ?>
            <a href="<?= e($data['cta_url'] ?? '#') ?>" class="btn btn-cta"><?= e($data['cta_text']) ?></a>
            <?php endif; ?>
            <?php if (!empty($data['cta2_text'])): ?>
            <a href="<?= e($data['cta2_url'] ?? '#') ?>" class="btn btn-secondary"><?= e($data['cta2_text']) ?></a>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php endforeach; ?>
<?php endif; ?>

<?php $content = ob_get_clean(); include __DIR__ . '/layout.php'; ?>
