<div class="min-h-screen pt-32 pb-20">
  <section class="container mx-auto px-6 mb-16">
    <div class="max-w-3xl mx-auto text-center section-fade">
      <div
        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-sm font-medium mb-6"
      >
        {{ 'pages.gallery.hero.badge' | translate }}
      </div>
      <h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">{{ 'pages.gallery.hero.titlePrefix' | translate }} <span class="gradient-text">{{ 'common.brand' | translate }}</span></h1>
      <p class="text-lg text-muted-foreground leading-relaxed">
        {{ 'pages.gallery.hero.description' | translate }}
      </p>
    </div>
  </section>

  <section class="container mx-auto px-6 mb-20">
    <div class="max-w-6xl mx-auto section-fade">
      <div class="relative overflow-hidden rounded-3xl border border-border/30 bg-card/30 backdrop-blur-sm">
        <div class="relative aspect-[16/9]">
          <img
            ngSrc="/images/screenshots/screenshot_main.png"
            [attr.alt]="'pages.gallery.featured.imageAlt' | translate"
            fill
            priority
            sizes="(min-width: 1536px) 75vw, (min-width: 1280px) 90vw, 100vw"
            class="object-cover"
          />
        </div>
        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background/80 to-transparent p-6 md:p-8">
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-purple-400 mb-2">{{ 'pages.gallery.featured.label' | translate }}</p>
          <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-2">{{ 'pages.gallery.featured.title' | translate }}</h2>
          <p class="max-w-2xl text-sm md:text-base text-muted-foreground">
            {{ 'pages.gallery.featured.description' | translate }}
          </p>
        </div>
      </div>
    </div>
  </section>

  <app-ad-slot />

  <section class="container mx-auto px-6 mb-20">
    <div class="max-w-6xl mx-auto">
      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        @for (item of galleryItems; track item.src) {
          <a
            [href]="item.src"
            target="_blank"
            rel="noopener"
            class="section-fade group overflow-hidden rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm hover:border-purple-500/30 hover:bg-card/50 transition-all"
          >
            <div class="relative aspect-video overflow-hidden">
              <img
                [ngSrc]="item.src"
                [attr.alt]="item.titleKey | translate"
                fill
                sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
                class="object-cover transition-transform duration-500 group-hover:scale-105"
              />
            </div>
            <div class="p-5">
              <h3 class="text-lg font-semibold text-foreground mb-2">{{ item.titleKey | translate }}</h3>
              <p class="text-sm text-muted-foreground leading-relaxed">{{ item.descriptionKey | translate }}</p>
            </div>
          </a>
        }
      </div>
    </div>
  </section>

  <section class="container mx-auto px-6">
    <div
      class="max-w-4xl mx-auto section-fade rounded-3xl border border-purple-500/20 bg-gradient-to-br from-purple-950/20 to-violet-950/20 p-8 md:p-10 text-center"
    >
      <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">{{ 'pages.gallery.cta.title' | translate }}</h2>
      <p class="text-muted-foreground leading-relaxed mb-6">{{ 'pages.gallery.cta.description' | translate }}</p>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
        <a
          routerLink="/downloads"
          class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold hover:from-purple-500 hover:to-violet-500 transition-all shadow-lg shadow-purple-500/25"
        >
          {{ 'common.actions.goToDownloads' | translate }}
        </a>
        <a
          href="https://web.toju.app/"
          target="_blank"
          rel="noopener"
          class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium hover:border-purple-500/30 transition-all"
        >
          {{ 'common.actions.openWebVersion' | translate }}
        </a>
      </div>
    </div>
  </section>
</div>
