<?php 
require_once 'db_connect.php'; 

// Fetch Dynamic Statistics (Courses count)
try {
    $stmt = $pdo->query("SELECT COUNT(*) as total FROM courses WHERE status = 'active'");
    $total_courses = $stmt->fetch(PDO::FETCH_ASSOC)['total'] ?? 0;
} catch (PDOException $e) {
    $total_courses = 0;
}

// Fetch CMS Settings for About Page
$settings = [];
try {
    $stmt = $pdo->query("SELECT setting_key, setting_value FROM settings");
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
        $settings[$row['setting_key']] = $row['setting_value']; 
    }
} catch (PDOException $e) {}

// 🟢 SMART IMAGE FIXER (যাতে ছবি না ভাঙে)
function getCleanUrl($raw_path, $default) {
    if (empty($raw_path)) return $default;
    if (strpos($raw_path, 'http') === 0) return $raw_path;
    return 'https://ahmadonlineacademy.com/' . ltrim(str_replace('../', '', $raw_path), '/');
}

$hero_bg = getCleanUrl($settings['about_hero_bg'] ?? '', 'assets/images/placeholder.jpg');
$welcome_img = getCleanUrl($settings['about_welcome_img'] ?? '', 'assets/images/placeholder.jpg');
$admin_img = getCleanUrl($settings['about_admin_img'] ?? '', 'https://ui-avatars.com/api/?name=Admin&background=d4af37&color=022c22');

include 'header.php'; 
?>

<style>
    /* --- Themes Variables --- */
    :root {
        --primary: #064e3b;        
        --primary-light: #059669;  
        --primary-dark: #022c22;   
        --accent: #d4af37;         
        --white: #ffffff;          
        --bg-soft: #f8fafc;        
    }

    body { background-color: var(--bg-soft); font-family: 'Outfit', sans-serif; overflow-x: hidden; }
    
    /* --- Premium Hero Section --- */
    .about-hero {
        background: linear-gradient(135deg, rgba(2, 44, 34, 0.92), rgba(6, 78, 59, 0.98)), url('<?= $hero_bg ?>') center/cover;
        padding: 100px 0 80px;
        color: var(--white);
        text-align: center;
        border-bottom: 4px solid var(--accent);
        position: relative;
    }
    .about-hero h1 { font-weight: 900; font-size: 45px; letter-spacing: -1px; margin-bottom: 20px; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
    .breadcrumb-box { display: inline-block; background: rgba(255,255,255,0.1); padding: 8px 30px; border-radius: 50px; font-weight: 600; backdrop-filter: blur(5px); border: 1px solid rgba(212, 175, 55, 0.3); }
    .breadcrumb-box a { color: var(--accent); text-decoration: none; }

    /* --- Section Titles --- */
    .sec-title-wrap { text-align: center; margin-bottom: 50px; }
    .sec-title-wrap h4 { color: var(--accent); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
    .sec-title-wrap h2 { font-size: 36px; font-weight: 900; color: var(--primary-dark); position: relative; display: inline-block; padding-bottom: 15px; }
    .sec-title-wrap h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--accent); border-radius: 2px; }

    .text-justify-custom { text-align: justify; line-height: 1.9; font-size: 1.05rem; color: #475569; margin-bottom: 20px; }

    /* --- Image Styling --- */
    .img-premium { border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); border: 8px solid var(--white); width: 100%; position: relative; z-index: 2; object-fit: cover;}
    .img-bg-shape { position: absolute; bottom: -20px; right: -20px; width: 100%; height: 100%; border-radius: 20px; background: var(--accent); opacity: 0.2; z-index: 1; }

    /* --- Mission & Vision Cards --- */
    .mv-card { border-radius: 24px; padding: 50px 40px; height: 100%; position: relative; overflow: hidden; z-index: 1; transition: 0.4s; }
    .mv-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://www.transparenttextures.com/patterns/arabesque.png'); opacity: 0.05; z-index: -1; pointer-events: none; }
    .mv-card:hover { transform: translateY(-10px); }
    
    .mission-box { background: var(--white); border: 1px solid #e2e8f0; box-shadow: 0 15px 40px rgba(0,0,0,0.04); border-bottom: 5px solid var(--accent); }
    .vision-box { background: var(--primary-dark); color: var(--white); border-bottom: 5px solid var(--accent); box-shadow: 0 15px 40px rgba(2, 44, 34, 0.2); }
    
    .mv-icon { width: 75px; height: 75px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 30px; }
    .mission-box .mv-icon { background: rgba(212, 175, 55, 0.15); color: var(--accent); }
    .vision-box .mv-icon { background: rgba(255, 255, 255, 0.1); color: var(--accent); }

    /* --- Dynamic Stats --- */
    .stats-wrap { background: var(--primary); padding: 50px 0; color: var(--white); margin: 60px 0; }
    .stat-item h3 { font-size: 45px; font-weight: 900; color: var(--accent); margin-bottom: 5px; }
    .stat-item p { font-size: 16px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0; opacity: 0.9; }

    /* --- Features Box --- */
    .feature-item { background: var(--white); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #f1f5f9; height: 100%; transition: 0.4s; }
    .feature-item:hover { box-shadow: 0 20px 40px rgba(6,78,59,0.08); border-color: var(--accent); transform: translateY(-5px); }
    .f-icon-wrap { width: 70px; height: 70px; background: var(--bg-soft); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; transition: 0.3s; }
    .feature-item:hover .f-icon-wrap { background: var(--primary); color: var(--accent); }

    /* --- Admin Info --- */
    .admin-card { background: var(--white); border-radius: 30px; padding: 50px; box-shadow: 0 20px 60px rgba(0,0,0,0.06); border: 1px solid #e2e8f0; position: relative; overflow: hidden; }
    .admin-card::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 100%; background: var(--accent); }
</style>

<section class="about-hero">
    <div class="container">
        <h1><?= htmlspecialchars($settings['about_hero_title'] ?? 'About Ahmad Academy') ?></h1>
        <div class="breadcrumb-box">
            <a href="index.php"><i class="fas fa-home me-1"></i> Home</a> <span class="mx-2 text-white-50">/</span> <span class="text-white">About Us</span>
        </div>
    </div>
</section>

<section class="py-5 mt-5">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <h4 style="color: var(--accent); font-weight: 700; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;">
                    <?= htmlspecialchars($settings['about_welcome_sub'] ?? 'Welcome To') ?>
                </h4>
                <h2 style="font-size: 38px; font-weight: 900; color: var(--primary-dark); margin-bottom: 25px;">
                    <?= htmlspecialchars($settings['about_welcome_title'] ?? 'Ahmad Online Academy') ?>
                </h2>
                
                <div class="text-justify-custom">
                    <?= nl2br(htmlspecialchars($settings['about_welcome_text'] ?? 'Ahmad Online Academy is a trusted platform for learning the Quran, Arabic, and Islamic studies globally.')) ?>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="position-relative" style="padding: 0 20px 20px 0;">
                    <div class="img-bg-shape"></div>
                    <img src="<?= $welcome_img ?>" alt="Academy Overview" class="img-premium">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="stats-wrap">
    <div class="container">
        <div class="row text-center g-4">
            <div class="col-md-4">
                <div class="stat-item border-end border-light border-opacity-25">
                    <i class="fas fa-globe fs-1 mb-3 opacity-50"></i>
                    <h3><?= htmlspecialchars($settings['about_stat_countries'] ?? '10') ?>+</h3>
                    <p>Countries Reached</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-item border-end border-light border-opacity-25">
                    <i class="fas fa-book-open fs-1 mb-3 opacity-50"></i>
                    <h3><?= $total_courses; ?>+</h3>
                    <p>Active Courses</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-item">
                    <i class="fas fa-user-graduate fs-1 mb-3 opacity-50"></i>
                    <h3><?= htmlspecialchars($settings['about_stat_students'] ?? '500') ?>+</h3>
                    <p>Happy Students</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container pb-5">
        <div class="row g-5">
            
            <div class="col-lg-6">
                <div class="mv-card mission-box">
                    <div class="mv-icon"><i class="fas fa-bullseye"></i></div>
                    <h2 style="font-weight: 900; color: var(--primary-dark); margin-bottom: 20px;">Our Mission</h2>
                    <p class="text-justify-custom mb-0">
                        <?= nl2br(htmlspecialchars($settings['about_mission'] ?? 'To provide high-quality and accessible Islamic education to everyone, everywhere, helping them build a strong foundation in Deen.')) ?>
                    </p>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="mv-card vision-box">
                    <div class="mv-icon"><i class="fas fa-eye"></i></div>
                    <h2 style="font-weight: 900; color: var(--white); margin-bottom: 20px;">Our Vision</h2>
                    <p class="mb-0" style="font-size: 1.05rem; line-height: 1.9; color: rgba(255,255,255,0.85); text-align: justify;">
                        <?= nl2br(htmlspecialchars($settings['about_vision'] ?? 'To become a globally recognized digital institute that connects Muslims to the Book of Allah and the Sunnah of Prophet Muhammad (PBUH).')) ?>
                    </p>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="py-5" style="background-color: #f1f5f9;">
    <div class="container py-5">
        <div class="sec-title-wrap">
            <h4>Core Principles</h4>
            <h2>Why Choose Us?</h2>
            <p class="text-muted mt-2 mx-auto" style="max-width: 600px; font-size: 1.1rem;">These are the core principles that make Ahmad Academy a trusted learning platform for students worldwide.</p>
        </div>

        <div class="row g-4">
            <div class="col-lg-3 col-md-6">
                <div class="feature-item text-center">
                    <div class="f-icon-wrap mx-auto"><i class="fas fa-tasks"></i></div>
                    <h5 class="fw-bold" style="color: var(--primary-dark);"><?= htmlspecialchars($settings['about_cp1_title'] ?? 'Project-Based') ?></h5>
                    <p class="text-muted small mt-3 mb-0"><?= htmlspecialchars($settings['about_cp1_desc'] ?? 'Practical assessments and assignments to build a strong foundation.') ?></p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="feature-item text-center">
                    <div class="f-icon-wrap mx-auto"><i class="fas fa-chalkboard-teacher"></i></div>
                    <h5 class="fw-bold" style="color: var(--primary-dark);"><?= htmlspecialchars($settings['about_cp2_title'] ?? 'Expert Tutors') ?></h5>
                    <p class="text-muted small mt-3 mb-0"><?= htmlspecialchars($settings['about_cp2_desc'] ?? 'Over a decade of hands-on experience in Islamic education.') ?></p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="feature-item text-center">
                    <div class="f-icon-wrap mx-auto"><i class="fas fa-child"></i></div>
                    <h5 class="fw-bold" style="color: var(--primary-dark);"><?= htmlspecialchars($settings['about_cp3_title'] ?? 'Beginner Friendly') ?></h5>
                    <p class="text-muted small mt-3 mb-0"><?= htmlspecialchars($settings['about_cp3_desc'] ?? 'Simple, clear, and step-by-step lessons for learners of all levels.') ?></p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="feature-item text-center">
                    <div class="f-icon-wrap mx-auto"><i class="fas fa-headset"></i></div>
                    <h5 class="fw-bold" style="color: var(--primary-dark);"><?= htmlspecialchars($settings['about_cp4_title'] ?? '24/7 Support') ?></h5>
                    <p class="text-muted small mt-3 mb-0"><?= htmlspecialchars($settings['about_cp4_desc'] ?? 'Dedicated guidance and personal responses to help you stay on track.') ?></p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 mb-5 mt-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="admin-card d-flex flex-column flex-md-row align-items-center gap-5">
                    
                    <div class="flex-shrink-0 text-center">
                        <img src="<?= $admin_img ?>" alt="Admin" style="width:180px; height:180px; border-radius: 50%; border: 6px solid var(--bg-soft); object-fit: cover; box-shadow: 0 10px 20px rgba(0,0,0,0.1);">
                    </div>
                    
                    <div>
                        <h3 style="font-weight: 900; color: var(--primary-dark); margin-bottom: 5px;">
                            <?= htmlspecialchars($settings['about_admin_name'] ?? 'Administrator') ?>
                        </h3>
                        <span class="d-inline-block px-3 py-1 rounded-pill mb-3" style="background: rgba(212, 175, 55, 0.2); color: var(--primary-dark); font-weight: 700; font-size: 13px; border: 1px solid var(--accent);">
                            <i class="fas fa-user-shield me-1"></i> <?= htmlspecialchars($settings['about_admin_role'] ?? 'Management & Academic Affairs') ?>
                        </span>
                        <p style="font-size: 1.1rem; color: #475569; line-height: 1.8; font-style: italic; margin: 0;">
                            "<?= htmlspecialchars($settings['about_admin_quote'] ?? 'Education is the key to unlock the golden door of freedom.') ?>"
                        </p>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

<?php include 'footer.php'; ?>