<?php
include 'config.php';
// chain-node.php — Dynamic Service Chain Node Detail Page
$node = isset($_GET['node']) ? strtolower(trim($_GET['node'])) : '';

// Map URL node to DB Service Chain value
$node_map = [
    'capture' => 'Capture',
    'transport' => 'Transport',
    'emptying' => 'Emptying',
    'treatment' => 'Treatment',
    'safe-reuse' => 'Safe Reuse'
];
$filter_val = $node_map[$node] ?? '';
$submissions = [];
$submission_count = 0;
if ($filter_val) {
    $submissions = get_submissions_by_filter('service_chains', $filter_val, 6, true);
    $submission_count = get_submission_count('service_chains', $filter_val, true);
}

// Node data configuration
$nodes = [
    'capture' => [
        'title' => 'Capture & Containment',
        'number' => 1,
        'image' => 'images/Containment.jpg',
        'color' => '#008080',
        'icon' => 'fa-solid fa-toilet',
        'description' => 'Collection and safe storage of waste at source—toilets, latrines, septic tanks, and pit latrines in households and institutions.',
        'overview' => 'Capture and containment form the first critical step in the sanitation service chain. This stage covers the technologies and practices used to collect human waste at its source and safely store it until it can be transported or treated. Key components include flush toilets, pit latrines, septic tanks, biodigesters, and composting toilets.',
        'data_items' => [
            ['title' => 'Toilet Technologies in Kenya', 'type' => 'Report', 'date' => '2025', 'icon' => 'fa-file-pdf'],
            ['title' => 'Pit Latrine Design Standards', 'type' => 'Technical Guide', 'date' => '2024', 'icon' => 'fa-book'],
            ['title' => 'Septic Tank Performance Data', 'type' => 'Dataset', 'date' => '2025', 'icon' => 'fa-database'],
            ['title' => 'Urban vs Rural Containment', 'type' => 'Case Study', 'date' => '2024', 'icon' => 'fa-chart-bar'],
            ['title' => 'Biodigester Installation Guide', 'type' => 'Manual', 'date' => '2025', 'icon' => 'fa-wrench'],
            ['title' => 'Community-Led Sanitation Programs', 'type' => 'Report', 'date' => '2024', 'icon' => 'fa-users'],
        ],
        'stats' => ['12 Reports', '8 Datasets', '5 Case Studies', '3 Guides'],
    ],
    'transport' => [
        'title' => 'Transport',
        'number' => 2,
        'image' => 'images/Transport.jpg',
        'color' => '#006666',
        'icon' => 'fa-solid fa-truck',
        'description' => 'Safe conveyance of fecal sludge from collection points to treatment facilities using licensed vehicles.',
        'overview' => 'Transport covers the safe movement of fecal sludge and sewage from containment sites to treatment or disposal facilities. This includes vacuum tanker services, manual cartage, sewerage networks, and transfer stations. Proper transport is essential to prevent environmental contamination and public health risks.',
        'data_items' => [
            ['title' => 'Vacuum Tanker Fleet Analysis', 'type' => 'Report', 'date' => '2025', 'icon' => 'fa-file-pdf'],
            ['title' => 'Transport Route Optimization', 'type' => 'Dataset', 'date' => '2025', 'icon' => 'fa-database'],
            ['title' => 'Licensing Framework for FSM Transport', 'type' => 'Policy Brief', 'date' => '2024', 'icon' => 'fa-gavel'],
            ['title' => 'Transfer Station Design', 'type' => 'Technical Guide', 'date' => '2024', 'icon' => 'fa-book'],
            ['title' => 'Cost Analysis of Sludge Transport', 'type' => 'Dataset', 'date' => '2025', 'icon' => 'fa-chart-line'],
            ['title' => 'GPS Tracking of Exhauster Trucks', 'type' => 'Case Study', 'date' => '2024', 'icon' => 'fa-map-marker-alt'],
        ],
        'stats' => ['9 Reports', '6 Datasets', '4 Case Studies', '2 Policy Briefs'],
    ],
    'emptying' => [
        'title' => 'Emptying',
        'number' => 3,
        'image' => 'images/Emptying.jpg',
        'color' => '#005555',
        'icon' => 'fa-solid fa-pump-soap',
        'description' => 'Removal of waste from containment units using vacuum trucks or manual methods.',
        'overview' => 'Emptying involves the removal of fecal sludge from pits, tanks, and other containment structures. Methods range from mechanized vacuum tankers to manual emptying in areas with limited access. This stage is critical for maintaining sanitation infrastructure and preventing overflow and contamination.',
        'data_items' => [
            ['title' => 'Mechanized vs Manual Emptying', 'type' => 'Comparative Study', 'date' => '2025', 'icon' => 'fa-balance-scale'],
            ['title' => 'Emptying Service Providers Directory', 'type' => 'Directory', 'date' => '2025', 'icon' => 'fa-address-book'],
            ['title' => 'Health & Safety in Pit Emptying', 'type' => 'Report', 'date' => '2024', 'icon' => 'fa-hard-hat'],
            ['title' => 'Emptying Frequency Data by County', 'type' => 'Dataset', 'date' => '2025', 'icon' => 'fa-database'],
            ['title' => 'Gulper Technology Assessment', 'type' => 'Technical Brief', 'date' => '2024', 'icon' => 'fa-cogs'],
            ['title' => 'Pricing Models for Emptying Services', 'type' => 'Report', 'date' => '2024', 'icon' => 'fa-money-bill'],
        ],
        'stats' => ['10 Reports', '7 Datasets', '3 Technical Briefs', '4 Guides'],
    ],
    'treatment' => [
        'title' => 'Treatment',
        'number' => 4,
        'image' => 'images/Treatment.jpg',
        'color' => '#004444',
        'icon' => 'fa-solid fa-filter',
        'description' => 'Processing waste to remove pathogens and contaminants, making it safe for disposal or reuse.',
        'overview' => 'Treatment processes transform raw fecal sludge and wastewater into safe, stabilized products. Technologies include waste stabilization ponds, constructed wetlands, anaerobic digesters, composting, and mechanical dewatering. Effective treatment is essential for environmental protection and enabling safe reuse.',
        'data_items' => [
            ['title' => 'Treatment Plant Performance Kenya', 'type' => 'Report', 'date' => '2025', 'icon' => 'fa-file-pdf'],
            ['title' => 'Constructed Wetlands Design Guide', 'type' => 'Technical Guide', 'date' => '2024', 'icon' => 'fa-book'],
            ['title' => 'Effluent Quality Standards', 'type' => 'Policy Document', 'date' => '2024', 'icon' => 'fa-gavel'],
            ['title' => 'Decentralized Treatment Systems', 'type' => 'Case Study', 'date' => '2025', 'icon' => 'fa-chart-bar'],
            ['title' => 'Composting Toilet Outputs', 'type' => 'Dataset', 'date' => '2025', 'icon' => 'fa-database'],
            ['title' => 'Sludge Dewatering Technologies', 'type' => 'Technical Brief', 'date' => '2024', 'icon' => 'fa-cogs'],
        ],
        'stats' => ['11 Reports', '5 Datasets', '6 Case Studies', '3 Policy Docs'],
    ],
    'safe-reuse' => [
        'title' => 'Safe Reuse',
        'number' => 5,
        'image' => 'images/Safe Reuse.jpg',
        'color' => '#2E7D32',
        'icon' => 'fa-solid fa-seedling',
        'description' => 'Application of treated waste as fertilizer, biogas, or other productive uses that support circular economy.',
        'overview' => 'Safe reuse transforms treated sanitation products into valuable resources. Applications include organic fertilizer for agriculture, biogas for cooking and electricity, animal feed through black soldier fly larvae, and treated water for irrigation. This stage closes the loop in the sanitation value chain, promoting circular economy principles.',
        'data_items' => [
            ['title' => 'Biogas Production from Fecal Sludge', 'type' => 'Report', 'date' => '2025', 'icon' => 'fa-file-pdf'],
            ['title' => 'Organic Fertilizer Quality Standards', 'type' => 'Policy Document', 'date' => '2024', 'icon' => 'fa-gavel'],
            ['title' => 'Black Soldier Fly Farming', 'type' => 'Case Study', 'date' => '2025', 'icon' => 'fa-bug'],
            ['title' => 'Reuse Revenue Models', 'type' => 'Report', 'date' => '2024', 'icon' => 'fa-chart-line'],
            ['title' => 'Treated Water Irrigation Data', 'type' => 'Dataset', 'date' => '2025', 'icon' => 'fa-database'],
            ['title' => 'Circular Economy in Sanitation', 'type' => 'Whitepaper', 'date' => '2024', 'icon' => 'fa-recycle'],
        ],
        'stats' => ['8 Reports', '4 Datasets', '5 Case Studies', '2 Whitepapers'],
    ],
];

// Redirect if invalid node
if (!isset($nodes[$node])) {
    header('Location: service-chain.php');
    exit;
}

$n = $nodes[$node];
?>
<?php
session_start();
?>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?php echo htmlspecialchars($n['title']); ?> | SaniBook Kenya
    </title>
    <meta name="description" content="<?php echo htmlspecialchars($n['description']); ?>">
    <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;900&family=Merriweather:wght@400;700&display=swap"
        rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

    <style>
        :root {
            --brand-teal: #008080;
            --brand-navy: #001F3F;
            --brand-gold: #D4AF37;
            --brand-terracotta: #E2725B;
        }

        .font-heading {
            font-family: 'Montserrat', sans-serif;
        }

        .font-serif {
            font-family: 'Merriweather', serif;
        }

        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease-out;
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>

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

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

    <!-- Hero Section -->
    <header class="pt-32 pb-20 relative overflow-hidden"
        style="background: linear-gradient(135deg, <?php echo $n['color']; ?>, #001F3F);">
        <div class="absolute inset-0 opacity-30">
            <img src="<?php echo htmlspecialchars($n['image']); ?>" alt="<?php echo htmlspecialchars($n['title']); ?>"
                class="w-full h-full object-cover">
        </div>
        <div class="relative z-10 max-w-7xl mx-auto px-4">
            <a href="service-chain.php"
                class="inline-flex items-center gap-2 text-white/70 hover:text-white mb-6 transition-colors">
                <i class="fa-solid fa-arrow-left"></i>
                <span class="font-semibold">Back to Service Chain</span>
            </a>
            <div class="flex items-center gap-4 mb-6">
                <div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur flex items-center justify-center">
                    <i class="<?php echo $n['icon']; ?> text-white text-3xl"></i>
                </div>
                <span class="text-white/60 font-heading font-bold text-xl">Step
                    <?php echo $n['number']; ?>
                </span>
            </div>
            <h1 class="font-heading font-black text-3xl md:text-4xl text-white mb-6">
                <?php echo htmlspecialchars($n['title']); ?>
            </h1>
            <p class="text-xl text-white/80 max-w-3xl mb-8">
                <?php echo htmlspecialchars($n['description']); ?>
            </p>
            <div class="flex flex-wrap gap-4">
                <a href="<?php echo isset($_SESSION['user_id']) ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                    class="px-8 py-4 bg-white text-teal-700 font-bold rounded-xl hover:bg-slate-100 shadow-lg transition-all">
                    <i class="fa-solid fa-user-plus mr-2"></i>Register to Contribute
                </a>
                <a href="#submit"
                    class="px-8 py-4 bg-teal-500 text-white font-bold rounded-xl hover:bg-teal-400 shadow-lg transition-all border border-white/20">
                    <i class="fa-solid fa-upload mr-2"></i>Submit Data
                </a>
            </div>
        </div>
    </header>

    <!-- Overview & Stats -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid lg:grid-cols-3 gap-12 fade-up">
                <!-- Overview Text -->
                <div class="lg:col-span-2">
                    <h2 class="font-heading font-bold text-3xl text-slate-900 mb-6">Overview</h2>
                    <p class="text-lg text-slate-600 leading-relaxed mb-8">
                        <?php echo htmlspecialchars($n['overview']); ?>
                    </p>
                    <div class="p-6 bg-teal-50 rounded-2xl border border-teal-100">
                        <h3 class="font-heading font-bold text-lg text-teal-800 mb-2">
                            <i class="fa-solid fa-circle-info mr-2"></i>Why This Matters
                        </h3>
                        <p class="text-teal-700 text-sm">
                            Understanding
                            <?php echo strtolower(htmlspecialchars($n['title'])); ?> is essential for designing
                            effective sanitation interventions. The data and resources below support evidence-based
                            decision-making for practitioners, policy-makers, and researchers.
                        </p>
                    </div>
                </div>

                <!-- Stats Sidebar -->
                <div>
                    <div class="bg-slate-50 rounded-2xl p-6 border border-slate-200">
                        <h3 class="font-heading font-bold text-xl text-slate-800 mb-4">Available Resources</h3>
                        <div class="space-y-3">
                            <div class="flex items-center gap-3 p-3 bg-white rounded-xl shadow-sm">
                                <div class="w-10 h-10 rounded-lg bg-teal-100 flex items-center justify-center">
                                    <i class="fa-solid fa-users text-teal-600"></i>
                                </div>
                                <span class="font-semibold text-slate-700">
                                    <?php echo $submission_count; ?> Verified Submissions
                                </span>
                            </div>
                        </div>
                        <div class="mt-6 p-4 bg-teal-50 rounded-xl text-center">
                            <p class="text-sm text-teal-800 font-medium mb-3">
                                Want to contribute your own data?
                            </p>
                            <a href="<?php echo isset($_SESSION['user_id']) ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                                class="block w-full px-4 py-2 bg-teal-600 text-white font-bold rounded-lg hover:bg-teal-700 transition-colors text-sm">
                                Register to Submit
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Recent Submissions Section -->
    <?php if (!empty($submissions)): ?>
        <section class="py-16 bg-slate-50 border-t border-slate-200">
            <div class="max-w-7xl mx-auto px-4">
                <div class="text-center mb-12 fade-up">
                    <h2 class="font-heading font-bold text-3xl text-slate-900 mb-4">
                        Recent Submissions
                    </h2>
                    <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                        Explore verified projects and initiatives related to
                        <?php echo strtolower(htmlspecialchars($n['title'])); ?>.
                    </p>
                </div>

                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 fade-up">
                    <?php foreach ($submissions as $sub): ?>
                        <a href="view_submission.php?id=<?php echo $sub['id']; ?>"
                            class="block bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-all border border-slate-100 group">
                            <div class="mb-4">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-xs font-bold uppercase text-teal-600 tracking-wider">
                                        <?php echo htmlspecialchars($sub['org_name']); ?>
                                    </span>
                                    <?php
                                    // Detect content type based on data HTML
                                    $story_html = html_entity_decode($sub['data']);
                                    $has_images = preg_match('/<img\s/i', $story_html);
                                    $has_text = strip_tags($story_html) !== '';

                                    // Show content type badges
                                    echo '<div class="flex gap-1.5">';
                                    if ($has_text) {
                                        echo '<span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] font-bold" title="Text Content"><i class="fa-solid fa-align-left"></i></span>';
                                    }
                                    if ($has_images) {
                                        echo '<span class="px-2 py-0.5 bg-purple-50 text-purple-600 rounded text-[10px] font-bold" title="Images"><i class="fa-solid fa-image"></i></span>';
                                    }
                                    echo '</div>';
                                    ?>
                                </div>
                                <h3
                                    class="font-bold text-xl text-slate-800 mt-1 mb-2 group-hover:text-teal-600 transition-colors">
                                    <?php echo htmlspecialchars($sub['title']); ?>
                                </h3>
                                <div class="text-slate-600 text-sm line-clamp-3 prose prose-sm max-w-none">
                                    <?php echo html_entity_decode($sub['data']); ?>
                                </div>
                            </div>
                            <div
                                class="flex items-center justify-between mt-4 pt-4 border-t border-slate-100 text-xs text-slate-500">
                                <span><i class="fa-regular fa-calendar mr-1"></i>
                                    <?php echo date('M d, Y', strtotime($sub['created_at'])); ?></span>
                                <span class="text-teal-600 font-semibold group-hover:text-teal-700">
                                    View Full data <i class="fa-solid fa-arrow-right ml-1"></i>
                                </span>
                            </div>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
    <?php endif; ?>



    <!-- Submit Data Section -->
    <section id="submit" class="py-16 bg-gradient-to-br from-teal-600 to-teal-800">
        <div class="max-w-4xl mx-auto px-4 text-center text-white">
            <div class="w-20 h-20 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-6">
                <i class="fa-solid fa-upload text-4xl"></i>
            </div>
            <h2 class="font-heading font-bold text-3xl mb-4">
                Contribute to
                <?php echo htmlspecialchars($n['title']); ?>
            </h2>
            <p class="text-lg mb-8 text-teal-100 max-w-2xl mx-auto">
                <?php echo strtolower(htmlspecialchars($n['title'])); ?>?
                Register to share your work. By contributing, you gain visibility, influence national policy, and help
                de-risk the sector for everyone.
                Data submitted becomes a public good, driving evidence-based decision making.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="<?php echo isset($_SESSION['user_id']) ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                    class="px-8 py-4 bg-white text-teal-700 font-bold rounded-xl hover:bg-slate-100 shadow-lg transition-all">
                    <i class="fa-solid fa-user-plus mr-2"></i>Register to Submit
                </a>
                <a href="<?php echo isset($_SESSION['user_id']) ? 'submit-data.php?category=' . urlencode($n['title']) : 'signup.php?redirect=submit-data.php'; ?>"
                    class="px-8 py-4 bg-teal-500 text-white font-bold rounded-xl hover:bg-teal-400 shadow-lg transition-all border border-white/30">
                    <i class="fa-solid fa-pen mr-2"></i>Submit Data
                </a>
            </div>
        </div>
    </section>

    <!-- Other Nodes Navigation -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="font-heading font-bold text-2xl text-center text-slate-800 mb-8">Explore Other Steps</h2>
            <div class="flex flex-wrap justify-center gap-4">
                <?php foreach ($nodes as $key => $other):
                    if ($key === $node)
                        continue;
                    ?>
                    <a href="chain-node.php?node=<?php echo urlencode($key); ?>"
                        class="flex items-center gap-3 px-5 py-3 bg-slate-50 hover:bg-teal-50 rounded-xl border border-slate-200 hover:border-teal-300 transition-all group">
                        <i class="<?php echo $other['icon']; ?> text-teal-600"></i>
                        <span class="font-semibold text-slate-700 group-hover:text-teal-700">
                            <?php echo htmlspecialchars($other['title']); ?>
                        </span>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-slate-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p class="text-slate-400">©
                <?php echo date('Y'); ?> SaniBook Kenya. All rights reserved.
            </p>
            <div class="mt-4 flex justify-center gap-6">
                <a href="index.php" class="text-slate-400 hover:text-white">Home</a>
                <a href="enabling-pillars.php" class="text-slate-400 hover:text-white">Enabling Pillars</a>
                <a href="<?php echo isset($_SESSION['user_id']) ? 'submit-data.php' : 'signup.php?redirect=submit-data.php'; ?>"
                    class="text-slate-400 hover:text-white">Submit Data</a>
                <a href="contact.php" class="text-slate-400 hover:text-white">Contact</a>
            </div>
        </div>
    </footer>

    <script>
        // Fade-up animation 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));
    </script>

</body>

</html>