{{- $hero := .Site.Params.hero -}}

<div class="grid gap-8 md:grid-cols-[minmax(0,2fr)_minmax(0,1.2fr)] items-start">
  <div class="space-y-5 animate-fade-up">
    <!-- Badge + availability -->
    <div class="flex flex-wrap items-center gap-4">
      {{ with $hero.badge }}
        <p class="eyebrow font-medium text-sm text-accent">{{ . }}</p>
      {{ end }}

      {{ if $hero.available }}
        <span class="badge-available px-3">
          <span class="h-1.5 w-1.5 rounded-full bg-white/95"></span>
          <span>{{ default "Available for work" $hero.availableLabel }}</span>
        </span>
      {{ end }}
    </div>

    <div class="space-y-2">
      <h1 class="heading-page text-3xl sm:text-4xl">
        {{ default "Hi, I’m Your Name." $hero.title }}
      </h1>
      {{ with $hero.role }}
        <p class="text-sm font-medium text-muted">
          {{ . }}
        </p>
      {{ end }}
    </div>

    {{ with $hero.summary }}
      <p class="max-w-xl text-sm text-muted">
        {{ . }}
      </p>
    {{ end }}

    <!-- Meta row: location + focus -->
    <div class="mt-3 flex flex-wrap gap-2 text-[0.7rem] text-muted">
      {{ with $hero.location }}
        <span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/90 px-3 py-1.5">
          <i class="fa-solid fa-location-dot text-[0.8rem]"></i>
          <span class="font-medium">{{ . }}</span>
        </span>
      {{ end }}

      {{ with $hero.focus }}
        <span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/80 px-3 py-1.5">
          <i class="fa-regular fa-circle-dot text-[0.8rem]"></i>
          <span>{{ . }}</span>
        </span>
      {{ end }}
    </div>

    <!-- Optional highlight pills -->
    {{ with $hero.highlights }}
      <div class="mt-3 flex flex-wrap gap-2">
        {{ range . }}
          <span class="inline-flex items-center rounded-full border border-border bg-surface/80 px-3 py-1 text-[0.7rem] text-muted">
            {{ .label }}
          </span>
        {{ end }}
      </div>
    {{ end }}

    <!-- CTAs -->
    <div class="mt-4 flex flex-wrap items-center gap-3">
      {{ with $hero.primary }}
        <a href="{{ .href | default "/projects/" }}" class="btn-primary">
          {{ .label | default "View projects" }}
        </a>
      {{ end }}

      {{ with $hero.secondary }}
        <a href="{{ .href | default "/blog/" }}" class="btn-ghost link-underline">
          {{ .label | default "Read the blog" }}
        </a>
      {{ end }}
    </div>
  </div>

  <!-- Avatar ONLY if provided -->
  {{ with $hero.avatar }}
    <div class="order-first md:order-none">
      <div class="card card-pad flex items-center justify-center md:justify-end">
        <div class="h-24 w-24 sm:h-28 sm:w-28 overflow-hidden rounded-2xl border border-border bg-surface shadow-md">
          <img
            src="{{ . | relURL }}"
            alt="{{ $hero.title | default $.Site.Title }}"
            class="h-full w-full object-cover"
          />
        </div>
      </div>
    </div>
  {{ end }}
</div>