@extends('layouts.app')

@section('content')
    <!--
        Main Content Area for the Landing Page.
        This section uses semantic HTML (<main>) for better accessibility and SEO.
        Each section is conditionally rendered based on its 'is_active' status,
        allowing for flexible content management from the backend.
    -->
    <main>
        {{-- Hero Section: Typically the first section, drawing immediate attention.
             This section usually doesn't need a scroll-in animation as it's visible on load. --}}
        @if ($heroSectionActive?->is_active)
            <section id="hero" class="py-8 md:py-12 lg:py-16 bg-white dark:bg-gray-900">
                @livewire('layout.hero-section')
            </section>
        @endif

        {{-- Personel List Section: Showcases team members or key individuals. --}}
        @if ($personelListActive?->is_active)
            <section id="team" class="py-8 md:py-12 lg:py-16 bg-gray-50 dark:bg-gray-800 animate-fade-in-section">
                <div class="container mx-auto px-4">
                    @livewire('layout.personel-list')
                </div>
            </section>
        @endif

        {{-- Highlight Slider Section: Displays featured content or key highlights in a carousel. --}}
        @if ($highlightSliderActive?->is_active)
            <section id="highlights" class="py-8 md:py-12 lg:py-16 bg-white dark:bg-gray-900 animate-fade-in-section">
                <div class="container mx-auto px-4">
                    @include('frontend.partials.highlight-slider', ['highlights' => $highlights])
                </div>
            </section>
        @endif

        {{-- Catalog Section: Presents products, services, or categories. --}}
        @if ($catalogSectionActive?->is_active)
            <section id="catalog" class="py-8 md:py-12 lg:py-16 bg-gray-50 dark:bg-gray-800 animate-fade-in-section">
                <div class="container mx-auto px-4">
                    @include('frontend.partials.catalog-slider', ['categories' => $categories])
                </div>
            </section>
        @endif

        {{-- About Us Section: Provides information about your organization. --}}
        @if ($aboutSectionActive?->is_active)
            <section id="about-us" class="py-8 md:py-12 lg:py-16 bg-white dark:bg-gray-900 animate-fade-in-section">
                <div class="container mx-auto px-4">
                    @livewire('tentang-kami')
                </div>
            </section>
        @endif
    </main>

    {{-- CSS for section animations.
         'animate-fade-in-section' sets initial state (hidden and slightly offset).
         'is-visible' state applies when section enters viewport, transitioning it into view. --}}
    <style>
        .animate-fade-in-section {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            will-change: opacity, transform; /* Optimize performance for these properties */
        }

        .animate-fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>

    {{-- JavaScript to trigger animations on scroll using Intersection Observer.
         This script detects when a section enters the viewport and adds 'is-visible' class,
         which then triggers the CSS transition. --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sections = document.querySelectorAll('.animate-fade-in-section');

            const observerOptions = {
                root: null, // Use the viewport as the container
                rootMargin: '0px', // No extra margin
                threshold: 0.2 // Trigger when 20% of the section is visible
            };

            const sectionObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                        observer.unobserve(entry.target); // Stop observing once animated
                    }
                });
            }, observerOptions);

            sections.forEach(section => {
                sectionObserver.observe(section);
            });
        });
    </script>
@endsection