{{ define "main" }}
<section class="min-h-[calc(100vh-200px)] flex items-center justify-center px-4 py-12">
  <div class="max-w-2xl w-full">
    <!-- Profile Image (optional) -->
    {{ if .Params.image }}
    <div class="flex justify-center mb-8">
      <img
        src="{{ .Params.image }}"
        alt="{{ .Site.Params.author }}"
        class="w-32 h-32 md:w-48 md:h-48 rounded-full border-4 border-accent object-cover"
      >
    </div>
    {{ end }}

    <!-- Author Name -->
    <h1 class="text-4xl md:text-5xl font-bold text-accent text-center mb-4">
      {{ .Site.Params.author }}
    </h1>

    <!-- Bio (from page content) -->
    <div class="text-lg text-text-dim text-center mb-8 leading-relaxed prose prose-invert max-w-none">
      {{ .Content }}
    </div>

    <!-- Call-to-Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <!-- Articles Button -->
      <a
        href="/articles/"
        class="px-8 py-3 bg-accent text-white rounded font-semibold hover:opacity-90 transition-opacity text-center"
      >
        {{ i18n "articles" }}
      </a>

      <!-- Contact Button -->
      <a
        href="/is/here/"
        class="px-8 py-3 border-2 border-accent text-accent rounded font-semibold hover:bg-accent/10 transition-colors text-center"
      >
        {{ i18n "contact" }}
      </a>
    </div>
  </div>
</section>
{{ end }}