@extends('layouts.app')
@push('meta')
    @include('components.meta', [
        'title' => __('seo.HOME_TITLE'),
        'desc' => __('seo.HOME_DESC'),
        'image' => 'img/logo.webp',
    ])
@endpush

@section('content')

    @include('components.landing.hero-section')

    

    @include('components.landing.industry-surveys', [
        'hasMainTitle' => true,
        'reverse' => true,
        'mainTitle' => $homepageSections -> insight_surveys_main_title,
        'titleParts' => $homepageSections -> insight_surveys_title,
        'desc' => $homepageSections -> insight_surveys_desc,
        'hasButton' => true,
        'link' => route('surveys', ['lang' => App::getLocale()]),
        'surveys' => $surveys,
    ])
    @include('components.landing.banner', [
        'reverse' => false,
        'hasMainTitle' => true,
        'mainTitle' => $homepageSections->who_we_are_main_title,
        'titleParts' => $homepageSections->who_we_are_title,
        'desc' => $homepageSections->who_we_are_desc,
        'listItems' => $homepageSections->who_we_are_list,
        'hasButton' => true,
        'image' => Storage::url($homepageSections->who_we_are_image),
        'link' => route('ourVision', ['lang' => App::getLocale()]),
    ])
    @include('components.landing.our-services')
    @include('components.landing.banner', [
        'hasMainTitle' => true,
        'reverse' => true,
        'mainTitle' => $homepageSections->why_us_main_title,
        'titleParts' => $homepageSections->why_us_title,
        'desc' => $homepageSections->why_us_desc,
        'hasButton' => true,
        'link' => route('expertise', ['lang' => App::getLocale()]),
        'image' => Storage::url($homepageSections->why_us_image),
    ])
    @include('components.landing.testimonials')
    @include('components.landing.faqs', [
        'faqs' => $homepageSections->faqs,
        'mainTitle' => $homepageSections->faqs_main_title,
        'titleParts' => $homepageSections->faqs_title,
        'desc' => $homepageSections->faqs_desc,
    ])
@endsection

@push('scripts')

<script>
document.addEventListener("DOMContentLoaded", () => {
    gsap.registerPlugin(ScrollTrigger);

    const hero = document.getElementById("landing-hero");
    const canvas = document.getElementById("hero-sequence-canvas");
    const sequenceWrap = hero ? hero.querySelector(".hero-sequence-wrap") : null;

    if (!hero || !canvas || !sequenceWrap) return;

    const ctx = canvas.getContext("2d", { alpha: true });

    const frameCount = 50;
    const lastFrame = frameCount - 1;
    const images = new Array(frameCount);

    let framesReady = false;
    let preloaderExitStarted = false;
    let introStarted = false;
    let introCompleted = false;

    let resizeTimeout = null;
    let currentFrameIndex = -1;
    let scrollTriggerInstance = null;

    function getFrameSrc(index) {
        return `/frames/png/frame_${String(index).padStart(3, "0")}.png`;
    }

    function clamp(value, min, max) {
        return Math.max(min, Math.min(max, value));
    }

    function loadFrame(index) {
        return new Promise((resolve) => {
            const img = new Image();
            img.decoding = "async";
            img.loading = "eager";
            img.fetchPriority = index < 6 ? "high" : "auto";

            img.onload = async () => {
                try {
                    if (img.decode) await img.decode();
                } catch (e) {}
                images[index] = img;
                resolve();
            };

            img.onerror = () => {
                console.warn("Failed to load frame:", getFrameSrc(index));
                images[index] = null;
                resolve();
            };

            img.src = getFrameSrc(index);
        });
    }

    function drawImageBottomRight(img) {
        if (!img || !img.complete) return;

        const canvasWidth = hero.clientWidth;
        const canvasHeight = hero.clientHeight;

        ctx.clearRect(0, 0, canvasWidth, canvasHeight);

        const imgRatio = img.width / img.height;
        const screenWidth = window.innerWidth;

        let scale;
        let drawWidth;
        let drawHeight;
        let x;
        let y;

        if (screenWidth < 768) {
            scale = 1.05;
            drawWidth = canvasWidth * scale;
            drawHeight = drawWidth / imgRatio;

            if (drawHeight > canvasHeight * 0.72) {
                drawHeight = canvasHeight * 0.72;
                drawWidth = drawHeight * imgRatio;
            }

            x = canvasWidth - drawWidth - (canvasWidth * 0.02);
            y = (canvasHeight - drawHeight) / 2;
        } else if (screenWidth < 1200) {
            scale = 0.82;
            drawWidth = canvasWidth * scale;
            drawHeight = drawWidth / imgRatio;

            if (drawHeight > canvasHeight * 0.76) {
                drawHeight = canvasHeight * 0.76;
                drawWidth = drawHeight * imgRatio;
            }

            x = canvasWidth - drawWidth - (canvasWidth * 0.02);
            y = (canvasHeight - drawHeight) / 2;
        } else {
            scale = 0.82;
            drawWidth = canvasWidth * scale;
            drawHeight = drawWidth / imgRatio;

            if (drawHeight > canvasHeight * 0.82) {
                drawHeight = canvasHeight * 0.82;
                drawWidth = drawHeight * imgRatio;
            }

            x = canvasWidth - drawWidth - (canvasWidth * 0.01);
            y = canvasHeight - drawHeight - (canvasHeight * 0.05);
        }

        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = "high";
        ctx.drawImage(img, x, y, drawWidth, drawHeight);
    }

    function drawFrame(index, force = false) {
        index = clamp(index, 0, lastFrame);

        if (!force && currentFrameIndex === index) return;

        const img = images[index];
        if (!img) return;

        currentFrameIndex = index;
        drawImageBottomRight(img);
    }

    function resizeCanvas() {
        const dpr = Math.min(window.devicePixelRatio || 1, 2);
        const rect = hero.getBoundingClientRect();

        canvas.width = Math.round(rect.width * dpr);
        canvas.height = Math.round(rect.height * dpr);
        canvas.style.width = rect.width + "px";
        canvas.style.height = rect.height + "px";

        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

        if (framesReady) {
            drawFrame(currentFrameIndex < 0 ? lastFrame : currentFrameIndex, true);
        }
    }

    function createScrollSequence() {
        if (scrollTriggerInstance) {
            scrollTriggerInstance.kill();
            scrollTriggerInstance = null;
        }

        drawFrame(0, true);

        // Smaller scroll space, but still enough to show all frames
        const pxPerFrame = window.innerWidth < 768 ? 22 : 32;
        const totalScrollDistance = frameCount * pxPerFrame;

        scrollTriggerInstance = ScrollTrigger.create({
            trigger: hero,
            start: "top top",
            end: () => `+=${totalScrollDistance}`,
            scrub: 0.35,
            invalidateOnRefresh: true,
            onUpdate: (self) => {
                if (!introCompleted) return;

                // Convert exact scroll distance into frame index
                const scrollRange = self.end - self.start;
                const scrollPassed = clamp((self.scroll() - self.start), 0, scrollRange);

                const frameProgress = scrollPassed / scrollRange;
                const targetFrame = Math.round(frameProgress * lastFrame);

                drawFrame(targetFrame);
            }
        });

        ScrollTrigger.refresh();
        drawFrame(0, true);
    }

    function startIntroNow() {
        if (!framesReady || !preloaderExitStarted || introStarted) return;

        introStarted = true;

        drawFrame(lastFrame, true);

        const revealTl = gsap.timeline();

        revealTl.set(sequenceWrap, {
            opacity: 0,
            scale: 1.12,
            filter: "blur(14px)"
        });

        revealTl.to(sequenceWrap, {
            opacity: 1,
            scale: 1,
            filter: "blur(0px)",
            duration: 1.15,
            ease: "power2.out"
        });

        const introState = { frame: lastFrame };

        revealTl.to(introState, {
            frame: 0,
            duration: 4.2,
            ease: "power1.inOut",
            onUpdate: () => {
                drawFrame(Math.round(introState.frame));
            },
            onComplete: () => {
                drawFrame(0, true);
                introCompleted = true;
                createScrollSequence();
            }
        });
    }

    async function preloadFrames() {
        const promises = [];
        for (let i = 0; i < frameCount; i++) {
            promises.push(loadFrame(i));
        }

        await Promise.all(promises);

        framesReady = true;
        resizeCanvas();
        drawFrame(lastFrame, true);

        startIntroNow();
    }

    window.addEventListener("gv:preloaderExitStart", () => {
        preloaderExitStarted = true;
        startIntroNow();
    });

    if (!document.getElementById("gv-preloader")) {
        preloaderExitStarted = true;
    }

    window.addEventListener("resize", () => {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
            resizeCanvas();
            if (introCompleted) createScrollSequence();
            ScrollTrigger.refresh();
        }, 120);
    });

    preloadFrames();
});
</script>
@endpush