<?php
/**
 * ITSWEBER CMS – Default Theme: Before/After Comparison Section Template
 * Page Builder section template (3.2.0)
 *
 * Variables: $data (array), $section (DB row), $sectionId (string)
 *
 * @author  Benny Weber
 * @copyright ITSWEBER, www.itsweber.de
 */

$title            = $data['title'] ?? '';
$subtitle         = $data['subtitle'] ?? '';
$description      = $data['description'] ?? '';
$colorScheme      = $data['color_scheme'] ?? '';
$sectionTextColor = $data['section_text_color'] ?? '';
$columns          = $data['columns'] ?? '2';
$items            = (isset($data['items']) && is_array($data['items'])) ? $data['items'] : [];

if (empty($items)) return;

// Build CSS classes
$cls = 'before-after-section';
if ($colorScheme !== '')      $cls .= ' section--scheme-' . e($colorScheme);
$surface = $data['section_surface'] ?? '';
if ($surface !== '')          $cls .= ' section--surface-' . e($surface);
if ($sectionTextColor !== '') $cls .= ' section--text-' . e($sectionTextColor);
$cls .= ' bas--cols-' . e($columns);
?>
<section class="<?= $cls ?>" id="<?= e($sectionId) ?>">
    <div class="container">
        <?php if ($title !== '' || $subtitle !== '' || $description !== ''): ?>
        <div class="bas-header reveal">
            <?php if ($subtitle !== ''): ?>
            <div class="bas-label"><?= e($subtitle) ?></div>
            <?php endif; ?>
            <?php if ($title !== ''): ?>
            <h2 class="bas-title"><?= e($title) ?></h2>
            <?php endif; ?>
            <?php if ($description !== ''): ?>
            <p class="bas-description"><?= e($description) ?></p>
            <?php endif; ?>
        </div>
        <?php endif; ?>

        <div class="bas-grid">
            <?php foreach ($items as $item): ?>
            <div class="bas-item reveal">
                <div class="ba-slider-container" data-before="<?= e($item['before_image']) ?>" data-after="<?= e($item['after_image']) ?>">
                    <img src="<?= e($item['after_image']) ?>" alt="After" class="ba-after" loading="lazy">
                    <img src="<?= e($item['before_image']) ?>" alt="Before" class="ba-before" loading="lazy">
                    <div class="ba-handle">
                        <span class="ba-handle-line"></span>
                    </div>
                    <div class="ba-labels">
                        <span class="ba-label ba-label-before"><?= e($item['before_label'] ?? '') ?></span>
                        <span class="ba-label ba-label-after"><?= e($item['after_label'] ?? '') ?></span>
                    </div>
                </div>
                <?php if (!empty($item['title']) || !empty($item['description'])): ?>
                <div class="bas-item-content">
                    <?php if (!empty($item['title'])): ?>
                    <h3 class="bas-item-title"><?= e($item['title']) ?></h3>
                    <?php endif; ?>
                    <?php if (!empty($item['description'])): ?>
                    <p class="bas-item-description"><?= e($item['description']) ?></p>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
