<?php
/**
 * Vision — static page (no admin)
 */
include_once 'header.php';
$site_name = get_site_setting('site_name');
?>

<!-- Hero Section -->
<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>
            <a href="about.php" class="hover:text-white">About</a>
            <span class="mx-2 text-slate-500">/</span> Vision
        </nav>
        <h1 class="text-3xl md:text-5xl font-black uppercase">Our Vision</h1>
        <div class="w-16 h-1 bg-secondary mx-auto mt-4"></div>
    </div>
</section>

<!-- Core Vision Statement -->
<section class="py-16 md:py-24 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6 text-center">
        <div class="w-16 h-16 mx-auto rounded-2xl bg-blue-50 text-primary flex items-center justify-center text-2xl">
            <i class="fa-solid fa-eye"></i>
        </div>
        <h2 class="text-2xl md:text-3xl font-black text-primary uppercase">Bangladesh’s Most Trusted Engineering Partner</h2>
        <p class="text-gray-600 leading-relaxed text-base md:text-lg">
            We envision a future where every critical facility in Bangladesh has dependable vertical transport and backup power —
            installed, maintained, and supported by local experts who never compromise on safety.
        </p>
        <p class="text-gray-600 leading-relaxed">
            <?php echo htmlspecialchars($site_name); ?> aims to lead through innovation, honest service, and nationwide coverage
            that businesses and communities can count on for decades.
        </p>
    </div>
</section>

<!-- Section 2: Pillars of Our Vision -->
<section class="py-16 bg-slate-50 border-y border-slate-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-12">
            <h2 class="text-2xl md:text-3xl font-black text-primary uppercase">Pillars of Our Vision</h2>
            <p class="text-gray-500 text-xs uppercase font-bold tracking-wider mt-1">The strategic foundations driving our company forward</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Pillar 1 -->
            <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                <div class="w-12 h-12 rounded-xl bg-blue-50 text-primary flex items-center justify-center text-xl">
                    <i class="fa-solid fa-city"></i>
                </div>
                <h3 class="text-lg font-bold text-slate-900 uppercase">Smart Urban Mobility</h3>
                <p class="text-gray-600 text-sm leading-relaxed">
                    Pioneering space-saving and highly energy-efficient elevator designs that facilitate comfortable vertical transit inside commercial complexes and housing projects.
                </p>
            </div>
            <!-- Pillar 2 -->
            <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                <div class="w-12 h-12 rounded-xl bg-blue-50 text-primary flex items-center justify-center text-xl">
                    <i class="fa-solid fa-leaf"></i>
                </div>
                <h3 class="text-lg font-bold text-slate-900 uppercase">Sustainable Power</h3>
                <p class="text-gray-600 text-sm leading-relaxed">
                    Expanding hybrid and off-grid solar energy systems to minimize the country's carbon footprint and lessen dependency on conventional fuel sources.
                </p>
            </div>
            <!-- Pillar 3 -->
            <div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm space-y-4">
                <div class="w-12 h-12 rounded-xl bg-blue-50 text-primary flex items-center justify-center text-xl">
                    <i class="fa-solid fa-gears"></i>
                </div>
                <h3 class="text-lg font-bold text-slate-900 uppercase">Engineering Excellence</h3>
                <p class="text-gray-600 text-sm leading-relaxed">
                    Cultivating local technical skills by implementing thorough safety protocols and modern diagnostic tools across all installation and servicing procedures.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Section 3: Roadmap to 2030 -->
<section class="py-16 md:py-24 bg-slate-950 text-white relative overflow-hidden">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(30,58,138,0.2),transparent_50%)]"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="text-xs font-bold uppercase tracking-widest text-sky-400">Future Milestones</span>
            <h2 class="text-2xl md:text-4xl font-black uppercase mt-1">Our Roadmap to 2030</h2>
            <p class="text-slate-400 text-sm mt-2">Planned phases of expansion, service integration, and sustainable transitions.</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
            <!-- Phase 1 -->
            <div class="bg-slate-900/60 border border-slate-800 p-8 rounded-2xl space-y-4">
                <div class="inline-block px-3 py-1 bg-sky-500/10 text-sky-400 rounded-lg text-xs font-bold uppercase tracking-wide">
                    2026 - 2027
                </div>
                <h3 class="text-xl font-bold uppercase text-white">Service Expansion</h3>
                <p class="text-slate-400 text-sm leading-relaxed">
                    Extending our rapid-response service grid across all major industrial divisions in Bangladesh, keeping client emergency support responsive and highly accessible.
                </p>
            </div>
            <!-- Phase 2 -->
            <div class="bg-slate-900/60 border border-slate-800 p-8 rounded-2xl space-y-4">
                <div class="inline-block px-3 py-1 bg-indigo-500/10 text-indigo-400 rounded-lg text-xs font-bold uppercase tracking-wide">
                    2028 - 2029
                </div>
                <h3 class="text-xl font-bold uppercase text-white">Eco-System Integration</h3>
                <p class="text-slate-400 text-sm leading-relaxed">
                    Expanding our clean-energy portfolio by introducing hybrid solar systems alongside our industrial generator setups to maximize fuel savings.
                </p>
            </div>
            <!-- Phase 3 -->
            <div class="bg-slate-900/60 border border-slate-800 p-8 rounded-2xl space-y-4">
                <div class="inline-block px-3 py-1 bg-emerald-500/10 text-emerald-400 rounded-lg text-xs font-bold uppercase tracking-wide">
                    2030 & Beyond
                </div>
                <h3 class="text-xl font-bold uppercase text-white">AI-Driven Diagnostics</h3>
                <p class="text-slate-400 text-sm leading-relaxed">
                    Implementing smart, connected IoT interfaces across all operational elevators to utilize predictive maintenance algorithms and improve travel safety.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Section 4: Environmental Commitment -->
<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-12 gap-12 items-center">
            <div class="lg:col-span-5 bg-gradient-to-br from-slate-900 to-blue-950 p-8 rounded-3xl text-white space-y-4 relative overflow-hidden">
                <div class="absolute -right-12 -bottom-12 w-48 h-48 bg-emerald-500/10 rounded-full blur-3xl"></div>
                <div class="w-10 h-10 rounded-lg bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-lg">
                    <i class="fa-solid fa-seedling"></i>
                </div>
                <h3 class="text-lg font-bold uppercase">Eco-Performance</h3>
                <p class="text-slate-300 text-sm leading-relaxed">
                    Modern structures require systems that optimize electricity usage. Our standard elevator systems consume significantly less idle-state power, helping building managers handle operating costs and support green protocols.
                </p>
            </div>
            <div class="lg:col-span-7 space-y-6">
                <div class="inline-block px-3 py-1 bg-emerald-50 text-xs font-bold text-emerald-700 rounded-full uppercase tracking-wider">
                    Sustainability Commitments
                </div>
                <h2 class="text-2xl md:text-3xl font-black text-primary uppercase">Responsible Power For Tomorrow's Spaces</h2>
                <p class="text-gray-600 leading-relaxed">
                    We realize that urbanization is rising rapidly in Bangladesh. Our long-term focus prioritizes supplying high-efficiency electrical setups, including voltage transformers and commercial-grade solar power generators.
                </p>
                <p class="text-gray-600 leading-relaxed">
                    Through transparent partnerships and dependable technology solutions, we strive to build a stable infrastructural path that keeps high-rises and manufacturing zones reliably powered.
                </p>
                <div class="pt-2">
                    <a href="about.php" class="inline-flex items-center bg-primary hover:bg-secondary text-white px-7 py-3.5 rounded-xl font-bold transition-all">
                        Company Profile <i class="fa-solid fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

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