<?php
// index.php - Version Professionnelle
require_once 'includes/db-connect.php';

// Données des lieux de dépôt
$depotLocations = [ /* Votre tableau existant - gardez le même contenu */ ];

$partnersList = [ /* Votre tableau existant - gardez le même contenu */ ];

$testimonials = [
    ['name' => 'Marie C.', 'city' => 'Port-au-Prince', 'role' => 'Étudiante', 'text' => 'Grâce à TCHEKELA, j\'ai retrouvé mon passeport perdu dans un tap-tap ! Quelqu\'un de bon l\'avait déposé. Merci infiniment !', 'rating' => 5, 'date' => '15 mars 2026'],
    ['name' => 'Jean R.', 'city' => 'Cap-Haïtien', 'role' => 'Ingénieur', 'text' => 'J\'avais perdu ma carte d\'identité depuis 3 mois. En 2 jours sur TCHEKELA, quelqu\'un l\'a déclarée. Incroyable cette plateforme !', 'rating' => 5, 'date' => '2 avril 2026'],
    ['name' => 'Sophie M.', 'city' => 'Gonaïves', 'role' => 'Enseignante', 'text' => 'Service gratuit et efficace. J\'ai pu contacter directement la personne qui avait trouvé mes documents.', 'rating' => 5, 'date' => '28 mars 2026'],
    ['name' => 'Paul D.', 'city' => 'Miami', 'role' => 'Entrepreneur', 'text' => 'Je pensais ne jamais revoir mes papiers. TCHEKELA a changé ma vie. Un service indispensable pour la diaspora.', 'rating' => 5, 'date' => '10 avril 2026'],
];

$stats = [
    'declared' => 312,
    'returned' => 247,
    'families' => 189,
    'partners' => 32,
    'countries' => 8,
];

$depotLocationsJSON = json_encode($depotLocations);
$partnersListJSON = json_encode($partnersList);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>TCHEKELA | La plateforme de confiance pour retrouver vos documents perdus</title>
    <meta name="description" content="TCHEKELA : Plateforme collaborative haïtienne 100% gratuite pour déclarer et retrouver vos documents perdus. Passeports, CIN, permis de conduire. Plus de 300 documents déjà retrouvés.">
    <meta name="keywords" content="documents perdus Haïti, retrouver passeport, carte d'identité perdue, TCHEKELA, documents retrouvés, diaspora haïtienne">
    <meta name="author" content="TCHEKELA">
    <meta name="theme-color" content="#003F87">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://tchekela.com/">
    <link rel="manifest" href="/manifest.json">
    
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://tchekela.com/">
    <meta property="og:title" content="TCHEKELA | Retrouvez vos documents perdus en Haïti">
    <meta property="og:description" content="Plateforme collaborative haïtienne 100% gratuite pour déclarer et retrouver vos documents perdus. Passeports, CIN, permis de conduire.">
    <meta property="og:image" content="/assets/img/og-image.jpg">
    <meta property="og:site_name" content="TCHEKELA">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="TCHEKELA | Retrouvez vos documents perdus">
    <meta name="twitter:description" content="Plateforme collaborative haïtienne 100% gratuite pour déclarer et retrouver vos documents perdus.">
    
    <!-- Fonts & Icons -->
    <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:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
    
    <style>
        /* ========== DESIGN SYSTEM PROFESSIONNEL ========== */
        :root {
            --primary: #003F87;
            --primary-dark: #002D61;
            --primary-light: #1a5cb0;
            --secondary: #C9A84C;
            --secondary-dark: #a88a3a;
            --secondary-light: #e0c87a;
            --success: #0D9488;
            --warning: #F59E0B;
            --danger: #DC2626;
            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-400: #9CA3AF;
            --gray-500: #6B7280;
            --gray-600: #4B5563;
            --gray-700: #374151;
            --gray-800: #1F2937;
            --gray-900: #111827;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --radius-2xl: 1.5rem;
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--gray-50);
            color: var(--gray-800);
            line-height: 1.5;
            overflow-x: hidden;
        }
        
        /* Typography */
        h1, h2, h3, h4, .heading {
            font-family: 'Playfair Display', serif;
        }
        
        /* Container */
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 24px;
            font-weight: 600;
            font-size: 0.875rem;
            border-radius: var(--radius-md);
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
            text-decoration: none;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
            box-shadow: var(--shadow-sm);
        }
        
        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        
        .btn-secondary {
            background: var(--secondary);
            color: var(--primary-dark);
        }
        
        .btn-secondary:hover {
            background: var(--secondary-dark);
            transform: translateY(-2px);
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background: var(--primary);
            color: white;
        }
        
        .btn-large {
            padding: 16px 32px;
            font-size: 1rem;
        }
        
        /* Header Navigation */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: var(--shadow-sm);
            z-index: 1000;
            backdrop-filter: blur(10px);
            background: rgba(255,255,255,0.95);
        }
        
        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .logo-icon i {
            color: white;
            font-size: 1.2rem;
        }
        
        .logo-text {
            font-size: 1.5rem;
            font-weight: 800;
            font-family: 'Playfair Display', serif;
            color: var(--primary);
        }
        
        .logo-text span {
            color: var(--secondary);
        }
        
        .nav-links {
            display: flex;
            gap: 32px;
            align-items: center;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--gray-600);
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--gray-600);
        }
        
        /* Hero Section */
        .hero {
            padding: 160px 0 100px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="rgba(255,255,255,0.05)" d="M0 0h200v200H0z"/><circle cx="100" cy="100" r="80" fill="rgba(255,255,255,0.03)"/></svg>');
            background-size: 60px 60px;
            pointer-events: none;
        }
        
        .hero-content {
            text-align: center;
            color: white;
            position: relative;
            z-index: 1;
        }
        
        .hero-badge {
            display: inline-block;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            padding: 8px 20px;
            border-radius: 100px;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 24px;
        }
        
        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            margin-bottom: 24px;
            line-height: 1.2;
        }
        
        .hero h1 span {
            color: var(--secondary-light);
        }
        
        .hero p {
            font-size: 1.125rem;
            max-width: 600px;
            margin: 0 auto 32px;
            opacity: 0.9;
        }
        
        .hero-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 60px;
        }
        
        /* Trust Badges */
        .trust-badges {
            display: flex;
            justify-content: center;
            gap: 48px;
            flex-wrap: wrap;
            margin-top: 48px;
        }
        
        .trust-item {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            padding: 8px 20px;
            border-radius: 100px;
        }
        
        .trust-item i {
            font-size: 1.25rem;
        }
        
        /* Stats Section */
        .stats-section {
            padding: 60px 0;
            background: white;
            border-bottom: 1px solid var(--gray-200);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 32px;
            text-align: center;
        }
        
        .stat-card {
            padding: 24px;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary);
            font-family: 'Playfair Display', serif;
        }
        
        .stat-label {
            color: var(--gray-500);
            font-weight: 500;
            margin-top: 8px;
        }
        
        /* How It Works */
        .howitworks {
            padding: 80px 0;
            background: var(--gray-50);
        }
        
        .section-header {
            text-align: center;
            max-width: 600px;
            margin: 0 auto 48px;
        }
        
        .section-header h2 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: 16px;
            color: var(--gray-900);
        }
        
        .section-header p {
            color: var(--gray-500);
        }
        
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 32px;
        }
        
        .step-card {
            background: white;
            padding: 32px;
            border-radius: var(--radius-xl);
            text-align: center;
            box-shadow: var(--shadow-md);
            transition: all 0.3s;
        }
        
        .step-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-xl);
        }
        
        .step-number {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.25rem;
            margin: 0 auto 20px;
        }
        
        .step-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .step-card h3 {
            margin-bottom: 12px;
            font-size: 1.25rem;
        }
        
        .step-card p {
            color: var(--gray-500);
            line-height: 1.6;
        }
        
        /* Search Section */
        .search-section {
            padding: 80px 0;
            background: white;
        }
        
        .search-card {
            max-width: 700px;
            margin: 0 auto;
            background: var(--gray-50);
            border-radius: var(--radius-xl);
            padding: 40px;
            box-shadow: var(--shadow-lg);
        }
        
        .search-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-group label {
            font-weight: 600;
            font-size: 0.875rem;
            color: var(--gray-700);
        }
        
        .form-group input, .form-group select {
            padding: 12px 16px;
            border: 1px solid var(--gray-300);
            border-radius: var(--radius-md);
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(0,63,135,0.1);
        }
        
        .search-btn {
            background: var(--primary);
            color: white;
            padding: 14px;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .search-btn:hover {
            background: var(--primary-dark);
        }
        
        /* Testimonials */
        .testimonials-section {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
        }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 32px;
            margin-top: 48px;
        }
        
        .testimonial-card {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            padding: 32px;
            border-radius: var(--radius-xl);
            transition: all 0.3s;
        }
        
        .testimonial-card:hover {
            transform: translateY(-4px);
            background: rgba(255,255,255,0.15);
        }
        
        .testimonial-text {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .testimonial-avatar {
            width: 48px;
            height: 48px;
            background: var(--secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        .testimonial-info h4 {
            font-size: 1rem;
            margin-bottom: 4px;
        }
        
        .testimonial-info p {
            font-size: 0.75rem;
            opacity: 0.8;
        }
        
        .stars {
            color: var(--secondary);
            font-size: 0.875rem;
            margin-top: 8px;
        }
        
        /* Partner Network */
        .partners-section {
            padding: 80px 0;
            background: var(--gray-50);
        }
        
        .partners-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-top: 48px;
        }
        
        .partner-card {
            background: white;
            padding: 24px;
            border-radius: var(--radius-lg);
            text-align: center;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s;
        }
        
        .partner-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }
        
        .partner-card i {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 16px;
        }
        
        .partner-card h4 {
            margin-bottom: 8px;
        }
        
        .partner-card p {
            font-size: 0.875rem;
            color: var(--gray-500);
        }
        
        /* CTA Section */
        .cta-section {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
            text-align: center;
            color: var(--primary-dark);
        }
        
        .cta-section h2 {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: 16px;
        }
        
        .cta-section p {
            max-width: 500px;
            margin: 0 auto 32px;
            opacity: 0.9;
        }
        
        /* Footer */
        .footer {
            background: var(--gray-900);
            color: var(--gray-400);
            padding: 60px 0 30px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 48px;
            margin-bottom: 48px;
        }
        
        .footer-col h4 {
            color: white;
            margin-bottom: 20px;
            font-size: 1.125rem;
        }
        
        .footer-col ul {
            list-style: none;
        }
        
        .footer-col li {
            margin-bottom: 12px;
        }
        
        .footer-col a {
            color: var(--gray-400);
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .footer-col a:hover {
            color: var(--secondary);
        }
        
        .social-links {
            display: flex;
            gap: 16px;
            margin-top: 20px;
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .social-links a:hover {
            background: var(--secondary);
            color: var(--primary-dark);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.1);
            font-size: 0.875rem;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 72px;
                left: 0;
                right: 0;
                background: white;
                flex-direction: column;
                padding: 20px;
                box-shadow: var(--shadow-lg);
            }
            
            .nav-links.active {
                display: flex;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero {
                padding: 120px 0 60px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                gap: 16px;
            }
            
            .trust-badges {
                gap: 16px;
            }
        }
        
        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(8px);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: var(--radius-xl);
            max-width: 600px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            animation: modalIn 0.3s ease;
        }
        
        @keyframes modalIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* Toast */
        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--gray-800);
            color: white;
            padding: 12px 24px;
            border-radius: var(--radius-md);
            z-index: 3000;
            animation: toastIn 0.3s ease;
        }
        
        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }
        
        /* Loading */
        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.9);
            z-index: 4000;
            align-items: center;
            justify-content: center;
        }
        
        .loading.active {
            display: flex;
        }
        
        .spinner {
            width: 48px;
            height: 48px;
            border: 4px solid var(--gray-200);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>

<!-- Navigation -->
<nav class="navbar">
    <div class="nav-container">
        <a href="/" class="logo">
            <div class="logo-icon">
                <i class="fas fa-passport"></i>
            </div>
            <span class="logo-text">TCHEK<span>ELA</span></span>
        </a>
        
        <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
            <i class="fas fa-bars"></i>
        </button>
        
        <div class="nav-links" id="navLinks">
            <a href="#howitworks">Fonctionnement</a>
            <a href="#search">Rechercher</a>
            <a href="#partners">Partenaires</a>
            <a href="#testimonials">Témoignages</a>
            <a href="#" onclick="openDeclareModal()" class="btn btn-primary" style="padding: 8px 20px;">Déclarer</a>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <div class="hero-badge">
                <i class="fas fa-shield-alt"></i> 100% Gratuit • Certifié
            </div>
            <h1>Retrouvez vos <span>documents perdus</span><br>avec TCHEKELA</h1>
            <p>La première plateforme collaborative haïtienne qui connecte les personnes ayant perdu leurs documents avec celles qui les ont trouvés.</p>
            <div class="hero-buttons">
                <button onclick="openDeclareModal()" class="btn btn-secondary btn-large">
                    <i class="fas fa-file-circle-plus"></i> J'ai trouvé un document
                </button>
                <button onclick="scrollToSearch()" class="btn btn-outline btn-large">
                    <i class="fas fa-search"></i> Je cherche un document
                </button>
            </div>
            <div class="trust-badges">
                <div class="trust-item"><i class="fas fa-check-circle"></i> 100% Gratuit</div>
                <div class="trust-item"><i class="fas fa-shield-halbed"></i> Données sécurisées</div>
                <div class="trust-item"><i class="fas fa-globe"></i> Disponible partout</div>
                <div class="trust-item"><i class="fas fa-clock"></i> Assistance 7j/7</div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="stats-section">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number"><?php echo $stats['declared']; ?>+</div>
                <div class="stat-label">Documents déclarés</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?php echo $stats['returned']; ?>+</div>
                <div class="stat-label">Documents restitués</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?php echo $stats['families']; ?>+</div>
                <div class="stat-label">Familles aidées</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?php echo $stats['partners']; ?></div>
                <div class="stat-label">Partenaires</div>
            </div>
            <div class="stat-card">
                <div class="stat-number"><?php echo $stats['countries']; ?></div>
                <div class="stat-label">Pays couverts</div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works -->
<section id="howitworks" class="howitworks">
    <div class="container">
        <div class="section-header">
            <h2>Comment ça marche ?</h2>
            <p>Trois étapes simples pour retrouver vos documents ou aider quelqu'un</p>
        </div>
        <div class="steps-grid">
            <div class="step-card">
                <div class="step-number">1</div>
                <div class="step-icon"><i class="fas fa-file-circle-plus"></i></div>
                <h3>Déclarez</h3>
                <p>Vous avez trouvé un document ? Remplissez notre formulaire rapide. Notre système OCR peut lire automatiquement les informations depuis une photo.</p>
            </div>
            <div class="step-card">
                <div class="step-number">2</div>
                <div class="step-icon"><i class="fas fa-magnifying-glass"></i></div>
                <h3>Recherchez</h3>
                <p>Vous avez perdu un document ? Saisissez votre nom et le type. Notre base de données recherche instantanément une correspondance.</p>
            </div>
            <div class="step-card">
                <div class="step-number">3</div>
                <div class="step-icon"><i class="fas fa-handshake"></i></div>
                <h3>Connectez-vous</h3>
                <p>Si une correspondance est trouvée, nous vous mettons directement en contact via WhatsApp ou téléphone pour organiser la restitution.</p>
            </div>
        </div>
    </div>
</section>

<!-- Search Section -->
<section id="search" class="search-section">
    <div class="container">
        <div class="section-header">
            <h2>Recherchez votre document</h2>
            <p>Plus de <?php echo $stats['declared']; ?> documents déclarés. Le vôtre est peut-être parmi eux</p>
        </div>
        <div class="search-card">
            <form class="search-form" onsubmit="event.preventDefault(); doSearch();">
                <div class="form-row">
                    <div class="form-group">
                        <label>Nom complet <span style="color: var(--danger);">*</span></label>
                        <input type="text" id="sName" placeholder="Ex: Jean Dupont" required>
                    </div>
                    <div class="form-group">
                        <label>Type de document</label>
                        <select id="sType">
                            <option value="">Tous les types</option>
                            <option>Passeport</option>
                            <option>Carte d'identité (CIN)</option>
                            <option>Permis de conduire</option>
                            <option>Acte de naissance</option>
                            <option>Diplôme</option>
                            <option>Carte bancaire</option>
                            <option>Badge professionnel</option>
                            <option>Autre</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Numéro du document (si connu)</label>
                        <input type="text" id="sNum" placeholder="Ex: HT-B8847291">
                    </div>
                    <div class="form-group">
                        <label>Ville</label>
                        <select id="sCity">
                            <option value="">Toutes les villes</option>
                            <option>Port-au-Prince</option>
                            <option>Cap-Haïtien</option>
                            <option>Gonaïves</option>
                            <option>Les Cayes</option>
                            <option>Jacmel</option>
                            <option>Saint-Marc</option>
                            <option>Léogâne</option>
                            <option>Hinche</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="search-btn">
                    <i class="fas fa-search"></i> Rechercher maintenant
                </button>
            </form>
        </div>
        <div id="resultsZone" style="display: none; margin-top: 40px;"></div>
    </div>
</section>

<!-- Partner Network -->
<section id="partners" class="partners-section">
    <div class="container">
        <div class="section-header">
            <h2>Notre réseau de partenaires</h2>
            <p>Des points de collecte partout en Haïti et dans le monde</p>
        </div>
        <div class="partners-grid">
            <div class="partner-card">
                <i class="fas fa-building"></i>
                <h4>Commissariats</h4>
                <p>15 points dans 8 villes</p>
            </div>
            <div class="partner-card">
                <i class="fas fa-landmark"></i>
                <h4>Mairies</h4>
                <p>12 mairies partenaires</p>
            </div>
            <div class="partner-card">
                <i class="fas fa-church"></i>
                <h4>Églises</h4>
                <p>8 églises engagées</p>
            </div>
            <div class="partner-card">
                <i class="fas fa-store"></i>
                <h4>Commerces</h4>
                <p>6 commerces partenaires</p>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section id="testimonials" class="testimonials-section">
    <div class="container">
        <div class="section-header">
            <h2 style="color: white;">Ils nous font confiance</h2>
            <p style="color: rgba(255,255,255,0.8);">Découvrez les histoires de ceux qui ont retrouvé leurs documents</p>
        </div>
        <div class="testimonials-grid">
            <?php foreach ($testimonials as $t): ?>
            <div class="testimonial-card">
                <div class="testimonial-text">"<?php echo htmlspecialchars($t['text']); ?>"</div>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">
                        <?php echo substr($t['name'], 0, 1); ?>
                    </div>
                    <div class="testimonial-info">
                        <h4><?php echo htmlspecialchars($t['name']); ?></h4>
                        <p><?php echo htmlspecialchars($t['role']); ?> • <?php echo htmlspecialchars($t['city']); ?></p>
                        <div class="stars">
                            <?php for($i=0; $i<$t['rating']; $i++) echo '<i class="fas fa-star"></i>'; ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta-section">
    <div class="container">
        <h2>Prêt à aider ou à retrouver vos documents ?</h2>
        <p>Rejoignez notre communauté et participez à cette belle initiative solidaire</p>
        <button onclick="openDeclareModal()" class="btn btn-primary btn-large">
            <i class="fas fa-file-circle-plus"></i> Déclarer un document maintenant
        </button>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <div class="footer-grid">
            <div class="footer-col">
                <div class="logo" style="margin-bottom: 20px;">
                    <div class="logo-icon">
                        <i class="fas fa-passport"></i>
                    </div>
                    <span class="logo-text" style="color: white;">TCHEK<span style="color: var(--secondary);">ELA</span></span>
                </div>
                <p>La première plateforme collaborative haïtienne pour retrouver vos documents perdus. Gratuit, simple et efficace.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Liens rapides</h4>
                <ul>
                    <li><a href="#howitworks">Comment ça marche</a></li>
                    <li><a href="#search">Rechercher un document</a></li>
                    <li><a href="#" onclick="openDeclareModal()">Déclarer un document</a></li>
                    <li><a href="#partners">Nos partenaires</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Légal</h4>
                <ul>
                    <li><a href="#">Conditions d'utilisation</a></li>
                    <li><a href="#">Confidentialité</a></li>
                    <li><a href="#">Mentions légales</a></li>
                    <li><a href="#">Cookies</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Contact</h4>
                <ul>
                    <li><i class="fas fa-envelope"></i> <a href="mailto:info@tchekela.com">info@tchekela.com</a></li>
                    <li><i class="fab fa-whatsapp"></i> <a href="https://wa.me/50933988754">+509 3398 8754</a></li>
                    <li><i class="fas fa-map-marker-alt"></i> Haïti / International</li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2026 TCHEKELA. Tous droits réservés. Une initiative pour la communauté haïtienne.</p>
        </div>
    </div>
</footer>

<!-- Declaration Modal -->
<div id="declareModal" class="modal">
    <div class="modal-content">
        <div style="padding: 24px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                <h2 style="font-family: 'Playfair Display', serif;">Déclarer un document trouvé</h2>
                <button onclick="closeDeclareModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">&times;</button>
            </div>
            <form id="declareForm" enctype="multipart/form-data">
                <div class="form-group">
                    <label>Nom complet sur le document *</label>
                    <input type="text" id="dName" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Type de document *</label>
                        <select id="dType" required>
                            <option value="">Sélectionner</option>
                            <option>Passeport</option>
                            <option>Carte d'identité (CIN)</option>
                            <option>Permis de conduire</option>
                            <option>Acte de naissance</option>
                            <option>Diplôme</option>
                            <option>Carte bancaire</option>
                            <option>Autre</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Numéro du document</label>
                        <input type="text" id="dNum">
                    </div>
                </div>
                <div class="form-group">
                    <label>Où avez-vous trouvé le document ? *</label>
                    <input type="text" id="fPlace" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Votre prénom *</label>
                        <input type="text" id="fFname" required>
                    </div>
                    <div class="form-group">
                        <label>Votre nom *</label>
                        <input type="text" id="fLname" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Téléphone / WhatsApp *</label>
                        <input type="tel" id="fPhone" placeholder="+509 XX XX XXXX" required>
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="email" id="fEmail">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Pays *</label>
                        <select id="fCountry">
                            <option value="HT">Haïti</option>
                            <option value="US">États-Unis</option>
                            <option value="FR">France</option>
                            <option value="CA">Canada</option>
                            <option value="DO">République Dominicaine</option>
                            <option value="other">Autre</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Ville *</label>
                        <select id="fCity">
                            <option value="Port-au-Prince">Port-au-Prince</option>
                            <option value="Cap-Haïtien">Cap-Haïtien</option>
                            <option value="Gonaïves">Gonaïves</option>
                            <option value="Les Cayes">Les Cayes</option>
                            <option value="Jacmel">Jacmel</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Photo du document (optionnel - aide à l'OCR)</label>
                    <input type="file" id="docPhoto" accept="image/*">
                </div>
                <div style="margin-top: 24px; display: flex; gap: 12px;">
                    <button type="button" onclick="closeDeclareModal()" class="btn btn-outline" style="flex: 1;">Annuler</button>
                    <button type="submit" class="btn btn-primary" style="flex: 2;">Publier la déclaration</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Loading -->
<div id="loading" class="loading">
    <div class="spinner"></div>
</div>

<script>
// Navigation
function toggleMobileMenu() {
    document.getElementById('navLinks').classList.toggle('active');
}

function scrollToSearch() {
    document.getElementById('search').scrollIntoView({ behavior: 'smooth' });
}

// Modal
function openDeclareModal() {
    document.getElementById('declareModal').classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeDeclareModal() {
    document.getElementById('declareModal').classList.remove('active');
    document.body.style.overflow = '';
}

// Toast notification
function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.innerHTML = `<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i> ${message}`;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

// Loading
function showLoading() {
    document.getElementById('loading').classList.add('active');
}

function hideLoading() {
    document.getElementById('loading').classList.remove('active');
}

// Search function
async function doSearch() {
    const name = document.getElementById('sName').value.trim();
    if (!name) {
        showToast('Veuillez saisir un nom', 'error');
        return;
    }
    
    showLoading();
    
    const type = document.getElementById('sType').value;
    const number = document.getElementById('sNum').value;
    const city = document.getElementById('sCity').value;
    
    try {
        const response = await fetch(`/api/search.php?name=${encodeURIComponent(name)}&type=${encodeURIComponent(type)}&number=${encodeURIComponent(number)}&city=${encodeURIComponent(city)}`);
        const results = await response.json();
        
        const resultsDiv = document.getElementById('resultsZone');
        
        if (results && results.length > 0) {
            resultsDiv.innerHTML = `
                <div style="background: var(--success); color: white; padding: 24px; border-radius: var(--radius-lg); text-align: center;">
                    <i class="fas fa-trophy" style="font-size: 3rem; margin-bottom: 16px;"></i>
                    <h3>Bonne nouvelle ! Document trouvé !</h3>
                    <p>Nous avons trouvé une correspondance pour "${name}".</p>
                    <button onclick="contactFinder(${results[0].id})" class="btn btn-secondary" style="margin-top: 16px;">
                        <i class="fab fa-whatsapp"></i> Contacter la personne
                    </button>
                </div>
            `;
        } else {
            resultsDiv.innerHTML = `
                <div style="background: var(--gray-100); padding: 40px; border-radius: var(--radius-lg); text-align: center;">
                    <i class="fas fa-search" style="font-size: 3rem; color: var(--gray-400); margin-bottom: 16px;"></i>
                    <h3>Aucun document trouvé</h3>
                    <p>Aucune correspondance n'a été trouvée pour "${name}".</p>
                    <button onclick="openDeclareModal()" class="btn btn-primary" style="margin-top: 16px;">
                        <i class="fas fa-file-circle-plus"></i> Déclarer ce document
                    </button>
                </div>
            `;
        }
        
        resultsDiv.style.display = 'block';
        resultsDiv.scrollIntoView({ behavior: 'smooth' });
    } catch (error) {
        showToast('Erreur lors de la recherche', 'error');
    } finally {
        hideLoading();
    }
}

// Form submission
document.getElementById('declareForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData();
    formData.append('doc_name', document.getElementById('dName').value);
    formData.append('doc_type', document.getElementById('dType').value);
    formData.append('doc_number', document.getElementById('dNum').value);
    formData.append('finder_place', document.getElementById('fPlace').value);
    formData.append('finder_firstname', document.getElementById('fFname').value);
    formData.append('finder_lastname', document.getElementById('fLname').value);
    formData.append('finder_phone', document.getElementById('fPhone').value);
    formData.append('finder_email', document.getElementById('fEmail').value);
    formData.append('finder_city', document.getElementById('fCity').value);
    formData.append('finder_country', document.getElementById('fCountry').value);
    
    const photo = document.getElementById('docPhoto').files[0];
    if (photo) formData.append('doc_photo', photo);
    
    showLoading();
    
    try {
        const response = await fetch('/api/add.php', { method: 'POST', body: formData });
        const result = await response.json();
        
        if (result.success) {
            closeDeclareModal();
            showToast('Document déclaré avec succès ! Référence: ' + result.reference);
            document.getElementById('declareForm').reset();
        } else {
            showToast(result.message || 'Erreur lors de la déclaration', 'error');
        }
    } catch (error) {
        showToast('Erreur de connexion', 'error');
    } finally {
        hideLoading();
    }
});

// Contact finder
async function contactFinder(docId) {
    showLoading();
    try {
        const response = await fetch(`/api/get-contact.php?id=${docId}`);
        const data = await response.json();
        if (data.phone) {
            window.open(`https://wa.me/${data.phone}?text=Bonjour, je vous contacte via TCHEKELA pour le document que vous avez trouvé.`, '_blank');
        }
    } catch (error) {
        showToast('Erreur', 'error');
    } finally {
        hideLoading();
    }
}

// Close modal on click outside
document.getElementById('declareModal').addEventListener('click', (e) => {
    if (e.target === document.getElementById('declareModal')) closeDeclareModal();
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) target.scrollIntoView({ behavior: 'smooth' });
    });
});
</script>
</body>
</html>