<?php
get_header();

// Fetch historical prices using our new helpers
$juce = kaz_get_historical_price(1);
$pre_7_dana = kaz_get_historical_price(7);
?>

<main>
    <section class="kaz-hero">
        <!-- Background Video -->
        <video class="kaz-hero__video" autoplay loop muted playsinline>
            <source
                src="<?php echo esc_url(get_template_directory_uri() . '/assets/media/hero_1080p_optimized.webm'); ?>"
                type="video/webm">
        </video>

        <!-- Gradient Overlay -->
        <div class="kaz-hero__overlay"></div>

        <!-- Main Content Container -->
        <div class="kaz-hero__container">

            <!-- Left Side: Text and CTA -->
            <div class="kaz-hero__content-left">
                <h1>Pametna strana štednje.</h1>
                <h2>Vaš put do sigurne i trajne vrednosti počinje ovde. Investirajte u najčistije zlato direktno u Novom
                    Sadu.</h2>

                <a class="tj-primary-btn kaz-hero__cta" href="#">
                    <span class="btn_inner">
                        <span class="btn_icon">
                            <span>
                                <i></i><i></i>
                            </span>
                        </span>
                        <span class="btn_text"><span>Istražite ponudu</span></span>
                    </span>
                </a>
            </div>

            <!-- Right Side: Glassmorphism Cards -->
            <div class="kaz-hero__content-right">
                <div class="kaz-hero__glass-card">
                    <h3>LBMA Sertifikovano</h3>
                    <p>Poluge vrhunskog kvaliteta.</p>
                </div>
                <div class="kaz-hero__glass-card">
                    <h3>999.9 Čistoća</h3>
                    <p>Zlato najviše finoće.</p>
                </div>
            </div>

        </div>

        <!-- Floating Status Bar -->
        <div class="kaz-hero__status-wrapper">
            <div class="container">
                <div class="kaz-hero__status-bar">
                    <div class="kaz-hero__live-price">
                        Trenutna vrednost (1g): <span data-live-tag="chart-ref-1g"
                            style="font-weight: bold; color: var(--color-primary);">...učitavanje...</span>
                    </div>

                    <div class="price-history-indicators kaz-hero__history-price">
                        Promena 24h: <strong><?php echo esc_html($juce ? $juce : 'N/A'); ?></strong> | Promena 7 dana:
                        <strong><?php echo esc_html($pre_7_dana ? $pre_7_dana : 'N/A'); ?></strong>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Procedura Kupovine Section -->
    <section class="kaz-section procedure">
        <div class="container">

            <div class="kaz-section-header text-center">
                <span class="kaz-subheading">Jednostavno i sigurno</span>
                <h2 class="kaz-heading">Kako postati vlasnik zlata</h2>
                <p class="kaz-heading-desc">Transparentan proces kupovine od odabira do preuzimanja.</p>
            </div>

            <!-- Card 1 -->
            <div class="service-item">
                <div class="service-item__inner">
                    <div class="service-content">
                        <div class="service-number">01<span class="muted">/3</span></div>

                        <div class="service-text">
                            <div class="service-icon">
                                <?php echo kaz_get_icon('reserve', 'service-icon-svg'); ?>
                            </div>
                            <h3>Odaberite i rezervišite</h3>
                            <p>Izaberite apoen koji vam odgovara. Cena na sajtu je fiksna u trenutku kada poručite, bez
                                obzira na promene na berzi do uplate.</p>
                        </div>
                    </div>
                    <div class="service-images">
                        <!-- Fallback solid background while waiting for images -->
                        <div><img src="<?php echo get_template_directory_uri(); ?>/assets/img/proces-nano-1.webp"
                                alt="Odaberite i rezervišite"></div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="service-item">
                <div class="service-item__inner">
                    <div class="service-content">
                        <div class="service-number">02<span class="muted">/3</span></div>

                        <div class="service-text">
                            <div class="service-icon">
                                <?php echo kaz_get_icon('safe-pay', 'service-icon-svg'); ?>
                            </div>
                            <h3>Sigurna uplata</h3>
                            <p>Nakon porudžbine dobijate instrukcije za plaćanje putem računa. Sve je transparentno i u
                                skladu sa domaćim propisima.</p>
                        </div>
                    </div>
                    <div class="service-images">
                        <div><img src="<?php echo get_template_directory_uri(); ?>/assets/img/proces-nano-2.webp"
                                alt="Sigurna uplata"></div>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="service-item">
                <div class="service-item__inner">
                    <div class="service-content">
                        <div class="service-number">03<span class="muted">/3</span></div>

                        <div class="service-text">
                            <div class="service-icon">
                                <?php echo kaz_get_icon('delivery', 'service-icon-svg'); ?>
                            </div>
                            <h3>Preuzimanje sa stilom</h3>
                            <p>Vaše zlato vas čeka u našoj kancelariji u Novom Sadu ili stiže na vašu adresu putem
                                osigurane i diskretne dostave.</p>
                        </div>
                    </div>
                    <div class="service-images">
                        <div><img src="<?php echo get_template_directory_uri(); ?>/assets/img/proces-nano-3.webp"
                                alt="Preuzimanje sa stilom"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Ponuda investicionog zlata Section (Container Leak) -->
    <section class="kaz-section kaz-products-leak">
        <div class="kaz-products-wrapper">
            
            <!-- Left Side: Text content -->
            <div class="kaz-products-left">
                <div class="kaz-section-header text-left" style="margin-bottom: 2rem;">
                    <span class="kaz-subheading">Premijum proizvodi</span>
                    <h2 class="kaz-heading">Ponuda investicionog zlata</h2>
                    <p class="kaz-heading-desc">Pronađite idealan apoen za vašu štednju. Od dukata do zlatnih poluga.</p>
                </div>
                
                <!-- Slider Controls -->
                <div class="kaz-slider-controls">
                    <button class="kaz-slider-btn prev-btn" aria-label="Prethodni proizvodi">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
                    </button>
                    <button class="kaz-slider-btn next-btn" aria-label="Sledeći proizvodi">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                    </button>
                </div>
            </div>

            <!-- Right Side: Slider -->
            <div class="kaz-products-right">
                
                <?php
                // Pre-fetch WooCommerce products to avoid redundant DB lookups
                $base_skus = ['AHG001', 'AHG005', 'AHG020', 'HeG01U', 'MÖG100', 'GPh01n'];
                $products_data = [];

                foreach ($base_skus as $sku) {
                    if ( function_exists('wc_get_product_id_by_sku') ) {
                        $product_id = wc_get_product_id_by_sku( $sku );
                        if ( $product_id ) {
                            $product = wc_get_product( $product_id );
                            $products_data[] = [
                                'sku' => $sku,
                                'name' => $product->get_name(),
                                'permalink' => $product->get_permalink(),
                                'image_html' => $product->get_image('medium'),
                                'price_html' => $product->get_price_html()
                            ];
                            continue;
                        }
                    }
                    // Fallback
                    $products_data[] = [
                        'sku' => $sku,
                        'name' => $sku,
                        'permalink' => '#',
                        'image_html' => '<img src="' . get_template_directory_uri() . '/assets/img/hero-bg-mobile.webp" alt="Nije pronadjeno">',
                        'price_html' => 'N/A'
                    ];
                }

                // Loop 3 times for infinite scroll illusion
                for ($i = 0; $i < 3; $i++) {
                    foreach ($products_data as $prod) {
                        ?>
                        <div class="kaz-product-card">
                            <div class="kaz-product-image">
                                <?php echo $prod['image_html']; ?>
                            </div>
                            <div class="kaz-product-info">
                                <h3 class="kaz-product-title"><?php echo esc_html($prod['name']); ?></h3>
                                <div class="kaz-product-price">
                                    Cena: <span data-live-tag="<?php echo esc_attr($prod['sku']); ?>"><?php echo $prod['price_html']; ?></span>
                                </div>
                                <a href="<?php echo esc_url($prod['permalink']); ?>" class="tj-primary-btn" style="margin-top: auto; align-self: flex-start;">
                                    <span class="btn_inner">
                                        <span class="btn_icon">
                                            <span>
                                                <i></i><i></i>
                                            </span>
                                        </span>
                                        <span class="btn_text"><span>Detalji</span></span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <?php
                    }
                }
                ?>
            </div>
        </div>
    </section>

    <!-- Native Infinite Scroll JS -->
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const slider = document.querySelector('.kaz-products-right');
        if (!slider) return;
        
        const itemsPerSet = <?php echo count($base_skus); ?>;
        const cards = slider.querySelectorAll('.kaz-product-card');
        if (cards.length === 0) return;

        // Calculate width of one set
        const getSetWidth = () => {
            if (!cards[itemsPerSet]) return 0;
            return cards[itemsPerSet].offsetLeft - cards[0].offsetLeft;
        };

        let setWidth = getSetWidth();
        
        // Start scroll position at Set 2 so user can scroll left or right
        setTimeout(() => {
            setWidth = getSetWidth();
            slider.scrollLeft = setWidth;
        }, 100);

        window.addEventListener('resize', () => {
            setWidth = getSetWidth();
        });

        let isJumping = false;
        
        slider.addEventListener('scroll', () => {
            if (isJumping || setWidth === 0) return;

            // Scrolled before Set 2 (entered Set 1)
            if (slider.scrollLeft <= 0) {
                isJumping = true;
                slider.style.scrollSnapType = 'none'; // Temporarily disable snap
                slider.scrollLeft += setWidth;
                
                setTimeout(() => {
                    slider.style.scrollSnapType = '';
                    isJumping = false;
                }, 50);
            } 
            // Scrolled past Set 2 (entered Set 3)
            else if (slider.scrollLeft >= setWidth * 2 - 10) { 
                isJumping = true;
                slider.style.scrollSnapType = 'none'; 
                slider.scrollLeft -= setWidth;
                
                setTimeout(() => {
                    slider.style.scrollSnapType = '';
                    isJumping = false;
                }, 50);
            }
        }, { passive: true });

        // Desktop Drag to Scroll (fixes swipe issue when inspector is closed)
        let isDown = false;
        let startX;
        let scrollLeft;

        slider.addEventListener('mousedown', (e) => {
            isDown = true;
            slider.style.scrollSnapType = 'none';
            slider.style.cursor = 'grabbing';
            startX = e.pageX - slider.offsetLeft;
            scrollLeft = slider.scrollLeft;
        });
        
        const endDrag = () => {
            if (!isDown) return;
            isDown = false;
            slider.style.cursor = '';
            slider.style.scrollSnapType = '';
        };

        slider.addEventListener('mouseleave', endDrag);
        slider.addEventListener('mouseup', endDrag);
        
        slider.addEventListener('mousemove', (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - slider.offsetLeft;
            const walk = (x - startX) * 1.5; // Scroll speed multiplier
            slider.scrollLeft = scrollLeft - walk;
        });

        // Arrow Controls
        const prevBtn = document.querySelector('.kaz-slider-btn.prev-btn');
        const nextBtn = document.querySelector('.kaz-slider-btn.next-btn');

        if(prevBtn) {
            prevBtn.addEventListener('click', () => {
                const itemWidth = cards[0].offsetWidth + 20; // width + gap
                slider.scrollBy({ left: -itemWidth, behavior: 'smooth' });
            });
        }
        if(nextBtn) {
            nextBtn.addEventListener('click', () => {
                const itemWidth = cards[0].offsetWidth + 20; // width + gap
                slider.scrollBy({ left: itemWidth, behavior: 'smooth' });
            });
        }
    });
    </script>
    <!-- Chart Section -->
    <section class="kaz-section kaz-chart-section">
        <!-- Parallax Container Leak Background -->
        <div class="kaz-chart-leak-bg"></div>

        <div class="container kaz-chart-grid">
            <!-- Left Side: Chart -->
            <div class="kaz-chart-left">
                <div class="kaz-chart-tabs">
                    <button class="kaz-chart-tab active" data-days="7">7 dana</button>
                    <button class="kaz-chart-tab" data-days="30">30 dana</button>
                    <button class="kaz-chart-tab" data-days="180">6 meseci</button>
                </div>
                <div class="kaz-chart-canvas-container">
                    <canvas id="kazPriceChart"></canvas>
                </div>
            </div>

            <!-- Right Side: Text -->
            <div class="kaz-chart-right">
                <div class="kaz-section-header text-left" style="margin-bottom: 0;">
                    <span class="kaz-subheading">Kretanje vrednosti</span>
                    <h2 class="kaz-heading">Zlato ne gubi vrednost, ono je čuva.</h2>
                    <p class="kaz-heading-desc">Dok valute kroz inflaciju gube svoju kupovnu moć, investiciono zlato decenijama ostaje najsigurniji čuvar vašeg kapitala. Pratite kretanje cene i izaberite pravi trenutak za pametnu štednju.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Chart.js and Logic -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const ctx = document.getElementById('kazPriceChart');
        if (!ctx) return;

        let kazChart = null;

        const initChart = (labels, values) => {
            const chartData = {
                labels: labels,
                datasets: [{
                    label: 'Cena (1g)',
                    data: values,
                    borderColor: '#0075FF',
                    borderWidth: 3,
                    pointRadius: 0,
                    pointHoverRadius: 5,
                    fill: true,
                    tension: 0.4,
                    backgroundColor: (context) => {
                        const chartCtx = context.chart.ctx;
                        const gradient = chartCtx.createLinearGradient(0, 0, 0, context.chart.height || 300);
                        gradient.addColorStop(0, 'rgba(0, 117, 255, 0.3)');
                        gradient.addColorStop(1, 'rgba(0, 117, 255, 0)');
                        return gradient;
                    }
                }]
            };

            const config = {
                type: 'line',
                data: chartData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            intersect: false,
                            mode: 'index',
                            backgroundColor: '#051229',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            borderColor: '#0075FF',
                            borderWidth: 1
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { color: 'rgba(255, 255, 255, 0.5)' }
                        },
                        y: {
                            grid: { color: 'rgba(255, 255, 255, 0.05)' },
                            ticks: { color: 'rgba(255, 255, 255, 0.5)' }
                        }
                    }
                }
            };

            kazChart = new Chart(ctx, config);
        };

        const updateChartData = (days) => {
            const baseUrl = typeof kaz_live_prices_data !== 'undefined' 
                ? kaz_live_prices_data.rest_url.replace('live-prices', 'chart-data') 
                : '/wp-json/kaz/v1/chart-data';
                
            fetch(`${baseUrl}?days=${days}`)
                .then(res => res.json())
                .then(data => {
                    if (data && data.labels && data.values) {
                        if (!kazChart) {
                            initChart(data.labels, data.values);
                        } else {
                            kazChart.data.labels = data.labels;
                            kazChart.data.datasets[0].data = data.values;
                            kazChart.update();
                        }
                    }
                })
                .catch(err => console.error('Error fetching chart data', err));
        };

        // Initialize with 7 days
        updateChartData(7);

        // Tab logic
        const tabs = document.querySelectorAll('.kaz-chart-tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                const days = tab.getAttribute('data-days');
                updateChartData(days);
            });
        });
    });
    </script>
    <!-- Trust/Marquee Section -->
    <section class="kaz-section kaz-trust-section">
        <div class="container">
            <div class="kaz-section-header text-center">
                <span class="kaz-subheading">Garancija kvaliteta</span>
                <h2 class="kaz-heading">Kovnice od svetskog poverenja</h2>
                <p class="kaz-heading-desc">Sertifikovano investiciono zlato najpoznatijih evropskih proizvođača (Good Delivery standard).</p>
            </div>
            
            <div class="kaz-marquee-wrapper">
                <div class="kaz-marquee-track">
                    <?php 
                    $logos = [
                        [
                            'name' => 'logo_valcambi-seeklogo',
                            'url' => 'https://valcambi.com/'
                        ],
                        [
                            'name' => 'logo_heraeus',
                            'url' => 'https://www.heraeus.com/en/'
                        ],
                        [
                            'name' => 'logo_argor-heareus',
                            'url' => 'https://www.argor-heraeus.com/en/'
                        ],
                        [
                            'name' => 'logo_munze_osterreich',
                            'url' => 'https://www.muenzeoesterreich.com/en'
                        ]
                    ];
                    
                    // 3 sets for endless loop
                    for ($i = 0; $i < 3; $i++) {
                        foreach ($logos as $logo) {
                            $extra_class = ($logo['name'] === 'logo_munze_osterreich') ? ' kaz-trust-card--munze' : '';
                            echo '<a href="' . esc_url($logo['url']) . '" target="_blank" rel="nofollow" class="kaz-trust-logo-item kaz-trust-card' . $extra_class . '">';
                            echo kaz_get_icon($logo['name'], 'trust-logo-svg');
                            echo '</a>';
                        }
                    }
                    ?>
                </div>
            </div>
        </div>
    </section>

</main>

<?php get_footer(); ?>