<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sanitation Status | SaniBook Initiative</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            dark: '#0f172a',
                            blue: '#2563eb',
                            cyan: '#0891b2',
                            red: '#dc2626',
                            lime: '#65a30d',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style>
        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #ffffff;
        }

        /* Navigation */
        .nav-scrolled {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid #e5e7eb;
        }

        /* Animations */
        .fade-up {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Menu */
        .menu-open {
            transform: translateX(0);
        }

        .menu-closed {
            transform: translateX(100%);
        }

        /* Cards */
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
        }

        /* Progress rings */
        .progress-ring {
            transition: stroke-dashoffset 1s ease-out;
        }

        /* Animated Gradient Text */
        .animated-gradient-text {
            background: linear-gradient(270deg, #dc2626, #2563eb, #0891b2, #dc2626);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradient-flow 6s ease infinite;
        }

        @keyframes gradient-flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }
    </style>
</head>

<body class="antialiased text-slate-900">

    <?php include 'navbar.php'; ?>
    </div>
    </div>

    <main class="pt-10">
        <!-- Hero Section -->
        <header class="relative bg-slate-50 py-20 lg:py-28 overflow-hidden">
            <!-- Background Accents -->
            <div
                class="absolute top-0 right-0 w-[600px] h-[600px] bg-brand-red/5 rounded-full blur-[120px] -z-10 pointer-events-none">
            </div>
            <div
                class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-brand-blue/5 rounded-full blur-[120px] -z-10 pointer-events-none">
            </div>

            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center">

                <div class="text-center lg:text-left fade-up">
                    <span
                        class="inline-block py-1 px-3 rounded-full bg-red-50 border border-red-100 text-brand-red font-bold text-xs uppercase tracking-widest mb-6 animate-pulse">Critical
                        Status</span>

                    <h1
                        class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-6 tracking-tight leading-tight">
                        The Sanitation <br>
                        <span class="animated-gradient-text">Status.</span>
                    </h1>

                    <p class="text-xl text-slate-600 font-medium max-w-lg mx-auto lg:mx-0 leading-relaxed mb-8">
                        A preventable crisis: Only about 31% of Kenyans have access to safely managed sanitation
                        services.
                    </p>

                    <a href="#data"
                        class="inline-flex items-center justify-center px-8 py-4 bg-brand-dark text-white rounded-lg font-bold uppercase tracking-widest hover:bg-brand-blue transition-colors shadow-xl">
                        Browse Data <i class="fa-solid fa-chart-pie ml-2"></i>
                    </a>
                </div>

                <div class="fade-up" style="transition-delay: 0.2s;">
                    <div
                        class="relative rounded-3xl overflow-hidden shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-700 group h-[400px] lg:h-[500px]">
                        <img src="images/sanispace.jpg" alt="Sanitation Status"
                            class="w-full h-full object-cover scale-110 group-hover:scale-100 transition-transform duration-1000">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-brand-dark/80 via-transparent to-transparent">
                        </div>
                        <div class="absolute bottom-8 left-8">
                            <div class="text-white font-bold text-4xl font-display">2025</div>
                            <div class="text-brand-cyan text-sm font-bold uppercase tracking-widest">JMP Report Data
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- County / National Navigation Buttons -->
        <div class="bg-white border-b border-slate-100 py-10">
            <div class="max-w-3xl mx-auto px-4">
                <p class="text-center text-xs font-bold uppercase tracking-widest text-slate-400 mb-6">Explore Data By
                </p>
                <div class="flex flex-col sm:flex-row gap-6 justify-center">

                    <!-- County Button -->
                    <a href="#data"
                        class="group flex flex-col items-center gap-4 bg-slate-50 border border-slate-200 rounded-2xl p-6 hover:border-brand-blue hover:shadow-lg hover:-translate-y-1 transition-all flex-1 max-w-xs mx-auto sm:mx-0">
                        <div
                            class="w-40 h-40 rounded-xl overflow-hidden flex items-center justify-center bg-white group-hover:scale-105 transition-transform duration-300">
                            <img src="images/County_symbol.jpg" alt="County Government"
                                class="w-full h-full object-contain">
                        </div>
                        <span
                            class="font-bold text-lg text-slate-900 group-hover:text-brand-blue transition-colors">County</span>
                        <span class="text-xs text-slate-500">County-level sanitation data</span>
                    </a>

                    <!-- National Button -->
                    <a href="#data"
                        class="group flex flex-col items-center gap-4 bg-slate-50 border border-slate-200 rounded-2xl p-6 hover:border-brand-red hover:shadow-lg hover:-translate-y-1 transition-all flex-1 max-w-xs mx-auto sm:mx-0">
                        <div
                            class="w-40 h-40 rounded-xl overflow-hidden flex items-center justify-center bg-white group-hover:scale-105 transition-transform duration-300">
                            <img src="images/National_government.jpg" alt="National Government"
                                class="w-full h-full object-contain">
                        </div>
                        <span
                            class="font-bold text-lg text-slate-900 group-hover:text-brand-red transition-colors">National</span>
                        <span class="text-xs text-slate-500">National sanitation statistics</span>
                    </a>

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

        <!-- Data Section -->
        <section id="data" class="py-20 px-4 md:px-6 relative z-10">
            <div class="max-w-7xl mx-auto">
                <h2 class="text-center text-3xl md:text-4xl font-display font-bold text-slate-900 mb-12">The Core <span
                        class="text-brand-red">Challenge.</span></h2>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

                    <div
                        class="bg-white rounded-3xl p-8 shadow-lg border border-slate-100 hover:border-brand-blue hover:shadow-blue-100/50 transition-all fade-up">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-50 text-brand-blue flex items-center justify-center text-xl mb-6">
                            <i class="fa-solid fa-shield-halved"></i>
                        </div>
                        <div class="text-5xl md:text-6xl font-display font-bold text-slate-900 mb-2">31<span
                                class="text-brand-blue text-3xl md:text-4xl">%</span></div>
                        <h4 class="font-bold text-lg text-slate-800">Safely Managed</h4>
                        <p class="text-slate-500 text-sm mt-2 leading-relaxed">Access to services that ensure hygienic
                            separation of excreta from human contact.</p>
                    </div>

                    <div class="bg-white rounded-3xl p-8 shadow-lg border border-slate-100 hover:border-brand-red hover:shadow-red-100/50 transition-all fade-up"
                        style="transition-delay: 0.1s;">
                        <div
                            class="w-12 h-12 rounded-full bg-red-50 text-brand-red flex items-center justify-center text-xl mb-6">
                            <i class="fa-solid fa-triangle-exclamation"></i>
                        </div>
                        <div class="text-5xl md:text-6xl font-display font-bold text-slate-900 mb-2">11.5<span
                                class="text-brand-red text-3xl md:text-4xl">%</span></div>
                        <h4 class="font-bold text-lg text-slate-800">Open Defecation</h4>
                        <p class="text-slate-500 text-sm mt-2 leading-relaxed">Rural populations contaminating land and
                            water sources due to lack of facilities.</p>
                    </div>

                    <div class="bg-white rounded-3xl p-8 shadow-lg border border-slate-100 hover:border-orange-400 hover:shadow-orange-100/50 transition-all fade-up"
                        style="transition-delay: 0.2s;">
                        <div
                            class="w-12 h-12 rounded-full bg-orange-50 text-orange-500 flex items-center justify-center text-xl mb-6">
                            <i class="fa-solid fa-users-rectangle"></i>
                        </div>
                        <div class="text-5xl md:text-6xl font-display font-bold text-slate-900 mb-2">34<span
                                class="text-orange-500 text-3xl md:text-4xl">%</span></div>
                        <h4 class="font-bold text-lg text-slate-800">School Sanitation</h4>
                        <p class="text-slate-500 text-sm mt-2 leading-relaxed">
                            1/3 of Kenya Schools lack basic Sanitation (WHO/UNICEF JMP 2024/2025 Updates)
                        </p>
                    </div>

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

        <!-- Two Worlds Section -->
        <section class="py-24 bg-gradient-to-b from-slate-50 to-white relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">

                <div class="text-center mb-10 fade-up">
                    <h2 class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-4">
                        A Tale of <span class="text-brand-blue">Two Worlds.</span>
                    </h2>
                    <p class="text-slate-600 max-w-2xl mx-auto text-lg">The crisis manifests differently depending on
                        geography. The fight against disease is ultimately a fight against fecal waste.</p>
                </div>

                <div class="flex justify-center mb-12 fade-up">
                    <div class="bg-white p-1.5 rounded-full shadow-lg border border-slate-100 inline-flex relative">
                        <div id="toggle-bg"
                            class="absolute top-1.5 left-1.5 w-[calc(50%-6px)] h-[calc(100%-12px)] bg-brand-dark rounded-full transition-all duration-300">
                        </div>
                        <button id="rural-btn"
                            class="relative z-10 px-8 py-3 rounded-full text-sm font-bold uppercase tracking-widest text-white transition-colors duration-300 w-40">Rural</button>
                        <button id="urban-btn"
                            class="relative z-10 px-8 py-3 rounded-full text-sm font-bold uppercase tracking-widest text-slate-500 transition-colors duration-300 w-40">Urban</button>
                    </div>
                </div>

                <div
                    class="bg-white/80 backdrop-blur-md p-8 md:p-12 rounded-3xl border border-slate-200 shadow-xl transition-all duration-500 min-h-[500px] flex items-center fade-up">

                    <div id="rural-view" class="grid md:grid-cols-2 gap-12 items-center w-full">
                        <div>
                            <span class="text-brand-red font-bold uppercase tracking-widest text-xs mb-3 block">The
                                Challenge</span>
                            <h3 class="text-3xl font-display font-bold text-slate-900 mb-4">The Crisis of Absence</h3>
                            <p class="text-slate-600 text-lg leading-relaxed mb-6">
                                In Kenya’s informal settlements, the sanitation deficit acts as a <strong
                                    class="text-slate-900">structural bottleneck</strong> that suppresses national
                                economic potential. By failing to capture the <strong class="text-slate-900">5.5x return
                                    on investment</strong> generated by clean infrastructure, the state incurs a heavy
                                fiscal burden through lost productivity and escalating healthcare costs. Ultimately, the
                                "weakest link" theory suggests that Nairobi’s economic resilience is tethered to its
                                slums; without targeted sanitation reform, broader urban prosperity remains fragile and
                                prone to systemic public health shocks.
                            </p>
                            <div class="flex flex-wrap gap-3">
                                <span
                                    class="px-3 py-1 bg-red-50 text-brand-red text-xs font-bold rounded-full border border-red-100">High
                                    Contamination</span>
                                <span
                                    class="px-3 py-1 bg-blue-50 text-brand-blue text-xs font-bold rounded-full border border-blue-100">Water
                                    Security Risk</span>
                            </div>
                        </div>
                        <div class="relative h-64 md:h-96 rounded-2xl overflow-hidden shadow-lg group">
                            <img src="images/ch2_access_gaps.jpg" alt="Rural Context"
                                class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                        </div>
                    </div>

                    <div id="urban-view" class="grid md:grid-cols-2 gap-12 items-center w-full hidden">
                        <div>
                            <span class="text-orange-500 font-bold uppercase tracking-widest text-xs mb-3 block">The
                                Challenge</span>
                            <h3 class="text-3xl font-display font-bold text-slate-900 mb-4">Breaking the Cycle</h3>
                            <p class="text-slate-600 text-lg leading-relaxed mb-6">
                                "Poor sanitation is a 'powerful brake' on potential, claiming <strong
                                    class="text-red-600">23,000 lives annually</strong>. Behind the <strong
                                    class="text-brand-blue">$324M economic loss</strong> lies a deeper crisis of
                                dignity. Addressing this gap stops the drain on our economy."
                            </p>
                            <div class="flex flex-wrap gap-3">
                                <span
                                    class="px-3 py-1 bg-orange-50 text-orange-600 text-xs font-bold rounded-full border border-orange-100">Economic
                                    Drain</span>
                                <span
                                    class="px-3 py-1 bg-purple-50 text-purple-600 text-xs font-bold rounded-full border border-purple-100">Health
                                    Crisis</span>
                            </div>
                        </div>
                        <div class="relative h-64 md:h-96 rounded-2xl overflow-hidden shadow-lg group">
                            <img src="images/sanispace.jpg" alt="Urban Context"
                                class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                        </div>
                    </div>

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

        <!-- Investment Section -->
        <section class="py-24 bg-white border-t border-slate-100">
            <div class="max-w-7xl mx-auto px-6 text-center">
                <h2 class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-6 fade-up">
                    Investing In <span class="text-brand-blue">Dignity.</span>
                </h2>
                <p class="text-slate-500 mb-16 max-w-2xl mx-auto text-lg fade-up">
                    Sessional Paper No. 7 of 2024 is the blueprint for achieving safely managed sanitation for all by
                    2030.
                </p>

                <div class="grid md:grid-cols-3 gap-8">
                    <div
                        class="p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:shadow-xl transition-all group fade-up">
                        <div
                            class="w-14 h-14 mx-auto bg-white rounded-full flex items-center justify-center text-2xl text-blue-600 shadow-sm mb-6 group-hover:scale-110 transition-transform">
                            <i class="fa-solid fa-link"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-900 mb-3">End-to-End Service</h3>
                        <p class="text-slate-500 text-sm leading-relaxed">Shifts focus from basic access to managing the
                            entire service chain—from safe containment to integration.</p>
                    </div>

                    <div class="p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:shadow-xl transition-all group fade-up"
                        style="transition-delay: 0.1s;">
                        <div
                            class="w-14 h-14 mx-auto bg-white rounded-full flex items-center justify-center text-2xl text-green-600 shadow-sm mb-6 group-hover:scale-110 transition-transform">
                            <i class="fa-solid fa-coins"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-900 mb-3">Financing & Gov</h3>
                        <p class="text-slate-500 text-sm leading-relaxed">Addresses sanitation financing challenges,
                            promoting Public-Private Partnerships (PPPs) and governance.</p>
                    </div>

                    <div class="p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:shadow-xl transition-all group fade-up"
                        style="transition-delay: 0.2s;">
                        <div
                            class="w-14 h-14 mx-auto bg-white rounded-full flex items-center justify-center text-2xl text-amber-500 shadow-sm mb-6 group-hover:scale-110 transition-transform">
                            <i class="fa-solid fa-leaf"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-900 mb-3">Resilience</h3>
                        <p class="text-slate-500 text-sm leading-relaxed">Commits to leveraging climate-resilient
                            technologies and promoting gender and disability-friendly facilities.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Move Hearts Section -->
        <section class="py-24 relative overflow-hidden bg-brand-dark text-white">
            <!-- Background Image Overlay -->
            <div class="absolute inset-0 bg-[url('images/Launch Gallery/launch_05.jpg')] bg-cover bg-center opacity-10">
            </div>
            <div class="absolute inset-0 bg-gradient-to-r from-brand-dark via-brand-dark/90 to-transparent"></div>

            <div class="max-w-7xl mx-auto px-6 relative z-10 grid lg:grid-cols-2 gap-12 items-center">

                <div class="fade-up">
                    <h2 class="text-4xl font-display font-bold mb-6">Move Hearts & <br> <span
                            class="text-brand-cyan">Minds.</span></h2>
                    <p class="text-slate-400 text-lg mb-8 leading-relaxed">
                        Join our revolutionary visual campaign. Let your single, powerful photo be the spark that
                        ignites a global movement. Give a voice to the voiceless.
                    </p>
                    <div class="flex items-center gap-4 text-sm text-slate-500">
                        <span><i class="fa-solid fa-camera text-brand-red mr-2"></i> Impact Photography</span>
                        <span class="w-1 h-1 bg-slate-700 rounded-full"></span>
                        <span><i class="fa-solid fa-globe text-brand-blue mr-2"></i> Global Reach</span>
                    </div>
                </div>

                <div class="bg-white/5 backdrop-blur-md border border-white/10 p-8 rounded-3xl fade-up"
                    style="transition-delay: 0.2s;">
                    <form action="#" method="POST" class="space-y-4">
                        <label
                            class="block border-2 border-dashed border-white/20 p-6 rounded-xl text-center hover:bg-white/5 transition-colors cursor-pointer group">
                            <i
                                class="fa-solid fa-cloud-arrow-up text-3xl text-brand-cyan mb-2 group-hover:scale-110 transition-transform"></i>
                            <p class="text-sm font-bold">Upload Photograph</p>
                            <p class="text-xs text-slate-400">JPG, PNG up to 10MB</p>
                            <input type="file" class="hidden">
                        </label>

                        <div class="space-y-4">
                            <div class="relative">
                                <select name="county" id="county_select" required
                                    class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-blue transition-colors text-white appearance-none">
                                    <option value="" class="text-slate-900">Select County</option>
                                </select>
                                <div
                                    class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
                                    <i class="fa-solid fa-chevron-down text-xs"></i>
                                </div>
                            </div>
                            <textarea rows="2" placeholder="Brief Caption..."
                                class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-blue transition-colors placeholder-slate-500 text-white"></textarea>
                        </div>

                        <button type="submit"
                            class="w-full py-4 bg-brand-red rounded-xl font-bold uppercase tracking-widest hover:bg-red-600 transition-colors shadow-lg">
                            Submit Contribution
                        </button>
                    </form>
                </div>

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

    <!-- Footer -->
    <?php include 'footer.php'; ?>

    <script>
        // Intersection Observer for fade-up animations
        document.addEventListener('DOMContentLoaded', () => {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            });

            document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
        });

        // --- Context Toggle Script ---
        const ruralBtn = document.getElementById('rural-btn');
        const urbanBtn = document.getElementById('urban-btn');
        const ruralView = document.getElementById('rural-view');
        const urbanView = document.getElementById('urban-view');
        const toggleBg = document.getElementById('toggle-bg');

        ruralBtn.addEventListener('click', () => {
            ruralView.classList.remove('hidden'); urbanView.classList.add('hidden');
            toggleBg.style.left = '6px';
            ruralBtn.classList.add('text-white'); ruralBtn.classList.remove('text-slate-500');
            urbanBtn.classList.remove('text-white'); urbanBtn.classList.add('text-slate-500');
        });

        urbanBtn.addEventListener('click', () => {
            urbanView.classList.remove('hidden'); ruralView.classList.add('hidden');
            // Approx shift for urban button
            toggleBg.style.left = 'calc(50% + 6px)';
            urbanBtn.classList.add('text-white'); urbanBtn.classList.remove('text-slate-500');
            ruralBtn.classList.remove('text-white'); ruralBtn.classList.add('text-slate-500');
        });
    </script>
    <!-- Kenya Counties Logic -->
    <script src="js/kenya_counties.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const countySelect = document.getElementById('county_select');

            if (countySelect && typeof kenyaData !== 'undefined') {
                // Populate Counties
                Object.keys(kenyaData).sort().forEach(county => {
                    const option = document.createElement('option');
                    option.value = county;
                    option.textContent = county;
                    option.className = "text-slate-900"; // Ensure visibility on white bg
                    countySelect.appendChild(option);
                });
            }
        });
    </script>
</body>

</html>