{#
  Hero Section - author intro with avatar, name, title, bio
  Rendered by homepage-builder when hero is enabled
#}

{% set heroConfig = homepageConfig.hero or {} %}
{% set id = homepageConfig.identity if (homepageConfig and homepageConfig.identity) else {} %}
{% set authorName = id.name if (id.name is defined) else site.author.name %}
{% set authorAvatar = id.avatar if (id.avatar is defined) else site.author.avatar %}
{% set authorTitle = id.title if (id.title is defined) else site.author.title %}
{% set authorBio = id.bio if (id.bio is defined) else site.author.bio %}
{% set siteDescription = id.description if (id.description is defined) else site.description %}
{% set socialLinks = id.social if (id.social is defined) else site.social %}

<section class="mb-8 sm:mb-12">
  <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
    {# Avatar #}
    {% if heroConfig.showAvatar != false %}
    <img
      src="{{ authorAvatar }}"
      alt="{{ authorName }}"
      width="96"
      height="96"
      class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
      loading="eager"
    >
    {% endif %}

    {# Introduction #}
    <div class="flex-1 min-w-0">
      <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
        {{ authorName }}
      </h1>
      {% if authorTitle %}
      <p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
        {{ authorTitle }}
      </p>
      {% endif %}
      {% if authorBio %}
      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
        {{ authorBio }}
      </p>
      {% endif %}
      {% if siteDescription %}
      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
        {{ siteDescription }}
        <a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more &rarr;</a>
      </p>
      {% endif %}

      {# Social Links #}
      {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %}
      {% if heroConfig.showSocial != false and socialLinks %}
      <div class="flex flex-wrap gap-3">
        {% for link in socialLinks %}
        <a
          href="{{ link.url }}"
          rel="{{ link.rel }} noopener"
          class="inline-flex items-center gap-2 px-3 py-2 text-sm text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
          target="_blank"
        >
          <span class="{{ socialIconColorClass(link.icon) }}">{{ socialIcon(link.icon, "w-5 h-5") }}</span>
          <span class="text-sm font-medium">{{ link.name }}</span>
        </a>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</section>