FruitBank/Presentation/Nop.Web/Themes/DatesExpress/Views/Home/Index.cshtml

@using Nop.Services.Localization
@using Nop.Core
@inject ILocalizationService localizationService
@inject IStoreContext storeContext

@{
    Layout = "_ColumnsOne";

    var homepageTitle = await localizationService.GetLocalizedAsync(await storeContext.GetCurrentStoreAsync(), s => s.HomepageTitle);
    if (!string.IsNullOrEmpty(homepageTitle))
    {
        NopHtml.AddTitleParts(homepageTitle);
    }

    var homepageDescription = await localizationService.GetLocalizedAsync(await storeContext.GetCurrentStoreAsync(), s => s.HomepageDescription);
    if (!string.IsNullOrEmpty(homepageDescription))
    {
        NopHtml.AddMetaDescriptionParts(homepageDescription);
    }

    NopHtml.AppendPageCssClassParts("html-home-page");
}

<div class="page home-page">
    <div class="page-body">

        <!-- ==========================================
             HERO SECTION
             ========================================== -->
        <section class="de-hero">
            <div class="de-hero-inner">
                <div class="de-hero-text">
                    <div class="de-hero-brand">DatolyaExpress</div>
                    <h1 class="de-hero-h1">Prémium<br>Medjool Datolya</h1>
                    <div class="de-hero-subtitle">Közvetlenül a forrástól.</div>
                    <p class="de-hero-desc">A világ legjobb datolyáit exportáljuk Európába és azon túlra — kiemelkedő minőségben, megbízható nagykereskedelmi partnerként.</p>
                    <div class="de-hero-buttons">
                        <a href="/kapcsolat" class="de-hero-btn-primary">Nagykereskedelmi ajánlat kérése</a>
                        <a href="/termekek" class="de-hero-btn-secondary">Termékeink &rsaquo;</a>
                    </div>
                </div>
                <div class="de-hero-image">
                    <img src="/images/uploaded/hero-dates.png" alt="Prémium Medjool Datolya" />
                </div>
            </div>
        </section>

        <!-- ==========================================
             STANDARD HOMEPAGE CONTENT (widgets zone)
             ========================================== -->
        <div style="position: relative; z-index: 5;">
            @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HomepageTop })
        </div>

        <!-- ==========================================
             MIÉRT A DATOLYAEXPRESS — IMMERSIVE FEATURES
             ========================================== -->
        <section class="fb-features" id="fbFeatures">
            <div class="fb-features-header">
                <h2>Miért a <em>DatolyaExpress</em>?</h2>
                <p>Nagykereskedelmi megoldás, ami másképp működik.</p>
            </div>

            <div class="fb-feature" data-align="left">
                <div class="fb-feature-img">
                    <img src="/images/uploaded/freshness.jpg" alt="Farmról frissen" loading="lazy" />
                </div>
                <div class="fb-feature-content">
                    <span class="fb-feature-num">01</span>
                    <h3>Farmról frissen, minden nap</h3>
                    <p>A megbízható termelőktől történő közvetlen beszerzés garantálja, hogy termékeink a lehető legfrissebb állapotban és kiváló ízminőségben érkeznek Önhöz.</p>
                </div>
            </div>

            <div class="fb-feature" data-align="right">
                <div class="fb-feature-img">
                    <img src="/images/uploaded/delivery.jpg" alt="Másnapi kiszállítás" loading="lazy" />
                </div>
                <div class="fb-feature-content">
                    <span class="fb-feature-num">02</span>
                    <h3>Másnapi nagykereskedelmi kiszállítás</h3>
                    <p>A hőmérséklet-szabályozott logisztika biztosítja, hogy rendelése minden alkalommal frissen és pontosan érkezzen meg.</p>
                </div>
            </div>

            <div class="fb-feature" data-align="left">
                <div class="fb-feature-img">
                    <img src="/images/uploaded/variety.jpg" alt="Páratlan választék" loading="lazy" />
                </div>
                <div class="fb-feature-content">
                    <span class="fb-feature-num">03</span>
                    <h3>Páratlan választék</h3>
                    <p>A Medjool-tól a Deglet Nour-ig – egész évben több féle prémium datolyafajtát kínálunk válogatott termelőktől.</p>
                </div>
            </div>

            <div class="fb-feature" data-align="right">
                <div class="fb-feature-img">
                    <img src="/images/uploaded/sustainable.jpg" alt="Fenntartható forrásból" loading="lazy" />
                </div>
                <div class="fb-feature-content">
                    <span class="fb-feature-num">04</span>
                    <h3>Fenntartható forrásból</h3>
                    <p>Olyan termelőkkel dolgozunk együtt, akik osztoznak a felelős gazdálkodás és az élelmiszer-pazarlás csökkentése iránti elkötelezettségünkben.</p>
                </div>
            </div>
        </section>

        <!-- ==========================================
             PRODUCT CATEGORIES
             ========================================== -->
        <section class="fb-categories">
            <div class="fb-categories-header">
                <h2>Amit <em>importálunk</em></h2>
                <p>Válogatott minőség, közvetlenül a világ legjobb termelőitől.</p>
            </div>
            <div class="fb-cat-grid">

                <a href="/termekek" class="fb-cat-card">
                    <img src="/images/uploaded/cat-citrus.jpg" alt="Citrusfélék" loading="lazy" />
                    <div class="fb-cat-label"><h3>Citrusfélék</h3></div>
                    <div class="fb-cat-hover">
                        <h3>Citrusfélék</h3>
                        <ul><li>Narancs</li><li>Citrom</li><li>Mandarin</li><li>Grépfrút</li><li>Lime</li><li>Pomelo</li></ul>
                    </div>
                </a>

                <a href="/termekek" class="fb-cat-card">
                    <img src="/images/uploaded/cat-exotic.jpg" alt="Egzotikus gyümölcsök" loading="lazy" />
                    <div class="fb-cat-label"><h3>Egzotikus gyümölcsök</h3></div>
                    <div class="fb-cat-hover">
                        <h3>Egzotikus gyümölcsök</h3>
                        <ul><li>Mangó</li><li>Ananász</li><li>Papaya</li><li>Passiongyümölcs</li><li>Licsi</li><li>Sárkánygyümölcs</li></ul>
                    </div>
                </a>

                <a href="/termekek" class="fb-cat-card">
                    <img src="/images/uploaded/cat-veggies.jpg" alt="Zöldségek" loading="lazy" />
                    <div class="fb-cat-label"><h3>Zöldségek <span>szezonon kívül</span></h3></div>
                    <div class="fb-cat-hover">
                        <h3>Zöldségek <span>szezonon kívül</span></h3>
                        <ul><li>Paradicsom</li><li>Paprika</li><li>Cukkini</li><li>Padlizsán</li><li>Zöldbab</li><li>Brokkoli</li></ul>
                    </div>
                </a>

                <a href="/termekek" class="fb-cat-card">
                    <img src="/images/uploaded/cat-fruits.jpg" alt="Gyümölcsök" loading="lazy" />
                    <div class="fb-cat-label"><h3>Gyümölcsök <span>szezonon kívül</span></h3></div>
                    <div class="fb-cat-hover">
                        <h3>Gyümölcsök <span>szezonon kívül</span></h3>
                        <ul><li>Szőlő</li><li>Őszibarack</li><li>Nektarin</li><li>Szilva</li><li>Cseresznye</li><li>Körte</li></ul>
                    </div>
                </a>

                <a href="/termekek" class="fb-cat-card">
                    <img src="/images/uploaded/cat-berries.jpg" alt="Bogyós gyümölcsök" loading="lazy" />
                    <div class="fb-cat-label"><h3>Bogyós gyümölcsök</h3></div>
                    <div class="fb-cat-hover">
                        <h3>Bogyós gyümölcsök</h3>
                        <ul><li>Áfonya</li><li>Szeder</li><li>Málna</li><li>Eper</li><li>Ribizli</li><li>Egészség csomag</li></ul>
                    </div>
                </a>

                <a href="/termekek" class="fb-cat-card">
                    <img src="/images/uploaded/cat-spices.jpg" alt="Egzotikus fűszerek" loading="lazy" />
                    <div class="fb-cat-label"><h3>Egzotikus fűszerek</h3></div>
                    <div class="fb-cat-hover">
                        <h3>Egzotikus fűszerek</h3>
                        <ul><li>Friss gyömbér</li><li>Kurkuma</li><li>Citromfű</li><li>Chili paprika</li><li>Koriander</li><li>Friss menta</li></ul>
                    </div>
                </a>

                <a href="/termekek" class="fb-cat-card">
                    <img src="/images/uploaded/cat-dates.jpg" alt="Datolya" loading="lazy" />
                    <div class="fb-cat-label"><h3>Datolya</h3></div>
                    <div class="fb-cat-hover">
                        <h3>Datolya</h3>
                        <ul><li>Medjool</li><li>Deglet Nour</li><li>Barhi</li><li>Mazafati</li><li>Ajwa</li><li>Sukkari</li></ul>
                    </div>
                </a>

                <a href="/termekek" class="fb-cat-card">
                    <img src="/images/uploaded/cat-farveggies.jpg" alt="Távoli zöldségek" loading="lazy" />
                    <div class="fb-cat-label"><h3>Távoli zöldségek</h3></div>
                    <div class="fb-cat-hover">
                        <h3>Távoli zöldségek</h3>
                        <ul><li>Avokádó</li><li>Fokhagyma</li><li>Édesburgonya</li><li>Gyömbér</li><li>Jamsz gyökér</li><li>Taro</li></ul>
                    </div>
                </a>

            </div>
        </section>

        <!-- ==========================================
             FORKLIFT + STATS SECTION
             ========================================== -->
        <section class="section-forklift">
            <div class="forklift-scroll-container" id="forkliftScrollContainer">
                <div class="forklift-sticky">
                    <div class="forklift-visual">
                        <canvas id="forkliftCanvas"></canvas>
                    </div>
                    <div class="stats-panel">
                        <div class="stat-item" id="stat1">
                            <div class="stat-number"><span class="stat-counter" data-target="25000">0</span>+</div>
                            <div class="stat-label">tonna áru évente</div>
                        </div>
                        <div class="stat-item" id="stat2">
                            <div class="stat-number"><span class="stat-counter" data-target="12000">0</span>+</div>
                            <div class="stat-label">megrendelés évente</div>
                        </div>
                        <div class="stat-item" id="stat3">
                            <div class="stat-number"><span class="stat-counter" data-target="1000">0</span>+</div>
                            <div class="stat-label">elégedett ügyfél</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>

<!-- ==========================================
     HOMEPAGE ANIMATION SCRIPT
     ========================================== -->
<script asp-location="Footer">
(function() {

    // =============================================
    // FORKLIFT CANVAS ANIMATION
    // =============================================
    var FL_TOTAL = 120;
    var FL_LERP = 0.06;
    var flFrames = [];
    var flLoaded = 0;
    var flCurrentFrame = 0;
    var flTargetFrame = 0;

    var flCanvas = document.getElementById('forkliftCanvas');
    var flCtx = flCanvas ? flCanvas.getContext('2d') : null;
    var flCanvasW = 0, flCanvasH = 0;

    function setupForkliftCanvas() {
        var sample = flFrames[0];
        if (!sample || !sample.naturalWidth || !flCanvas) return;
        var dpr = window.devicePixelRatio || 1;
        var isMobile = window.innerWidth <= 768;
        var container = flCanvas.parentElement;
        var displayW = container ? container.clientWidth : (isMobile ? window.innerWidth * 1.2 : window.innerWidth * 0.5);
        var displayH = displayW * (sample.naturalHeight / sample.naturalWidth);
        flCanvas.style.width = displayW + 'px';
        flCanvas.style.height = displayH + 'px';
        flCanvas.width = Math.round(displayW * dpr);
        flCanvas.height = Math.round(displayH * dpr);
        flCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
        flCanvasW = displayW;
        flCanvasH = displayH;
    }

    function preloadForkliftFrames() {
        return new Promise(function(resolve) {
            for (var i = 1; i <= FL_TOTAL; i++) {
                var img = new Image();
                img.src = '/Themes/CarHaven/Content/forklift-frames/frame_' + String(i).padStart(4, '0') + '.jpg';
                img.onload = img.onerror = function() {
                    flLoaded++;
                    if (flLoaded === FL_TOTAL) resolve();
                };
                flFrames.push(img);
            }
        });
    }

    var forkliftContainer = document.getElementById('forkliftScrollContainer');
    var counters = document.querySelectorAll('.stat-counter');
    var statItems = document.querySelectorAll('.stat-item');
    var counterValues = Array.from(counters).map(function() { return 0; });

    function forkliftLoop() {
        if (!forkliftContainer) { requestAnimationFrame(forkliftLoop); return; }
        var rect = forkliftContainer.getBoundingClientRect();
        var scrolled = -rect.top;
        var total = rect.height - window.innerHeight;
        var progress = Math.max(0, Math.min(1, scrolled / total));

        flTargetFrame = progress * (FL_TOTAL - 1);
        var diff = flTargetFrame - flCurrentFrame;
        if (Math.abs(diff) > 0.05) {
            flCurrentFrame += diff * FL_LERP;
        } else {
            flCurrentFrame = flTargetFrame;
        }

        if (flCanvasW > 0 && flFrames.length > 0) {
            var idxA = Math.max(0, Math.min(FL_TOTAL - 1, Math.floor(flCurrentFrame)));
            var idxB = Math.max(0, Math.min(FL_TOTAL - 1, Math.ceil(flCurrentFrame)));
            var blend = flCurrentFrame - Math.floor(flCurrentFrame);
            var imgA = flFrames[idxA];
            var imgB = flFrames[idxB];
            if (imgA && imgA.complete && imgA.naturalWidth) {
                flCtx.clearRect(0, 0, flCanvasW, flCanvasH);
                if (blend > 0.01 && imgB && imgB.complete && imgB.naturalWidth && idxA !== idxB) {
                    flCtx.globalAlpha = 1;
                    flCtx.drawImage(imgA, 0, 0, flCanvasW, flCanvasH);
                    flCtx.globalAlpha = blend;
                    flCtx.drawImage(imgB, 0, 0, flCanvasW, flCanvasH);
                    flCtx.globalAlpha = 1;
                } else {
                    flCtx.drawImage(imgA, 0, 0, flCanvasW, flCanvasH);
                }
            }
        }

        statItems.forEach(function(item, i) {
            var staggerStart = i * 0.2;
            var itemProgress = Math.max(0, Math.min(1, (progress - staggerStart) / (1 - staggerStart)));
            if (itemProgress > 0.05) {
                var fadeIn = Math.min(1, (itemProgress - 0.05) / 0.3);
                item.style.opacity = fadeIn;
                item.style.transform = 'translateY(' + ((1 - fadeIn) * 40) + 'px)';
            }
            var target = parseInt(counters[i].dataset.target);
            var currentTarget = target * Math.min(1, itemProgress / 0.7);
            counterValues[i] += (currentTarget - counterValues[i]) * 0.08;
            counters[i].textContent = Math.round(counterValues[i]).toLocaleString();
        });

        requestAnimationFrame(forkliftLoop);
    }

    // =============================================
    // INIT
    // =============================================
    gsap.registerPlugin(ScrollTrigger);

    // Forklift — start loop immediately (stats need it), load frames async
    requestAnimationFrame(forkliftLoop);
    preloadForkliftFrames().then(function() {
        setupForkliftCanvas();
        window.addEventListener('resize', setupForkliftCanvas);
    });

    // =============================================
    // SCROLL REVEAL ANIMATIONS
    // =============================================
    (function initScrollReveal() {

        // Hero text elements
        var heroText = document.querySelector('.de-hero-text');
        var heroImage = document.querySelector('.de-hero-image');
        if (heroText) {
            gsap.from(heroText, { x: -60, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 });
        }
        if (heroImage) {
            gsap.from(heroImage, { x: 60, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.4 });
        }

        // Product grid titles
        document.querySelectorAll('.product-grid .title, .home-page-product-grid .title').forEach(function(el) {
            el.classList.add('sr-fade-up');
        });

        // Features header
        var fbHeader = document.querySelector('.fb-features-header');
        if (fbHeader) fbHeader.classList.add('sr-fade-up');

        // Feature rows: image parallax + content slide
        document.querySelectorAll('.fb-feature').forEach(function(feature) {
            var img = feature.querySelector('.fb-feature-img img');
            var content = feature.querySelector('.fb-feature-content');
            var align = feature.getAttribute('data-align');

            if (img) {
                gsap.fromTo(img,
                    { yPercent: -10 },
                    { yPercent: 10, ease: 'none',
                      scrollTrigger: { trigger: feature, start: 'top bottom', end: 'bottom top', scrub: 1 }
                    }
                );
            }
            if (content) {
                gsap.from(content, {
                    x: align === 'right' ? 60 : -60, opacity: 0,
                    duration: 1, ease: 'power3.out',
                    scrollTrigger: { trigger: feature, start: 'top 75%', toggleActions: 'play none none none' }
                });
            }
        });

        // Category cards stagger
        var catCards = document.querySelectorAll('.fb-cat-card');
        if (catCards.length > 0) {
            catCards.forEach(function(el) { el.classList.add('sr-stagger-item'); });
            gsap.to(catCards, {
                opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', stagger: 0.12,
                scrollTrigger: { trigger: '.fb-cat-grid', start: 'top 85%', toggleActions: 'play none none none' }
            });
        }

        // Category header
        var catHeader = document.querySelector('.fb-categories-header');
        if (catHeader) catHeader.classList.add('sr-fade-up');

        // Product cards stagger
        document.querySelectorAll('.product-grid .item-box').forEach(function(el) {
            el.classList.add('sr-stagger-item');
        });

        // Footer blocks stagger
        document.querySelectorAll('.footer-block').forEach(function(el) {
            el.classList.add('sr-stagger-item');
        });

        // Animate sr-fade-up
        gsap.utils.toArray('.sr-fade-up').forEach(function(el) {
            gsap.to(el, {
                opacity: 1, y: 0, duration: 0.8, ease: 'power3.out',
                scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }
            });
        });

        // Animate sr-fade-left
        gsap.utils.toArray('.sr-fade-left').forEach(function(el) {
            gsap.to(el, {
                opacity: 1, x: 0, duration: 0.9, ease: 'power3.out',
                scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }
            });
        });

        // Animate sr-fade-right
        gsap.utils.toArray('.sr-fade-right').forEach(function(el) {
            gsap.to(el, {
                opacity: 1, x: 0, duration: 0.9, ease: 'power3.out',
                scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }
            });
        });

        // Product grid cards per-grid stagger
        document.querySelectorAll('.product-grid').forEach(function(grid) {
            var cards = grid.querySelectorAll('.item-box.sr-stagger-item');
            if (cards.length === 0) return;
            gsap.to(cards, {
                opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', stagger: 0.1,
                scrollTrigger: { trigger: grid, start: 'top 85%', toggleActions: 'play none none none' }
            });
        });

        // Footer blocks
        var footerBlocks = document.querySelectorAll('.footer-block.sr-stagger-item');
        if (footerBlocks.length > 0) {
            gsap.to(footerBlocks, {
                opacity: 1, y: 0, duration: 0.6, ease: 'power2.out', stagger: 0.12,
                scrollTrigger: { trigger: footerBlocks[0], start: 'top 90%', toggleActions: 'play none none none' }
            });
        }
    })();

})();
</script>