<?php get_header(); ?>

<!-- =============================================
   HERO SECTION
   ============================================= -->
<section class="site-hero">
    <div class="container">
        <div class="hero-inner">
            <div class="hero-content">
                <span class="section-label">🌿 Duurzaam & Betrouwbaar</span>
                <h1><?php echo wp_kses_post( ep_get('hero_title', 'Welkom bij <span>EarthPure</span> Shop') ); ?></h1>
                <p><?php echo esc_html( ep_get('hero_subtitle', 'Duurzame producten voor een beter thuis. Kwaliteit die je kunt vertrouwen, direct aan je deur bezorgd.') ); ?></p>
                <div class="hero-buttons">
                    <a href="<?php echo home_url('/shop/'); ?>" class="btn btn-primary">
                        <?php echo esc_html( ep_get('hero_btn_1', 'Bekijk Producten') ); ?> →
                    </a>
                    <a href="<?php echo home_url('/about/'); ?>" class="btn btn-outline">
                        <?php echo esc_html( ep_get('hero_btn_2', 'Over Ons') ); ?>
                    </a>
                </div>
            </div>
            <div class="hero-image">
                <?php if ( has_custom_logo() ) : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/images/hero-placeholder.jpg" alt="EarthPure Hero">
                <?php else : ?>
                    <div style="background:linear-gradient(135deg,#a5d6a7,#66bb6a);height:380px;display:flex;align-items:center;justify-content:center;font-size:4rem;border-radius:12px;">🌿</div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<!-- =============================================
   FEATURED PRODUCTS
   ============================================= -->
<section class="products-section" id="shop">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Onze Collectie</span>
            <h2>Uitgelichte Producten</h2>
            <p>Ontdek onze zorgvuldig geselecteerde duurzame producten voor jouw thuis.</p>
        </div>

        <div class="products-grid">
        <?php
        if ( class_exists('WooCommerce') ) {
            $args = [
                'post_type'      => 'product',
                'posts_per_page' => 6,
                'post_status'    => 'publish',
                'orderby'        => 'date',
                'order'          => 'DESC',
            ];
            $products = new WP_Query($args);
            if ( $products->have_posts() ) :
                while ( $products->have_posts() ) : $products->the_post();
                    global $product;
                    $img_url = get_the_post_thumbnail_url(get_the_ID(), 'medium') ?: get_template_directory_uri() . '/images/product-placeholder.jpg';
                    ?>
                    <div class="product-card">
                        <div class="product-card-image">
                            <img src="<?php echo esc_url($img_url); ?>" alt="<?php the_title_attribute(); ?>" loading="lazy">
                            <?php if ( $product->is_on_sale() ) : ?>
                                <span class="product-badge">Sale</span>
                            <?php endif; ?>
                        </div>
                        <div class="product-card-body">
                            <h3><?php the_title(); ?></h3>
                            <p><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
                            <div class="product-price"><?php echo $product->get_price_html(); ?></div>
                        </div>
                        <div class="product-card-footer">
                            <a href="<?php the_permalink(); ?>" class="btn btn-outline">Details</a>
                            <a href="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="btn btn-primary add-to-cart-btn" data-product-id="<?php echo get_the_ID(); ?>">
                                + Winkelwagen
                            </a>
                        </div>
                    </div>
                    <?php
                endwhile;
                wp_reset_postdata();
            else : ?>
                <!-- Demo products als WooCommerce leeg is -->
                <?php
                $demo = [
                    ['Magnetron', 'Energiezuinige magnetron met 5 vermogensniveaus.', '$250,00', '🔥'],
                    ['Koelkast', 'Stille koelkast met vriesvak, A+++ energielabel.', '$100,00', '❄️'],
                    ['Wasmachine', 'Zuinige wasmachine met 8kg trommel.', '$399,00', '🌊'],
                    ['Vaatwasser', 'Stille vaatwasser met 12 couvert sets.', '$349,00', '✨'],
                    ['Airfryer', 'Gezond frituren met 80% minder vet.', '$89,00', '🍟'],
                    ['Stofzuiger', 'Krachtige robotstofzuiger met mapping.', '$299,00', '🤖'],
                ];
                foreach ($demo as [$name, $desc, $price, $icon]) : ?>
                    <div class="product-card">
                        <div class="product-card-image">
                            <div style="background:linear-gradient(135deg,#E8F5E9,#C8E6C9);height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem;"><?php echo $icon; ?></div>
                        </div>
                        <div class="product-card-body">
                            <h3><?php echo esc_html($name); ?></h3>
                            <p><?php echo esc_html($desc); ?></p>
                            <div class="product-price"><?php echo esc_html($price); ?></div>
                        </div>
                        <div class="product-card-footer">
                            <a href="#" class="btn btn-outline">Details</a>
                            <a href="#" class="btn btn-primary">+ Winkelwagen</a>
                        </div>
                    </div>
                <?php endforeach;
            endif;
        }
        ?>
        </div>

        <div style="text-align:center;margin-top:40px;">
            <a href="<?php echo home_url('/shop/'); ?>" class="btn btn-primary">Alle producten bekijken →</a>
        </div>
    </div>
</section>

<!-- =============================================
   TESTIMONIALS
   ============================================= -->
<section class="testimonials-section">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Reviews</span>
            <h2>Wat onze klanten zeggen</h2>
            <p>Lees de ervaringen van tevreden EarthPure klanten.</p>
        </div>
        <div class="testimonials-grid">
            <?php
            $testimonials = [
                ['Alia Kanhai',     'Klant',    'https://shop.earthpure.net/wp-content/uploads/2026/05/foto_Vinesh-150x150.jpg'],
                ['Karishma Gajadin','Klant',    'https://shop.earthpure.net/wp-content/uploads/2026/05/foto_Vinesh-150x150.jpg'],
                ['Biso Mohan',      'Manager',  'https://shop.earthpure.net/wp-content/uploads/2026/05/foto_Vinesh-150x150.jpg'],
                ['Vinesh Kanhai',   'CEO',      'https://shop.earthpure.net/wp-content/uploads/2026/05/foto_Vinesh-150x150.jpg'],
            ];
            $review_text = 'Uitstekende service en snelle levering. De producten zijn van hoge kwaliteit en precies zoals beschreven. Ik bestel hier zeker vaker!';
            foreach ($testimonials as [$name, $role, $img]) : ?>
                <div class="testimonial-card">
                    <div class="testimonial-stars">★★★★★</div>
                    <p class="testimonial-text"><?php echo esc_html($review_text); ?></p>
                    <div class="testimonial-author">
                        <img src="<?php echo esc_url($img); ?>" alt="<?php echo esc_attr($name); ?>" loading="lazy">
                        <div class="testimonial-author-info">
                            <strong><?php echo esc_html($name); ?></strong>
                            <span><?php echo esc_html($role); ?></span>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- =============================================
   CONTACT SECTION
   ============================================= -->
<section class="contact-section" id="contact">
    <div class="container">
        <div class="contact-grid">
            <div class="contact-image">
                <img src="https://shop.earthpure.net/wp-content/uploads/2026/05/about-mockup.png"
                     alt="Contact EarthPure"
                     loading="lazy"
                     onerror="this.style.display='none'">
                <div style="background:linear-gradient(135deg,#4CAF50,#2E7D32);min-height:400px;display:flex;align-items:center;justify-content:center;font-size:6rem;">📬</div>
            </div>
            <div class="contact-form-wrap">
                <span class="section-label">Contact</span>
                <h2>Stuur ons een bericht</h2>
                <p>Vul het formulier in en we nemen zo snel mogelijk contact met je op.</p>
                <form class="ep-form" id="contact-form">
                    <?php wp_nonce_field('earthpure_nonce', 'ep_nonce'); ?>
                    <input type="text" name="name" placeholder="Naam *" required>
                    <input type="email" name="email" placeholder="E-mail *" required>
                    <input type="tel" name="phone" placeholder="Telefoon">
                    <textarea name="message" placeholder="Bericht *" required></textarea>
                    <button type="submit" class="btn btn-primary">Verstuur bericht ✉️</button>
                    <div id="form-response" style="display:none;padding:12px;border-radius:8px;margin-top:8px;"></div>
                </form>
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>
