<?php
/**
 * ITSWEBER CMS – Default Theme: Team 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
 */

// Helper: Extract initials from a name
if (!function_exists('_ts_get_initials')) {
    function _ts_get_initials(string $name): string
    {
        $parts = explode(' ', trim($name));
        $initials = '';
        foreach ($parts as $part) {
            if ($part !== '') {
                $initials .= mb_strtoupper(mb_substr($part, 0, 1, 'UTF-8'), 'UTF-8');
            }
        }
        return mb_substr($initials, 0, 2, 'UTF-8');
    }
}

$title       = $data['title'] ?? '';
$subtitle    = $data['subtitle'] ?? '';
$columns     = $data['columns'] ?? '3';
$colorScheme = $data['color_scheme'] ?? '';
$cardStyle   = $data['card_style'] ?? '';
$imageStyle  = $data['image_style'] ?? '';
$members     = (isset($data['members']) && is_array($data['members'])) ? $data['members'] : [];

// Build CSS classes
$cls = 'team-section';
if ($colorScheme !== '') {
    $cls .= ' section--scheme-' . e($colorScheme);
}
$sectionSurface = $data['section_surface'] ?? '';
if ($sectionSurface !== '') {
    $cls .= ' section--surface-' . e($sectionSurface);
}
if ($cardStyle !== '') {
    $cls .= ' section--card-' . e($cardStyle);
}
$sectionTextColor = $data['section_text_color'] ?? '';
if ($sectionTextColor !== '') {
    $cls .= ' section--text-' . e($sectionTextColor);
}
if ($imageStyle !== '' && $imageStyle !== 'circle') {
    $cls .= ' team--img-' . e($imageStyle);
}

$gridCls = 'team-grid cols-' . e($columns);
?>
<section class="<?= $cls ?>" id="<?= e($sectionId) ?>">
    <div class="container">
        <?php if ($title !== '' || $subtitle !== ''): ?>
        <div class="team-section-header reveal">
            <?php if ($title !== ''): ?>
            <h2 class="team-section-title"><?= e($title) ?></h2>
            <?php endif; ?>
            <?php if ($subtitle !== ''): ?>
            <p class="team-section-subtitle"><?= e($subtitle) ?></p>
            <?php endif; ?>
        </div>
        <?php endif; ?>

        <?php if (!empty($members)): ?>
        <div class="<?= $gridCls ?>">
            <?php foreach ($members as $m): ?>
            <div class="team-card reveal">
                <div class="team-card-image">
                    <?php if (!empty($m['image'])): ?>
                    <img src="/uploads/<?= e($m['image']) ?>" alt="<?= e($m['name'] ?? '') ?>" loading="lazy">
                    <?php else: ?>
                    <div class="team-card-initials"><?= _ts_get_initials($m['name'] ?? '') ?></div>
                    <?php endif; ?>
                </div>
                <h3 class="team-card-name"><?= e($m['name'] ?? '') ?></h3>
                <?php if (!empty($m['role'])): ?>
                <p class="team-card-role"><?= e($m['role']) ?></p>
                <?php endif; ?>
                <?php if (!empty($m['bio'])): ?>
                <p class="team-card-bio"><?= e($m['bio']) ?></p>
                <?php endif; ?>
                <?php
                $hasSocial = !empty($m['email']) || !empty($m['linkedin']) || !empty($m['twitter'])
                          || !empty($m['facebook']) || !empty($m['website']);
                ?>
                <?php if ($hasSocial): ?>
                <div class="team-card-social">
                    <?php if (!empty($m['email'])): ?>
                    <a href="mailto:<?= e($m['email']) ?>" title="Email" aria-label="Email">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                    </a>
                    <?php endif; ?>
                    <?php if (!empty($m['facebook'])): ?>
                    <a href="<?= e($m['facebook']) ?>" target="_blank" rel="noopener noreferrer" title="Facebook" aria-label="Facebook">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </a>
                    <?php endif; ?>
                    <?php if (!empty($m['linkedin'])): ?>
                    <a href="<?= e($m['linkedin']) ?>" target="_blank" rel="noopener noreferrer" title="LinkedIn" aria-label="LinkedIn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                    </a>
                    <?php endif; ?>
                    <?php if (!empty($m['twitter'])): ?>
                    <a href="<?= e($m['twitter']) ?>" target="_blank" rel="noopener noreferrer" title="X" aria-label="X">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
                    </a>
                    <?php endif; ?>
                    <?php if (!empty($m['website'])): ?>
                    <a href="<?= e($m['website']) ?>" target="_blank" rel="noopener noreferrer" title="Website" aria-label="Website">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                    </a>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</section>
