<script>
    import Peelable from "$lib/components/Peelable.svelte";
    import Background from "$lib/components/Background.svelte";
    import Logo from "$lib/assets/images/hackClubLogo.png";

    function handleLogin() {
        window.location.href = "/auth/login";
    }
</script>

<Background />

<div class="page-wrapper">
    <img
        src={Logo}
        alt="Hack Club Stickers"
        class="hero-logo"
        title="Logo by Charlie @Dumbhog"
        draggable="false"
        on:dragstart|preventDefault
    />
    <div class="content-container">
        <h1><u>Hack Club Stickers</u></h1>
        <p>
            Every Hack Clubber gets free high quality stickers, and can code or
            trade to earn a collection.
        </p>

        <Peelable
            class="login-sticker"
            corner="bottom-right"
            peelOnHover={true}
            hoverPeelAmount={0.4}
            peelOnClick={true}
            peelAwayDuration={1000}
            onPeelComplete={handleLogin}
            borderRadius="0.5rem"
        >
            {#snippet topContent()}
                <div class="sticker-face">Sign in!</div>
            {/snippet}
            {#snippet backContent()}
                <div class="sticker-back"></div>
            {/snippet}
            {#snippet bottomContent()}
                <div class="sticker-surface">
                    <span>Loading...</span>
                </div>
            {/snippet}
        </Peelable>

        <Peelable
            class="see-stickers-sticker"
            corner="bottom-right"
            peelOnHover={true}
            hoverPeelAmount={0.4}
            peelOnClick={true}
            peelAwayDuration={1000}
            onPeelComplete={() => (window.location.href = "/archive")}
            borderRadius="0.5rem"
        >
            {#snippet topContent()}
                <div class="see-stickers-face">
                    View Stickers
                    <span class="subtext">no sign in needed</span>
                </div>
            {/snippet}
            {#snippet backContent()}
                <div class="sticker-back"></div>
            {/snippet}
            {#snippet bottomContent()}
                <div class="sticker-surface">
                    <span>Loading...</span>
                </div>
            {/snippet}
        </Peelable>

        <footer>
            <a
                href="https://hackclub.com/privacy-and-terms/"
                target="_blank"
                rel="noopener noreferrer">Privacy and Terms</a
            >
        </footer>
    </div>
    <div class="construction-notice">🚧 Site still Under Construction!</div>
    <div class="bottom-footers">
        <footer class="open-source-footer">
            <a
                href="https://github.com/hackclub/stickers?tab=readme-ov-file"
                target="_blank"
                rel="noopener noreferrer"
                >open source, drop us a <h3 style="display:inline">★</h3></a
            >
        </footer>
    </div>
</div>

<style>
    @font-face {
        font-family: "Departure Mono";
        src: url("$lib/assets/fonts/DepartureMono-Regular.woff") format("woff");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    :global(html, body) {
        overflow: hidden;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .page-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        font-family: "Departure Mono", monospace;
        padding: 2rem;
        box-sizing: border-box;
        position: relative;
    }

    .bottom-footers {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .hero-logo {
        width: clamp(180px, 20vw, 300px);
        height: auto;
        margin-bottom: 2rem;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-drag: none;
        pointer-events: none;
    }

    .content-container {
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid #333;
        border-radius: 0.5rem;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 440px;
    }

    p {
        font-size: clamp(1rem, 3.5vw, 1.5rem);
        margin: 0 0 1rem 0;
    }

    .content-container h1 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        margin: 0 0 1rem 0;
    }

    a {
        color: #333;
        text-decoration: underline;
    }
    :global(.login-sticker) {
        width: clamp(150px, 20vw, 300px);
        min-height: clamp(45px, 6vw, 80px);
        margin: 1rem 0;
        cursor: pointer;
    }

    .sticker-face {
        width: 100%;
        height: 100%;
        background: #9cada6;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-family: "Departure Mono", monospace;
        font-weight: 400;
        font-size: clamp(1.2rem, 4vw, 2rem);
        padding: 0.5rem;
        box-sizing: border-box;
        word-break: break-word;
        text-align: center;
    }

    .sticker-back {
        width: 100%;
        height: 100%;
        background: #d9c9b6;
        border-radius: 0.5rem;
    }

    .sticker-surface {
        width: 100%;
        height: 100%;
        background: #ffffff;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        font-family: "Departure Mono", monospace;
        font-size: 0.9rem;
    }

    footer {
        font-size: 1rem;
        color: #666;
        margin-top: 1rem;
    }
    .construction-notice {
        position: absolute;
        top: 1rem;
        left: 1rem;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        font-family: "Departure Mono", monospace;
        color: #666;
    }
    .open-source-footer {
        font-weight: bold;
        color: rgba(0, 0, 0);
        text-align: center;
        padding: 0.5rem;
        font-size: 0.9rem;
        font-family: sans-serif;
        text-decoration: none;
    }

    :global(.see-stickers-sticker) {
        width: clamp(150px, 20vw, 300px);
        min-height: clamp(45px, 6vw, 80px);
        cursor: pointer;
    }

    .see-stickers-face {
        width: 100%;
        height: 100%;
        background: #8a9bb0;
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        font-family: "Departure Mono", monospace;
        font-size: clamp(1rem, 3vw, 1.5rem);
        padding: 0.5rem;
        box-sizing: border-box;
    }

    .see-stickers-face .subtext {
        font-size: clamp(0.5rem, 1.5vw, 0.7rem);
        color: rgba(255, 255, 255, 0.85);
        margin-top: 0.2rem;
    }

    @media (max-height: 700px) {
        .hero-logo {
            width: clamp(80px, 12vw, 150px);
            margin-bottom: 0.75rem;
        }

        .content-container {
            padding: 1rem;
        }

        .content-container h1 {
            font-size: clamp(1.2rem, 4vw, 1.8rem);
            margin: 0 0 0.5rem 0;
        }

        p {
            font-size: clamp(0.8rem, 2.5vw, 1.1rem);
            margin: 0.4rem 0;
        }

        .sticker-face {
            font-size: clamp(0.9rem, 3vw, 1.3rem);
        }

        .see-stickers-face {
            font-size: clamp(0.8rem, 2.5vw, 1.1rem);
        }

        .page-wrapper {
            padding: 1rem;
        }

        .bottom-footers {
            position: static;
            margin-top: 0.5rem;
        }

        .construction-notice {
            top: 0.5rem;
            left: 0.5rem;
            font-size: 0.7rem;
            padding: 0.3rem 0.5rem;
        }

        footer {
            font-size: 0.8rem;
            margin-top: 0.5rem;
        }
    }
</style>
