<template>

    <!-- Header Section -->

    <header class="site-header">

        <div class="container">

            <div class="header-content">

                <div class="logo-section">

                    <img src={logoUrl} alt="ROP Logo" class="logo" />

                </div>

                <nav class="main-navigation">

                    <div class="nav-items">

                        <a href="#services" class="services-link">Services</a>

                        <button class="menu-toggle">

                            <div class="hamburger-icon">

                                <span class="hamburger-line"></span>

                                <span class="hamburger-line"></span>

                                <span class="hamburger-line"></span>

                            </div>

                            <span class="menu-text">Menu</span>

                        </button>

                    </div>

                </nav>

            </div>

        </div>

    </header>

    <!-- Hero Section -->

    <section class="hero-section">

        <div class="hero-background" style={heroBackgroundStyle}>

            <div class="hero-overlay">

                <div class="container">

                    <div class="hero-content">

                        <div class="hero-search">

                            <div class="search-container">

                                <input type="text" placeholder="Search..." class="search-input" />

                                <button class="search-button">

                                    <lightning-icon icon-name="utility:search" size="medium"></lightning-icon>

                                </button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <!-- Top Services Section -->

    <section class="top-services">

        <div class="container">

            <h2 class="section-title">Top Services</h2>

            <div class="services-container">

                <div class="services-grid">

                    <div class="service-card" data-service="waste" onclick={handleServiceClick}>

                        <div class="service-icon">

                            <lightning-icon icon-name="utility:recycle_bin_full" size="medium"></lightning-icon>

                        </div>

                        <h3>Waste Collection</h3>

                        <p>Collection schedules and recycling information</p>

                    </div>

                    <div class="service-card" data-service="careers">

                        <div class="service-icon">

                            <lightning-icon icon-name="utility:people" size="medium"></lightning-icon>

                        </div>

                        <h3>Careers</h3>

                        <p>Join our team and make a difference</p>

                    </div>

                    <div class="service-card" data-service="water">

                        <div class="service-icon">

                            <lightning-icon icon-name="utility:water" size="medium"></lightning-icon>

                        </div>

                        <h3>Water Services</h3>

                        <p>Billing, quality, and conservation</p>

                    </div>

                    <div class="service-card" data-service="housing">

                        <div class="service-icon">

                            <lightning-icon icon-name="utility:home" size="medium"></lightning-icon>

                        </div>

                        <h3>Housing Support</h3>

                        <p>Find housing assistance and resources</p>

                    </div>

                    <div class="service-card" data-service="health">

                        <div class="service-icon">

                            <lightning-icon icon-name="utility:heart" size="medium"></lightning-icon>

                        </div>

                        <h3>Health & Family</h3>

                        <p>Health services and family support</p>

                    </div>

                    <div class="service-card" data-service="transport">

                        <div class="service-icon">

                            <lightning-icon icon-name="utility:location" size="medium"></lightning-icon>

                        </div>

                        <h3>Transportation</h3>

                        <p>Transit services and road information</p>

                    </div>

                    <div class="service-card" data-service="business">

                        <div class="service-icon">

                            <lightning-icon icon-name="utility:company" size="medium"></lightning-icon>

                        </div>

                        <h3>Business Services</h3>

                        <p>Support for local businesses and entrepreneurs</p>

                    </div>

                    <div class="service-card" data-service="permits">

                        <div class="service-icon">

                            <lightning-icon icon-name="utility:approval" size="medium"></lightning-icon>

                        </div>

                        <h3>Permits & Licenses</h3>

                        <p>Apply for permits and licenses online</p>

                    </div>

                </div>

                <div class="all-services-link">

                    <a href="#all-services" class="link-primary">All services <span class="arrow">&gt;</span></a>

                </div>

            </div>

        </div>

    </section>

    <!-- Budget CTA Section -->

    <section class="budget-cta">

        <div class="container">

            <div class="cta-card">

                <div class="cta-content">

                    <h2>2025 Peel Region Budget</h2>

                    <p>The annual budget outlines how your tax dollars and utility fees will be invested to help provide essential services across Peel.</p>

                    <a href="#budget" class="btn btn-primary">Learn more</a>

                </div>

                <div class="cta-image">

                    <img src={newsImageUrl} alt="Budget 2025" />

                </div>

            </div>

        </div>

    </section>

    <!-- What's Happening Section -->

    <section class="whats-happening">

        <div class="container">

            <h2 class="section-title">What's happening</h2>

            <div class="news-grid">

                <div class="news-card">

                    <div class="news-content">

                        <span class="news-tag">Services</span>

                        <h4>Supporting children in child care</h4>

                        <p>If your child needs extra support in licensed child care, Peel Inclusion Resource Services (PIRS) can help.</p>

                    </div>

                </div>

                <div class="news-card">

                    <div class="news-content">

                        <span class="news-tag">Recognition</span>

                        <h4>Employee Awards Program</h4>

                        <p>Meet the employees and teams whose passion and dedication are helping us build a better future in Peel.</p>

                    </div>

                </div>

                <div class="news-card">

                    <div class="news-content">

                        <span class="news-tag">Transportation</span>

                        <h4>Explore Peel on wheels</h4>

                        <p>Discover the many benefits of biking and explore the growing network of bike routes throughout Peel.</p>

                    </div>

                </div>

                <div class="news-card">

                    <div class="news-content">

                        <span class="news-tag">Construction</span>

                        <h4>Travel safely through work zones</h4>

                        <p>It's roadway maintenance and construction season in Peel. Follow our tips to keep everyone safe.</p>

                    </div>

                </div>

            </div>

            <div class="more-news-link">

                <a href="#news" class="link-primary">More news</a>

            </div>

        </div>

    </section>

    <!-- People of Peel CTA Section -->

    <section class="people-cta">

        <div class="container">

            <div class="cta-card">

                <div class="cta-content">

                    <h2>Championing women in non-traditional roles</h2>

                    <p>Daniella's story is an inspiration to women and young girls who want to pursue out-of-the-ordinary careers.</p>

                    <a href="#story" class="btn btn-primary">Watch her story</a>

                </div>

                <div class="cta-image">

                    <img src={featuredImageUrl} alt="People of Peel" />

                </div>

            </div>

        </div>

    </section>

    <!-- Footer -->

    <footer class="site-footer">

        <div class="container">

            <div class="footer-content">

                <div class="footer-links">

                    <div class="footer-column">

                        <h4>Quick Links</h4>

                        <ul>

                            <li><a href="#accessibility">Accessibility</a></li>

                            <li><a href="#transparency">Accountability and transparency</a></li>

                            <li><a href="#contact">Contact us</a></li>

                            <li><a href="#privacy">Privacy</a></li>

                        </ul>

                    </div>

                    <div class="footer-column">

                        <h4>Services</h4>

                        <ul>

                            <li><a href="#programs">Programs and services</a></li>

                            <li><a href="#info">Municipal information (311)</a></li>

                            <li><a href="#local">Local information (211)</a></li>

                            <li><a href="#terms">Terms of use</a></li>

                        </ul>

                    </div>

                </div>

                <div class="social-media">

                    <h4>Follow us</h4>

                    <div class="social-icons">

                        <lightning-icon icon-name="utility:facebook" size="medium"></lightning-icon>

                        <lightning-icon icon-name="utility:twitter" size="medium"></lightning-icon>

                        <lightning-icon icon-name="utility:instagram" size="medium"></lightning-icon>

                        <lightning-icon icon-name="utility:youtube" size="medium"></lightning-icon>

                    </div>

                </div>

            </div>

            <div class="footer-bottom">

                <p>&copy; Copyright Region of Peel</p>

            </div>

        </div>

    </footer>

</template>