---
import Layout from '../layouts/Main.astro';
import StickyFilter from '../components/StickyFilter.astro';

const randomNumber = Math.floor(Math.random() * 1000) + 1;
---

<Layout>
<StickyFilter />
<style>
    .masked-image {
        filter: brightness(0);
    }
</style>
<div class="container">
    <div class="row col-10 mx-auto mt-5">
        <div class="col-12 col-md-6">
            <h1 class="mb-4 mt-0">404 - Page Not Found</h1>
            <h4 class="my-4">Sorry, the page you are looking for does not exist.</h4>
            <p class="copy-big my-4">Return to the <a href="/">home page</a> or search for another Pokémon.</p>
        </div>
        <div class="col-12 col-md-5 offset-md-1">
            <div class="alert alert-warning border" role="alert">
                <h4 class="alert-heading">A wild Pokémon appeared!</h4>
            </div>
            <img src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} class="img-fluid" alt="">

            <div class="alert alert-warning border" role="alert">
                <h4 class="alert-heading">Who's that Pokémon?</h4>
            </div>
            <img src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} class="img-fluid masked-image" alt="">

            <div>Click to reveal Pokémon!</div>
        </div>
    </div>
</div>
<script>
    const maskedImage = document.querySelector('.masked-image');
    maskedImage?.addEventListener('click', () => {
        maskedImage.classList.remove('masked-image');
    });
</script>
</Layout>