<?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>Why The SaniBook | The Knowledge Nexus</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);
        }
    </style>
</head>

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

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

    <main class="pt-20">
        <!-- Header 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-blue/5 rounded-full blur-[120px] -z-10 pointer-events-none">
            </div>
            <div
                class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-brand-lime/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 text-center fade-up">
                <span
                    class="inline-block py-1 px-3 rounded-full bg-brand-blue/10 text-brand-blue font-semibold text-xs uppercase tracking-widest mb-6 border border-brand-blue/20">Mission
                    Critical</span>

                <h1
                    class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-6 tracking-tight leading-tight">
                    Why The <span class="text-brand-blue">SaniBook?</span>
                </h1>

                <p class="text-xl text-slate-600 font-medium max-w-3xl mx-auto leading-relaxed mb-12">
                    Revolutionizing sanitation information by turning fragmented interventions into a documented <span
                        class="text-slate-900 font-bold underline decoration-brand-lime decoration-4 underline-offset-4">national
                        blueprint.</span>
                </p>
            </div>
        </header>

        <!-- Problem Section -->
        <section class="py-16 px-4 md:px-6 relative z-10">
            <div class="max-w-7xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6">

                    <!-- Main Card -->
                    <div class="md:col-span-12 lg:col-span-7 fade-up">
                        <div
                            class="h-full bg-white rounded-3xl p-8 md:p-12 shadow-xl border border-slate-100 relative overflow-hidden group">
                            <div
                                class="absolute top-0 right-0 w-64 h-64 bg-brand-red/5 rounded-full blur-3xl group-hover:bg-brand-red/10 transition-colors duration-500">
                            </div>

                            <h3 class="text-2xl md:text-3xl font-display font-bold text-slate-900 mb-6">
                                The Problem: <span class="text-brand-red">Invisible Success.</span>
                            </h3>
                            <p class="text-slate-600 text-lg leading-relaxed mb-8">
                                Kenya's sanitation solutions are working, but they remain isolated. Despite countless
                                interventions, <strong class="text-slate-900">untracked/hidden data</strong> prevents
                                learning. We are compiling these efforts into a unified knowledge nexus to inform
                                national policy.
                            </p>

                            <div class="flex items-center gap-4">
                                <div class="h-px flex-1 bg-slate-200"></div>
                                <span class="text-xs font-bold uppercase tracking-widest text-slate-400">Bridging the
                                    Gap</span>
                                <div class="h-px flex-1 bg-slate-200"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Image Card -->
                    <div class="md:col-span-6 lg:col-span-5 fade-up" style="transition-delay: 0.1s;">
                        <div class="h-full rounded-3xl shadow-xl relative overflow-hidden group min-h-[300px]">
                            <img src="images/mapping-actors.jpg" alt="Community Participation"
                                class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-brand-dark/90 via-brand-dark/30 to-transparent">
                            </div>

                            <div class="absolute bottom-8 left-8 right-8 z-10">
                                <i class="fa-solid fa-layer-group text-3xl text-brand-lime mb-4"></i>
                                <h4 class="text-white font-display font-bold text-2xl mb-1">Unifying Data</h4>
                                <p class="text-slate-300 text-sm">From isolated silos to a collective national
                                    authority.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Digital Nexus -->
                    <div class="md:col-span-6 lg:col-span-4 fade-up" style="transition-delay: 0.2s;">
                        <div
                            class="h-full bg-white rounded-3xl p-8 shadow-lg border border-slate-100 hover:border-brand-blue transition-colors duration-300 card-hover">
                            <div
                                class="w-12 h-12 rounded-2xl bg-brand-blue/10 text-brand-blue flex items-center justify-center text-xl mb-6">
                                <i class="fa-solid fa-laptop-code"></i>
                            </div>
                            <h4 class="font-bold text-xl text-slate-900 mb-3">Digital Nexus</h4>
                            <p class="text-slate-600 text-sm leading-relaxed">A central digital hub for sharing
                                validated success data and best practices instantly.</p>
                        </div>
                    </div>

                    <!-- National Coordination -->
                    <div class="md:col-span-6 lg:col-span-4 fade-up" style="transition-delay: 0.3s;">
                        <div
                            class="h-full bg-white rounded-3xl p-8 shadow-lg border border-slate-100 hover:border-purple-500 transition-colors duration-300 card-hover">
                            <div
                                class="w-12 h-12 rounded-2xl bg-purple-100 text-purple-600 flex items-center justify-center text-xl mb-6">
                                <i class="fa-solid fa-map-location-dot"></i>
                            </div>
                            <h4 class="font-bold text-xl text-slate-900 mb-3">National Coordination</h4>
                            <p class="text-slate-600 text-sm leading-relaxed">Identifying successful models for
                                replication, creating a shared roadmap for scale.</p>
                        </div>
                    </div>

                    <!-- Maximum Impact -->
                    <div class="md:col-span-6 lg:col-span-4 fade-up" style="transition-delay: 0.4s;">
                        <div
                            class="h-full bg-white rounded-3xl p-8 shadow-lg border border-slate-100 hover:border-brand-lime transition-colors duration-300 card-hover">
                            <div
                                class="w-12 h-12 rounded-2xl bg-brand-lime/10 text-brand-lime flex items-center justify-center text-xl mb-6">
                                <i class="fa-solid fa-bullseye"></i>
                            </div>
                            <h4 class="font-bold text-xl text-slate-900 mb-3">Maximum Impact</h4>
                            <p class="text-slate-600 text-sm leading-relaxed">Scaling for universal access based on
                                evidence.</p>
                        </div>
                    </div>

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

        <!-- Partnership Advantage -->
        <section class="py-20 bg-slate-50 relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="grid lg:grid-cols-2 gap-12 items-center">

                    <div class="fade-up">
                        <h2 class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-4">
                            The Partnership <br> <span class="text-brand-blue">Advantage.</span>
                        </h2>
                        <p class="text-slate-600 text-base mb-8 leading-relaxed max-w-lg">
                            By partnering with us, your organization achieves tangible benefits, investing directly in
                            public health and sustainability.
                        </p>

                        <div
                            class="relative rounded-2xl overflow-hidden shadow-xl border border-slate-200 h-64 w-full group">
                            <img src="images/Strategic Collaboration.jpg" alt="Partners"
                                class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-brand-dark/80 via-transparent to-transparent">
                            </div>
                            <div class="absolute bottom-6 left-6">
                                <span
                                    class="bg-white text-slate-900 text-xs font-bold uppercase px-3 py-1 rounded-full shadow-lg">Strategic
                                    Value</span>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 fade-up">

                        <div
                            class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-all card-hover">
                            <div class="flex items-center gap-3 mb-3">
                                <div
                                    class="w-10 h-10 rounded-lg bg-blue-50 text-brand-blue flex items-center justify-center shrink-0">
                                    <i class="fa-solid fa-hand-holding-heart"></i>
                                </div>
                                <h4 class="text-slate-900 font-bold text-base">Enhanced CSR</h4>
                            </div>
                            <p class="text-slate-500 text-sm leading-relaxed">Recognized as a champion of public health,
                                aligning to national sanitation goals.</p>
                        </div>

                        <div
                            class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-all card-hover">
                            <div class="flex items-center gap-3 mb-3">
                                <div
                                    class="w-10 h-10 rounded-lg bg-purple-50 text-purple-600 flex items-center justify-center shrink-0">
                                    <i class="fa-solid fa-eye"></i>
                                </div>
                                <h4 class="text-slate-900 font-bold text-base">Visibility</h4>
                            </div>
                            <p class="text-slate-500 text-sm leading-relaxed">Prominently feature as a market leader in
                                sanitation.</p>
                        </div>

                        <div
                            class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-all card-hover">
                            <div class="flex items-center gap-3 mb-3">
                                <div
                                    class="w-10 h-10 rounded-lg bg-brand-lime/10 text-brand-lime flex items-center justify-center shrink-0">
                                    <i class="fa-solid fa-chart-line"></i>
                                </div>
                                <h4 class="text-slate-900 font-bold text-base">Demonstrable Impact</h4>
                            </div>
                            <p class="text-slate-500 text-sm leading-relaxed">Contribute to evidence based attributable
                                and verifiable data for sector knowledge.</p>
                        </div>

                        <div
                            class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-all card-hover">
                            <div class="flex items-center gap-3 mb-3">
                                <div
                                    class="w-10 h-10 rounded-lg bg-red-50 text-brand-red flex items-center justify-center shrink-0">
                                    <i class="fa-solid fa-lightbulb"></i>
                                </div>
                                <h4 class="text-slate-900 font-bold text-base">Leadership</h4>
                            </div>
                            <p class="text-slate-500 text-sm leading-relaxed">Position your organization as an innovator
                                dedicated to evidence-based solutions.</p>
                        </div>

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

        <!-- CTA Section -->
        <section class="py-24 bg-white text-center">
            <div class="max-w-4xl mx-auto px-4 fade-up">
                <h3 class="text-3xl md:text-5xl font-display font-bold text-slate-900 mb-6">
                    Invest In <span class="text-brand-blue">The Future.</span>
                </h3>

                <div class="mb-8">
                    <span
                        class="inline-block py-2 px-4 border-y border-slate-200 text-brand-blue font-bold text-sm md:text-base uppercase tracking-widest">
                        Sanibook: Synergising Partnerships to Fast Track SDG 6.2 by 2030
                    </span>
                </div>

                <p class="text-xl text-slate-600 mb-10 max-w-2xl mx-auto">
                    Download the Synopsis or contact our partnership team to discuss how your investment can drive
                    national change.
                </p>

                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="SaniBook_Synopsis_2025.pdf"
                        class="inline-flex items-center justify-center px-8 py-4 bg-brand-red text-white font-bold rounded-lg shadow-lg hover:bg-red-700 transition-colors">
                        Read Synopsis <i class="fa-solid fa-file-pdf ml-2"></i>
                    </a>
                    <a href="contact.php"
                        class="inline-flex items-center justify-center px-8 py-4 bg-white border border-slate-200 text-slate-900 font-bold rounded-lg hover:bg-slate-50 transition-colors">
                        Contact Partnerships
                    </a>
                </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));
        });
    </script>
</body>

</html>