---
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
export const prerender = false;
import pokedexList from '../data/pokedex.json';
import Footer from '../components/Footer.astro';

const searchParams = Astro.url.searchParams;
const query = searchParams.get('q') || '*';

// Get random # (0001–1025)
const randomNumber = String(Math.floor(Math.random() * 1025) + 1).padStart(4, "0");

// Image path
const pokedexImage = `/404/pokedex/${randomNumber}.png`;

// Find Pokémon from JSON
const pokemon = pokedexList.find(p => p["#"] === randomNumber);

// If not found (rare), fallback
const pokemonName = pokemon?.Name || "Unknown Pokémon";
---
<Layout>
    <NavBar slot="navbar">
        <NavItems slot="navItems" />
    </NavBar>
    <div class="row mb-4" slot="page">
        <div class="col-12 col-md-6">
            <h1 class="mb-4">404 - Page Not Found</h1>
            <h4>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 <a href="/pokemon">Pokémon</a>.
            </p>
        </div>
        <div class="col-12 col-md-4 offset-md-2">
            <div class="alert alert-warning border p-2" role="alert">
                <h4 class="alert-heading">Who's that Pokémon?</h4>
                <p class="mb-0">Click the image to reveal.</p>
            </div>

            <div class="p-0 ratio ratio-1x1 position-relative overflow-hidden d-flex justify-items-center">
                <img class="whos-that-pokemon position-absolute h-100" src="/404/lines.gif">

                <div class="d-flex flex-col-reverse flex-lg-row">
                    <div class="">
                        <img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">

                        <!-- ✨ Name is placed in a data attribute for later use -->
                        <img class="m-auto position-absolute w-50 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle" src={pokedexImage} alt={pokemonName} data-name={pokemonName} onclick="dataLayer.push({'event': '404reveal','pokemonName': this.getAttribute('data-name')});"/>
                    </div>
                </div>
            </div>

            <!-- Pokémon name reveal -->
            <div class="col-12 text-center mt-3">
                <h3 id="pokemon-name" class="opacity-0 transition-opacity">???</h3>
            </div>
        </div>
    <script>
    const img = document.querySelector('.masked-image');
    const nameEl = document.querySelector('#pokemon-name');

    img?.addEventListener('click', () => {
        img.classList.remove('masked-image');
        nameEl.textContent = img.dataset.name || "Unknown Pokémon";
        nameEl.classList.remove('opacity-0');
    });
    </script>
    </div>
    <Footer slot="footer" />
</Layout>