Interactive Globe Hero with Stats

<div class="bg-slate-950 text-slate-50 font-sans antialiased min-h-screen flex flex-col relative overflow-hidden selection:bg-fuchsia-900/50 selection:text-fuchsia-200" style="font-family: 'Inter', sans-serif;">
    
    <!-- Interactive Canvas -->
    <canvas id="globe-canvas" class="absolute inset-0 z-0 w-full h-full"></canvas>

    <!-- Main Content -->
    <main class="relative z-10 flex flex-col min-h-screen p-4 md:p-8 lg:p-12 max-w-[1800px] mx-auto w-full pointer-events-none">
        
        <!-- Container with Lines & Corners (Removed backdrop-blur for sharp globe) -->
        <div id="border-container" class="relative flex flex-col justify-between h-full flex-grow border border-slate-800/80 p-6 md:p-12 lg:p-16 pointer-events-auto bg-slate-900/40 overflow-hidden" style="--mouse-x: -1000px; --mouse-y: -1000px;">
            
            <!-- Corner Mini Squares -->
            <div class="absolute -top-1 -left-1 w-2 h-2 border border-slate-700 bg-slate-950 z-20"></div>
            <div class="absolute -top-1 -right-1 w-2 h-2 border border-slate-700 bg-slate-950 z-20"></div>
            <div class="absolute -bottom-1 -left-1 w-2 h-2 border border-slate-700 bg-slate-950 z-20"></div>
            <div class="absolute -bottom-1 -right-1 w-2 h-2 border border-slate-700 bg-slate-950 z-20"></div>

            <!-- Flashlight Hover Border Overlay -->
            <div class="absolute inset-0 z-10 pointer-events-none" style="mask-image: radial-gradient(350px circle at var(--mouse-x) var(--mouse-y), black, transparent); -webkit-mask-image: radial-gradient(350px circle at var(--mouse-x) var(--mouse-y), black, transparent);">
                <div class="absolute inset-0 border border-fuchsia-500/60"></div>
            </div>

            <!-- Horizontal Beam Animations -->
            <div class="absolute top-0 h-[1px] w-64 bg-gradient-to-r from-transparent via-fuchsia-500 to-transparent z-10" id="beam-top" style="left: -20%;"></div>
            <div class="absolute bottom-0 h-[1px] w-64 bg-gradient-to-r from-transparent via-indigo-500 to-transparent z-10" id="beam-bottom" style="left: 120%;"></div>

            <!-- Top Section -->
            <div class="max-w-4xl mt-4 md:mt-8 relative z-20">
                <h1 class="text-3xl md:text-5xl lg:text-5xl leading-tight md:leading-tight lg:leading-tight tracking-tight">
                    <span class="font-extralight text-slate-50 flex items-center gap-3">
                        <iconify-icon icon="solar:earth-linear" class="text-4xl" style="color: #d946ef; stroke-width: 1.5px;"></iconify-icon>
                        <span><span id="typewriter"></span><span class="animate-pulse text-fuchsia-400 font-extralight">|</span></span>
                    </span>
                    <span class="font-extralight text-slate-400 block mt-4 tracking-normal text-xl md:text-2xl">Deploy decentralized applications across a unified global mesh with zero latency and persistent state alignment.</span>
                </h1>
            </div>

            <!-- Bottom Stats Section -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8 mt-32 md:mt-auto pb-4 relative z-20">
                <div class="flex flex-col">
                    <div class="text-5xl md:text-6xl lg:text-7xl font-extralight tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-400 w-fit">
                        850B+
                    </div>
                    <div class="text-sm md:text-base font-extralight text-slate-400 mt-3">
                        Daily data transactions
                    </div>
                </div>

                <div class="flex flex-col">
                    <div class="text-5xl md:text-6xl lg:text-7xl font-extralight tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-400 w-fit">
                        2.4M+
                    </div>
                    <div class="text-sm md:text-base font-extralight text-slate-400 mt-3">
                        Edge compute nodes
                    </div>
                </div>

                <div class="flex flex-col">
                    <div class="text-5xl md:text-6xl lg:text-7xl font-extralight tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-400 w-fit">
                        99.999%
                    </div>
                    <div class="text-sm md:text-base font-extralight text-slate-400 mt-3">
                        System availability
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Container Flashlight Hover
        const borderContainer = document.getElementById('border-container');
        borderContainer.addEventListener('mousemove', (e) => {
            const rect = borderContainer.getBoundingClientRect();
            borderContainer.style.setProperty('--mouse-x', (e.clientX - rect.left) + 'px');
            borderContainer.style.setProperty('--mouse-y', (e.clientY - rect.top) + 'px');
        });
        borderContainer.addEventListener('mouseleave', () => {
            borderContainer.style.setProperty('--mouse-x', '-1000px');
            borderContainer.style.setProperty('--mouse-y', '-1000px');
        });

        // Typewriter Loop
        const textToType = "Worldwide scale, instant execution.";
        const twElement = document.getElementById('typewriter');
        let twIndex = 0;
        let twDeleting = false;
        function typeWriter() {
            twIndex += twDeleting ? -1 : 1;
            twElement.textContent = textToType.substring(0, twIndex);
            let speed = twDeleting ? 30 : 70;
            if (!twDeleting && twIndex === textToType.length) {
                speed = 3000;
                twDeleting = true;
            } else if (twDeleting && twIndex === 0) {
                twDeleting = false;
                speed = 500;
            }
            setTimeout(typeWriter, speed);
        }
        typeWriter();

        // Canvas WebGL-style Particles & Shooting Lines
        const canvas = document.getElementById('globe-canvas');
        const ctx = canvas.getContext('2d');
        let width, height, time = 0;
        let mouseX = window.innerWidth / 2, mouseY = window.innerHeight / 2;
        let targetMouseX = window.innerWidth / 2, targetMouseY = window.innerHeight / 2;

        function resize() {
            const dpr = window.devicePixelRatio || 1;
            width = window.innerWidth;
            height = window.innerHeight;
            canvas.width = width * dpr;
            canvas.height = height * dpr;
            canvas.style.width = width + 'px';
            canvas.style.height = height + 'px';
            ctx.scale(dpr, dpr);
        }
        window.addEventListener('resize', resize);
        window.addEventListener('mousemove', (e) => {
            targetMouseX = e.clientX;
            targetMouseY = e.clientY;
        });
        resize();

        const lats = 36, lons = 72;
        const comets = Array.from({length: 45}, () => ({
            latIdx: Math.floor(Math.random() * lats),
            lonIdx: Math.floor(Math.random() * lons),
            isLat: Math.random() > 0.5,
            progress: Math.random(),
            speed: 0.002 + Math.random() * 0.006
        }));

        // Enhanced Debris particles surrounding the globe
        const debris = Array.from({length: 400}, () => ({
            phi: Math.acos(2 * Math.random() - 1),
            theta: Math.random() * Math.PI * 2,
            dist: 1.02 + Math.random() * 0.8,
            size: Math.random() * 1.5 + 0.2,
            speedTheta: (Math.random() - 0.5) * 0.003,
            speedPhi: (Math.random() - 0.5) * 0.003,
            opacity: Math.random() * 0.7 + 0.3
        }));

        let beamPos1 = -20, beamPos2 = 120;

        function draw() {
            ctx.clearRect(0, 0, width, height);
            time += 0.003;

            mouseX += (targetMouseX - mouseX) * 0.05;
            mouseY += (targetMouseY - mouseY) * 0.05;

            // Animate Horizontal Beams
            beamPos1 += 0.3;
            beamPos2 -= 0.3;
            if (beamPos1 > 120) beamPos1 = -20;
            if (beamPos2 < -20) beamPos2 = 120;
            document.getElementById('beam-top').style.left = beamPos1 + '%';
            document.getElementById('beam-bottom').style.left = beamPos2 + '%';

            const gradient = ctx.createLinearGradient(0, 0, width, height);
            gradient.addColorStop(0, '#fb7185');
            gradient.addColorStop(0.5, '#d946ef');
            gradient.addColorStop(1, '#818cf8');

            ctx.fillStyle = gradient;
            ctx.strokeStyle = gradient;

            const R = Math.min(width, height) * 0.28;
            const cx = width * 0.65;
            const cy = height * 0.55;
            const pitch = (mouseY - cy) * 0.001 + 0.2;
            const yaw = (mouseX - cx) * 0.001 + time * 0.4;

            function project(phi, theta, radius = R) {
                let x = radius * Math.sin(phi) * Math.cos(theta);
                let y = radius * Math.cos(phi);
                let z = radius * Math.sin(phi) * Math.sin(theta);

                let cosP = Math.cos(pitch), sinP = Math.sin(pitch);
                let y1 = y * cosP - z * sinP;
                let z1 = y * sinP + z * cosP;

                let cosY = Math.cos(yaw), sinY = Math.sin(yaw);
                let x2 = x * cosY + z1 * sinY;
                let z2 = -x * sinY + z1 * cosY;

                const scale = 1200 / (1200 + z2);
                return { x: cx + x2 * scale, y: cy + y1 * scale, z: z2 };
            }

            ctx.lineWidth = 0.25;

            // Draw Static Latitude Lines
            for (let i = 1; i < lats; i++) {
                const phi = (i / lats) * Math.PI;
                for (let j = 0; j < lons; j++) {
                    const theta1 = (j / lons) * Math.PI * 2;
                    const theta2 = ((j + 1) / lons) * Math.PI * 2;
                    const pt1 = project(phi, theta1);
                    const pt2 = project(phi, theta2);
                    const z = (pt1.z + pt2.z) / 2;
                    const normalizedZ = (R - z) / (2 * R);
                    
                    ctx.globalAlpha = Math.max(0.01, normalizedZ * 0.2);
                    ctx.beginPath();
                    ctx.moveTo(pt1.x, pt1.y);
                    ctx.lineTo(pt2.x, pt2.y);
                    ctx.stroke();
                }
            }

            // Draw Static Longitude Lines
            for (let j = 0; j < lons; j++) {
                const theta = (j / lons) * Math.PI * 2;
                for (let i = 0; i < lats; i++) {
                    const phi1 = (i / lats) * Math.PI;
                    const phi2 = ((i + 1) / lats) * Math.PI;
                    const pt1 = project(phi1, theta);
                    const pt2 = project(phi2, theta);
                    const z = (pt1.z + pt2.z) / 2;
                    const normalizedZ = (R - z) / (2 * R);
                    
                    ctx.globalAlpha = Math.max(0.01, normalizedZ * 0.2);
                    ctx.beginPath();
                    ctx.moveTo(pt1.x, pt1.y);
                    ctx.lineTo(pt2.x, pt2.y);
                    ctx.stroke();
                }
            }

            // Draw Globe Particles
            for (let i = 1; i < lats; i++) {
                const phi = (i / lats) * Math.PI;
                for (let j = 0; j < lons; j++) {
                    const theta = (j / lons) * Math.PI * 2;
                    const pt = project(phi, theta);
                    const normalizedZ = (R - pt.z) / (2 * R);
                    ctx.globalAlpha = Math.max(0.02, normalizedZ * 0.8);
                    ctx.beginPath();
                    ctx.arc(pt.x, pt.y, 0.6, 0, Math.PI * 2);
                    ctx.fill();
                }
            }

            // Draw Debris Particles
            for (let d of debris) {
                d.theta += d.speedTheta;
                d.phi += d.speedPhi;
                const pt = project(d.phi, d.theta, R * d.dist);
                const normalizedZ = (R * d.dist - pt.z) / (2 * R * d.dist);
                ctx.globalAlpha = Math.max(0.02, normalizedZ * d.opacity);
                ctx.beginPath();
                ctx.arc(pt.x, pt.y, d.size, 0, Math.PI * 2);
                ctx.fill();
            }

            // Draw Shooting Lines / Comets
            ctx.lineWidth = 0.8;
            for (let c of comets) {
                c.progress += c.speed;
                if (c.progress > 1) {
                    c.progress = 0;
                    c.latIdx = Math.floor(Math.random() * lats);
                    c.lonIdx = Math.floor(Math.random() * lons);
                    c.isLat = Math.random() > 0.5;
                }

                ctx.beginPath();
                const trailLength = 0.15;
                let started = false;
                for (let step = 0; step <= 15; step++) {
                    const t = c.progress - (step / 15) * trailLength;
                    if (t < 0 || t > 1) continue;
                    
                    let phi = c.isLat ? (c.latIdx / lats) * Math.PI : t * Math.PI;
                    let theta = c.isLat ? t * Math.PI * 2 : (c.lonIdx / lons) * Math.PI * 2;
                    
                    const pt = project(phi, theta);
                    if (!started) {
                        ctx.moveTo(pt.x, pt.y);
                        started = true;
                    } else {
                        ctx.lineTo(pt.x, pt.y);
                    }
                }
                if (started) {
                    ctx.globalAlpha = 0.9;
                    ctx.stroke();
                }
            }
            requestAnimationFrame(draw);
        }
        draw();
    </script>
</div>