📄 about.php

<?php
require_once __DIR__ . '/includes/functions.php';

$currentPage = 'about';
$about = db()->query('SELECT * FROM about_content WHERE id = 1')->fetch() ?: [];
$team = db()->query("SELECT * FROM team_members WHERE status = 'active' ORDER BY sort_order")->fetchAll();
$faqs = db()->query("SELECT * FROM faqs WHERE group_key = 'about' AND status = 'active' ORDER BY sort_order")->fetchAll();

$pageSeoTitle = $about['seo_title'] ?? 'About Us';
$pageSeoDescription = $about['seo_description'] ?? '';
require __DIR__ . '/partials/header.php';
?>

<section class="page-banner relative py-24 md:py-32 overflow-hidden">
  <div class="max-w-7xl mx-auto px-6 relative z-10 text-center" data-aos="fade-up">
    <span class="inline-block px-4 py-1.5 rounded-full bg-brand-gold/20 border border-brand-gold text-brand-gold text-xs font-semibold mb-5">About Us</span>
    <h1 class="text-white font-heading font-extrabold text-3xl md:text-5xl leading-tight mb-4"><?= e($about['banner_title'] ?? '') ?></h1>
    <p class="text-gray-300 max-w-2xl mx-auto"><?= e($about['banner_subtitle'] ?? '') ?></p>
  </div>
</section>

<section class="py-20">
  <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-14 items-center">
    <div data-aos="fade-right">
      <span class="text-brand-red font-semibold text-sm tracking-widest uppercase">Company Profile</span>
      <h2 class="font-heading font-extrabold text-3xl md:text-4xl mt-3 mb-5"><?= e($about['company_profile_title'] ?? '') ?></h2>
      <?= render_paragraphs($about['company_profile_body'] ?? '') ?>
    </div>
    <img src="<?= e(resolve_image($about['company_profile_image'] ?? '')) ?>" class="rounded-2xl shadow-xl" data-aos="fade-left">
  </div>
</section>

<!-- ===================== CHAIRMAN'S MESSAGE ===================== -->
<section class="py-20 bg-gray-50 dark:bg-gray-900/40">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-14" data-aos="fade-up">
      <span class="text-brand-red font-semibold text-sm tracking-widest uppercase">Leadership</span>
      <h2 class="font-heading font-extrabold text-3xl md:text-4xl mt-3">Message from the <span class="gradient-text">Chairman</span></h2>
    </div>

    <div class="grid lg:grid-cols-3 gap-10 items-start">
      <div class="lg:col-span-1 lg:sticky lg:top-28" data-aos="fade-right">
        <div class="relative max-w-xs mx-auto lg:mx-0">
          <div class="absolute -inset-2 rounded-3xl bg-gradient-to-br from-brand-red via-brand-gold to-brand-green opacity-30 blur-xl"></div>
          <img src="<?= e(resolve_image($about['chairman_photo'] ?? '')) ?>" alt="<?= e($about['chairman_name'] ?? '') ?>" class="relative rounded-3xl shadow-2xl w-full object-cover aspect-[4/5]">
        </div>
        <div class="text-center lg:text-left mt-6 max-w-xs mx-auto lg:mx-0">
          <p class="font-heading font-extrabold text-xl"><?= e($about['chairman_name'] ?? '') ?></p>
          <p class="text-brand-red font-semibold text-sm mb-1"><?= e($about['chairman_title'] ?? '') ?></p>
          <p class="text-gray-500 dark:text-gray-400 text-sm"><?= e($s['site_name'] ?? '') ?></p>
          <p class="text-gray-400 dark:text-gray-500 text-xs mt-1"><i class="fa-solid fa-location-dot text-brand-green mr-1"></i><?= e($s['address'] ?? '') ?></p>
        </div>
      </div>

      <div class="lg:col-span-2" data-aos="fade-left">
        <div class="glass-light dark:glass rounded-3xl p-8 md:p-10 border-t-4 border-brand-gold shadow-xl relative">
          <i class="fa-solid fa-quote-left text-brand-gold/30 text-6xl absolute top-6 right-8"></i>
          <?= render_paragraphs($about['chairman_message'] ?? '') ?>
          <p class="font-heading font-extrabold gradient-text text-lg mt-4"><?= e($about['chairman_name'] ?? '') ?></p>
          <p class="text-xs text-gray-500 dark:text-gray-400"><?= e($about['chairman_title'] ?? '') ?>, <?= e($s['site_name'] ?? '') ?></p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-10" data-aos="fade-up">
      <span class="text-brand-green font-semibold text-sm tracking-widest uppercase">Our Purpose</span>
      <h2 class="font-heading font-extrabold text-3xl mt-3">Mission &amp; Vision</h2>
    </div>
    <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
      <div class="card-hover bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border-t-4 border-brand-green text-center" data-aos="fade-up">
        <i class="fa-solid fa-bullseye text-brand-green text-2xl mb-3"></i>
        <h3 class="font-heading font-bold text-lg mb-2">Our Mission</h3>
        <p class="text-gray-500 dark:text-gray-400 text-sm"><?= e($about['mission'] ?? '') ?></p>
      </div>
      <div class="card-hover bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border-t-4 border-brand-gold text-center" data-aos="fade-up" data-aos-delay="100">
        <i class="fa-solid fa-eye text-brand-gold text-2xl mb-3"></i>
        <h3 class="font-heading font-bold text-lg mb-2">Our Vision</h3>
        <p class="text-gray-500 dark:text-gray-400 text-sm"><?= e($about['vision'] ?? '') ?></p>
      </div>
    </div>
  </div>
</section>

<?php if ($team): ?>
<section class="py-20 bg-gray-50 dark:bg-gray-900/40">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-14" data-aos="fade-up">
      <span class="text-brand-green font-semibold text-sm tracking-widest uppercase">Our Team</span>
      <h2 class="font-heading font-extrabold text-3xl md:text-4xl mt-3">Meet the <span class="gradient-text">Counsellors</span></h2>
    </div>
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <?php foreach ($team as $i => $m): ?>
      <div class="card-hover text-center bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm" data-aos="fade-up" data-aos-delay="<?= $i * 80 ?>">
        <?php if (!empty($m['photo'])): ?>
          <img src="<?= e(resolve_image($m['photo'])) ?>" class="w-20 h-20 mx-auto rounded-full object-cover mb-4">
        <?php else: ?>
          <div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-brand-red to-brand-green mb-4 flex items-center justify-center text-white text-2xl font-bold"><?= e(strtoupper(substr($m['name'], 0, 2))) ?></div>
        <?php endif; ?>
        <h4 class="font-heading font-bold"><?= e($m['name']) ?></h4>
        <p class="text-xs text-gray-500 dark:text-gray-400"><?= e($m['role']) ?></p>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>

<?php if ($faqs): ?>
<section class="py-20">
  <div class="max-w-7xl mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-14" data-aos="fade-up">
      <span class="text-brand-red font-semibold text-sm tracking-widest uppercase">FAQ</span>
      <h2 class="font-heading font-extrabold text-3xl md:text-4xl mt-3">Frequently Asked <span class="gradient-text">Questions</span></h2>
    </div>
    <div class="max-w-3xl mx-auto space-y-4" x-data="{ open: 0 }">
      <?php foreach ($faqs as $i => $f): ?>
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden" data-aos="fade-up">
        <button @click="open = open === <?= $i ?> ? null : <?= $i ?>" class="w-full flex items-center justify-between px-6 py-4 text-left font-semibold">
          <?= e($f['question']) ?>
          <i class="fa-solid fa-chevron-down transition-transform" :class="open === <?= $i ?> ? 'rotate-180 text-brand-red' : ''"></i>
        </button>
        <div x-show="open === <?= $i ?>" x-collapse class="px-6 pb-4 text-sm text-gray-500 dark:text-gray-400"><?= e($f['answer']) ?></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>

<?php require __DIR__ . '/partials/footer.php'; ?>