{{- define "main" -}}
  {{- $posts    := where .Site.RegularPages "Section" "posts" -}}
  {{- $featured := where $posts "Params.featured" true -}}
  {{- $hero     := index $featured 0 -}}
  {{- $latest   := where $posts "Permalink" "ne" $hero.Permalink -}}


  <!-- ── HERO ──────────────────────────────────────────────────── -->
  {{- with $hero -}}
    <section class="relative min-h-screen flex items-end overflow-hidden noise">
      <!-- Background media — bundle banner.png first, fallback to front matter -->
      {{- $heroBanner := .Resources.GetMatch "banner.png" -}}
      {{- if not $heroBanner -}}{{- $heroBanner = .Resources.GetMatch "banner.*" -}}{{- end -}}
      {{- if $heroBanner -}}
        <div class="absolute inset-0">
          {{- partial "img.html" (dict "res" $heroBanner "widths" (slice 1200 1920 2560) "sizes" "100vw" "class" "w-full h-full object-cover" "alt" "" "loading" "eager") -}}
        </div>
      {{- else -}}
        {{- $heroBannerSrc := "" -}}
        {{- with .Params.background }}
          {{ $heroBannerSrc = .src }}
        {{ else }}
          {{ with $.Params.banner }}{{ $heroBannerSrc = .src }}{{ end }}
        {{ end -}}
        {{- with $heroBannerSrc -}}
          <div class="absolute inset-0">
            <img src="{{ . }}" alt="" class="w-full h-full object-cover" loading="eager" decoding="async" />
          </div>
        {{- end -}}
      {{- end -}}


      <!-- Cinematic overlay -->
      <div class="absolute inset-0 overlay-gradient-hero"></div>

      <!-- Hero content -->
      <div class="relative z-10 gutter-x pb-20 md:pb-32 w-full">
        <div class="max-w-5xl">
          <!-- Drop label + category badges -->
          <div class="flex flex-wrap items-center gap-3 mb-6">
            <span class="badge badge-pulse">Featured Drop</span>
            {{- with .Params.categories -}}
              {{- range first 1 . -}}
                <a href="/categories/{{ . | urlize }}/" class="badge badge-outline">{{ . }}</a>
              {{- end -}}
            {{- end -}}
          </div>

          <!-- Title -->
          <h1 class="font-display text-6xl md:text-8xl text-paper text-balance mb-6 leading-none">
            {{- .Title -}}
          </h1>

          <!-- Description -->
          <p
            class="text-chalk text-base md:text-lg max-w-2xl mb-10 leading-relaxed text-pretty font-body opacity-90 line-clamp-3"
          >
            {{- .Description -}}
          </p>

          <!-- CTA + author -->
          <div class="flex flex-wrap items-center gap-6">
            <a href="{{ .RelPermalink }}" class="btn btn-outline"
              >View Editorial {{ partial "icon.html" "arrow-right" }}</a
            >
            {{- with .Params.author -}}
              {{- $author := site.GetPage (printf "authors/%s" .) -}}
              {{- with $author -}}
                <div class="flex items-center gap-3">
                  {{- $avRes := .Resources.GetMatch "avatar.*" -}}
                  {{- $avSrc := "" -}}
                  {{- with $avRes }}
                    {{ $avSrc = .RelPermalink }}
                  {{ else }}
                    {{ with $author.Params.avatar }}{{ $avSrc = . }}{{ end }}
                  {{ end -}}
                  {{- with $avSrc -}}
                    <img
                      src="{{ . }}"
                      alt="{{ $author.Params.name | default $author.Title }}"
                      class="w-8 h-8 object-cover border border-heat/50"
                    />
                  {{- end -}}
                  <span class="label text-chalk">
                    By
                    <a href="{{ .RelPermalink }}" class="text-heat hover:text-frost transition-colors"
                      >{{ .Params.name | default .Title }}</a
                    >
                  </span>
                </div>
              {{- end -}}
            {{- end -}}
          </div>
        </div>
      </div>

      <!-- Scroll indicator -->
      <div class="absolute bottom-8 right-8 z-10 hidden md:flex flex-col items-center gap-2">
        <span class="label text-fog" style="writing-mode: vertical-lr; letter-spacing: 0.25em;">SCROLL</span>
        <div class="w-px h-12 bg-zinc relative overflow-hidden">
          <div
            class="absolute top-0 left-0 right-0 h-full"
            style="background: linear-gradient(var(--color-heat), var(--color-frost));
               animation: scroll-line 1.8s ease-in-out infinite;"
          ></div>
        </div>
      </div>
    </section>
  {{- end -}}


  <div class="gradient-line" style="opacity:0.2"></div>

  <!-- ── LATEST POSTS ──────────────────────────────────────────── -->
  <section class="gutter-x py-16 md:py-24 relative overflow-hidden">
    <!-- Decorative graffiti tag behind heading -->
    <div
      class="graffiti-tag absolute -top-6 -right-4 opacity-100 select-none pointer-events-none"
      style="-webkit-text-stroke-color: rgba(0,200,255,0.07);"
      aria-hidden="true"
    >
      DROPS
    </div>

    <div class="relative z-10 flex flex-wrap items-end justify-between gap-4 mb-10">
      <h2 class="font-display text-5xl md:text-7xl leading-none">
        <span class="text-stroke-heat">LATEST</span>&nbsp;<span class="text-gradient">DROPS</span>
      </h2>
      <a href="/posts/" class="btn btn-ghost">All posts {{ partial "icon.html" "arrow-right" }}</a>
    </div>

    <div class="relative z-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
      {{- range first 8 $latest -}}
        {{- partial "post-card.html" . -}}
      {{- end -}}
    </div>

    {{- if gt (len $latest) 8 -}}
      <div class="relative z-10 mt-14 text-center">
        <a href="/posts/" class="btn btn-outline"
          >View All {{ len $posts }} Posts {{ partial "icon.html" "arrow-right" }}</a
        >
      </div>
    {{- end -}}

  </section>

  <!-- ── ABOUT STRIP ───────────────────────────────────────────── -->
  <section class="bg-concrete border-t border-b border-zinc gutter-x py-16 md:py-20 spray-bg relative overflow-hidden">
    <div class="max-w-3xl mx-auto text-center relative z-10">
      <span class="badge badge-frost text-void mb-6 inline-block">About the Magazine</span>
      <p class="font-display text-3xl md:text-5xl text-paper leading-tight text-balance mb-10">
        {{ .Site.Params.description }}
      </p>
      <a href="/about/" class="btn btn-outline">About the magazine {{ partial "icon.html" "arrow-right" }}</a>
    </div>
  </section>
{{- end -}}