/* HTML Structure Example for Observation */
<div id="scrollContainer" style="height: 300px; overflow-y: scroll;">
    <div style="height: 500px; background-color: lightblue;">Scroll down!</div>
    <div id="targetElement" style="height: 150px; background-color: coral; margin-top: 200px;">Observe Me!</div>
    <div style="height: 500px; background-color: lightgreen;">More content below.</div>
</div>

/* JavaScript: Basic Intersection Observer Setup */
// 1. Select the target element to observe.
const targetElement = document.getElementById('targetElement');

// 2. Define the callback function. This runs when intersection changes.
const observerCallback = (entries, observer) => {
    entries.forEach(entry => {
        // entry.isIntersecting is true when the target element intersects with the root.
        if (entry.isIntersecting) {
            console.log('Target element is now visible in the viewport!');
            // Perform actions, e.g., load content, start animation.
            // Optionally, stop observing once action is taken (for single-shot observations).
            // observer.unobserve(entry.target);
        } else {
            console.log('Target element is no longer visible.');
            // Perform actions when it leaves the viewport.
        }
        console.log('Intersection Ratio:', entry.intersectionRatio); // How much of the target is visible (0 to 1).
    });
};

// 3. Define observer options (optional but recommended).
const observerOptions = {
    root: document.getElementById('scrollContainer'), // The element that is used as the viewport for checking visibility.
                                                    // Defaults to the browser viewport if null.
    rootMargin: '0px', // Margin around the root. Can be used to expand or shrink the area.
                       // e.g., '10px 20px 30px 40px' (top, right, bottom, left) or '10%' (all sides).
    threshold: 0.5   // A single number or an array of numbers between 0 and 1.
                     // Indicates at what percentage of the target's visibility the observerCallback should be executed.
                     // 0.5 means when 50% of the target is visible.
};

// 4. Create an instance of IntersectionObserver.
const observer = new IntersectionObserver(observerCallback, observerOptions);

// 5. Start observing the target element.
if (targetElement) {
    observer.observe(targetElement);
    console.log('Observing targetElement...');
} else {
    console.error('Target element not found!');
}

/* HTML Structure Example for Lazy Loading Images */
<div id="lazyLoadContainer">
    <img data-src="https://via.placeholder.com/600x400/FF5733/FFFFFF?text=Image+1" alt="Placeholder Image 1" class="lazy-image" style="min-height: 400px; display: block; margin-bottom: 20px;">
    <img data-src="https://via.placeholder.com/600x400/33FF57/FFFFFF?text=Image+2" alt="Placeholder Image 2" class="lazy-image" style="min-height: 400px; display: block; margin-bottom: 20px;">
    <img data-src="https://via.placeholder.com/600x400/3357FF/FFFFFF?text=Image+3" alt="Placeholder Image 3" class="lazy-image" style="min-height: 400px; display: block; margin-bottom: 20px;">
    <img data-src="https://via.placeholder.com/600x400/FF33A1/FFFFFF?text=Image+4" alt="Placeholder Image 4" class="lazy-image" style="min-height: 400px; display: block; margin-bottom: 20px;">
</div>

/* CSS (Optional) for visual indication or placeholder */
.lazy-image {
    background-color: #eee;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}
.lazy-image.loaded {
    opacity: 1;
}

/* JavaScript: Lazy Loading Implementation */
// 1. Select all elements targeted for lazy loading.
const lazyImages = document.querySelectorAll('.lazy-image');

// 2. Define the callback function for the observer.
const lazyLoadCallback = (entries, observer) => {
    entries.forEach(entry => {
        // If the image is intersecting and hasn't been loaded yet.
        if (entry.isIntersecting && !entry.target.classList.contains('loaded')) {
            const img = entry.target;
            const src = img.getAttribute('data-src');

            if (src) {
                img.src = src; // Assign the actual image source.
                img.onload = () => {
                    img.classList.add('loaded'); // Add 'loaded' class for styling.
                    // Once loaded, we no longer need to observe this image.
                    observer.unobserve(img);
                    console.log(`Image loaded: ${src}`);
                };
                img.onerror = () => {
                    console.error(`Failed to load image: ${src}`);
                    // Optionally set a fallback image or display an error message.
                };
            } else {
                console.warn('data-src attribute missing for image:', img);
            }
        }
    });
};

// 3. Define observer options for lazy loading.
// rootMargin: '200px' ensures images start loading when they are 200px from entering the viewport.
// threshold: 0 means trigger as soon as any part of the target enters.
const lazyLoadOptions = {
    root: null, // Default to browser viewport
    rootMargin: '200px 0px', // Load 200px before entering viewport (top/bottom),
                            // 0px left/right (can be adjusted).
    threshold: 0
};

// 4. Create the Intersection Observer instance.
const lazyLoadObserver = new IntersectionObserver(lazyLoadCallback, lazyLoadOptions);

// 5. Observe each lazy-loadable image.
lazyImages.forEach(image => {
    lazyLoadObserver.observe(image);
});

console.log(`Observing ${lazyImages.length} images for lazy loading.`);

/* HTML Structure for Scroll-Triggered Effects */
<style>
    .section {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3em;
        color: white;
        text-align: center;
        margin-bottom: 50px;
        background-color: #3498db;
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .section.fade-in {
        opacity: 1;
        transform: translateY(0);
    }
    .section:nth-child(even) {
        background-color: #e74c3c;
    }
</style>

<div class="section" id="section1"><h1>Welcome!</h1></div>
<div class="section" id="section2"><h1>Discover More</h1></div>
<div class="section" id="section3"><h1>Engage Further</h1></div>
<div class="section" id="section4"><h1>Explore Depth</h1></div>

/* JavaScript: Scroll-Triggered Fade-In Effect */
// 1. Select all elements that should have a scroll-triggered effect.
const animatedSections = document.querySelectorAll('.section');

// 2. Define the callback function.
const scrollEffectCallback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Add a class to trigger CSS animation when element enters viewport.
            entry.target.classList.add('fade-in');
            // Optionally, stop observing after the effect is triggered once.
            observer.unobserve(entry.target);
            console.log(`Section '${entry.target.id}' is now animating.`);
        } else {
            // Optional: remove class if element leaves viewport and you want to re-trigger.
            // entry.target.classList.remove('fade-in');
        }
    });
};

// 3. Define observer options for scroll effects.
// threshold: 0.2 means trigger when 20% of the element is visible.
const scrollEffectOptions = {
    root: null, // Default to browser viewport
    rootMargin: '0px',
    threshold: 0.2 // Trigger when 20% of the element is visible
};

// 4. Create the Intersection Observer instance.
const scrollEffectObserver = new IntersectionObserver(scrollEffectCallback, scrollEffectOptions);

// 5. Observe each section.
animatedSections.forEach(section => {
    scrollEffectObserver.observe(section);
});

console.log(`Observing ${animatedSections.length} sections for scroll effects.`);

/* HTML Structure for Advanced Observation */
<div id="rootContainer" style="height: 400px; overflow-y: scroll; border: 2px solid green; padding: 20px;">
    <p style="height: 300px;">Scroll within this green container.</p>
    <div id="advancedTarget" style="height: 100px; background-color: purple; margin: 100px auto;">Advanced Target</div>
    <p style="height: 300px;">More content.</p>
</div>

/* JavaScript: Advanced Intersection Observer Configuration */
const advancedTarget = document.getElementById('advancedTarget');
const rootContainer = document.getElementById('rootContainer');

const advancedCallback = (entries, observer) => {
    entries.forEach(entry => {
        console.log(`Target: ${entry.target.id}, isIntersecting: ${entry.isIntersecting}, Ratio: ${entry.intersectionRatio.toFixed(2)}`);

        // Example: Only trigger an action if the element is fully visible (ratio 1.0)
        if (entry.isIntersecting && entry.intersectionRatio === 1.0) {
            console.log('Advanced Target is fully visible!');
            // Execute full visibility actions.
        }
    });
};

const advancedOptions = {
    root: rootContainer, // Observe intersection with a specific scrollable parent.
    rootMargin: '-50px 0px', // Shrink the root's bounding box by 50px top/bottom.
                             // This means target must be 50px inside the root to intersect.
    threshold: [0, 0.25, 0.5, 0.75, 1.0] // Trigger callback at multiple visibility percentages.
                                       // This allows granular control over effects.
};

const advancedObserver = new IntersectionObserver(advancedCallback, advancedOptions);

if (advancedTarget) {
    advancedObserver.observe(advancedTarget);
    console.log('Observing advancedTarget within rootContainer...');
} else {
    console.error('Advanced target element not found!');
}

// Important: Clean up observers when they are no longer needed.
// For single-use cases, unobserve after the first trigger.
// For persistent observations (like analytics), ensure unobserve is called on component unmount
// or page unload to prevent memory leaks.
// E.g., advancedObserver.unobserve(advancedTarget);