---
import CDNSnippet from "./CDNSnippet.astro";
import HeroStats from "./HeroStats.astro";
---

<section id="hero"
         _="on intersection(intersecting) having threshold 0.8
            if intersecting
                remove .grid-dimmed from #background-grid
            else
                add .grid-dimmed to #background-grid">
    <div class="hero-inner">

        <h1 id="hero-logo">HTML can do <em>that!?</em></h1>

        <p>build modern UIs with the simplicity of hypertext</p>

        <a class="cta" href="/docs#installation">Start Here</a>

        <div class="sub">
            <CDNSnippet/>
            <HeroStats/>
        </div>

    </div>
</section>

<style>
    section {
        padding: 2rem 0 3rem;
        width: 100vw;
        position: relative;
        left: 50%;
        margin-left: -50vw;

        @media (min-width: 640px) { padding: 6rem 0 4rem; }
    }

    .hero-inner {
        max-width: 80rem;
        margin-inline: auto;
        padding-inline: 1rem;
        text-align: center;
        transform: translateZ(0);
        isolation: isolate;

        @media (min-width: 640px) { padding-inline: 1.5rem; }
        @media (min-width: 1024px) { padding-inline: 2rem; }
    }

    h1 {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1;
        font-family: var(--font-chicago);
        color: light-dark(black, white);
        transform: translateZ(0);

        @media (min-width: 640px) { font-size: 3.75rem; }
        @media (min-width: 1024px) { font-size: 4.5rem; }

        em {
            font-style: italic;
            color: light-dark(var(--color-blue-600), var(--color-blue-350));
            text-shadow:
                0 2px 0 color-mix(in srgb, var(--color-blue-900) 95%, white),
                0 4px 0 color-mix(in srgb, var(--color-blue-900) 95%, black);

            @media (prefers-color-scheme: dark) {
                text-shadow:
                    0 2px 0 color-mix(in srgb, var(--color-blue-700) 95%, white),
                    0 4px 0 color-mix(in srgb, var(--color-blue-700) 95%, black);
            }
        }
    }

    p {
        margin-top: 1.75rem;
        font-weight: 300;
        font-size: 1.125rem;
        margin-inline: auto;

        @media (max-width: 639px) { max-width: 28ch; }
        @media (min-width: 640px) { margin-top: 3.75rem; font-size: 1.375rem; }
        @media (min-width: 1024px) { font-size: 1.5rem; }
    }

    .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.75rem;
        height: 2.25rem;
        padding-inline: 1rem;
        font-family: var(--font-chicago);
        font-size: 0.75rem;
        color: white;
        background: linear-gradient(to bottom,
            light-dark(var(--color-blue-600), var(--color-blue-500)),
            light-dark(var(--color-blue-700), var(--color-blue-600)));
        border: 1px solid light-dark(var(--color-blue-500), var(--color-blue-500));
        border-radius: var(--radius-lg);
        text-decoration: none;
        box-shadow:
            0 calc(0.375cqh / 2) 0 color-mix(in srgb, var(--color-blue-900) 95%, white),
            0 0.375cqh 0 color-mix(in srgb, var(--color-blue-900) 95%, black);
        transition: background 0.15s, border-color 0.15s;

        @media (min-width: 640px) { margin-top: 3.75rem; height: 2.5rem; padding-inline: 1.5rem; font-size: 0.875rem; }
        @media (min-width: 1024px) { height: 2.75rem; padding-inline: 2rem; font-size: 1rem; }

        @media (prefers-color-scheme: dark) {
            box-shadow:
                0 calc(0.375cqh / 2) 0 color-mix(in srgb, var(--color-blue-800) 95%, white),
                0 0.375cqh 0 color-mix(in srgb, var(--color-blue-800) 95%, black);
        }

        @media (hover: hover) {
            &:hover {
                background: linear-gradient(to bottom,
                    light-dark(var(--color-blue-500), var(--color-blue-400)),
                    light-dark(var(--color-blue-600), var(--color-blue-500)));
                border-color: light-dark(var(--color-blue-500), var(--color-blue-400));
            }
        }

        &:is(:focus-visible) {
            background: linear-gradient(to bottom,
                light-dark(var(--color-blue-500), var(--color-blue-400)),
                light-dark(var(--color-blue-600), var(--color-blue-500)));
            border-color: light-dark(var(--color-blue-500), var(--color-blue-400));
        }

        &:active {
            translate: 0 0.375cqh;
            box-shadow:
                0 calc(2px / 2) 0 color-mix(in srgb, var(--color-blue-900) 95%, white),
                0 2px 0 color-mix(in srgb, var(--color-blue-900) 95%, black);
        }
    }

    .sub {
        margin-top: 2.25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;

        @media (min-width: 640px) { margin-top: 3.25rem; gap: 2.25rem; }
    }
</style>
