<?php
/**
 * Single Product Template - Design inspiré navier-instruments.com
 * Thème clair cohérent avec le site, structure moderne
 *
 * @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);
    $specs = get_post_meta(get_the_ID(), 'product_specifications', true);

    // 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', 'value' => '-20°C à +50°C'),
            array('label' => 'Protection', 'value' => 'IP67'),
            array('label' => 'Autonomie', 'value' => '> 8 heures'),
            array('label' => 'Connectivité', 'value' => 'WiFi / USB'),
            array('label' => 'Poids', 'value' => '< 500g'),
        );
    }

    // Product image (featured image or placeholder)
    $product_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
    if (!$product_image) {
        $product_image = 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&q=80';
    }
?>

<style>
/* Product Page Specific Styles */
.product-page-wrapper {
    padding-top: 100px;
}

/* Hero Section */
.product-hero-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, rgba(0, 180, 216, 0.05) 100%);
}
.product-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.product-hero-text h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: var(--navier-primary, #00b4d8);
    margin-bottom: 15px;
    line-height: 1.1;
}
.product-hero-tagline {
    font-size: 1.4rem;
    color: var(--navier-secondary, #2dc653);
    margin-bottom: 25px;
    font-style: italic;
}
.product-hero-desc {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.7;
}
.product-hero-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}
.product-stat {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.product-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navier-primary, #00b4d8);
}
.product-stat-label {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.product-hero-btns {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.product-hero-image {
    position: relative;
}
.product-hero-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}
.product-badge {
    position: absolute;
    background: var(--navier-primary, #00b4d8);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0, 180, 216, 0.3);
}
.product-badge-1 { top: 10%; right: -5%; }
.product-badge-2 { bottom: 30%; left: -5%; }
.product-badge-3 { bottom: 5%; right: 10%; background: var(--navier-secondary, #2dc653); }

/* Features Row */
.product-features-row-section {
    padding: 60px 0;
    background: #fff;
}
.product-features-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.product-feature-box {
    text-align: center;
    padding: 30px 15px;
    background: #f8f9fa;
    border-radius: 15px;
    transition: all 0.3s ease;
}
.product-feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    background: #fff;
}
.product-feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, var(--navier-primary, #00b4d8) 0%, var(--navier-secondary, #2dc653) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-feature-icon svg {
    width: 35px;
    height: 35px;
    stroke: #fff;
}
.product-feature-box h4 {
    font-size: 0.95rem;
    color: #333;
    font-weight: 600;
}

/* Content Sections */
.product-content-section {
    padding: 80px 0;
}
.product-content-section.alt {
    background: #f8f9fa;
}
.product-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.product-content-grid.reverse {
    direction: rtl;
}
.product-content-grid.reverse > * {
    direction: ltr;
}
.product-content-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
}
.product-content-text h2 span {
    color: var(--navier-primary, #00b4d8);
}
.product-content-text p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.7;
}
.product-content-list {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}
.product-content-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: #444;
}
.product-content-list li svg {
    color: var(--navier-secondary, #2dc653);
    flex-shrink: 0;
}
.product-content-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Banner Section */
.product-banner-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, var(--navier-primary, #00b4d8) 0%, #0096c7 100%);
    text-align: center;
    color: #fff;
}
.product-banner-section h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 20px;
}
.product-banner-section p {
    font-size: 1.3rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Protection Grid */
.product-protection-section {
    padding: 80px 0;
    background: #fff;
}
.product-section-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}
.product-section-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}
.product-section-header p {
    font-size: 1.1rem;
    color: #666;
}
.product-protection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.product-protection-card {
    text-align: center;
    padding: 40px 30px;
    background: #f8f9fa;
    border-radius: 20px;
    transition: all 0.3s ease;
}
.product-protection-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    background: #fff;
}
.product-protection-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 20px;
}
.product-protection-card h3 {
    font-size: 1.2rem;
    color: var(--navier-primary, #00b4d8);
    margin-bottom: 10px;
}
.product-protection-card p {
    color: #666;
}

/* Specs Section */
.product-specs-section {
    padding: 80px 0;
    background: #f8f9fa;
}
.product-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}
.product-spec-item {
    display: flex;
    justify-content: space-between;
    padding: 18px 25px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.product-spec-label {
    color: #666;
}
.product-spec-value {
    font-weight: 600;
    color: var(--navier-primary, #00b4d8);
}

/* CTA Section */
.product-cta-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, var(--navier-secondary, #2dc653) 0%, #25a244 100%);
    text-align: center;
    color: #fff;
}
.product-cta-section h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.product-cta-section p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 30px;
}
.product-cta-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-white {
    padding: 16px 35px;
    background: #fff;
    color: var(--navier-secondary, #2dc653);
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.btn-outline-white {
    padding: 16px 35px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-outline-white:hover {
    background: #fff;
    color: var(--navier-secondary, #2dc653);
}

/* Responsive */
@media (max-width: 992px) {
    .product-hero-grid,
    .product-content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .product-content-grid.reverse {
        direction: ltr;
    }
    .product-hero-image {
        order: -1;
    }
    .product-badge {
        display: none;
    }
    .product-features-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .product-protection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-hero-stats {
        justify-content: center;
    }
    .product-hero-btns {
        justify-content: center;
    }
}
@media (max-width: 768px) {
    .product-features-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-specs-grid {
        grid-template-columns: 1fr;
    }
    .product-protection-grid {
        grid-template-columns: 1fr;
    }
    .product-hero-stats {
        flex-wrap: wrap;
    }
}
</style>

<div class="product-page-wrapper">

<!-- Hero Section -->
<section class="product-hero-section">
    <div class="product-hero-grid">
        <div class="product-hero-text">
            <h1><?php the_title(); ?></h1>
            <p class="product-hero-tagline"><?php echo $subtitle ? esc_html($subtitle) : 'Le débitmètre dont vous avez toujours rêvé'; ?></p>
            <p class="product-hero-desc">
                Temps de réponse 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-stats">
                <div class="product-stat">
                    <div class="product-stat-value">&lt; 0.3</div>
                    <div class="product-stat-label">ms réponse</div>
                </div>
                <div class="product-stat">
                    <div class="product-stat-value">IP67</div>
                    <div class="product-stat-label">Étanche</div>
                </div>
                <div class="product-stat">
                    <div class="product-stat-value">8h+</div>
                    <div class="product-stat-label">Autonomie</div>
                </div>
            </div>

            <div class="product-hero-btns">
                <a href="mailto:contact@navier-instruments.com" class="btn btn--primary">Demander un Devis</a>
                <a href="#specs" class="btn btn--secondary">Spécifications</a>
            </div>
        </div>

        <div class="product-hero-image">
            <img src="<?php echo esc_url($product_image); ?>" alt="<?php the_title(); ?>">
            <div class="product-badge product-badge-1">🇫🇷 Made in France</div>
            <div class="product-badge product-badge-2">IP67 Étanche</div>
            <div class="product-badge product-badge-3">WiFi Intégré</div>
        </div>
    </div>
</section>

<!-- Features Row -->
<section class="product-features-row-section">
    <div class="product-features-container">
        <div class="product-feature-box">
            <div class="product-feature-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 6v6l4 2"/>
                </svg>
            </div>
            <h4>Temps de réponse</h4>
        </div>
        <div class="product-feature-box">
            <div class="product-feature-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
                </svg>
            </div>
            <h4>Étanche IP67</h4>
        </div>
        <div class="product-feature-box">
            <div class="product-feature-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <rect x="2" y="7" width="20" height="14" rx="2"/>
                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
                </svg>
            </div>
            <h4>Robuste</h4>
        </div>
        <div class="product-feature-box">
            <div class="product-feature-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M5 12.55a11 11 0 0 1 14.08 0"/>
                    <path d="M1.42 9a16 16 0 0 1 21.16 0"/>
                    <path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
                    <circle cx="12" cy="20" r="1"/>
                </svg>
            </div>
            <h4>WiFi Intégré</h4>
        </div>
        <div class="product-feature-box">
            <div class="product-feature-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <rect x="1" y="6" width="18" height="12" rx="2"/>
                    <path d="M23 13v-2"/>
                </svg>
            </div>
            <h4>Batterie Li-ion</h4>
        </div>
    </div>
</section>

<!-- Content Section 1 - Made in France -->
<section class="product-content-section">
    <div class="product-content-grid">
        <div class="product-content-text">
            <h2>Conçu et <span>Fabriqué en France</span></h2>
            <p>Navier Instruments a développé l'appareil de mesure qui deviendra l'outil de prédilection des laboratoires nomades.</p>
            <p>Conçu selon trois principes : <strong>Solid, Waterproof, Dustproof</strong>.</p>
            <ul class="product-content-list">
                <li>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Aluminium usiné CNC pour une précision maximale
                </li>
                <li>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Écran polycarbonate 3mm compatible gants
                </li>
                <li>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Poignée ergonomique spécialement conçue
                </li>
            </ul>
        </div>
        <div class="product-content-image">
            <img src="https://images.unsplash.com/photo-1581092160607-ee22621dd758?w=800&q=80" alt="Fabrication en France">
        </div>
    </div>
</section>

<!-- Banner Section -->
<section class="product-banner-section">
    <h2>Un Ordinateur de Poche</h2>
    <p>Plus de 8 heures d'autonomie avec batterie Li-ion rechargeable et chargeur USB magnétique</p>
</section>

<!-- Content Section 2 - Temperature -->
<section class="product-content-section alt">
    <div class="product-content-grid reverse">
        <div class="product-content-text">
            <h2>Large Plage de <span>Température</span></h2>
            <p>Du froid polaire à la chaleur tropicale, le <?php the_title(); ?> maintient ses performances.</p>
            <p>Testé et certifié pour fonctionner de <strong>-20°C à +50°C</strong>.</p>
            <ul class="product-content-list">
                <li>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Fonctionnement en conditions extrêmes
                </li>
                <li>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Calibration stable sur toute la plage
                </li>
            </ul>
        </div>
        <div class="product-content-image">
            <img src="https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=800&q=80" alt="Conditions extrêmes">
        </div>
    </div>
</section>

<!-- Protection Section -->
<section class="product-protection-section">
    <div class="product-section-header">
        <h2>Prêt pour Ploof, Splaash et Badaboum</h2>
        <p>Conçu pour résister aux conditions les plus extrêmes</p>
    </div>
    <div class="product-protection-grid">
        <div class="product-protection-card">
            <img src="https://img.icons8.com/fluency/100/000000/security-checked.png" alt="ShockProof">
            <h3>ShockProof</h3>
            <p>Résistant aux chocs et aux chutes</p>
        </div>
        <div class="product-protection-card">
            <img src="https://img.icons8.com/fluency/100/000000/water.png" alt="WaterProof">
            <h3>WaterProof</h3>
            <p>IP67 - Submersion jusqu'à 1m</p>
        </div>
        <div class="product-protection-card">
            <img src="https://img.icons8.com/fluency/100/000000/wind.png" alt="DustProof">
            <h3>DustProof</h3>
            <p>Protection totale contre les particules</p>
        </div>
    </div>
</section>

<!-- Specifications Section -->
<section id="specs" class="product-specs-section">
    <div class="product-section-header">
        <h2>Spécifications Techniques</h2>
    </div>
    <div class="product-specs-grid">
        <?php foreach ($specs as $spec) : ?>
        <div class="product-spec-item">
            <span class="product-spec-label"><?php echo esc_html($spec['label']); ?></span>
            <span class="product-spec-value"><?php echo esc_html($spec['value']); ?></span>
        </div>
        <?php endforeach; ?>
    </div>
</section>

<!-- CTA Section -->
<section class="product-cta-section">
    <h2>Intéressé par le <?php the_title(); ?> ?</h2>
    <p>Contactez notre équipe commerciale pour obtenir un devis personnalisé</p>
    <div class="product-cta-btns">
        <a href="mailto:contact@navier-instruments.com" class="btn-white">Demander un Devis</a>
        <a href="tel:+33620094641" class="btn-outline-white">+33 (0) 6 20 09 46 41</a>
    </div>
</section>

</div>

<?php
endwhile;

get_footer();
