<?php
/**
 * Archive template for Products (navier_product)
 * URL: /produits/
 *
 * @package Navier_Instruments
 */

get_header();

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

<!-- Page Header -->
<section class="page-hero">
    <div class="container">
        <div class="page-hero-content animate animate-fade-up">
            <span class="section-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>
                Catalogue
            </span>
            <h1 class="page-hero-title">Nos Produits</h1>
            <p class="page-hero-description">Découvrez notre gamme complète d'instruments de prélèvement d'air conçus pour les environnements industriels et de laboratoire.</p>
        </div>
    </div>
</section>

<!-- Products Filter (optional) -->
<section class="products-filter-section">
    <div class="container">
        <div class="products-filter animate animate-fade-up">
            <button class="filter-btn active" data-filter="all">Tous</button>
            <button class="filter-btn" data-filter="industriel">Industriel</button>
            <button class="filter-btn" data-filter="laboratoire">Laboratoire</button>
            <button class="filter-btn" data-filter="portable">Portable</button>
        </div>
    </div>
</section>

<!-- Products Grid -->
<section class="section products-page">
    <div class="container">
        <div class="products-grid-full">
            <?php
            $products = new WP_Query(array(
                'post_type'      => 'navier_product',
                'posts_per_page' => -1,
                'orderby'        => 'date',
                'order'          => 'DESC',
            ));

            if ($products->have_posts()) :
                $delay = 1;
                while ($products->have_posts()) : $products->the_post();
                    $categories = get_the_terms(get_the_ID(), 'product_category');
                    $category_slug = $categories && !is_wp_error($categories) ? sanitize_title($categories[0]->name) : '';
            ?>
                <article class="product-card animate animate-fade-up animate-delay-<?php echo esc_attr($delay); ?>" data-category="<?php echo esc_attr($category_slug); ?>">
                    <div class="product-image">
                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('navier-product'); ?>
                        <?php else : ?>
                            <div class="product-image-placeholder">
                                <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1">
                                    <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 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. Débit réglable de 1 à 50 L/min.',
                        'tag'   => 'Industriel',
                        'features' => array('Certification ATEX', 'Écran tactile', 'Batterie longue durée'),
                    ),
                    array(
                        'title' => 'AirSampler Pro X700',
                        'desc'  => 'Version avancée avec connectivité IoT et monitoring en temps réel. Idéal pour les environnements critiques.',
                        'tag'   => 'Industriel',
                        'features' => array('Connectivité IoT', 'Monitoring temps réel', 'Cloud analytics'),
                    ),
                    array(
                        'title' => 'LabAnalyzer L200',
                        'desc'  => 'Analyseur de précision pour laboratoire avec analyse en temps réel et interface logicielle avancée.',
                        'tag'   => 'Laboratoire',
                        'features' => array('Haute précision', 'Interface logicielle', 'Calibration automatique'),
                    ),
                    array(
                        'title' => 'LabAnalyzer L300',
                        'desc'  => 'Analyseur multi-paramètres pour analyses complexes. Compatible avec tous les protocoles standards.',
                        'tag'   => 'Laboratoire',
                        'features' => array('Multi-paramètres', 'Protocoles standards', 'Export données'),
                    ),
                    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',
                        'features' => array('Ultra-compact', 'GPS intégré', 'Autonomie 12h'),
                    ),
                    array(
                        'title' => 'MiniAir Portable M200',
                        'desc'  => 'Version professionnelle avec capteurs multi-gaz et transmission de données en temps réel.',
                        'tag'   => 'Portable',
                        'features' => array('Multi-gaz', 'Transmission 4G', 'App mobile'),
                    ),
                );

                $delay = 1;
                foreach ($placeholder_products as $product) :
                    $category_slug = sanitize_title($product['tag']);
            ?>
                <article class="product-card animate animate-fade-up animate-delay-<?php echo esc_attr($delay); ?>" data-category="<?php echo esc_attr($category_slug); ?>">
                    <div class="product-image">
                        <div class="product-image-placeholder">
                            <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--navier-primary)" stroke-width="1">
                                <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>
                        <div class="product-features">
                            <?php foreach ($product['features'] as $feature) : ?>
                                <span class="product-feature">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                        <polyline points="20 6 9 17 4 12"></polyline>
                                    </svg>
                                    <?php echo esc_html($feature); ?>
                                </span>
                            <?php endforeach; ?>
                        </div>
                        <a href="#contact" class="product-link">
                            Demander un devis
                            <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;
                endforeach;
            endif;
            ?>
        </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">Besoin d'une Solution Sur Mesure ?</h2>
                <p class="cta-description">Notre équipe d'experts peut concevoir des solutions personnalisées adaptées à vos besoins spécifiques. Contactez-nous pour discuter de votre projet.</p>
                <div class="cta-buttons">
                    <a href="<?php echo esc_url($contact_url); ?>" class="btn btn--primary btn--large">
                        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="tel:+33344000000" class="btn btn--secondary 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>
                        Nous Appeler
                    </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;">
                        <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>
            </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">Une Question sur nos Produits ?</h2>
                <p>Notre équipe technique est disponible pour répondre à toutes vos questions et vous accompagner dans le choix de vos équipements.</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="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:+33344000000">+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:commercial@navier-instruments.com">commercial@navier-instruments.com</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="contact-form animate animate-fade-left">
                <h3>Demande de Renseignements</h3>
                <form id="navier-contact-form" method="post">
                    <?php wp_nonce_field('navier_nonce', 'navier_contact_nonce'); ?>
                    <input type="hidden" name="form_source" value="products_page">

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

                    <div class="form-group">
                        <label for="contact-product" class="form-label">Produit concerné</label>
                        <select id="contact-product" name="product" class="form-input">
                            <option value="">Sélectionnez un produit</option>
                            <option value="AirSampler Pro X500">AirSampler Pro X500</option>
                            <option value="AirSampler Pro X700">AirSampler Pro X700</option>
                            <option value="LabAnalyzer L200">LabAnalyzer L200</option>
                            <option value="LabAnalyzer L300">LabAnalyzer L300</option>
                            <option value="MiniAir Portable M100">MiniAir Portable M100</option>
                            <option value="MiniAir Portable M200">MiniAir Portable M200</option>
                            <option value="Autre">Autre / Solution sur mesure</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="contact-message" class="form-label">Votre demande *</label>
                        <textarea id="contact-message" name="message" class="form-textarea" required placeholder="Décrivez votre besoin ou votre question..."></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>

<script>
// Product Filter functionality
document.addEventListener('DOMContentLoaded', function() {
    const filterBtns = document.querySelectorAll('.filter-btn');
    const productCards = document.querySelectorAll('.product-card');

    filterBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const filter = this.dataset.filter;

            // Update active button
            filterBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');

            // Filter products
            productCards.forEach(card => {
                if (filter === 'all' || card.dataset.category === filter) {
                    card.style.display = '';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                } else {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(20px)';
                    setTimeout(() => {
                        card.style.display = 'none';
                    }, 300);
                }
            });
        });
    });
});
</script>

<?php
get_footer();
