<?php
/**
 * About Us Page — Gmind Institute
 *
 * Hero banner, mission & vision, history timeline, director's message,
 * key statistics, team/faculty section, and affiliations.
 *
 * Expected PHP variables:
 *   $settings     — key-value pairs from settings table (optional)
 *   $affiliations — array of affiliation records (optional)
 *   $stats        — array with stat keys (optional)
 *   $csrfToken    — CSRF token string
 *   $currentPage  — string 'about'
 *   $title        — page title
 */

$settings     = $settings     ?? [];
$affiliations = $affiliations ?? [];
$stats        = $stats        ?? [];

$statStudents = (int) ($stats['total_students']   ?? 10000);
$statCourses  = (int) ($stats['total_courses']     ?? 25);
$statBranches = (int) ($stats['total_branches']     ?? 50);
$statYears    = (int) ($stats['years_experience']   ?? 15);
$basePath = defined('BASE_PATH') ? BASE_PATH : '/gmind';
include __DIR__ . '/../layouts/header.php';

?>
<!-- ============================================================
     About Hero Banner
     ============================================================ -->
<section class="about-hero" aria-label="About Gmind Institute">
    <div class="about-hero-overlay"></div>
    <div class="container">
        <div class="about-hero-content">
            <h1><?= __('about.title') ?></h1>
            <p><?= __('about.hero_subtitle') ?></p>
        </div>
    </div>
</section>

<!-- ============================================================
     Mission & Vision
     ============================================================ -->
<section class="mission-vision-section section-white" aria-label="Mission and Vision">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('about.mission_vision') ?></h2>
        </div>

        <div class="mission-vision-grid">
            <div class="mv-card animate-on-scroll">
                <div class="mv-icon icon-navy" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                </div>
                <h3><?= __('about.our_mission') ?></h3>
                <p><?= __('about.mission_desc') ?></p>
            </div>
            <div class="mv-card animate-on-scroll" data-delay="100">
                <div class="mv-icon icon-scarlet" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </div>
                <h3><?= __('about.our_vision') ?></h3>
                <p><?= __('about.vision_desc') ?></p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     History Timeline
     ============================================================ -->
<section class="history-section section-offwhite" aria-label="Our journey">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('about.our_journey') ?></h2>
            <p><?= __('about.journey_subtitle') ?></p>
        </div>

        <div class="timeline">
            <div class="timeline-item animate-on-scroll">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>2011</h3>
                    <p><?= __('about.timeline_2011') ?></p>
                </div>
            </div>
            <div class="timeline-item animate-on-scroll" data-delay="100">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>2014</h3>
                    <p><?= __('about.timeline_2014') ?></p>
                </div>
            </div>
            <div class="timeline-item animate-on-scroll" data-delay="200">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>2017</h3>
                    <p><?= __('about.timeline_2017') ?></p>
                </div>
            </div>
            <div class="timeline-item animate-on-scroll" data-delay="300">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>2020</h3>
                    <p><?= __('about.timeline_2020') ?></p>
                </div>
            </div>
            <div class="timeline-item animate-on-scroll" data-delay="400">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>2023</h3>
                    <p><?= __('about.timeline_2023') ?></p>
                </div>
            </div>
            <div class="timeline-item animate-on-scroll" data-delay="500">
                <div class="timeline-marker"></div>
                <div class="timeline-content">
                    <h3>2026</h3>
                    <p><?= __('about.timeline_2026') ?></p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Director's Message
     ============================================================ -->
<section class="director-section section-white" aria-label="Director's message">
    <div class="container">
        <div class="director-layout">
            <div class="director-image">
                <img src="<?= $basePath ?>/images/director.jpg" alt="Director, Gmind Institute" loading="lazy">
            </div>
            <div class="director-content">
                <h2><?= __('about.director_message') ?></h2>
                <blockquote>
                    "<?= __('about.director_quote') ?>"
                </blockquote>
                <p class="director-name">— <?= __('about.director_name') ?></p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Key Statistics
     ============================================================ -->
<section class="stats-section" aria-label="Key statistics">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-item animate-on-scroll">
                <span class="stat-number" data-target="<?= $statStudents ?>">0</span>
                <span class="stat-label"><?= __('about.stat_students') ?></span>
            </div>
            <div class="stat-item animate-on-scroll" data-delay="100">
                <span class="stat-number" data-target="<?= $statCourses ?>">0</span>
                <span class="stat-label"><?= __('about.stat_courses') ?></span>
            </div>
            <div class="stat-item animate-on-scroll" data-delay="200">
                <span class="stat-number" data-target="<?= $statBranches ?>">0</span>
                <span class="stat-label"><?= __('about.stat_branches') ?></span>
            </div>
            <div class="stat-item animate-on-scroll" data-delay="300">
                <span class="stat-number" data-target="<?= $statYears ?>">0</span>
                <span class="stat-label"><?= __('about.stat_years') ?></span>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Team / Faculty Section
     ============================================================ -->
<section class="team-section section-white" aria-label="Our faculty">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('about.faculty_title') ?></h2>
            <p><?= __('about.faculty_subtitle') ?></p>
        </div>

        <div class="team-grid">
            <div class="team-card animate-on-scroll">
                <div class="team-photo">
                    <img src="<?= $basePath ?>/images/faculty-1.jpg" alt="Faculty Member" loading="lazy">
                </div>
                <h3><?= __('about.faculty1_name') ?></h3>
                <p class="team-role"><?= __('about.faculty1_role') ?></p>
                <p class="team-desc"><?= __('about.faculty1_desc') ?></p>
            </div>
            <div class="team-card animate-on-scroll" data-delay="100">
                <div class="team-photo">
                    <img src="<?= $basePath ?>/images/faculty-2.jpg" alt="Faculty Member" loading="lazy">
                </div>
                <h3><?= __('about.faculty2_name') ?></h3>
                <p class="team-role"><?= __('about.faculty2_role') ?></p>
                <p class="team-desc"><?= __('about.faculty2_desc') ?></p>
            </div>
            <div class="team-card animate-on-scroll" data-delay="200">
                <div class="team-photo">
                    <img src="<?= $basePath ?>/images/faculty-3.jpg" alt="Faculty Member" loading="lazy">
                </div>
                <h3><?= __('about.faculty3_name') ?></h3>
                <p class="team-role"><?= __('about.faculty3_role') ?></p>
                <p class="team-desc"><?= __('about.faculty3_desc') ?></p>
            </div>
            <div class="team-card animate-on-scroll" data-delay="300">
                <div class="team-photo">
                    <img src="<?= $basePath ?>/images/faculty-4.jpg" alt="Faculty Member" loading="lazy">
                </div>
                <h3><?= __('about.faculty4_name') ?></h3>
                <p class="team-role"><?= __('about.faculty4_role') ?></p>
                <p class="team-desc"><?= __('about.faculty4_desc') ?></p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Affiliations
     ============================================================ -->
<?php if (!empty($affiliations)): ?>
<section class="affiliations-section" aria-label="Our affiliations">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('about.affiliations') ?></h2>
        </div>
        <div class="affiliations-logo-grid">
            <?php foreach ($affiliations as $aff): ?>
            <div class="affiliation-logo-item">
                <?php if (!empty($aff['website'])): ?>
                <a href="<?= htmlspecialchars($aff['website'], ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener noreferrer" aria-label="<?= htmlspecialchars($aff['name'] ?? 'Affiliate', ENT_QUOTES, 'UTF-8') ?>">
                <?php endif; ?>
                    <img
                        src="<?= htmlspecialchars(!empty($aff['logo']) ? upload_url($aff['logo']) : $basePath . '/images/logo-placeholder.png', ENT_QUOTES, 'UTF-8') ?>"
                        alt="<?= htmlspecialchars($aff['name'] ?? 'Affiliate', ENT_QUOTES, 'UTF-8') ?>"
                        loading="lazy"
                    >
                    <span><?= htmlspecialchars($aff['name'] ?? '', ENT_QUOTES, 'UTF-8') ?></span>
                <?php if (!empty($aff['website'])): ?>
                </a>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; include __DIR__ . '/../layouts/footer.php';
?>
