<?php
session_start();
require_once 'config.php';
$is_logged_in = isset($_SESSION['user_id']);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SaniBook Kenya | Volume 01: Strategic Compass</title>
    <meta name="description" content="Uniting for Kenya's Sanitation Future.">
    <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=Montserrat:wght@700;800;900&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?plugins=forms,typography,aspect-ratio,line-clamp"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        wash: {
                            teal: '#008080',
                            navy: '#001F3F',
                            terracotta: '#E2725B',
                            ochre: '#CC7722',
                            gold: '#D4AF37',
                        },
                        brand: {
                            dark: '#023047',
                            teal: '#219EBC',
                            gold: '#D4AF37',
                            red: '#dc2626',
                            lime: '#65a30d',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'Arial', 'system-ui', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif'],
                        heading: ['Montserrat', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        .fade-up {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

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

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

        /* === Book Idle Float === */
        @keyframes book-float {

            0%,
            100% {
                transform: translateY(5px);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        .book-container {
            position: relative;
        }

        .book-3d {
            display: block;
            position: relative;
            cursor: pointer;
            animation: book-float 3s ease-in-out infinite;
            will-change: transform;
        }

        .book-body {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
            transition: box-shadow 0.4s ease-out;
        }

        /* === Light Sweep Overlay (on hover) === */
        @keyframes light-sweep {
            0% {
                transform: translateX(-100%) skewX(-15deg);
            }

            100% {
                transform: translateX(200%) skewX(-15deg);
            }
        }

        .book-light-sweep {
            position: absolute;
            top: -10%;
            left: -10%;
            width: 40%;
            height: 120%;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.4) 50%,
                    transparent 100%);
            opacity: 0;
            pointer-events: none;
            z-index: 10;
        }

        .book-3d:hover .book-light-sweep {
            animation: light-sweep 1.2s ease-out;
            opacity: 1;
        }

        /* === Sparkle Particles === */
        @keyframes sparkle {

            0%,
            100% {
                opacity: 0;
                transform: scale(0);
            }

            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .book-sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, #FFD700 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
            z-index: 11;
        }

        .book-3d:hover .book-sparkle {
            animation: sparkle 1.5s ease-in-out infinite;
        }

        .book-sparkle:nth-child(2) {
            top: 20%;
            left: 30%;
            animation-delay: 0s;
        }

        .book-sparkle:nth-child(3) {
            top: 60%;
            left: 70%;
            animation-delay: 0.3s;
        }

        .book-sparkle:nth-child(4) {
            top: 40%;
            left: 50%;
            animation-delay: 0.6s;
        }

        .book-sparkle:nth-child(5) {
            top: 75%;
            left: 25%;
            animation-delay: 0.9s;
        }

        .book-sparkle:nth-child(6) {
            top: 15%;
            left: 80%;
            animation-delay: 1.2s;
        }

        /* === Shadow & Glow on hover === */
        .book-3d:hover .book-body {
            box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.4);
        }

        .book-3d:hover .book-glow {
            background: rgba(212, 175, 55, 0.5);
            transform: scale(1.1);
        }

        /* === Click feedback === */
        .book-3d:active {
            transform: scale(0.95);
            animation: none;
        }

        .book-3d.book-clicked {
            transform: scale(0.95);
            animation: none;
            transition: transform 0.15s ease-out;
        }

        /* === Tooltip === */
        .book-tooltip {
            position: absolute;
            top: -52px;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: #008080;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            font-weight: 600;
            padding: 8px 18px;
            border-radius: 8px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
            z-index: 30;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }

        .book-tooltip::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px 6px 0 6px;
            border-style: solid;
            border-color: #008080 transparent transparent transparent;
        }

        .book-3d:hover .book-tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* === Reduced Motion === */
        @media (prefers-reduced-motion: reduce) {

            .book-3d,
            .book-body,
            .book-tooltip,
            .book-glow,
            .book-light-sweep,
            .book-sparkle {
                animation: none !important;
                transition: none !important;
            }
        }
    </style>
</head>

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

    <!-- Navbar -->
    <?php include 'navbar.php'; ?>

    <!-- Hero Banner Section (Commercial & Partners) -->
    <header class="relative pt-10 pb-0 overflow-hidden bg-gradient-to-br from-slate-800 to-slate-900">
        <!-- Background Image -->
        <div class="absolute inset-0 z-0">
            <img src="images/ch1_why_matters.jpg" alt="Industrial Sanitation"
                class="w-full h-full object-cover opacity-30">
            <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-transparent"></div>
        </div>

        <!-- Content -->
        <div class="relative z-10 max-w-7xl mx-auto px-4">
            <!-- Hero Heading -->
            <h1
                class="font-heading font-black text-xl lg:text-2xl text-white mb-6 leading-tight text-center fade-up visible">
                Welcome to Sanibook: <span class="text-wash-gold">The pulse of Kenya's sanitation revolution.</span>
            </h1>



            <div class="flex flex-col-reverse lg:flex-row gap-8 items-center justify-center min-h-[420px]">
                <!-- Left: Buttons (stacked, compact) -->
                <div class="flex flex-col gap-3 fade-up visible shrink-0">
                    <a href="<?php echo $is_logged_in ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                        class="inline-flex items-center gap-2 px-5 py-3 bg-wash-teal text-white rounded-xl hover:bg-teal-700 transition-all shadow-lg font-bold text-sm">
                        <i class="fa-solid fa-plus-circle"></i>Submit Data</a>
                    <a href="explore.php"
                        class="inline-flex items-center gap-2 px-5 py-3 bg-wash-ochre text-white rounded-xl hover:bg-yellow-700 transition-all shadow-lg font-bold text-sm">
                        <i class="fa-solid fa-users"></i>Explore Directory</a>
                    <a href="signup.php"
                        class="inline-flex items-center gap-2 px-5 py-3 bg-transparent border-2 border-white text-white rounded-xl hover:bg-white/10 transition-all shadow-lg font-bold text-sm">
                        <i class="fa-solid fa-user-plus"></i>Register</a>
                </div>

                <!-- Right: Book (Prominent, Preserved Effect) -->
                <div class="flex justify-center book-container fade-up visible flex-1">
                    <a href="service-chain.php" class="book-3d relative block w-full max-w-lg" id="nav-book">
                        <!-- Outer Glow -->
                        <div
                            class="book-glow absolute -inset-4 bg-brand-gold/30 blur-2xl rounded-full animate-pulse transition-all duration-500">
                        </div>

                        <!-- Book Body with Overlays -->
                        <div class="book-body relative">
                            <!-- Book Image -->
                            <img src="images/sanibook_cover_3D.png" alt="SaniBook Volume 1 Cover"
                                class="relative drop-shadow-2xl w-full object-contain">

                            <!-- Light Sweep Effect -->
                            <div class="book-light-sweep"></div>

                            <!-- Sparkle Particles -->
                            <div class="book-sparkle"></div>
                            <div class="book-sparkle"></div>
                            <div class="book-sparkle"></div>
                            <div class="book-sparkle"></div>
                            <div class="book-sparkle"></div>
                        </div>

                        <!-- Persistent CTA Badge -->
                        <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 z-20 w-max">
                            <a href="#how-to-use"
                                class="flex items-center gap-3 px-6 py-3 bg-brand-dark text-brand-gold font-display font-bold rounded-full shadow-xl border-4 border-white hover:bg-slate-800 transition-colors">
                                <i class="fa-solid fa-book-open"></i>
                                Navigate SaniBook
                            </a>
                        </div>

                        <!-- Tooltip -->
                        <div class="book-tooltip">Explore Volume 01</div>
                    </a>
                </div>
            </div>

            <!-- Subtitle below hero content -->
            <p
                class="text-lg lg:text-xl text-slate-300 text-center mt-8 max-w-3xl mx-auto leading-relaxed fade-up visible">
                Uniting local genius to turn fragmented efforts into a unified force for change
            </p>
        </div>

        <!-- Trusted Partners Footer Bar -->
        <div class="relative z-10 mt-16 bg-white/10 backdrop-blur-md border-t border-white/20 py-6">
            <div class="max-w-7xl mx-auto px-4">
                <div class="flex items-center justify-between flex-wrap gap-6">
                    <h3 class="font-heading font-bold text-wash-gold text-lg uppercase tracking-wider">
                        SaniBook Champions
                    </h3>
                    <div class="flex items-center gap-8 flex-wrap">
                        <!-- Logo Placeholders -->
                        <div class="h-12 w-32 bg-white/20 rounded-lg flex items-center justify-center">
                            <span class="text-white/60 text-xs font-bold">PARTNER 1</span>
                        </div>
                        <div class="h-12 w-32 bg-white/20 rounded-lg flex items-center justify-center">
                            <span class="text-white/60 text-xs font-bold">PARTNER 2</span>
                        </div>
                        <div class="h-12 w-32 bg-white/20 rounded-lg flex items-center justify-center">
                            <span class="text-white/60 text-xs font-bold">PARTNER 3</span>
                        </div>
                        <div class="h-12 w-32 bg-white/20 rounded-lg flex items-center justify-center">
                            <span class="text-white/60 text-xs font-bold">PARTNER 4</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- ====== HOW TO USE SANIBOOK — 3-Step Guide ====== -->
    <section id="how-to-use" class="py-16 bg-white border-b border-slate-100">
        <div class="max-w-5xl mx-auto px-4">
            <p class="text-center text-sm font-semibold uppercase tracking-widest text-brand-teal mb-3">Getting Started
            </p>
            <h2 class="text-center font-heading font-black text-3xl md:text-4xl text-brand-dark mb-4">How to Use
                SaniBook</h2>
            <p class="text-center text-slate-500 max-w-2xl mx-auto mb-12 text-base leading-relaxed">
                SaniBook is Kenya's central knowledge hub for the sanitation sector. Here's how you can get the most out
                of it in three simple steps.
            </p>

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

                <!-- Step 1 -->
                <div
                    class="relative bg-slate-50 rounded-2xl p-8 text-center hover:shadow-lg transition-shadow duration-300 group">
                    <div
                        class="w-14 h-14 rounded-full bg-brand-teal/10 flex items-center justify-center mx-auto mb-5 group-hover:bg-brand-teal/20 transition-colors">
                        <i class="fa-solid fa-magnifying-glass text-2xl text-brand-teal"></i>
                    </div>
                    <span
                        class="inline-block mb-3 text-xs font-black uppercase tracking-widest text-brand-teal bg-brand-teal/10 px-3 py-1 rounded-full">Step
                        1</span>
                    <h3 class="font-heading font-bold text-xl text-brand-dark mb-3">Explore the Directory</h3>
                    <p class="text-slate-500 text-sm leading-relaxed">Browse organisations operating across Kenya's
                        sanitation value chain — from capture and containment to treatment and reuse. Use the search in
                        the navbar to find a specific actor, technology, or county.</p>
                    <a href="explore.php"
                        class="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-brand-teal hover:underline">
                        Browse Directory <i class="fa-solid fa-arrow-right text-xs"></i>
                    </a>
                </div>

                <!-- Step 2 -->
                <div
                    class="relative bg-slate-50 rounded-2xl p-8 text-center hover:shadow-lg transition-shadow duration-300 group">
                    <div
                        class="w-14 h-14 rounded-full bg-wash-ochre/10 flex items-center justify-center mx-auto mb-5 group-hover:bg-wash-ochre/20 transition-colors">
                        <i class="fa-solid fa-link-slash text-2xl text-wash-ochre"></i>
                    </div>
                    <span
                        class="inline-block mb-3 text-xs font-black uppercase tracking-widest text-wash-ochre bg-wash-ochre/10 px-3 py-1 rounded-full">Step
                        2</span>
                    <h3 class="font-heading font-bold text-xl text-brand-dark mb-3">Navigate the Value Chain</h3>
                    <p class="text-slate-500 text-sm leading-relaxed">Understand how sanitation works end-to-end in
                        Kenya. Explore the Service Chain and Enabling Pillars to see where the gaps are and identify
                        where your organisation fits.</p>
                    <a href="service-chain.php"
                        class="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-wash-ochre hover:underline">
                        View Service Chain <i class="fa-solid fa-arrow-right text-xs"></i>
                    </a>
                </div>

                <!-- Step 3 -->
                <div
                    class="relative bg-slate-50 rounded-2xl p-8 text-center hover:shadow-lg transition-shadow duration-300 group">
                    <div
                        class="w-14 h-14 rounded-full bg-brand-lime/10 flex items-center justify-center mx-auto mb-5 group-hover:bg-brand-lime/20 transition-colors">
                        <i class="fa-solid fa-upload text-2xl text-brand-lime"></i>
                    </div>
                    <span
                        class="inline-block mb-3 text-xs font-black uppercase tracking-widest text-brand-lime bg-brand-lime/10 px-3 py-1 rounded-full">Step
                        3</span>
                    <h3 class="font-heading font-bold text-xl text-brand-dark mb-3">Submit Your Data</h3>
                    <p class="text-slate-500 text-sm leading-relaxed">Are you an organisation working in sanitation?
                        Register and submit your data to be listed in the directory. Your entry helps build the most
                        complete picture of Kenya's sanitation sector.</p>
                    <a href="<?php echo $is_logged_in ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                        class="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-brand-lime hover:underline">
                        Submit Now <i class="fa-solid fa-arrow-right text-xs"></i>
                    </a>
                </div>

            </div>
        </div>
    </section>
    <!-- ====== END: How to Use SaniBook ====== -->

    <!-- Main Content Container -->
    <main class="bg-white">


        <!-- Section 2: Sanitation Service Chain ("The Flow") -->
        <section id="service-chain-section" class="py-20 bg-gradient-to-br from-slate-50 to-white">
            <div class="max-w-7xl mx-auto px-4">
                <!-- Title -->
                <!-- Mission Vision Block -->

                <!-- Together, We Are the Change Block -->
                <div
                    class="max-w-4xl mx-auto bg-brand-dark rounded-[2rem] p-8 md:p-12 mb-16 relative overflow-hidden shadow-2xl">
                    <div class="absolute inset-0 bg-blue-900/20"></div>
                    <div class="absolute -top-12 -right-12 w-64 h-64 bg-brand-lime opacity-10 blur-3xl rounded-full">
                    </div>
                    <div class="absolute -bottom-12 -left-12 w-64 h-64 bg-brand-teal opacity-10 blur-3xl rounded-full">
                    </div>

                    <div class="relative z-10">
                        <h3
                            class="font-heading font-black text-3xl md:text-4xl text-white mb-8 text-center uppercase tracking-tight">
                            From <span class="text-brand-lime">Invisible</span> to Undeniable
                        </h3>
                        <div class="grid md:grid-cols-2 gap-8 text-lg leading-relaxed text-slate-300 font-medium">
                            <p>
                                As the definitive knowledge-management platform for the sanitation sector, SaniBook
                                is bridging the gap between isolated pilots and national-scale solutions.
                            </p>
                            <p>
                                We are turning <b class="text-white">data into dignity</b>, ensuring that every
                                investment and every effort across the value chain is visible, validated, and
                                impactful.
                            </p>
                        </div>
                        <div class="mt-8 pt-8 border-t border-white/10 text-center">
                            <p class="text-xl text-slate-200 leading-relaxed max-w-3xl mx-auto">
                                "With this digital tool, we are now able to track, correct, and scale.
                                We are moving from trial and error toward a trajectory of evidence-based knowledge."
                            </p>
                            <p class="mt-6 text-2xl font-black text-white italic">
                                The pulse of Kenya’s sanitation revolution.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Call to Action: Submit Data -->
                <div class="text-center mt-12 mb-16 fade-up">
                    <a href="<?php echo $is_logged_in ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                        class="inline-flex items-center gap-4 px-10 py-5 bg-brand-lime text-white rounded-2xl hover:bg-lime-700 transition-all shadow-2xl font-black text-xl lg:text-2xl group">
                        <i class="fa-solid fa-plus-circle group-hover:rotate-90 transition-transform duration-300"></i>
                        SUBMIT YOUR DATA
                    </a>
                    <p class="text-slate-500 mt-4 font-medium italic">
                        Help us map the future of Kenyan sanitation. Every entry counts.
                    </p>
                </div>

                <!-- Chain Nodes Grid - Card Layout with Images -->
                <div class="flex flex-wrap justify-center gap-8 fade-up">

                    <!-- Node 1: Capture & Containment (combined) -->
                    <div
                        class="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.5rem)] bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
                        <a href="service-chain.php?sub=capture#submissions" class="block">
                            <div class="relative h-48 overflow-hidden">
                                <img src="images/Containment.jpg" alt="Capture & Containment"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <h3 class="absolute bottom-4 left-4 font-heading font-bold text-2xl text-white">1.
                                    Capture & Containment</h3>
                            </div>
                        </a>
                        <div class="p-5">
                            <p class="text-sm text-slate-600 mb-4">Collection and safe storage of waste at source.</p>
                            <div class="flex gap-2">
                                <a href="service-chain.php?sub=capture#submissions"
                                    class="text-xs bg-teal-100 text-teal-700 px-3 py-1.5 rounded-full hover:bg-teal-200 font-semibold transition-colors">View
                                    Data</a>
                                <a href="<?php echo $is_logged_in ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                                    class="text-xs bg-brand-lime text-white px-3 py-1.5 rounded-full hover:bg-lime-700 font-semibold transition-colors">Submit
                                    Data</a>
                            </div>
                        </div>
                    </div>

                    <!-- Node 2: Transport -->
                    <div
                        class="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.5rem)] bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
                        <a href="service-chain.php?sub=transport#submissions" class="block">
                            <div class="relative h-48 overflow-hidden">
                                <img src="images/Transport.jpg" alt="Transport"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <h3 class="absolute bottom-4 left-4 font-heading font-bold text-2xl text-white">2.
                                    Transport</h3>
                            </div>
                        </a>
                        <div class="p-5">
                            <p class="text-sm text-slate-600 mb-4">Safe conveyance of fecal sludge from collection
                                points to treatment facilities using licensed vehicles.</p>
                            <div class="flex gap-2">
                                <a href="service-chain.php?sub=transport#submissions"
                                    class="text-xs bg-teal-100 text-teal-700 px-3 py-1.5 rounded-full hover:bg-teal-200 font-semibold transition-colors">View
                                    Data</a>
                                <a href="<?php echo $is_logged_in ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                                    class="text-xs bg-brand-lime text-white px-3 py-1.5 rounded-full hover:bg-lime-700 font-semibold transition-colors">Submit
                                    Data</a>
                            </div>
                        </div>
                    </div>

                    <!-- Node 3: Emptying -->
                    <div
                        class="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.5rem)] bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
                        <a href="service-chain.php?sub=emptying#submissions" class="block">
                            <div class="relative h-48 overflow-hidden">
                                <img src="images/Emptying.jpg" alt="Emptying"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <h3 class="absolute bottom-4 left-4 font-heading font-bold text-2xl text-white">3.
                                    Emptying</h3>
                            </div>
                        </a>
                        <div class="p-5">
                            <p class="text-sm text-slate-600 mb-4">Removal of waste from containment units using vacuum
                                trucks or manual methods.</p>
                            <div class="flex gap-2">
                                <a href="service-chain.php?sub=emptying#submissions"
                                    class="text-xs bg-teal-100 text-teal-700 px-3 py-1.5 rounded-full hover:bg-teal-200 font-semibold transition-colors">View
                                    Data</a>
                                <a href="<?php echo $is_logged_in ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                                    class="text-xs bg-brand-lime text-white px-3 py-1.5 rounded-full hover:bg-lime-700 font-semibold transition-colors">Submit
                                    Data</a>
                            </div>
                        </div>
                    </div>

                    <!-- Node 4: Treatment -->
                    <div
                        class="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.5rem)] bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
                        <a href="service-chain.php?sub=treatment#submissions" class="block">
                            <div class="relative h-48 overflow-hidden">
                                <img src="images/Treatment.jpg" alt="Treatment"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <h3 class="absolute bottom-4 left-4 font-heading font-bold text-2xl text-white">4.
                                    Treatment</h3>
                            </div>
                        </a>
                        <div class="p-5">
                            <p class="text-sm text-slate-600 mb-4">Processing waste to remove pathogens and
                                contaminants, making it safe for disposal or reuse.</p>
                            <div class="flex gap-2">
                                <a href="service-chain.php?sub=treatment#submissions"
                                    class="text-xs bg-teal-100 text-teal-700 px-3 py-1.5 rounded-full hover:bg-teal-200 font-semibold transition-colors">View
                                    Data</a>
                                <a href="<?php echo $is_logged_in ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                                    class="text-xs bg-brand-lime text-white px-3 py-1.5 rounded-full hover:bg-lime-700 font-semibold transition-colors">Submit
                                    Data</a>
                            </div>
                        </div>
                    </div>

                    <!-- Node 5: Safe Reuse -->
                    <div
                        class="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.5rem)] bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
                        <a href="service-chain.php?sub=reuse#submissions" class="block">
                            <div class="relative h-48 overflow-hidden">
                                <img src="images/Safe Reuse.jpg" alt="Safe Reuse"
                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                <h3 class="absolute bottom-4 left-4 font-heading font-bold text-2xl text-white">5. Safe
                                    Reuse</h3>
                            </div>
                        </a>
                        <div class="p-5">
                            <p class="text-sm text-slate-600 mb-4">Application of treated waste as fertilizer, biogas,
                                or other productive uses that support circular economy.</p>
                            <div class="flex gap-2">
                                <a href="service-chain.php?sub=reuse#submissions"
                                    class="text-xs bg-teal-100 text-teal-700 px-3 py-1.5 rounded-full hover:bg-teal-200 font-semibold transition-colors">View
                                    Data</a>
                                <a href="<?php echo $is_logged_in ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                                    class="text-xs bg-brand-lime text-white px-3 py-1.5 rounded-full hover:bg-lime-700 font-semibold transition-colors">Submit
                                    Data</a>
                            </div>
                        </div>
                    </div>

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


        <!-- Section 3: Enabling Pillars -->
        <section class="py-20 bg-white">
            <div class="max-w-7xl mx-auto px-4">
                <!-- Title -->
                <div class="text-center mb-16 fade-up">
                    <a href="enabling-pillars.php" class="block hover:opacity-80 transition-opacity">
                        <h2 class="font-heading font-bold text-4xl lg:text-5xl text-slate-900 mb-4">
                            The Enabling Pillars
                        </h2>
                    </a>
                    <p class="text-xl text-slate-600 max-w-2xl mx-auto">
                        Foundational elements driving sustainable sanitation transformation
                    </p>
                </div>

                <!-- 6-Item Grid -->
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 fade-up">

                    <!-- Pillar 1: Financing -->
                    <a href="enabling-pillars.php?sub=financing"
                        class="group block no-underline rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all border border-slate-100 bg-white">
                        <div class="relative h-48 overflow-hidden">
                            <img src="images/pillars/Financing Navigation Button.jpg" alt="Financing"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                            <h3 class="absolute bottom-3 left-4 right-4 font-bold text-white text-xl leading-tight">
                                Financing</h3>
                        </div>
                        <div class="p-5">
                            <p class="text-slate-600 text-sm mb-4">Innovative funding mechanisms, blended finance
                                models, and investment strategies.</p>
                            <div
                                class="inline-flex items-center gap-2 text-xs font-bold text-teal-700 bg-teal-50 px-3 py-1 rounded-full">
                                <i class="fa-solid fa-chart-line"></i>
                                <?php echo get_pillar_count('financing'); ?> Verified Submissions
                            </div>
                        </div>
                    </a>

                    <!-- Pillar 2: Governance -->
                    <a href="enabling-pillars.php?sub=governance"
                        class="group block no-underline rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all border border-slate-100 bg-white">
                        <div class="relative h-48 overflow-hidden">
                            <img src="images/pillars/Governance Navigation button.jpg" alt="Governance"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                            <h3 class="absolute bottom-3 left-4 right-4 font-bold text-white text-xl leading-tight">
                                Governance</h3>
                        </div>
                        <div class="p-5">
                            <p class="text-slate-600 text-sm mb-4">Policy frameworks, regulatory coordination, and
                                institutional mandates.</p>
                            <div
                                class="inline-flex items-center gap-2 text-xs font-bold text-teal-700 bg-teal-50 px-3 py-1 rounded-full">
                                <i class="fa-solid fa-chart-line"></i>
                                <?php echo get_pillar_count('governance'); ?> Verified Submissions
                            </div>
                        </div>
                    </a>

                    <!-- Pillar 3: Research & Learning -->
                    <a href="enabling-pillars.php?sub=research"
                        class="group block no-underline rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all border border-slate-100 bg-white">
                        <div class="relative h-48 overflow-hidden">
                            <img src="images/pillars/Research Navigation Button.jpg" alt="Research &amp; Learning"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                            <h3 class="absolute bottom-3 left-4 right-4 font-bold text-white text-xl leading-tight">
                                Research &amp; Learning</h3>
                        </div>
                        <div class="p-5">
                            <p class="text-slate-600 text-sm mb-4">Evidence-based approaches, innovation testing, and
                                knowledge sharing.</p>
                            <div
                                class="inline-flex items-center gap-2 text-xs font-bold text-teal-700 bg-teal-50 px-3 py-1 rounded-full">
                                <i class="fa-solid fa-chart-line"></i>
                                <?php echo get_pillar_count('research'); ?> Verified Submissions
                            </div>
                        </div>
                    </a>

                    <!-- Pillar 4: Coordination and Collaboration -->
                    <a href="enabling-pillars.php?sub=collaboration"
                        class="group block no-underline rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all border border-slate-100 bg-white">
                        <div class="relative h-48 overflow-hidden">
                            <img src="images/pillars/Coordination and collaboration Navigation Banner.jpg"
                                alt="Coordination and Collaboration"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                            <h3 class="absolute bottom-3 left-4 right-4 font-bold text-white text-xl leading-tight">
                                Coordination and Collaboration</h3>
                        </div>
                        <div class="p-5">
                            <p class="text-slate-600 text-sm mb-4">Partnerships between government, private sector,
                                NGOs, and communities.</p>
                            <div
                                class="inline-flex items-center gap-2 text-xs font-bold text-teal-700 bg-teal-50 px-3 py-1 rounded-full">
                                <i class="fa-solid fa-chart-line"></i>
                                <?php echo get_pillar_count('collaboration'); ?> Verified Submissions
                            </div>
                        </div>
                    </a>

                    <!-- Pillar 5: Capacity Building -->
                    <a href="enabling-pillars.php?sub=capacity-building"
                        class="group block no-underline rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all border border-slate-100 bg-white">
                        <div class="relative h-48 overflow-hidden">
                            <img src="images/pillars/Capacity Building navigation button.jpg" alt="Capacity Building"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                            <h3 class="absolute bottom-3 left-4 right-4 font-bold text-white text-xl leading-tight">
                                Capacity Building</h3>
                        </div>
                        <div class="p-5">
                            <p class="text-slate-600 text-sm mb-4">Training, skill development, and institutional
                                strengthening for sanitation.</p>
                            <div
                                class="inline-flex items-center gap-2 text-xs font-bold text-teal-700 bg-teal-50 px-3 py-1 rounded-full">
                                <i class="fa-solid fa-chart-line"></i>
                                <?php echo get_pillar_count('capacity-building'); ?> Verified Submissions
                            </div>
                        </div>
                    </a>

                    <!-- Pillar 6: MHM -->
                    <a href="enabling-pillars.php?sub=mhm"
                        class="group block no-underline rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all border border-slate-100 bg-white">
                        <div class="relative h-48 overflow-hidden">
                            <img src="images/pillars/Menstrual Hygiene Navigation Button.jpg"
                                alt="Menstrual Health Management"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                            <h3 class="absolute bottom-3 left-4 right-4 font-bold text-white text-xl leading-tight">
                                Menstrual Health Management</h3>
                        </div>
                        <div class="p-5">
                            <p class="text-slate-600 text-sm mb-4">Dignity, equity, and health for women and girls
                                through menstrual hygiene solutions.</p>
                            <div
                                class="inline-flex items-center gap-2 text-xs font-bold text-teal-700 bg-teal-50 px-3 py-1 rounded-full">
                                <i class="fa-solid fa-chart-line"></i>
                                <?php echo get_pillar_count('mhm'); ?> Verified Submissions
                            </div>
                        </div>
                    </a>

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



    </main>


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

    <script>


        // Fade-in on scroll
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) entry.target.classList.add('visible');
            });
        }, { threshold: 0.1 });
        document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));

        // 3D Book click interaction
        const navBook = document.getElementById('nav-book');
        if (navBook) {
            navBook.addEventListener('click', function (e) {
                e.preventDefault();
                this.classList.add('book-clicked');
                const dest = this.getAttribute('href');
                setTimeout(() => { window.location.href = dest; }, 200);
            });
        }
    </script>

    <!-- Hero Search Script -->
    <script>
        const searchInput = document.getElementById('heroSearch');
        const searchResults = document.getElementById('searchResults');
        const searchSpinner = document.getElementById('searchSpinner');
        let searchTimeout;

        searchInput.addEventListener('input', function (e) {
            clearTimeout(searchTimeout);
            const q = e.target.value.trim();

            if (q.length < 2) {
                searchResults.classList.add('hidden');
                searchResults.innerHTML = '';
                searchSpinner.classList.add('hidden');
                return;
            }

            searchSpinner.classList.remove('hidden');

            searchTimeout = setTimeout(() => {
                fetch(`api/search.php?q=${encodeURIComponent(q)}`)
                    .then(res => res.json())
                    .then(data => {
                        searchSpinner.classList.add('hidden');
                        renderSearchResults(data, q);
                    })
                    .catch(err => {
                        console.error('Search error:', err);
                        searchSpinner.classList.add('hidden');
                    });
            }, 400); // 400ms debounce
        });

        function renderSearchResults(data, q) {
            const hasSubs = data.submissions && data.submissions.length > 0;
            const hasOrgs = data.organisations && data.organisations.length > 0;
            const hasCounties = data.counties && data.counties.length > 0;

            if (!hasSubs && !hasOrgs && !hasCounties) {
                searchResults.innerHTML = `
                    <div class="p-4 text-center text-slate-500">
                        <i class="fa-solid fa-ghost text-2xl mb-2 text-slate-300"></i>
                        <p>No results found for "<span class="font-bold text-slate-700">${escapeHtml(q)}</span>"</p>
                        <p class="text-xs mt-1">Try searching for a technology, county, or organisation name.</p>
                    </div>`;
                searchResults.classList.remove('hidden');
                return;
            }

            let html = '';

            // 1. County Matches (High intent)
            if (hasCounties) {
                html += `<div class="bg-slate-50 px-4 py-2 border-b border-slate-100"><h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider"><i class="fa-solid fa-map text-slate-400 mr-2"></i>Counties</h4></div>`;
                data.counties.forEach(c => {
                    html += `
                        <a href="submitted.php?county=${encodeURIComponent(c.name)}" class="block px-4 py-3 hover:bg-slate-50 transition-colors flex items-center justify-between group">
                            <span class="font-bold text-slate-900 group-hover:text-teal-600 transition-colors">${c.name}</span>
                            <span class="text-xs bg-slate-100 text-slate-600 font-medium px-2 py-1 rounded-md">${c.count} submission${c.count !== 1 ? 's' : ''}</span>
                        </a>`;
                });
            }

            // 2. Organisation Matches
            if (hasOrgs) {
                html += `<div class="bg-slate-50 px-4 py-2 border-b border-slate-100"><h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider"><i class="fa-solid fa-building text-slate-400 mr-2"></i>Organisations</h4></div>`;
                data.organisations.forEach(o => {
                    html += `
                        <a href="explore.php?q=${encodeURIComponent(o.name)}" class="block px-4 py-3 hover:bg-slate-50 transition-colors flex flex-col sm:flex-row sm:items-center justify-between group gap-1">
                            <span class="font-bold text-slate-900 group-hover:text-indigo-600 transition-colors">${o.name}</span>
                            <div class="flex items-center gap-2 text-xs text-slate-500">
                                ${o.county ? `<span><i class="fa-solid fa-location-dot text-slate-300 mr-1"></i>${o.county}</span>` : ''}
                                ${o.role ? `<span class="bg-slate-100 px-2 py-0.5 rounded">${o.role}</span>` : ''}
                            </div>
                        </a>`;
                });
            }

            // 3. Submission Matches
            if (hasSubs) {
                html += `<div class="bg-slate-50 px-4 py-2 border-b border-slate-100"><h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider"><i class="fa-solid fa-file-lines text-slate-400 mr-2"></i>Submissions</h4></div>`;
                data.submissions.forEach(s => {
                    html += `
                        <a href="view_submission.php?id=${s.id}" class="block px-4 py-3 hover:bg-slate-50 transition-colors group">
                            <div class="font-bold text-slate-900 group-hover:text-teal-600 transition-colors line-clamp-1">${s.title}</div>
                            <div class="flex items-center gap-3 text-xs text-slate-500 mt-1">
                                ${s.org_name ? `<span><i class="fa-solid fa-building text-slate-300 mr-1"></i>${s.org_name}</span>` : ''}
                                ${s.county ? `<span><i class="fa-solid fa-location-dot text-slate-300 mr-1"></i>${s.county}</span>` : ''}
                                <span><i class="fa-regular fa-calendar text-slate-300 mr-1"></i>${s.date}</span>
                            </div>
                        </a>`;
                });
            }

            searchResults.innerHTML = html;
            searchResults.classList.remove('hidden');
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', function (e) {
            if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
                searchResults.classList.add('hidden');
            }
        });

        // Basic HTML escaper
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
    </script>
</body>

</html>