<?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);
?>

<?php 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 Gmind Institute</h1>
            <p>Empowering India through quality computer education since 2011</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>Our Mission &amp; 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>Our Mission</h3>
                <p>To provide accessible, affordable, and industry-relevant computer education to every corner of India, empowering students with the skills they need to build successful careers in the digital economy.</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>Our Vision</h3>
                <p>To become India's most trusted computer education network, recognised for excellence in training, innovation in pedagogy, and transformative impact on students' lives and careers across the nation.</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>Our Journey</h2>
            <p>From a single centre to a nationwide network</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>Gmind Institute founded in New Delhi with a vision to provide quality computer education to all.</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>Expanded to 5 branches across North India. Introduced government-recognised certification programmes.</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>Crossed 25 branches nationwide. Launched the Online Exam Portal for digital assessments.</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>Pivoted to hybrid learning. Introduced online classes and digital certificate verification system.</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>Reached 50+ branches across India. Partnered with leading IT companies for placement drives.</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>Over 10,000 students trained. Continuing to expand with new courses in AI, Data Science, and Cloud Computing.</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="<?= asset('/images/director.jpg') ?>" alt="Director, Gmind Institute" loading="lazy">
            </div>
            <div class="director-content">
                <h2>Director's Message</h2>
                <blockquote>
                    "At Gmind Institute, we believe that computer literacy is not a luxury but a necessity in today's world. Our mission has always been to make quality IT education accessible to every student, regardless of their background or location. We are committed to nurturing talent, building skills, and creating career opportunities that transform lives. Together, we are building a digitally empowered India."
                </blockquote>
                <p class="director-name">— Director, Gmind Institute</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">Students Trained</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">Courses Offered</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">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">Years of Excellence</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>Our Expert Faculty</h2>
            <p>Learn from experienced professionals who are passionate about teaching</p>
        </div>

        <div class="team-grid">
            <div class="team-card animate-on-scroll">
                <div class="team-photo">
                    <img src="<?= asset('/images/faculty-1.jpg') ?>" alt="Faculty Member" loading="lazy">
                </div>
                <h3>Dr. Rajesh Kumar</h3>
                <p class="team-role">Head of Computer Science</p>
                <p class="team-desc">15+ years of experience in IT education and software development.</p>
            </div>
            <div class="team-card animate-on-scroll" data-delay="100">
                <div class="team-photo">
                    <img src="<?= asset('/images/faculty-2.jpg') ?>" alt="Faculty Member" loading="lazy">
                </div>
                <h3>Priya Sharma</h3>
                <p class="team-role">Accounting &amp; Tally Expert</p>
                <p class="team-desc">Certified Tally professional with 10+ years of industry experience.</p>
            </div>
            <div class="team-card animate-on-scroll" data-delay="200">
                <div class="team-photo">
                    <img src="<?= asset('/images/faculty-3.jpg') ?>" alt="Faculty Member" loading="lazy">
                </div>
                <h3>Amit Verma</h3>
                <p class="team-role">Programming &amp; Web Development</p>
                <p class="team-desc">Full-stack developer and trainer with expertise in Python, Java, and web technologies.</p>
            </div>
            <div class="team-card animate-on-scroll" data-delay="300">
                <div class="team-photo">
                    <img src="<?= asset('/images/faculty-4.jpg') ?>" alt="Faculty Member" loading="lazy">
                </div>
                <h3>Sneha Patel</h3>
                <p class="team-role">Graphic Design &amp; Multimedia</p>
                <p class="team-desc">Creative designer with 8+ years of experience in graphic design and visual communication.</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>Our Affiliations &amp; Recognitions</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($aff['logo'] ?? '/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; ?>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
