<?php
/**
 * Front Page Template
 *
 * @package Navier_Instruments
 */

get_header();

// Get page URLs
$products_page = get_page_by_path('produits');
$products_url = $products_page ? get_permalink($products_page) : home_url('/produits/');

$about_page = get_page_by_path('a-propos');
$about_url = $about_page ? get_permalink($about_page) : home_url('/a-propos/');

$services_page = get_page_by_path('services');
$services_url = $services_page ? get_permalink($services_page) : home_url('/services/');

$contact_page = get_page_by_path('contact');
$contact_url = $contact_page ? get_permalink($contact_page) : home_url('/contact/');
?>

<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <div class="hero-inner">
            <div class="hero-content animate animate-fade-up">
                <span class="hero-badge">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg>
                    <?php echo esc_html(get_theme_mod('navier_hero_badge', 'Innovation Éco-responsable')); ?>
                </span>

                <h1 class="hero-title">
                    <?php echo wp_kses_post(get_theme_mod('navier_hero_title', 'Excellence en <span>Prélèvement d\'Air</span> Industriel')); ?>
                </h1>

                <p class="hero-description">
                    <?php echo esc_html(get_theme_mod('navier_hero_description', 'Navier Instruments conçoit et fabrique des solutions innovantes de prélèvement d\'air pour les environnements industriels et de laboratoire. Qualité, précision et durabilité au cœur de notre mission.')); ?>
                </p>

                <div class="hero-buttons">
                    <a href="<?php echo esc_url($products_url); ?>" class="btn btn--primary btn--large">
                        <?php echo esc_html(get_theme_mod('navier_hero_cta1_text', 'Découvrir nos Produits')); ?>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                            <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>
                    </a>
                    <a href="<?php echo esc_url($contact_url); ?>" class="btn btn--secondary btn--large">
                        <?php echo esc_html(get_theme_mod('navier_hero_cta2_text', 'Nous Contacter')); ?>
                    </a>
                </div>

                <div class="hero-stats">
                    <div class="hero-stat">
                        <span class="hero-stat-value"><?php echo esc_html(get_theme_mod('navier_stat_1_value', '25+')); ?></span>
                        <span class="hero-stat-label"><?php echo esc_html(get_theme_mod('navier_stat_1_label', 'Années d\'Expérience')); ?></span>
                    </div>
                    <div class="hero-stat">
                        <span class="hero-stat-value"><?php echo esc_html(get_theme_mod('navier_stat_2_value', '500+')); ?></span>
                        <span class="hero-stat-label"><?php echo esc_html(get_theme_mod('navier_stat_2_label', 'Clients dans le Monde')); ?></span>
                    </div>
                    <div class="hero-stat">
                        <span class="hero-stat-value"><?php echo esc_html(get_theme_mod('navier_stat_3_value', '100%')); ?></span>
                        <span class="hero-stat-label"><?php echo esc_html(get_theme_mod('navier_stat_3_label', 'Made in France')); ?></span>
                    </div>
                </div>
            </div>

            <div class="hero-image animate animate-fade-left animate-delay-2">
                <?php
                $hero_image = get_theme_mod('navier_hero_image');
                if ($hero_image) :
                ?>
                    <img src="<?php echo esc_url($hero_image); ?>" alt="Navier Instruments - Technologie de Prélèvement d'Air">
                <?php else : ?>
                    <div class="hero-image-placeholder" style="background: linear-gradient(135deg, var(--navier-primary) 0%, var(--navier-accent) 100%); width: 100%; height: 400px; border-radius: var(--border-radius-xl); display: flex; align-items: center; justify-content: center;">
                        <svg width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" style="opacity: 0.5;">
                            <circle cx="12" cy="12" r="10"></circle>
                            <path d="M12 6v6l4 2"></path>
                            <path d="M8 12h8"></path>
                        </svg>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="section features">
    <div class="container">
        <div class="section-header animate animate-fade-up">
            <span class="section-badge">Pourquoi Nous Choisir</span>
            <h2 class="section-title">L'Innovation au Service de la Qualité de l'Air</h2>
            <p class="section-description">Découvrez pourquoi les leaders de l'industrie font confiance à Navier Instruments pour leurs besoins en prélèvement d'air.</p>
        </div>

        <div class="features-grid">
            <!-- Feature 1 -->
            <div class="feature-card animate animate-fade-up animate-delay-1">
                <div class="feature-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                    </svg>
                </div>
                <h4 class="feature-title">Qualité Premium</h4>
                <p class="feature-description">Chaque produit est conçu et fabriqué selon les normes de qualité les plus strictes, garantissant des résultats fiables et précis.</p>
            </div>

            <!-- Feature 2 -->
            <div class="feature-card animate animate-fade-up animate-delay-2">
                <div class="feature-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                        <path d="M2 17l10 5 10-5"></path>
                        <path d="M2 12l10 5 10-5"></path>
                    </svg>
                </div>
                <h4 class="feature-title">Innovation de Pointe</h4>
                <p class="feature-description">Notre équipe R&D repousse constamment les limites de la technologie pour vous offrir les solutions les plus avancées.</p>
            </div>

            <!-- Feature 3 - Eco -->
            <div class="feature-card feature-card--eco animate animate-fade-up animate-delay-3">
                <div class="feature-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                        <path d="M9 12l2 2 4-4"></path>
                    </svg>
                </div>
                <h4 class="feature-title">Éco-responsable</h4>
                <p class="feature-description">Engagés pour un avenir durable, nous intégrons des pratiques éco-responsables à chaque étape de la production.</p>
            </div>

            <!-- Feature 4 -->
            <div class="feature-card animate animate-fade-up animate-delay-1">
                <div class="feature-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                </div>
                <h4 class="feature-title">Support Expert</h4>
                <p class="feature-description">Notre équipe d'experts est là pour vous guider dans le choix et l'utilisation de vos équipements.</p>
            </div>

            <!-- Feature 5 -->
            <div class="feature-card animate animate-fade-up animate-delay-2">
                <div class="feature-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                </div>
                <h4 class="feature-title">Made in France</h4>
                <p class="feature-description">Fièrement conçu et fabriqué à Senlis, en France, garantissant une expertise locale et une qualité irréprochable.</p>
            </div>

            <!-- Feature 6 -->
            <div class="feature-card animate animate-fade-up animate-delay-3">
                <div class="feature-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                </div>
                <h4 class="feature-title">Qualité Certifiée</h4>
                <p class="feature-description">Processus et produits certifiés ISO répondant aux normes internationales les plus strictes.</p>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="section about">
    <div class="container">
        <div class="about-inner">
            <div class="about-image animate animate-fade-right">
                <?php
                $about_image = get_theme_mod('navier_about_image');
                if ($about_image) :
                ?>
                    <img src="<?php echo esc_url($about_image); ?>" alt="À propos de Navier Instruments">
                <?php else : ?>
                    <div class="about-image-placeholder" style="background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-gray-300) 100%); width: 100%; height: 400px; border-radius: var(--border-radius-xl); display: flex; align-items: center; justify-content: center;">
                        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1" style="opacity: 0.3;">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                            <circle cx="8.5" cy="8.5" r="1.5"></circle>
                            <polyline points="21 15 16 10 5 21"></polyline>
                        </svg>
                    </div>
                <?php endif; ?>
                <div class="about-badge">
                    <span class="about-badge-value"><?php echo esc_html(get_theme_mod('navier_about_badge_value', '25+')); ?></span>
                    <span class="about-badge-label"><?php echo esc_html(get_theme_mod('navier_about_badge_label', 'Années d\'Excellence')); ?></span>
                </div>
            </div>

            <div class="about-content animate animate-fade-left">
                <span class="section-badge">À Propos</span>
                <h2 class="section-title"><?php echo esc_html(get_theme_mod('navier_about_title', 'Pionniers du Prélèvement d\'Air')); ?></h2>
                <p><?php echo esc_html(get_theme_mod('navier_about_text', 'Basée à Senlis, en France, Navier Instruments est à la pointe de la technologie de prélèvement d\'air depuis plus de deux décennies. Notre engagement envers l\'innovation, la qualité et la responsabilité environnementale guide chacune de nos actions.')); ?></p>

                <ul class="about-list">
                    <li>
                        <span class="about-list-icon">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <polyline points="20 6 9 17 4 12"></polyline>
                            </svg>
                        </span>
                        <span>Solutions innovantes pour environnements industriels et laboratoires</span>
                    </li>
                    <li>
                        <span class="about-list-icon">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <polyline points="20 6 9 17 4 12"></polyline>
                            </svg>
                        </span>
                        <span>Engagement pour la durabilité et les pratiques éco-responsables</span>
                    </li>
                    <li>
                        <span class="about-list-icon">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <polyline points="20 6 9 17 4 12"></polyline>
                            </svg>
                        </span>
                        <span>Dédiés à la santé et à la sécurité des utilisateurs</span>
                    </li>
                    <li>
                        <span class="about-list-icon">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <polyline points="20 6 9 17 4 12"></polyline>
                            </svg>
                        </span>
                        <span>Fort engagement communautaire et partenariats locaux</span>
                    </li>
                </ul>

                <a href="#contact" class="btn btn--primary">
                    Nous contacter
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Products Section -->
<section id="products" class="section products">
    <div class="container">
        <div class="section-header animate animate-fade-up">
            <span class="section-badge">Nos Produits</span>
            <h2 class="section-title">Solutions de Prélèvement d'Air</h2>
            <p class="section-description">Découvrez notre gamme de produits innovants conçus pour la précision et la fiabilité.</p>
        </div>

        <div class="products-grid">
            <?php
            $products = new WP_Query(array(
                'post_type'      => 'navier_product',
                'posts_per_page' => 3,
                'orderby'        => 'date',
                'order'          => 'DESC',
            ));

            if ($products->have_posts()) :
                $delay = 1;
                while ($products->have_posts()) : $products->the_post();
            ?>
                <article class="product-card animate animate-fade-up animate-delay-<?php echo esc_attr($delay); ?>">
                    <div class="product-image">
                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('navier-product'); ?>
                        <?php else : ?>
                            <div class="product-image-placeholder" style="width: 100%; height: 250px; background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-gray-300) 100%); display: flex; align-items: center; justify-content: center;">
                                <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1" style="opacity: 0.3;">
                                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                                </svg>
                            </div>
                        <?php endif; ?>
                        <?php
                        $categories = get_the_terms(get_the_ID(), 'product_category');
                        if ($categories && !is_wp_error($categories)) :
                        ?>
                            <span class="product-tag"><?php echo esc_html($categories[0]->name); ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="product-content">
                        <h4 class="product-title"><?php the_title(); ?></h4>
                        <p class="product-description"><?php echo esc_html(get_the_excerpt()); ?></p>
                        <a href="<?php the_permalink(); ?>" class="product-link">
                            En savoir plus
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                <polyline points="12 5 19 12 12 19"></polyline>
                            </svg>
                        </a>
                    </div>
                </article>
            <?php
                $delay++;
                if ($delay > 3) $delay = 1;
                endwhile;
                wp_reset_postdata();
            else :
                // Placeholder products if no products exist
                $placeholder_products = array(
                    array(
                        'title' => 'AirSampler Pro X500',
                        'desc'  => 'Solution de prélèvement d\'air haute performance pour environnements industriels avec certification ATEX.',
                        'tag'   => 'Industriel',
                    ),
                    array(
                        'title' => 'LabAnalyzer L200',
                        'desc'  => 'Analyseur de précision pour laboratoire avec analyse en temps réel et interface logicielle avancée.',
                        'tag'   => 'Laboratoire',
                    ),
                    array(
                        'title' => 'MiniAir Portable M100',
                        'desc'  => 'Solution portable ultra-compacte pour les mesures de qualité d\'air sur le terrain avec GPS intégré.',
                        'tag'   => 'Portable',
                    ),
                );

                $delay = 1;
                foreach ($placeholder_products as $product) :
            ?>
                <article class="product-card animate animate-fade-up animate-delay-<?php echo esc_attr($delay); ?>">
                    <div class="product-image">
                        <div class="product-image-placeholder" style="width: 100%; height: 250px; background: linear-gradient(135deg, var(--navier-gray-100) 0%, var(--navier-gray-300) 100%); display: flex; align-items: center; justify-content: center;">
                            <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1" style="opacity: 0.3;">
                                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                            </svg>
                        </div>
                        <span class="product-tag"><?php echo esc_html($product['tag']); ?></span>
                    </div>
                    <div class="product-content">
                        <h4 class="product-title"><?php echo esc_html($product['title']); ?></h4>
                        <p class="product-description"><?php echo esc_html($product['desc']); ?></p>
                        <a href="<?php echo esc_url($products_url); ?>" class="product-link">
                            En savoir plus
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                <polyline points="12 5 19 12 12 19"></polyline>
                            </svg>
                        </a>
                    </div>
                </article>
            <?php
                $delay++;
                endforeach;
            endif;
            ?>
        </div>

        <div class="text-center" style="margin-top: var(--spacing-2xl);">
            <a href="<?php echo esc_url($products_url); ?>" class="btn btn--secondary">
                Voir tous les produits
            </a>
        </div>
    </div>
</section>

<!-- Values Section (Eco-responsibility) -->
<section id="values" class="section values">
    <div class="container">
        <div class="section-header animate animate-fade-up">
            <span class="section-badge">Nos Valeurs</span>
            <h2 class="section-title">Engagés pour un Avenir Durable</h2>
            <p class="section-description">Notre approche éco-responsable guide chacune de nos décisions.</p>
        </div>

        <div class="values-grid">
            <div class="value-card animate animate-fade-up animate-delay-1">
                <div class="value-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                        <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                        <line x1="12" y1="22.08" x2="12" y2="12"></line>
                    </svg>
                </div>
                <h4 class="value-title">Conception Durable</h4>
                <p class="value-description">Produits conçus pour la longévité, la réparabilité et un impact environnemental minimal.</p>
            </div>

            <div class="value-card animate animate-fade-up animate-delay-2">
                <div class="value-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                    </svg>
                </div>
                <h4 class="value-title">Santé & Sécurité</h4>
                <p class="value-description">Protection de la santé des utilisateurs grâce à des normes de sécurité rigoureuses.</p>
            </div>

            <div class="value-card animate animate-fade-up animate-delay-3">
                <div class="value-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"></circle>
                        <path d="M12 6v6l4 2"></path>
                    </svg>
                </div>
                <h4 class="value-title">Production Locale</h4>
                <p class="value-description">Fabriqué en France pour réduire l'empreinte carbone et soutenir l'économie locale.</p>
            </div>

            <div class="value-card animate animate-fade-up animate-delay-4">
                <div class="value-icon">
                    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                </div>
                <h4 class="value-title">Communauté</h4>
                <p class="value-description">Engagement fort auprès des communautés locales et partenariats pour une croissance partagée.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section cta">
    <div class="container">
        <div class="cta-inner animate animate-scale">
            <div class="cta-content">
                <h2 class="section-title">Prêt à Améliorer votre Surveillance de la Qualité de l'Air ?</h2>
                <p class="cta-description">Contactez notre équipe d'experts dès aujourd'hui pour discuter de vos besoins et trouver la solution parfaite pour votre environnement.</p>
                <div class="cta-buttons">
                    <a href="<?php echo esc_url($contact_url); ?>" class="btn btn--primary btn--large">
                        Demander un Devis
                    </a>
                    <a href="<?php echo esc_url($products_url); ?>" class="btn btn--eco btn--large">
                        Voir le Catalogue
                    </a>
                </div>
            </div>
            <div class="cta-image">
                <div class="cta-image-placeholder" style="background: linear-gradient(135deg, var(--navier-primary) 0%, var(--navier-accent) 100%); width: 100%; height: 300px; border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center;">
                    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" style="opacity: 0.5;">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="section contact">
    <div class="container">
        <div class="contact-inner">
            <div class="contact-info animate animate-fade-right">
                <span class="section-badge">Contact</span>
                <h2 class="section-title">Nous Contacter</h2>
                <p>Des questions ? Notre équipe est là pour vous aider. Contactez-nous par l'un des moyens suivants.</p>

                <div class="contact-item">
                    <div class="contact-item-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                            <circle cx="12" cy="10" r="3"></circle>
                        </svg>
                    </div>
                    <div>
                        <p class="contact-item-label">Adresse</p>
                        <p class="contact-item-value"><?php echo esc_html(get_theme_mod('navier_contact_address', 'Zone Industrielle, 60300 Senlis, France')); ?></p>
                    </div>
                </div>

                <div class="contact-item">
                    <div class="contact-item-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                        </svg>
                    </div>
                    <div>
                        <p class="contact-item-label">Téléphone</p>
                        <p class="contact-item-value">
                            <a href="tel:<?php echo esc_attr(get_theme_mod('navier_phone', '+33 (0)3 44 00 00 00')); ?>">
                                <?php echo esc_html(get_theme_mod('navier_phone', '+33 (0)3 44 00 00 00')); ?>
                            </a>
                        </p>
                    </div>
                </div>

                <div class="contact-item">
                    <div class="contact-item-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                            <polyline points="22,6 12,13 2,6"></polyline>
                        </svg>
                    </div>
                    <div>
                        <p class="contact-item-label">Email</p>
                        <p class="contact-item-value">
                            <a href="mailto:<?php echo esc_attr(get_theme_mod('navier_email', 'contact@navier-instruments.com')); ?>">
                                <?php echo esc_html(get_theme_mod('navier_email', 'contact@navier-instruments.com')); ?>
                            </a>
                        </p>
                    </div>
                </div>

                <div class="contact-item">
                    <div class="contact-item-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"></circle>
                            <polyline points="12 6 12 12 16 14"></polyline>
                        </svg>
                    </div>
                    <div>
                        <p class="contact-item-label">Horaires</p>
                        <p class="contact-item-value"><?php echo esc_html(get_theme_mod('navier_hours', 'Lun - Ven : 9h00 - 18h00')); ?></p>
                    </div>
                </div>

                <div style="margin-top: var(--spacing-xl);">
                    <a href="<?php echo esc_url($contact_url); ?>" class="btn btn--primary">
                        Page Contact Complète
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                            <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>
                    </a>
                </div>
            </div>

            <div class="contact-form animate animate-fade-left">
                <h3>Envoyez-nous un message</h3>
                <form id="navier-contact-form" method="post">
                    <?php wp_nonce_field('navier_nonce', 'navier_contact_nonce'); ?>

                    <div class="form-group">
                        <label for="contact-name" class="form-label">Nom complet *</label>
                        <input type="text" id="contact-name" name="name" class="form-input" required>
                    </div>

                    <div class="form-group">
                        <label for="contact-email" class="form-label">Adresse email *</label>
                        <input type="email" id="contact-email" name="email" class="form-input" required>
                    </div>

                    <div class="form-group">
                        <label for="contact-phone" class="form-label">Téléphone</label>
                        <input type="tel" id="contact-phone" name="phone" class="form-input">
                    </div>

                    <div class="form-group">
                        <label for="contact-subject" class="form-label">Sujet</label>
                        <input type="text" id="contact-subject" name="subject" class="form-input">
                    </div>

                    <div class="form-group">
                        <label for="contact-message" class="form-label">Message *</label>
                        <textarea id="contact-message" name="message" class="form-textarea" required></textarea>
                    </div>

                    <button type="submit" class="btn btn--primary btn--large" style="width: 100%;">
                        Envoyer le Message
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                    </button>

                    <div id="form-response" style="margin-top: var(--spacing-md); display: none;"></div>
                </form>
            </div>
        </div>
    </div>
</section>

<?php
get_footer();
