{{define "content"}}
<div class="container">
  <!-- Minimal Hero -->
  <section class="mb-6">
    <div class="mb-2">
      <span class="badge">{{icon "git-branch" "size-3.5"}} {{t .Lang "landing.badge"}}</span>
    </div>
    <h1 class="text-2xl font-bold" style="max-width:38rem;line-height:1.2;margin:0 0 0.6rem 0;">
      {{t .Lang "landing.hero.title"}}
    </h1>
    <p class="text-sm text-muted" style="max-width:36rem;margin:0 0 1.25rem 0;">
      {{t .Lang "landing.hero.subtitle"}}
    </p>

    <div class="flex items-center flex-wrap gap-2">
      {{if .CurrentUser}}
        <a href="/new" class="btn btn-primary">
          {{icon "plus" "size-4"}}
          <span>{{t .Lang "repo.new.title"}}</span>
        </a>
        {{if .ExploreEnabled}}
          <a href="/explore" class="btn btn-outline">
            {{icon "globe" "size-4"}}
            <span>{{t .Lang "nav.explore"}}</span>
          </a>
        {{end}}
      {{else}}
        {{if .RegistrationEnabled}}
          <a href="/register" class="btn btn-primary">
            <span>{{t .Lang "landing.hero.cta_start"}}</span>
            {{icon "arrow-right" "size-4"}}
          </a>
        {{end}}
        <a href="/login" class="btn btn-outline">
          <span>{{t .Lang "nav.login"}}</span>
        </a>
      {{end}}
    </div>
  </section>

  <!-- 4 Core Principles -->
  <section class="mb-6">
    <div class="grid-2">
      <div class="card p-3">
        <div class="flex items-center gap-2 font-semibold text-sm mb-1">
          {{icon "server" "size-4"}}
          <span>{{t .Lang "landing.feat1.title"}}</span>
        </div>
        <p class="text-xs text-muted" style="margin:0;">{{t .Lang "landing.feat1.desc"}}</p>
      </div>

      <div class="card p-3">
        <div class="flex items-center gap-2 font-semibold text-sm mb-1">
          {{icon "database" "size-4"}}
          <span>{{t .Lang "landing.feat2.title"}}</span>
        </div>
        <p class="text-xs text-muted" style="margin:0;">{{t .Lang "landing.feat2.desc"}}</p>
      </div>

      <div class="card p-3">
        <div class="flex items-center gap-2 font-semibold text-sm mb-1">
          {{icon "zap" "size-4"}}
          <span>{{t .Lang "landing.feat3.title"}}</span>
        </div>
        <p class="text-xs text-muted" style="margin:0;">{{t .Lang "landing.feat3.desc"}}</p>
      </div>

      <div class="card p-3">
        <div class="flex items-center gap-2 font-semibold text-sm mb-1">
          {{icon "lock" "size-4"}}
          <span>{{t .Lang "landing.feat4.title"}}</span>
        </div>
        <p class="text-xs text-muted" style="margin:0;">{{t .Lang "landing.feat4.desc"}}</p>
      </div>
    </div>
  </section>

  {{if and .ExploreEnabled .Repos}}
    <section>
      <div class="flex items-center justify-between mb-2">
        <h2 class="text-base font-semibold" style="margin:0;">{{t .Lang "nav.explore"}}</h2>
      </div>
      <div class="card">
        {{range .Repos}}
          <div class="dense-row">
            <div class="flex items-center gap-2 min-w-0">
              {{icon "git-branch" "size-4"}}
              <a href="/{{.OwnerUsername}}/{{.Name}}" class="font-medium">{{.OwnerUsername}}/<strong>{{.Name}}</strong></a>
              {{if .Description}}
                <span class="text-xs text-muted truncate">— {{.Description}}</span>
              {{end}}
            </div>
            <span class="text-xs text-muted">{{timeAgo .UpdatedAt $.Lang}}</span>
          </div>
        {{end}}
      </div>
    </section>
  {{end}}
</div>
{{end}}