<?php
// about.php - Dynamic About Page
require_once 'includes/config.php';
require_once 'includes/site-data.php';

// Get team members (instructors)
$team = $pdo->query("SELECT * FROM users WHERE role = 'instructor' AND show_on_website = 1 LIMIT 4")->fetchAll();

// Stats from settings or database
$stats_students = $S['stats_students'] ?? $pdo->query("SELECT COUNT(*) FROM users WHERE role='student'")->fetchColumn();
$stats_courses = $S['stats_courses'] ?? $pdo->query("SELECT COUNT(*) FROM courses WHERE status='published'")->fetchColumn();
$stats_instructors = $S['stats_instructors'] ?? $pdo->query("SELECT COUNT(*) FROM users WHERE role='instructor'")->fetchColumn();
$stats_enrollments = $S['stats_enrollments'] ?? $pdo->query("SELECT COUNT(*) FROM enrollments WHERE payment_status='completed'")->fetchColumn();
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($S['about_title'] ?? 'আমাদের সম্পর্কে') ?> - <?= htmlspecialchars($S['site_title'] ?? 'বাংলা LMS') ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root { --primary: <?= $S['primary_color'] ?? '#6C5CE7' ?>; --g1: linear-gradient(135deg, <?= $S['primary_color'] ?? '#667eea' ?>, <?= $S['primary_color'] ?? '#764ba2' ?>dd); --g2: linear-gradient(135deg, #f093fb, #f5576c); --g3: linear-gradient(135deg, #4facfe, #00f2fe); --g4: linear-gradient(135deg, #43e97b, #38f9d7); --dark: #1a1a2e; --shadow: 0 5px 25px rgba(0,0,0,0.08); --shadow-lg: 0 15px 45px rgba(0,0,0,0.12); }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { background:#f0f2f8; font-family:'Segoe UI','Hind Siliguri',Arial,sans-serif; }
        
        .navbar { background:rgba(255,255,255,0.9); backdrop-filter:blur(15px); box-shadow:0 2px 20px rgba(0,0,0,0.06); padding:14px 0; position:sticky; top:0; z-index:1000; }
        .navbar-brand { font-weight:800; font-size:1.3rem; background:var(--g1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-decoration:none; display:flex; align-items:center; gap:8px; }
        .navbar-brand img { height:36px; }
        .nav-link { color:#555; text-decoration:none; font-weight:500; margin:0 12px; transition:0.3s; }
        .nav-link:hover, .nav-link.active { color:var(--primary); }
        
        .hero { background:var(--g1); color:white; padding:70px 0 90px; text-align:center; position:relative; overflow:hidden; }
        .hero::after { content:''; position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); width:60px; height:60px; background:#f0f2f8; border-radius:50%; }
        .hero h1 { font-size:2.8rem; font-weight:800; }
        .hero p { font-size:1.1rem; opacity:0.9; }
        
        .container { max-width:1100px; margin:0 auto; padding:30px 20px; }
        
        .stat-card { background:white; border-radius:16px; padding:25px 15px; text-align:center; box-shadow:var(--shadow); transition:0.3s; }
        .stat-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
        .stat-icon { width:55px; height:55px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:white; font-size:1.3rem; margin-bottom:12px; }
        .stat-card h2 { font-weight:800; color:var(--dark); margin:0; }
        .stat-card p { color:#888; margin:5px 0 0; font-size:0.85rem; }
        
        .section-card { background:white; border-radius:20px; padding:35px; box-shadow:var(--shadow); margin-bottom:25px; }
        .section-title { font-weight:800; font-size:1.8rem; color:var(--dark); margin-bottom:15px; position:relative; display:inline-block; }
        .section-title::after { content:''; position:absolute; bottom:-5px; left:0; width:50px; height:4px; background:var(--g1); border-radius:2px; }
        
        .mission-card { background:#f8f9ff; border-radius:16px; padding:25px; text-align:center; transition:0.3s; height:100%; }
        .mission-card:hover { box-shadow:var(--shadow); transform:translateY(-5px); }
        .mission-card .icon { font-size:2.5rem; margin-bottom:10px; }
        
        .timeline { position:relative; padding-left:25px; }
        .timeline::before { content:''; position:absolute; left:0; top:0; width:3px; height:100%; background:var(--g1); border-radius:2px; }
        .timeline-item { position:relative; margin-bottom:25px; padding-left:20px; }
        .timeline-item::before { content:''; position:absolute; left:-31px; top:5px; width:14px; height:14px; background:white; border:3px solid var(--primary); border-radius:50%; }
        .timeline-item h6 { font-weight:700; color:var(--primary); margin-bottom:3px; }
        .timeline-item p { color:#666; font-size:0.9rem; margin:0; }
        
        .team-card { background:white; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); text-align:center; transition:0.4s; }
        .team-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); }
        .team-card img { width:100%; height:200px; object-fit:cover; background:var(--g1); }
        .team-card .info { padding:18px; }
        .team-card h5 { font-weight:700; margin-bottom:3px; }
        .team-card .role { color:var(--primary); font-weight:600; font-size:0.85rem; }
        
        .cta-section { background:var(--g1); color:white; border-radius:20px; padding:50px; text-align:center; }
        .btn-cta { background:white; color:var(--primary); border-radius:50px; padding:14px 35px; font-weight:700; text-decoration:none; display:inline-block; transition:0.3s; font-size:1.05rem; }
        .btn-cta:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.2); }
        
        footer { background:var(--dark); color:white; text-align:center; padding:25px; margin-top:50px; }
        
        @media (max-width:768px) { .hero h1 { font-size:1.8rem; } .section-card { padding:25px 20px; } }
    </style>
</head>
<body>

<nav class="navbar">
    <div class="container" style="display:flex;justify-content:space-between;align-items:center;">
        <a href="index.php" class="navbar-brand">
            <?php if(($S['use_image_logo']??'0')=='1' && !empty($S['logo_image']) && file_exists('uploads/logo/'.$S['logo_image'])): ?>
                <img src="uploads/logo/<?=$S['logo_image']?>" alt="<?=htmlspecialchars($S['site_title']??'LMS')?>">
            <?php else: ?>
                <i class="fas <?=$S['logo_icon']??'fa-graduation-cap'?> me-2"></i><?=htmlspecialchars($S['logo_text']??'বাংলা LMS')?>
            <?php endif; ?>
        </a>
        <div style="display:flex;gap:15px;flex-wrap:wrap;">
            <a href="index.php" class="nav-link">হোম</a>
            <a href="courses.php" class="nav-link">কোর্স</a>
            <a href="packages.php" class="nav-link">প্যাকেজ</a>
            <a href="instructors.php" class="nav-link">ইন্সট্রাক্টর</a>
            <a href="about.php" class="nav-link active">আমাদের সম্পর্কে</a>
            <a href="contact.php" class="nav-link">যোগাযোগ</a>
        </div>
    </div>
</nav>

<section class="hero">
    <h1><?= htmlspecialchars($S['about_title'] ?? 'আমাদের সম্পর্কে') ?></h1>
    <p><?= htmlspecialchars($S['about_description'] ?? 'বাংলা ভাষায় মানসম্মত শিক্ষা প্রদানে আমরা অঙ্গীকারবদ্ধ') ?></p>
</section>

<div class="container">
    
    <!-- Stats -->
    <div class="row g-3 mb-4" data-aos="fade-up">
        <div class="col-6 col-md-3"><div class="stat-card"><div class="stat-icon" style="background:var(--g1);"><i class="fas fa-users"></i></div><h2><?=number_format((int)$stats_students)?>+</h2><p>সক্রিয় শিক্ষার্থী</p></div></div>
        <div class="col-6 col-md-3"><div class="stat-card"><div class="stat-icon" style="background:var(--g2);"><i class="fas fa-book"></i></div><h2><?=number_format((int)$stats_courses)?>+</h2><p>কোর্স</p></div></div>
        <div class="col-6 col-md-3"><div class="stat-card"><div class="stat-icon" style="background:var(--g3);"><i class="fas fa-chalkboard-teacher"></i></div><h2><?=number_format((int)$stats_instructors)?>+</h2><p>ইন্সট্রাক্টর</p></div></div>
        <div class="col-6 col-md-3"><div class="stat-card"><div class="stat-icon" style="background:var(--g4);"><i class="fas fa-graduation-cap"></i></div><h2><?=number_format((int)$stats_enrollments)?>+</h2><p>এনরোলমেন্ট</p></div></div>
    </div>
    
    <!-- Story -->
    <div class="section-card" data-aos="fade-up">
        <h2 class="section-title">আমাদের গল্প</h2>
        <p class="lead">২০২০ সালে যাত্রা শুরু করা <?=htmlspecialchars($S['site_title']??'বাংলা LMS')?> আজ বাংলাদেশের অন্যতম জনপ্রিয় অনলাইন লার্নিং প্ল্যাটফর্ম।</p>
        <p>আমরা বিশ্বাস করি যে মানসম্মত শিক্ষা সবার জন্য উন্মুক্ত হওয়া উচিত। বাংলা ভাষায় সহজবোধ্য কোর্সের মাধ্যমে আমরা হাজারো শিক্ষার্থীকে দক্ষ করে তুলেছি।</p>
        
        <div class="timeline mt-4">
            <div class="timeline-item"><h6>২০২০</h6><p><?=htmlspecialchars($S['site_title']??'বাংলা LMS')?> এর যাত্রা শুরু। প্রথম অনলাইন কোর্স লঞ্চ।</p></div>
            <div class="timeline-item"><h6>২০২১</h6><p>৫০০০+ শিক্ষার্থী এনরোলমেন্ট। ৫০+ কোর্স যুক্ত হয়।</p></div>
            <div class="timeline-item"><h6>২০২২</h6><p>মোবাইল অ্যাপ লঞ্চ। লাইভ ক্লাস সিস্টেম চালু।</p></div>
            <div class="timeline-item"><h6>২০২৩</h6><p>১০০০০+ শিক্ষার্থী। ১০০+ কোর্স। ইন্ডাস্ট্রি পার্টনারশিপ।</p></div>
            <div class="timeline-item"><h6>২০২৪</h6><p>AI ভিত্তিক লার্নিং সিস্টেম। গ্লোবাল সার্টিফিকেশন প্রোগ্রাম।</p></div>
        </div>
    </div>
    
    <!-- Mission -->
    <div class="row g-3 mb-4" data-aos="fade-up">
        <div class="col-md-4"><div class="mission-card"><div class="icon">🎯</div><h5>আমাদের লক্ষ্য</h5><p>বাংলা ভাষায় বিশ্বমানের শিক্ষা প্রদান করে বাংলাদেশের তরুণদের আন্তর্জাতিক চাকরির বাজারের জন্য প্রস্তুত করা।</p></div></div>
        <div class="col-md-4"><div class="mission-card"><div class="icon">👁️</div><h5>আমাদের ভিশন</h5><p>দক্ষিণ এশিয়ার শীর্ষস্থানীয় বাংলা ভাষার অনলাইন লার্নিং প্ল্যাটফর্ম হিসেবে প্রতিষ্ঠিত হওয়া।</p></div></div>
        <div class="col-md-4"><div class="mission-card"><div class="icon">💎</div><h5>আমাদের মূল্যবোধ</h5><p>গুণগত মান, সততা, উদ্ভাবন এবং শিক্ষার্থীদের সাফল্যই আমাদের প্রধান অগ্রাধিকার।</p></div></div>
    </div>
    
    <!-- Why Us -->
    <div class="section-card" data-aos="fade-up">
        <h2 class="section-title">কেন <?=htmlspecialchars($S['site_title']??'বাংলা LMS')?>?</h2>
        <div class="row g-3 mt-2">
            <div class="col-md-6"><div class="d-flex gap-2 mb-2"><span style="font-size:2rem;">✅</span><div><h6>বাংলা ভাষায় সম্পূর্ণ কোর্স</h6><p class="text-muted small">মাতৃভাষায় সহজবোধ্য কোর্স</p></div></div></div>
            <div class="col-md-6"><div class="d-flex gap-2 mb-2"><span style="font-size:2rem;">🎓</span><div><h6>অভিজ্ঞ ইন্সট্রাক্টর</h6><p class="text-muted small">ইন্ডাস্ট্রি এক্সপার্টদের দ্বারা তৈরি</p></div></div></div>
            <div class="col-md-6"><div class="d-flex gap-2 mb-2"><span style="font-size:2rem;">📱</span><div><h6>যেকোনো ডিভাইস</h6><p class="text-muted small">মোবাইল, ট্যাব, ল্যাপটপে শিখুন</p></div></div></div>
            <div class="col-md-6"><div class="d-flex gap-2 mb-2"><span style="font-size:2rem;">💬</span><div><h6>২৪/৭ সাপোর্ট</h6><p class="text-muted small">সর্বদা সাহায্যের জন্য প্রস্তুত</p></div></div></div>
            <div class="col-md-6"><div class="d-flex gap-2 mb-2"><span style="font-size:2rem;">🏆</span><div><h6>সার্টিফিকেট</h6><p class="text-muted small">ভেরিফাইড সার্টিফিকেট</p></div></div></div>
            <div class="col-md-6"><div class="d-flex gap-2 mb-2"><span style="font-size:2rem;">💰</span><div><h6>সাশ্রয়ী মূল্য</h6><p class="text-muted small">ফ্রি কোর্সও আছে</p></div></div></div>
        </div>
    </div>
    
    <!-- Team -->
    <?php if(count($team) > 0): ?>
        <div class="section-card" data-aos="fade-up">
            <h2 class="section-title">আমাদের টিম</h2>
            <div class="row g-3 mt-2">
                <?php foreach($team as $member): ?>
                    <div class="col-md-3">
                        <div class="team-card">
                            <img src="uploads/avatars/<?=$member['avatar']?:'default-avatar.png'?>" alt="<?=htmlspecialchars($member['full_name'])?>" onerror="this.src='https://ui-avatars.com/api/?name=<?=urlencode($member['full_name'])?>&background=<?=str_replace('#','',$S['primary_color']??'6C5CE7')?>&color=fff&size=200'">
                            <div class="info">
                                <h5><?=htmlspecialchars($member['full_name'])?></h5>
                                <p class="role">ইন্সট্রাক্টর</p>
                                <p class="text-muted small"><?=htmlspecialchars(mb_substr($member['bio']??'',0,40))?>...</p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>
    
    <!-- CTA -->
    <div class="cta-section" data-aos="zoom-in">
        <h2>আজই শুরু করুন আপনার লার্নিং জার্নি</h2>
        <p class="mb-4">হাজারো শিক্ষার্থীর সাথে যোগ দিন এবং আপনার ক্যারিয়ার গড়ুন</p>
        <a href="courses.php" class="btn-cta"><i class="fas fa-rocket me-2"></i>কোর্স দেখুন</a>
    </div>
</div>

<footer><p>&copy; <?=date('Y')?> <?=htmlspecialchars($S['footer_text']??'বাংলা LMS | সর্বস্বত্ব সংরক্ষিত')?></p></footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init({duration:700,once:true});</script>
</body>
</html>