<?php
// index.php - Page d'accueil avec Google AdSense
$page_title = 'PDFMaster - Tous vos outils PDF en ligne';
include_once 'includes/header.php';
include_once 'includes/ads.php';
?>

<!-- Hero Section -->
<section class="bg-gradient-to-br from-blue-50 via-white to-blue-50 py-16 lg:py-24 overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="slide-up">
                <div class="inline-flex items-center bg-blue-100 text-blue-700 px-4 py-1.5 rounded-full text-sm font-medium mb-6">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    100% Gratuit et sécurisé
                </div>
                <h1 class="text-4xl lg:text-6xl font-bold text-slate-900 leading-tight mb-6">
                    Tous vos outils PDF <br>
                    <span class="bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">en un seul endroit</span>
                </h1>
                <p class="text-lg lg:text-xl text-slate-600 mb-8 leading-relaxed">
                    Convertissez, compressez, fusionnez et divisez vos documents PDF en quelques clics. Simple, rapide et sécurisé.
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="#tools" class="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold hover:bg-blue-700 transition-all shadow-lg shadow-blue-600/30 text-center">
                        Commencer gratuitement
                    </a>
                    <a href="#features" class="border border-slate-300 text-slate-700 px-8 py-4 rounded-xl font-semibold hover:bg-white transition-colors text-center">
                        En savoir plus
                    </a>
                </div>
                <div class="mt-8 flex flex-wrap items-center gap-6 text-sm text-slate-600">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        Sans inscription
                    </div>
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        100% Sécurisé
                    </div>
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        Rapide
                    </div>
                </div>
            </div>
            <div class="fade-in hidden lg:block">
                <div class="relative">
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-500 rounded-3xl blur-3xl opacity-20"></div>
                    <div class="relative bg-white rounded-3xl shadow-2xl p-8 border border-slate-100">
                        <div class="flex items-center space-x-2 mb-6">
                            <div class="w-3 h-3 bg-red-400 rounded-full"></div>
                            <div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
                            <div class="w-3 h-3 bg-green-400 rounded-full"></div>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center p-4 bg-blue-50 rounded-xl border border-blue-100">
                                <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mr-4">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                                </div>
                                <div class="flex-1">
                                    <div class="font-semibold text-slate-900">document.pdf</div>
                                    <div class="text-sm text-slate-500">2.4 MB</div>
                                </div>
                                <div class="text-green-600 font-semibold">✓ Converti</div>
                            </div>
                            <div class="flex items-center p-4 bg-green-50 rounded-xl border border-green-100">
                                <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mr-4">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
                                </div>
                                <div class="flex-1">
                                    <div class="font-semibold text-slate-900">rapport.pdf</div>
                                    <div class="text-sm text-slate-500">15 MB → 3.2 MB</div>
                                </div>
                                <div class="text-green-600 font-semibold">-78%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 🎯 ANNONCE 1 : Bannière sous le Hero -->
<?php displayTopBanner('1234567890'); // Remplacez par votre ID de slot ?>

<!-- Section Outils -->
<section id="tools" class="py-16 lg:py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl lg:text-5xl font-bold text-slate-900 mb-4">Nos outils PDF</h2>
            <p class="text-lg text-slate-600 max-w-2xl mx-auto">Choisissez l'outil dont vous avez besoin et commencez en quelques secondes</p>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- PDF en Word -->
            <a href="pdf-to-word.php" class="tool-card group bg-white p-8 rounded-2xl border-2 border-slate-100 hover:border-blue-500 block">
                <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform shadow-lg shadow-blue-500/30">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
                <h3 class="font-bold text-xl text-slate-900 mb-2">PDF en Word</h3>
                <p class="text-slate-600 text-sm mb-4">Convertissez vos PDF en documents Word éditables.</p>
                <div class="flex items-center text-blue-600 font-semibold text-sm group-hover:translate-x-1 transition-transform">
                    Utiliser l'outil
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </div>
            </a>

            <!-- Compresser -->
            <a href="compress.php" class="tool-card group bg-white p-8 rounded-2xl border-2 border-slate-100 hover:border-green-500 block">
                <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-700 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform shadow-lg shadow-green-500/30">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                    </svg>
                </div>
                <h3 class="font-bold text-xl text-slate-900 mb-2">Compresser PDF</h3>
                <p class="text-slate-600 text-sm mb-4">Réduisez la taille de vos fichiers PDF.</p>
                <div class="flex items-center text-green-600 font-semibold text-sm group-hover:translate-x-1 transition-transform">
                    Utiliser l'outil
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </div>
            </a>

            <!-- 🎯 ANNONCE 2 : In-feed entre les outils (position 3 sur 4) -->
            <div class="hidden lg:block">
                <?php displayInFeedAd('2345678901'); // Remplacez par votre ID de slot ?>
            </div>
            <!-- Sur mobile, l'annonce est masquée pour ne pas casser la grille -->

            <!-- Fusionner -->
            <a href="merge.php" class="tool-card group bg-white p-8 rounded-2xl border-2 border-slate-100 hover:border-purple-500 block">
                <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-700 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform shadow-lg shadow-purple-500/30">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                    </svg>
                </div>
                <h3 class="font-bold text-xl text-slate-900 mb-2">Fusionner PDF</h3>
                <p class="text-slate-600 text-sm mb-4">Combinez plusieurs fichiers PDF en un seul.</p>
                <div class="flex items-center text-purple-600 font-semibold text-sm group-hover:translate-x-1 transition-transform">
                    Utiliser l'outil
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </div>
            </a>

            <!-- Diviser -->
            <a href="split.php" class="tool-card group bg-white p-8 rounded-2xl border-2 border-slate-100 hover:border-orange-500 block">
                <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-700 rounded-2xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform shadow-lg shadow-orange-500/30">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z"></path>
                    </svg>
                </div>
                <h3 class="font-bold text-xl text-slate-900 mb-2">Diviser PDF</h3>
                <p class="text-slate-600 text-sm mb-4">Extrayez des pages spécifiques de votre PDF.</p>
                <div class="flex items-center text-orange-600 font-semibold text-sm group-hover:translate-x-1 transition-transform">
                    Utiliser l'outil
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- 🎯 ANNONCE 3 : Bannière entre sections -->
<div class="bg-slate-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <?php displayMiddleBanner('3456789012'); // Remplacez par votre ID de slot ?>
    </div>
</div>

<!-- Section Fonctionnalités -->
<section id="features" class="py-16 lg:py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl lg:text-5xl font-bold text-slate-900 mb-4">Pourquoi choisir PDFMaster ?</h2>
            <p class="text-lg text-slate-600 max-w-2xl mx-auto">Des outils puissants conçus pour vous faire gagner du temps</p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-slate-50 p-8 rounded-2xl hover:shadow-lg transition-shadow">
                <div class="w-14 h-14 bg-blue-100 rounded-2xl flex items-center justify-center mb-5">
                    <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <h3 class="font-bold text-xl text-slate-900 mb-3">Ultra rapide</h3>
                <p class="text-slate-600">Traitement instantané grâce à notre infrastructure optimisée.</p>
            </div>

            <div class="bg-slate-50 p-8 rounded-2xl hover:shadow-lg transition-shadow">
                <div class="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mb-5">
                    <svg class="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                    </svg>
                </div>
                <h3 class="font-bold text-xl text-slate-900 mb-3">100% sécurisé</h3>
                <p class="text-slate-600">Vos fichiers sont chiffrés et supprimés après traitement.</p>
            </div>

            <div class="bg-slate-50 p-8 rounded-2xl hover:shadow-lg transition-shadow">
                <div class="w-14 h-14 bg-purple-100 rounded-2xl flex items-center justify-center mb-5">
                    <svg class="w-7 h-7 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
                    </svg>
                </div>
                <h3 class="font-bold text-xl text-slate-900 mb-3">Qualité pro</h3>
                <p class="text-slate-600">Conservation parfaite de la mise en page et des polices.</p>
            </div>
        </div>
    </div>
</section>

<!-- 🎯 ANNONCE 4 : Grande bannière avant le CTA -->
<div class="bg-slate-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <?php displayMiddleBanner('4567890123'); // Remplacez par votre ID de slot ?>
    </div>
</div>

<!-- Section CTA -->
<section class="py-16 lg:py-20 bg-gradient-to-br from-blue-600 to-blue-800">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl lg:text-4xl font-bold text-white mb-4">Prêt à commencer ?</h2>
        <p class="text-lg text-blue-100 mb-8 max-w-2xl mx-auto">Rejoignez des milliers d'utilisateurs qui font confiance à PDFMaster.</p>
        <a href="#tools" class="inline-block bg-white text-blue-600 px-8 py-4 rounded-xl font-semibold hover:bg-blue-50 transition-colors shadow-xl">
            Commencer maintenant - C'est gratuit
        </a>
    </div>
</section>

<!-- 🎯 ANNONCE 5 : Bannière avant le footer -->
<div class="bg-white py-8 border-t border-slate-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <?php displayTopBanner('5678901234'); // Remplacez par votre ID de slot ?>
    </div>
</div>

<?php include_once 'includes/footer.php'; ?>