<?php
/**
 * Single Product Template - Design FLO
 * Inspiré de navier-instruments.com/fr/flo-fr/
 *
 * @package Navier_Instruments
 */

get_header();

while (have_posts()) :
    the_post();

    // Get product data
    $categories = get_the_terms(get_the_ID(), 'product_category');
    $category_name = ($categories && !is_wp_error($categories)) ? $categories[0]->name : 'Produit';

    // Get custom fields
    $subtitle = get_post_meta(get_the_ID(), 'product_subtitle', true);
    $features = get_post_meta(get_the_ID(), 'product_features', true);
    $specs = get_post_meta(get_the_ID(), 'product_specifications', true);
    $advantages = get_post_meta(get_the_ID(), 'product_advantages', true);
    $datasheet = get_post_meta(get_the_ID(), 'product_datasheet', true);

    // Images du produit FLO - Toutes les nouvelles images
    $flo_images = array(
        'main' => NAVIER_URI . '/assets/images/products/flo/Navier-Instruments-FlowMeter-ProductImage02.jpg',
        'banner1' => NAVIER_URI . '/assets/images/products/flo/Flo-Page-Banner04B.jpg',
        'banner2' => NAVIER_URI . '/assets/images/products/flo/Flo-Page-Banner07C.jpg.png',
        'waterproof' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-WaterProof.png',
        'dustproof' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-DustProof.png',
        'dustproof2' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-DustProof02.png',
        'dustproof3' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-DustProof03.png',
        'shockproof' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-ShockProof.png',
        'battery' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-Battery.png',
        'double_battery' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-DoubleBattery.png',
        'usb_charge' => NAVIER_URI . '/assets/images/products/flo/NavierInstruments-USB-Charge.png',
        'response_time' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-ResponseTime.png',
        'user_friendly' => NAVIER_URI . '/assets/images/products/flo/NavierInstruments-UserFriendly01.png',
        'anti_dry' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-Anti-dry.png',
        'protection' => NAVIER_URI . '/assets/images/products/flo/FlowMeter-Over-CurrentProtection.png',
    );

    // Default features if none set
    if (!$features || empty($features)) {
        $features = array(
            array('icon' => 'precision', 'title' => 'Temps de réponse', 'description' => 'Moins de 0,3 ms pour des mesures instantanées', 'image' => $flo_images['response_time']),
            array('icon' => 'robust', 'title' => 'Petit, solide et léger', 'description' => 'Boîtier aluminium CNC avec modes minuterie/compteur', 'image' => $flo_images['user_friendly']),
            array('icon' => 'waterproof', 'title' => 'Étanche', 'description' => 'IP67 - Immersion jusqu\'à 1m pendant 30 minutes', 'image' => $flo_images['waterproof']),
            array('icon' => 'dustproof', 'title' => 'Étanche à la poussière', 'description' => 'Parfait pour les environnements industriels sales', 'image' => $flo_images['dustproof3']),
            array('icon' => 'protection', 'title' => 'Protection surintensité', 'description' => 'Protection électronique avancée', 'image' => $flo_images['protection']),
        );
    }

    // Default specs if none set
    if (!$specs || empty($specs)) {
        $specs = array(
            array('label' => 'Plage de mesure', 'value' => '0.5 - 30 L/min'),
            array('label' => 'Temps de réponse', 'value' => '< 0,3 ms'),
            array('label' => 'Précision', 'value' => '± 2%'),
            array('label' => 'Température de fonctionnement', 'value' => '-20°C à +50°C'),
            array('label' => 'Indice de protection', 'value' => 'IP67'),
            array('label' => 'Immersion', 'value' => 'Jusqu\'à 1m pendant 30 minutes'),
            array('label' => 'Alimentation', 'value' => 'Batterie Li-ion rechargeable'),
            array('label' => 'Autonomie', 'value' => '> 8 heures'),
            array('label' => 'Charge', 'value' => 'USB magnétique'),
            array('label' => 'Connectivité', 'value' => 'WiFi / USB'),
            array('label' => 'Matériau boîtier', 'value' => 'Aluminium CNC'),
            array('label' => 'Écran', 'value' => 'Polycarbonate 3mm (gants compatibles)'),
            array('label' => 'Poids', 'value' => '< 500g'),
            array('label' => 'Élément de mesure', 'value' => 'Élément Navier - linéarité exemplaire'),
        );
    }
?>

<!-- Hero Section - Fullscreen with Product -->
<section class="product-hero product-hero--fullscreen">
    <div class="product-hero-bg">
        <div class="product-hero-bg-gradient"></div>
    </div>
    <div class="container">
        <div class="product-hero-inner">
            <div class="product-hero-content" data-reveal="fade-right">
                <span class="product-hero-badge">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <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>
                    <?php echo esc_html($category_name); ?>
                </span>
                <h1 class="product-hero-title" data-reveal="fade-up" data-delay="100">
                    <span class="title-main"><?php the_title(); ?></span>
                    <span class="title-tagline"><?php echo $subtitle ? esc_html($subtitle) : 'Le débitmètre dont vous avez toujours rêvé'; ?></span>
                </h1>
                <p class="product-hero-subtitle" data-reveal="fade-up" data-delay="200">
                    Le temps de réponse est inférieur à <strong>0,3 ms</strong>. Solide, étanche et construit sur batterie rechargeable. WiFi et USB intégrés.
                </p>

                <div class="product-hero-buttons" data-reveal="fade-up" data-delay="400">
                    <a href="#contact-product" class="btn btn--primary btn--large btn--glow">
                        Demander un Devis
                        <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="#specifications" class="btn btn--secondary btn--large">
                        Spécifications
                    </a>
                </div>
            </div>
            <div class="product-hero-image" data-reveal="fade-left" data-delay="200">
                <div class="product-hero-image-wrapper">
                    <img src="<?php echo esc_url($flo_images['main']); ?>" alt="<?php the_title(); ?> - Débitmètre portable" class="product-main-image">
                    <div class="product-hero-glow"></div>
                </div>
                <!-- Floating badges -->
                <div class="floating-badge floating-badge--1" data-reveal="scale" data-delay="500">
                    <span class="badge-value">< 0.3</span>
                    <span class="badge-unit">ms</span>
                </div>
                <div class="floating-badge floating-badge--2" data-reveal="scale" data-delay="600">
                    <span class="badge-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path>
                        </svg>
                    </span>
                    <span class="badge-text">IP67</span>
                </div>
                <div class="floating-badge floating-badge--3" data-reveal="scale" data-delay="700">
                    <span class="badge-icon">🇫🇷</span>
                    <span class="badge-text">Made in France</span>
                </div>
            </div>
        </div>
    </div>
    <!-- Scroll indicator -->
    <div class="scroll-indicator" data-reveal="fade-up" data-delay="800">
        <span>Découvrir</span>
        <div class="scroll-arrow">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="6 9 12 15 18 9"></polyline>
            </svg>
        </div>
    </div>
</section>

<!-- Features Section - 5 Icons Row -->
<section class="product-features-section section">
    <div class="container">
        <div class="product-features-row">
            <?php
            $delay = 100;
            foreach ($features as $index => $feature) :
                $image = isset($feature['image']) ? $feature['image'] : '';
            ?>
            <div class="product-feature-item" data-reveal="fade-up" data-delay="<?php echo $delay; ?>">
                <div class="product-feature-icon-wrapper">
                    <?php if ($image) : ?>
                        <img src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($feature['title']); ?>" class="feature-image">
                    <?php endif; ?>
                </div>
                <h4 class="product-feature-title"><?php echo esc_html($feature['title']); ?></h4>
            </div>
            <?php
                $delay += 100;
            endforeach;
            ?>
        </div>
    </div>
</section>

<!-- Banner Section - Made in France - Full Width -->
<section class="product-fullwidth-banner" style="background-image: url('<?php echo esc_url($flo_images['banner1']); ?>');">
    <div class="banner-overlay"></div>
    <div class="container">
        <div class="banner-content-grid">
            <div class="banner-text-content" data-reveal="fade-right">
                <h2 class="banner-title">Conçu, Fabriqué et Pensé en France</h2>
                <p class="banner-text">Navier instruments a développé l'appareil de mesure qui deviendra l'outil de prédilection des laboratoires nomades. Conçu selon trois principes : <strong>Solid, Waterproof, Dustproof</strong>.</p>
                <ul class="banner-features-list">
                    <li data-reveal="fade-right" data-delay="100">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        Aluminium usiné CNC pour une précision maximale
                    </li>
                    <li data-reveal="fade-right" data-delay="200">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        Écran polycarbonate 3mm compatible gants
                    </li>
                    <li data-reveal="fade-right" data-delay="300">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        Poignée ergonomique spécialement conçue
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Nomad Section - Un Ordinateur de Poche -->
<section class="product-nomad section section--dark">
    <div class="container">
        <div class="nomad-inner">
            <div class="nomad-content" data-reveal="fade-right">
                <span class="section-badge section-badge--light">Nomade</span>
                <h2 class="section-title section-title--light">Un Ordinateur de Poche</h2>
                <p class="nomad-text">Équipé d'une batterie rechargeable Li-ion haute capacité, le <?php the_title(); ?> vous offre plus de <strong>8 heures d'autonomie</strong> continue.</p>
                <p class="nomad-text">Le chargeur USB magnétique mural permet une recharge rapide et sécurisée.</p>

                <div class="nomad-stats">
                    <div class="nomad-stat" data-reveal="fade-up" data-delay="100">
                        <span class="nomad-stat-value">8h+</span>
                        <span class="nomad-stat-label">Autonomie</span>
                    </div>
                    <div class="nomad-stat" data-reveal="fade-up" data-delay="200">
                        <span class="nomad-stat-value">2h</span>
                        <span class="nomad-stat-label">Recharge</span>
                    </div>
                    <div class="nomad-stat" data-reveal="fade-up" data-delay="300">
                        <span class="nomad-stat-value">< 500g</span>
                        <span class="nomad-stat-label">Poids</span>
                    </div>
                </div>
            </div>
            <div class="nomad-visual" data-reveal="fade-left">
                <div class="nomad-image-container">
                    <img src="<?php echo esc_url($flo_images['main']); ?>" alt="<?php the_title(); ?> - Portable" class="nomad-product-image">
                    <div class="nomad-glow"></div>
                </div>
                <div class="nomad-features-float">
                    <div class="float-feature float-feature--1" data-reveal="scale" data-delay="400">
                        <img src="<?php echo esc_url($flo_images['battery']); ?>" alt="Batterie">
                    </div>
                    <div class="float-feature float-feature--2" data-reveal="scale" data-delay="500">
                        <img src="<?php echo esc_url($flo_images['usb_charge']); ?>" alt="USB">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Temperature Range Section -->
<section class="product-temperature section">
    <div class="container">
        <div class="temperature-inner">
            <div class="temperature-visual" data-reveal="fade-right">
                <img src="<?php echo esc_url($flo_images['main']); ?>" alt="<?php the_title(); ?>" class="temperature-product-image">
            </div>
            <div class="temperature-content" data-reveal="fade-left">
                <span class="section-badge">Extrême</span>
                <h2 class="section-title">Travail sur Large Écart de Température</h2>
                <p>Du froid polaire à la chaleur tropicale, le <?php the_title(); ?> maintient ses performances. Testé et certifié pour fonctionner de <strong>-20°C à +50°C</strong>.</p>
                <div class="temperature-gauge" data-animate-on-scroll>
                    <div class="temperature-range">
                        <div class="temp-indicator temp-cold">
                            <span class="temp-icon">❄️</span>
                            <span class="temp-value">-20°C</span>
                        </div>
                        <div class="temp-bar">
                            <div class="temp-bar-track">
                                <div class="temp-bar-fill"></div>
                            </div>
                        </div>
                        <div class="temp-indicator temp-hot">
                            <span class="temp-icon">🔥</span>
                            <span class="temp-value">+50°C</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Protection Section - Ploof Splash Badaboum -->
<section class="product-protection section section--alt">
    <div class="container">
        <div class="section-header" data-reveal="fade-up">
            <h2 class="section-title">Prêt pour Ploof, Splaash et Gros Badaboum</h2>
            <p class="section-description">Le <?php the_title(); ?> est conçu pour résister aux conditions les plus extrêmes.</p>
        </div>
        <div class="protection-grid protection-grid--images">
            <div class="protection-item" data-reveal="zoom-in" data-delay="100">
                <div class="protection-image">
                    <img src="<?php echo esc_url($flo_images['shockproof']); ?>" alt="ShockProof">
                </div>
                <h3 class="protection-title">ShockProof</h3>
                <p class="protection-text">Résistant aux chocs et aux chutes</p>
            </div>
            <div class="protection-item" data-reveal="zoom-in" data-delay="200">
                <div class="protection-image">
                    <img src="<?php echo esc_url($flo_images['waterproof']); ?>" alt="WaterProof">
                </div>
                <h3 class="protection-title">WaterProof</h3>
                <p class="protection-text">IP67 - Submersion jusqu'à 1m pendant 30 min</p>
            </div>
            <div class="protection-item" data-reveal="zoom-in" data-delay="300">
                <div class="protection-image">
                    <img src="<?php echo esc_url($flo_images['dustproof2']); ?>" alt="DustProof">
                </div>
                <h3 class="protection-title">DustProof</h3>
                <p class="protection-text">Protection totale contre les particules</p>
            </div>
        </div>
    </div>
</section>

<!-- Battery Section -->
<section class="product-battery section">
    <div class="container">
        <div class="section-header" data-reveal="fade-up">
            <h2 class="section-title">Autonomie et Recharge</h2>
        </div>
        <div class="battery-grid">
            <div class="battery-item" data-reveal="fade-up" data-delay="100">
                <div class="battery-image">
                    <img src="<?php echo esc_url($flo_images['battery']); ?>" alt="Batterie">
                </div>
                <h4>Batterie Li-ion</h4>
                <p>Plus de 8 heures d'autonomie</p>
            </div>
            <div class="battery-item" data-reveal="fade-up" data-delay="200">
                <div class="battery-image">
                    <img src="<?php echo esc_url($flo_images['usb_charge']); ?>" alt="USB Charge">
                </div>
                <h4>Charge USB Magnétique</h4>
                <p>Recharge rapide et sécurisée</p>
            </div>
            <div class="battery-item" data-reveal="fade-up" data-delay="300">
                <div class="battery-image">
                    <img src="<?php echo esc_url($flo_images['double_battery']); ?>" alt="Double Batterie">
                </div>
                <h4>Double Batterie</h4>
                <p>Option pour une autonomie prolongée</p>
            </div>
        </div>
    </div>
</section>

<!-- Modes Section -->
<section class="product-modes section section--dark">
    <div class="container">
        <div class="section-header" data-reveal="fade-up">
            <span class="section-badge section-badge--light">Fonctionnalités</span>
            <h2 class="section-title section-title--light">Bouton Latéral Chronomètre</h2>
            <p class="section-description section-description--light">Deux modes de fonctionnement pour s'adapter à tous vos besoins</p>
        </div>
        <div class="modes-grid">
            <div class="mode-card" data-reveal="fade-up" data-delay="100">
                <div class="mode-icon">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="12" cy="12" r="10"></circle>
                        <path d="M12 6v6l4 2"></path>
                    </svg>
                </div>
                <h3 class="mode-title">Mode Minuterie</h3>
                <p class="mode-text">Définissez un objectif de mesure et recevez une alerte sonore lorsqu'il est atteint. Idéal pour les prélèvements standardisés.</p>
            </div>
            <div class="mode-card" data-reveal="fade-up" data-delay="200">
                <div class="mode-icon">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                    </svg>
                </div>
                <h3 class="mode-title">Mode Compteur</h3>
                <p class="mode-text">Mesure continue en temps réel avec export des données via WiFi ou USB. Parfait pour le monitoring long terme.</p>
            </div>
        </div>
    </div>
</section>

<!-- Fullwidth Banner 2 - Élément de Flux -->
<section class="product-fullwidth-banner product-fullwidth-banner--2" style="background-image: url('<?php echo esc_url($flo_images['banner2']); ?>');">
    <div class="banner-overlay banner-overlay--gradient"></div>
    <div class="container">
        <div class="banner-content banner-content--center" data-reveal="fade-up">
            <h2 class="section-title section-title--light section-title--large">Élément de Flux en Aluminium CNC</h2>
            <p class="banner-text banner-text--large">Linéarité exemplaire grâce à notre technologie brevetée</p>
        </div>
    </div>
</section>

<!-- Specifications Section -->
<section id="specifications" class="specifications-section section">
    <div class="container">
        <div class="section-header" data-reveal="fade-up">
            <span class="section-badge">Technique</span>
            <h2 class="section-title">Spécifications Techniques</h2>
        </div>
        <div class="specifications-wrapper" data-reveal="fade-up" data-delay="100">
            <div class="specifications-table">
                <?php foreach ($specs as $index => $spec) : ?>
                <div class="spec-row" data-reveal="fade-up" data-delay="<?php echo 50 + ($index * 30); ?>">
                    <div class="spec-label">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="9 11 12 14 22 4"></polyline>
                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                        </svg>
                        <?php echo esc_html($spec['label']); ?>
                    </div>
                    <div class="spec-value"><?php echo esc_html($spec['value']); ?></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="product-services section section--alt">
    <div class="container">
        <div class="section-header" data-reveal="fade-up">
            <h2 class="section-title">Nos Services</h2>
        </div>
        <div class="services-grid services-grid--3">
            <div class="service-card" data-reveal="fade-up" data-delay="100">
                <div class="service-icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
                    </svg>
                </div>
                <h4>Service après-ventes</h4>
                <p>Maintenance et réparation de vos appareils</p>
            </div>
            <div class="service-card" data-reveal="fade-up" data-delay="200">
                <div class="service-icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                        <line x1="8" y1="21" x2="16" y2="21"></line>
                        <line x1="12" y1="17" x2="12" y2="21"></line>
                    </svg>
                </div>
                <h4>NavLab</h4>
                <p>Logiciel d'analyse des données inclus</p>
            </div>
            <div class="service-card" data-reveal="fade-up" data-delay="300">
                <div class="service-icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="7 10 12 15 17 10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                </div>
                <h4>Téléchargements</h4>
                <p>Fiches techniques et manuels</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="product-cta-section section section--gradient">
    <div class="container">
        <div class="product-cta-inner" data-reveal="scale">
            <div class="product-cta-content">
                <h2 class="section-title section-title--light">Intéressé par le <?php the_title(); ?> ?</h2>
                <p>Contactez notre équipe commerciale pour obtenir un devis personnalisé.</p>
                <div class="product-cta-buttons">
                    <a href="#contact-product" class="btn btn--eco btn--large">
                        Demander un Devis
                    </a>
                    <a href="tel:+33620094641" class="btn btn--outline-light btn--large">
                        <svg width="20" height="20" 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>
                        +33 (0) 6 20 09 46 41
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Form Section -->
<section id="contact-product" class="quote-form-section section">
    <div class="container">
        <div class="quote-form-inner">
            <div class="quote-form-content" data-reveal="fade-right">
                <span class="section-badge">Contact</span>
                <h2 class="section-title">Demande de Devis</h2>
                <p>Remplissez le formulaire pour recevoir un devis personnalisé pour le <strong><?php the_title(); ?></strong>.</p>

                <ul class="quote-form-features">
                    <li data-reveal="fade-up" data-delay="100">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        Réponse sous 24 heures ouvrées
                    </li>
                    <li data-reveal="fade-up" data-delay="150">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        Devis gratuit et sans engagement
                    </li>
                    <li data-reveal="fade-up" data-delay="200">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                        Conseil technique personnalisé
                    </li>
                </ul>

                <div class="contact-direct" data-reveal="fade-up" data-delay="300">
                    <h4>Contact Direct</h4>
                    <p>
                        <a href="tel:+33620094641">
                            <svg width="16" height="16" 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>
                            +33 (0) 6 20 09 46 41
                        </a>
                    </p>
                    <p>
                        <a href="mailto:contact@navier-instruments.com">
                            <svg width="16" height="16" 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>
                            contact@navier-instruments.com
                        </a>
                    </p>
                </div>
            </div>

            <div class="quote-form-wrapper" data-reveal="fade-left">
                <h3>Formulaire de Devis</h3>
                <form id="navier-contact-form" method="post">
                    <?php wp_nonce_field('navier_nonce', 'navier_contact_nonce'); ?>
                    <input type="hidden" name="product_name" value="<?php echo esc_attr(get_the_title()); ?>">
                    <input type="hidden" name="form_source" value="product_page">

                    <div class="form-row">
                        <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-company" class="form-label">Entreprise</label>
                            <input type="text" id="contact-company" name="company" class="form-input">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="contact-email" class="form-label">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>

                    <div class="form-group">
                        <label for="contact-quantity" class="form-label">Quantité souhaitée</label>
                        <select id="contact-quantity" name="quantity" class="form-input">
                            <option value="1">1 unité</option>
                            <option value="2-5">2 à 5 unités</option>
                            <option value="6-10">6 à 10 unités</option>
                            <option value="10+">Plus de 10 unités</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="contact-message" class="form-label">Votre message</label>
                        <textarea id="contact-message" name="message" class="form-textarea" placeholder="Décrivez vos besoins..."></textarea>
                    </div>

                    <button type="submit" class="btn btn--primary btn--large" style="width: 100%;">
                        Envoyer ma Demande
                        <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
endwhile;

get_footer();