let currentIndex = 0;
	let images = ['/favicon.png', 'github.png', 'MetaMask_Fox.svg.png'];

    function changeSlide(direction: string) {
		if (direction === 'prev') {
			currentIndex = (currentIndex - 1 + images.length) % images.length;
		} else {
			currentIndex = (currentIndex + 1) % images.length;
		}
	}

	onMount(() => {
		const interval = setInterval(() => changeSlide('next'), 3000);
		return () => clearInterval(interval);
	})
    
    //HTML MARKUP
<div class="relative h-64 w-full">
    {#each images as image, index}
		<div
			class="absolute inset-0 flex items-center justify-center transition-opacity duration-300"
			style={`opacity: ${currentIndex === index ? 1 : 0};`}
			>
			<img src={image} alt={`Carousel Image ${index + 1}`} class="h-full object-contain" />
		</div>
	{/each}

	<div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
		<button
			on:click={() => changeSlide('prev')}
			class="animate-pulse border border-white/50 bg-black/70 text-xl text-green-600/80"
			>❮</button>
			<button
			on:click={() => changeSlide('next')}
			class="animate-pulse border border-white/50 bg-black/70 text-xl text-green-600/80"
			>❯</button>
	</div>
</div>

// im slow lrner plez wait ,O_O,

const imgUrls = ['/favicon.png', '/github.png'];

let currentImgUrlIndex = 0;
let img = updateImg();
let imgChangeInterval;

function updateImg() {
    return `background-image: url(${imgUrls[currentImgUrlIndex]});`;
}

function changeImg() {
    currentImgUrlIndex = (currentImgUrlIndex + 1) % imgUrls.length;
    img = updateImg();
}

onMount(() => {
    imgChangeInterval = setInterval(changeImg, 2700);
})

onDestroy(() => {
    clearInterval(imgChangeInterval);
})

// HTML Markup
<div class="transition-all duration-500 ease-in-out" style={img} />

// im slow lrner plez wait ,O_O,

const scrollTop = writable(0);

function scrollToTop() {
	if (typeof window !== 'undefined') {
		window.scrollTo({
			top: 0,
			behavior: 'smooth'
		});
	}
}

function updateScroll() {
	if (typeof window !== 'undefined') {
		scrollTop.set(window.scrollY);
	}
}

onMount(() => {
	if (typeof window !== 'undefined') {
		updateScroll();
		window.addEventListener('scroll', updateScroll);
	}
})

onDestroy(() => {
	if (typeof window !== 'undefined') {
		window.removeEventListener('scroll', updateScroll);
	}
})

// HTML Markup
{#if $scrollTop > 100}
	<button
		transition:scale
		class="fixed bottom-5 right-1/2 translate-x-1/2"
		on:click={scrollToTop}
	>
		↑ Top
	</button>
{/if}

// im slow lrner plez wait ,O_O,

let heroSection: HTMLElement;
let videoSection: HTMLElement;

onMount(() => {
		const observer = new IntersectionObserver(
			(entries: IntersectionObserverEntry[]) => {
				entries.forEach((entry) => {
					const target = entry.target as HTMLElement;
					target.style.opacity = entry.isIntersecting ? "1" : "0";
				});
			},
		);

		observer.observe(heroSection);
		observer.observe(videoSection);
	});
    
// HTML Markup
<section bind:this={heroSection} class="effex">
	<Hero />
</section>

<section bind:this={videoSection} class="effex">
	<Video />
</section>

// CSS
.effex {
    opacity: 0;
	transition: opacity 2s ease-in-out;
}

// im slow lrner plez wait ,O_O,

export interface EthereumAccount {
    provider: ethers.providers.Web3Provider | null;
    signer: ethers.Signer | null;
    address: string | null;
    accounts: string[] | null;
    balance: string;
    network: string | null;
    isConnected: boolean;
}

const initialState: EthereumAccount = {
    provider: null,
    signer: null,
    address: null,
    accounts: null,
    balance: '0',
    network: null,
    isConnected: false,
};

const createEthereumStore = () => {
    const { subscribe, set, update } = writable<EthereumAccount>(initialState);

    const connect = async () => {
        try {
            const { ethereum } = window as any;

            if (!ethereum || !ethereum.isMetaMask) {
                alert('Please install MetaMask.');
                return;
            }

            const accounts: string[] = await ethereum.request({ method: 'eth_requestAccounts' });
            const provider = new ethers.providers.Web3Provider(ethereum);
            const signer = provider.getSigner();
            const network = await provider.getNetwork();

            if (network.chainId !== 8453) { // Mumbai testnet check
                alert('Please switch to the Base Mainnet.');
                return;
            }

            const address = await signer.getAddress();
            const balance = ethers.utils.formatEther(await signer.getBalance());

            set({
                provider,
                signer,
                address,
                accounts,
                balance,
                network: network.name,
                isConnected: true,
            });

            // Listen for account changes
            ethereum.on('accountsChanged', async (accounts: string[]) => {
                if (accounts.length === 0) {
                    // MetaMask is locked or the user has disconnected their account
                    set({ ...initialState });
                } else {
                    // When accounts change, reconnect with the new account
                    connect(); // This will refresh the connection with the new account
                }
            });

            // Listen for chain (network) changes
            ethereum.on('chainChanged', (chainId: string) => {
                // Reload the page (or reconnect) to ensure changes take effect
                // Optionally, you could just call `connect()` again to refresh without reloading
                window.location.reload();
            });

        } catch (error) {
            console.error('An error occurred during connection:', error);
            set({ ...initialState });
        }
    };

    return {
        subscribe,
        connect,
        disconnect: () => {
            const { ethereum } = window as any;
            if (ethereum && ethereum.removeListener) {
                ethereum.removeListener('accountsChanged', connect);
                ethereum.removeListener('chainChanged', () => window.location.reload());
            }
            set({ ...initialState });
        },
    };
};

export const ethereumStore = createEthereumStore();

// im slow lrner plez wait ,O_O,

import { dev } from '$app/environment';
	import { inject } from '@vercel/analytics';
	import { track } from '@vercel/analytics';
    
    inject({ mode: dev ? 'development' : 'production' });
    
    let hasSentOneHourTrack = false;
	let hasSentFiveHoursTrack = false;

	function startTracking() {
		// Track after 1 hour
		setTimeout(() => {
			if (!hasSentOneHourTrack) {
				track('User Active for 1 Hour');
				hasSentOneHourTrack = true;
			}
		}, 3600000); // 1 hour in milliseconds

		// Track after 5 hours
		setTimeout(() => {
			if (!hasSentFiveHoursTrack) {
				track('User Active for 5 Hours');
				hasSentFiveHoursTrack = true;
			}
		}, 18000000); // 5 hours in milliseconds
	}

	function setupBeforeUnloadListener() {
		window.addEventListener('beforeunload', (event) => {
			// Perform any necessary checks or logging here
			// Note: Custom messages are mostly ignored by modern browsers,
			// but you can still perform synchronous operations like logging to the console.
			console.log('User is leaving the webpage.');

			// Uncomment below if you have a quick, synchronous action to perform:
			// if (!hasSentOneHourTrack) {
			//     // Attempt to log or perform a quick action
			//     // Direct tracking calls here are unreliable and likely won't work as intended
			// }
		});
	}

	onMount(() => {
		startTracking();
		setupBeforeUnloadListener();
	});
    

// im slow lrner plez wait ,O_O,

<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
// CSS
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
}
.lds-ellipsis div {
  position: absolute;
  
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

// im slow lrner plez wait ,O_O,