<?php
/**
 * About Us Page
 * Path: about.php
 */
include_once 'header.php';

$site_name    = get_site_setting('site_name');
$site_about   = get_site_setting('site_about');
$site_phone   = get_site_setting('site_phone');
$site_address = get_site_setting('site_address');
$stat_years   = get_site_setting('stat_years') ?: '20+ Years';
$stat_units   = get_site_setting('stat_units') ?: '2,700+';
$stat_response= get_site_setting('stat_response') ?: '24/7/365';
?>

<section class="relative bg-gradient-to-r from-slate-950 to-blue-900 text-white py-16 md:py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <nav class="text-xs text-sky-400 font-bold uppercase mb-3">
            <a href="index.php" class="hover:text-white">Home</a> <span class="mx-2 text-slate-500">/</span> About Us
        </nav>
        <h1 class="text-3xl md:text-5xl font-black uppercase">About <?php echo htmlspecialchars($site_name); ?></h1>
        <div class="w-16 h-1 bg-secondary mx-auto mt-4"></div>
    </div>
</section>

<section class="py-16 md:py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-6">
                <span class="text-secondary font-bold uppercase text-xs tracking-wider">Who We Are</span>
                <h2 class="text-3xl md:text-4xl font-black text-primary uppercase leading-tight">Bangladesh's Trusted Engineering Partner</h2>
                <p class="text-gray-600 leading-relaxed text-base"><?php echo htmlspecialchars($site_about); ?></p>
                <p class="text-gray-600 leading-relaxed">Our Dhaka-based specialist teams deploy across Bangladesh to resolve complex heavy electrical, mechanical, and HVAC ventilation issues under strict ISO safety standard guidelines.</p>
                <div class="p-5 bg-blue-50 border-l-4 border-secondary rounded-r-xl">
                    <p class="text-sm italic text-gray-700 font-medium">"One company. Multiple core solutions. Keeping Bangladesh's infrastructure powered up."</p>
                </div>
            </div>
            <div class="relative rounded-2xl overflow-hidden shadow-2xl aspect-[4/3]">
                <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=800" class="w-full h-full object-cover" alt="Engineering Team">
                <div class="absolute inset-0 bg-gradient-to-t from-primary/60 to-transparent"></div>
            </div>
        </div>
    </div>
</section>

<!-- Stats -->
<div class="bg-primary text-white py-10">
    <div class="max-w-7xl mx-auto px-4 grid grid-cols-3 gap-6 text-center divide-x divide-white/15">
        <div><span class="block text-3xl md:text-5xl font-black text-secondary"><?php echo htmlspecialchars($stat_years); ?></span><span class="text-xs uppercase text-gray-300 mt-1 block">Years Experience</span></div>
        <div><span class="block text-3xl md:text-5xl font-black text-secondary"><?php echo htmlspecialchars($stat_units); ?></span><span class="text-xs uppercase text-gray-300 mt-1 block">Projects Done</span></div>
        <div><span class="block text-3xl md:text-5xl font-black text-secondary"><?php echo htmlspecialchars($stat_response); ?></span><span class="text-xs uppercase text-gray-300 mt-1 block">Emergency Support</span></div>
    </div>
</div>

<!-- Values -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-black text-primary uppercase">Why Choose Us</h2>
            <div class="w-16 h-1 bg-secondary mx-auto mt-3"></div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <?php
            $values = [
                ['fa-shield-halved', '100% Safety', 'Every installation complies with international building safety codes.'],
                ['fa-user-tie', 'Expert Team', 'Certified electrical, mechanical and HVAC engineers.'],
                ['fa-wallet', 'Fair Pricing', 'Transparent itemized quotes with no hidden fees.'],
                ['fa-headset', '24/7 Hotline', 'Standby response dispatcher 365 days a year.'],
            ];
            foreach ($values as $v): ?>
            <div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-all text-center">
                <div class="w-14 h-14 mx-auto mb-4 rounded-2xl bg-blue-50 text-primary flex items-center justify-center text-2xl">
                    <i class="fa-solid <?php echo $v[0]; ?>"></i>
                </div>
                <h4 class="font-black text-primary uppercase text-sm mb-2"><?php echo $v[1]; ?></h4>
                <p class="text-xs text-gray-500 leading-relaxed"><?php echo $v[2]; ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Partners -->
<section class="py-12 bg-white border-t border-gray-100">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <h4 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-8">Serving Leading Operations Across Bangladesh</h4>
        <div class="flex flex-wrap justify-center gap-8 md:gap-14 opacity-60">
            <span class="font-black text-gray-600 flex items-center gap-2"><i class="fa-solid fa-building"></i> BD PROPERTIES</span>
            <span class="font-black text-gray-600 flex items-center gap-2"><i class="fa-solid fa-hospital"></i> HOSPITAL GROUP</span>
            <span class="font-black text-gray-600 flex items-center gap-2"><i class="fa-solid fa-industry"></i> TEXTILE MILLS</span>
            <span class="font-black text-gray-600 flex items-center gap-2"><i class="fa-solid fa-server"></i> DATA CENTERS</span>
        </div>
    </div>
</section>

<section class="py-12 bg-primary text-white text-center">
    <div class="max-w-2xl mx-auto px-4 space-y-4">
        <h3 class="text-2xl font-black uppercase">Ready to Work With Us?</h3>
        <a href="contact.php" class="inline-block bg-white text-primary hover:bg-secondary hover:text-white px-8 py-3 rounded-xl font-bold transition-all">Contact Us Today</a>
    </div>
</section>

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