---
import {Image} from 'astro:assets';
import adsTop from '../assets/img/easter-eggs/ads-top.png';
import adsBottom from '../assets/img/easter-eggs/ads-bottom.png';
import shutUpWarren from '../assets/img/easter-eggs/shut-up-warren.png';
import katakana from '../assets/img/easter-eggs/katakana.png';
import horse from '../assets/img/easter-eggs/horse.png';
---

<aside id="easter-eggs" hidden aria-label="Easter egg content">
    <!-- Ads (?ads=true) -->
    <figure class="ads-top" _="init if window.location.search contains '?ads=true' put me before #hero-logo">
        <a href="https://swag.htmx.org">
            <Image src={adsTop}
                   alt="Retro advertisement: MacMall PowerBooks as low as 1999$! Call 888-932-1569. Get your FREE 64MB RAM with your PowerBook!"
                   loading="lazy"/>
        </a>
    </figure>
    <figure class="ads-bottom" _="init if window.location.search contains '?ads=true' put me after #hero-logo">
        <a href="https://swag.htmx.org">
            <Image src={adsBottom}
                   alt="Retro advertisement: Get Flash! FREE Microsoft Internet Explorer! Netscape Now! (3.0) Site created with Microsoft&reg; FrontPage&trade;. Powered by Microsoft BackOffice."
                   loading="lazy"/>
        </a>
    </figure>

    <!-- Shut up warren (?wuw=true) -->
    <figure _="init if window.location.search contains '?wuw=true' put me into #hero-logo">
        <a href="https://swag.htmx.org/products/shut-up-warren-tee">
            <Image src={shutUpWarren} alt="shut up warren ⁺₊✦ uwu" loading="lazy"/>
        </a>
    </figure>

    <!-- katakana (?uwu=true) -->
    <figure _="init if window.location.search contains '?uwu=true' put me into #hero-logo">
        <a href="https://swag.htmx.org/products/htmx-katakana-shirt">
            <Image src={katakana} alt="htmx in katakana: エイチティーエムエックス uwu" loading="lazy"/>
        </a>
    </figure>

    <!-- horse (?horse=true) -->
    <figure _="init if window.location.search contains '?horse=true' put me after #hero-logo">
        <a href="https://swag.htmx.org">
            <Image src={horse} alt="Retro computer horse graphic"
                   class="horse-img"
                   loading="lazy"/>
        </a>
    </figure>
</aside>

<style>
    figure :global(img) { margin-inline: auto; }
    .ads-top { margin-bottom: 3rem; }
    .ads-bottom { margin-top: 4rem; }

    .horse-img {
        position: absolute;
        right: 50%;
        top: 100%;
        transform: translateX(60%) translateY(-75%);
        opacity: 0.5;
        mask-size: 100% max(1.5px, 0.02em);
        mask-image: linear-gradient(to bottom, transparent 0%, black 12.5%);

        @media (min-width: 640px) { transform: translateX(75%) translateY(-75%); }
        @media (min-width: 768px) { transform: translateX(85%) translateY(-75%); }
        @media (min-width: 1024px) { transform: translateX(100%) translateY(-75%); }
        @media (prefers-color-scheme: dark) {
            mask-image: linear-gradient(to bottom, transparent 0%, black 17.5%);
        }
    }
</style>
