{{ define "hero" }}
{{/*
  Hero section component - displays landing page hero for non-authenticated users
*/}}
<section class="hero bg-base-200 min-h-[60vh] py-16 pb-24 relative overflow-hidden">
    <div class="hero-content text-center flex-col relative z-10 w-full">
        {{/* Mascot is positioned relative to .hero-content so it can't overlap
             the CTA stack at borderline lg viewports. Hidden below 2xl when the
             layout would push it over the buttons. */}}
        <img src="/static/seamark_seagull_buoy.png" alt="" class="hidden 2xl:block absolute -left-40 top-1/2 -translate-y-1/2 w-52 h-auto z-10 pointer-events-none animate-rock" aria-hidden="true">
        {{ $t := seamarkHeroTagline }}
        <h1 id="hero-heading" class="text-4xl md:text-5xl font-bold text-balance">{{ index $t 0 }}<span class="text-primary">{{ index $t 1 }}</span>{{ index $t 2 }}</h1>
        <p class="text-lg text-base-content/70 max-w-lg mt-4 text-balance">
            Push and pull Docker images on the AT Protocol.
            Browse public registries or control your data.
        </p>

        <div class="mockup-code bg-base-300 text-base-content text-left w-full max-w-lg text-base mt-8">
            <pre data-prefix="$"><code>docker login {{ .RegistryURL }}</code></pre>
            <pre data-prefix="$"><code>docker push {{ .RegistryURL }}/you/app</code></pre>
            <pre data-prefix="#" class="text-base-content/65"><code>same docker, decentralized</code></pre>
        </div>

        <div class="flex items-center justify-center gap-4 mt-8">
            <a href="/auth/oauth/login?return_to=/" class="btn btn-primary btn-lg">Get Started</a>
            <a href="/learn-more" class="btn btn-ghost btn-lg" aria-label="How the {{ .ClientShortName }} container registry works">How It Works</a>
        </div>

        <!-- Benefit Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 w-full max-w-4xl">
            <div class="card bg-base-100 border border-base-300 p-6 text-center">
                <div class="text-primary mb-4 flex justify-center">
                    {{ icon "ship" "size-8" }}
                </div>
                <h2 class="font-semibold text-lg">Works with Docker</h2>
                <p class="text-base-content/70 mt-2">Use docker push &amp; pull. No new tools to learn.</p>
            </div>
            <div class="card bg-base-100 border border-base-300 p-6 text-center">
                <div class="text-primary mb-4 flex justify-center">
                    {{ icon "anchor" "size-8" }}
                </div>
                <h2 class="font-semibold text-lg">Your Data</h2>
                <p class="text-base-content/70 mt-2">Join shared holds or captain your own storage.</p>
            </div>
            <div class="card bg-base-100 border border-base-300 p-6 text-center">
                <div class="text-primary mb-4 flex justify-center">
                    {{ icon "compass" "size-8" }}
                </div>
                <h2 class="font-semibold text-lg">Discover Images</h2>
                <p class="text-base-content/70 mt-2">Browse and star public container registries.</p>
            </div>
        </div>
    </div>
    <img src="/static/wave-pattern.svg" width="1440" height="128" alt="" class="absolute bottom-0 left-0 w-full h-32 pointer-events-none" aria-hidden="true">
</section>
{{ end }}