{{ $displayName := "" }}
{{ $name := "" }}
{{ $picture := "" }}
{{ $banner := "" }}
{{ $about := "" }}
{{ $website := "" }}
{{ $nip05 := "" }}
{{ $lud16 := "" }}

{{ range hugo.Data.profile }}
    {{ range . }}
        {{ range .tags }}
            {{ if eq (index . 0) "display_name" }}
                {{ $displayName = index . 1 }}
            {{ else if eq (index . 0) "name" }}
                {{ $name = index . 1 }}
            {{ else if eq (index . 0) "picture" }}
                {{ $picture = index . 1 }}
            {{ else if eq (index . 0) "banner" }}
                {{ $banner = index . 1 }}
            {{ else if eq (index . 0) "about" }}
                {{ $about = index . 1 }}
            {{ else if eq (index . 0) "website" }}
                {{ $website = index . 1 }}
            {{ else if eq (index . 0) "nip05" }}
                {{ $nip05 = index . 1 }}
            {{ else if eq (index . 0) "lud16" }}
                {{ $lud16 = index . 1 }}
            {{ end }}
        {{ end }}
    {{ end }}
{{ end }}

<!-- If display_name is empty, use name -->
{{ if not $displayName }}
    {{ $displayName = $name }}
{{ end }}

<!-- Sticky Navigation -->
<nav class="sticky-nav" id="stickyNav" role="navigation">
    <div class="nav-container">
        <a href="#" class="nav-brand">
            <span>✦</span> {{ if $displayName }}{{ $displayName | truncate 12 }}{{ else }}{{ .Site.Title }}{{ end }}
        </a>
        <div class="nav-links">
            <a href="#blog"><span>📝 Now</span></a>
            <a href="#music"><span>🎵 Music</span></a>
            <a href="#pictures"><span>🖼️ Pix</span></a>
            <a href="#videos"><span>🎬 Vidz</span></a>
        </div>
    </div>
</nav>


<!-- Main Header -->
<header class="main-header" style="position:relative;overflow:hidden;">
    <!-- Background image -->
    {{ if $banner }}
    <div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-image:url('{{ $banner }}');background-size:cover;background-position:center; background-attachment:fixed;"></div>
    <!-- Dark overlay for readability -->
    <div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-image:url('/images/texture.png');pointer-events:none;"></div>
    {{ end }}
    

    
    <!-- Decorative '>' -->
    <div></div>
    
    <div class="header-content">
        <div class="header-profile">
            {{ if $picture }}
            <img src="{{ $picture }}" alt="{{ $displayName }}" class="profile-picture" loading="lazy">
            {{ end }}
            <div class="header-text">

                {{ if $about }}
                <div class="profile-about tagline"><h1>✦ {{ if $displayName }}{{ $displayName }}{{ else }}{{ .Site.Title }}{{ end }}</h1>{{ $about | markdownify }}</div>
                {{ else }}
                <div class="profile-about tagline">{{ .Site.Params.description }}</div>
                {{ end }}
            </div>
        </div>
    </div>

</header>