<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
  <!-- Gradient orbs -->
  <div
    [appParallax]="0.15"
    class="absolute top-1/4 -left-32 w-96 h-96 bg-purple-600/20 rounded-full blur-[128px] animate-float"
  ></div>
  <div
    [appParallax]="0.25"
    class="absolute bottom-1/4 -right-32 w-80 h-80 bg-violet-500/15 rounded-full blur-[100px] animate-float"
    style="animation-delay: -3s"
  ></div>

  <div class="relative z-10 container mx-auto px-6 text-center pt-32 pb-20">
    <div
      class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-purple-500/30 bg-purple-500/10 text-purple-400 text-sm font-medium mb-8 animate-fade-in"
    >
      <span class="w-2 h-2 rounded-full bg-purple-400 animate-pulse"></span>
      {{ 'pages.home.hero.badge' | translate }}
    </div>

    <h1 class="text-5xl md:text-7xl lg:text-8xl font-extrabold tracking-tight mb-6 animate-fade-in-up">
      <span class="text-foreground">{{ 'pages.home.hero.titleLine1' | translate }}</span><br />
      <span class="gradient-text">{{ 'pages.home.hero.titleLine2' | translate }}</span>
    </h1>

    <p
      class="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-in-up"
      style="animation-delay: 0.2s"
    >
      {{ 'pages.home.hero.description' | translate }}
    </p>

    <!-- CTA Buttons -->
    <div
      class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-6 animate-fade-in-up"
      style="animation-delay: 0.4s"
    >
      @if (downloadUrl()) {
        <a
          [href]="downloadUrl()"
          class="group inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold text-lg hover:from-purple-500 hover:to-violet-500 transition-all shadow-2xl shadow-purple-500/25 hover:shadow-purple-500/40 animate-glow-pulse"
        >
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
            />
          </svg>
          {{ 'common.actions.downloadFor' | translate:{ os: getDetectedOsLabel() } }}
          <span class="text-sm opacity-75">{{ detectedOS().icon }}</span>
        </a>
      } @else {
        <a
          routerLink="/downloads"
          class="group inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold text-lg hover:from-purple-500 hover:to-violet-500 transition-all shadow-2xl shadow-purple-500/25 hover:shadow-purple-500/40"
        >
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
            />
          </svg>
          {{ 'common.actions.downloadBrand' | translate }}
        </a>
      }

      <a
        href="https://web.toju.app/"
        target="_blank"
        rel="noopener"
        class="inline-flex items-center gap-2 px-8 py-4 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium text-lg hover:bg-card hover:border-purple-500/30 transition-all backdrop-blur-sm"
      >
        {{ 'common.actions.openInBrowser' | translate }}
        <svg
          class="w-5 h-5 opacity-60"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
          />
        </svg>
      </a>
    </div>

    @if (latestVersion()) {
      <p
        class="text-xs text-muted-foreground/60 animate-fade-in"
        style="animation-delay: 0.6s"
      >
        {{ 'pages.home.hero.version' | translate:{ version: latestVersion() } }} ·
        <a
          routerLink="/downloads"
          class="underline hover:text-muted-foreground transition-colors"
          >{{ 'pages.home.hero.allPlatforms' | translate }}</a
        >
      </p>
    }

    <!-- Scroll indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
      <svg
        class="w-6 h-6 text-muted-foreground/40"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 14l-7 7m0 0l-7-7m7 7V3"
        />
      </svg>
    </div>
  </div>
</section>

<app-ad-slot />

<!-- Features Grid -->
<section class="relative py-32">
  <div class="container mx-auto px-6">
    <div class="text-center mb-20 section-fade">
      <h2 class="text-3xl md:text-5xl font-bold text-foreground mb-4">
        {{ 'pages.home.features.titleLine1' | translate }}<br />
        <span class="gradient-text">{{ 'pages.home.features.titleLine2' | translate }}</span>
      </h2>
      <p class="text-muted-foreground text-lg max-w-xl mx-auto">{{ 'pages.home.features.description' | translate }}</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Voice Calls -->
      <div
        class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
      >
        <div class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-6 group-hover:bg-purple-500/20 transition-colors">
          <svg
            class="w-6 h-6 text-purple-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
            />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.home.features.items.voiceCalls.title' | translate }}</h3>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.home.features.items.voiceCalls.description' | translate }}
        </p>
      </div>

      <!-- Screen Sharing -->
      <div
        class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
        style="transition-delay: 0.1s"
      >
        <div class="w-12 h-12 rounded-xl bg-violet-500/10 flex items-center justify-center mb-6 group-hover:bg-violet-500/20 transition-colors">
          <svg
            class="w-6 h-6 text-violet-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
            />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.home.features.items.screenSharing.title' | translate }}</h3>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.home.features.items.screenSharing.description' | translate }}
        </p>
      </div>

      <!-- File Sharing -->
      <div
        class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
        style="transition-delay: 0.2s"
      >
        <div class="w-12 h-12 rounded-xl bg-pink-500/10 flex items-center justify-center mb-6 group-hover:bg-pink-500/20 transition-colors">
          <svg
            class="w-6 h-6 text-pink-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
            />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.home.features.items.fileSharing.title' | translate }}</h3>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.home.features.items.fileSharing.description' | translate }}
        </p>
      </div>

      <!-- Privacy -->
      <div
        class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
      >
        <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:bg-emerald-500/20 transition-colors">
          <svg
            class="w-6 h-6 text-emerald-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
            />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.home.features.items.privacy.title' | translate }}</h3>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.home.features.items.privacy.description' | translate }}
        </p>
      </div>

      <!-- Open Source -->
      <div
        class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
        style="transition-delay: 0.1s"
      >
        <div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-6 group-hover:bg-blue-500/20 transition-colors">
          <svg
            class="w-6 h-6 text-blue-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
            />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.home.features.items.openSource.title' | translate }}</h3>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.home.features.items.openSource.description' | translate }}
        </p>
      </div>

      <!-- Free -->
      <div
        class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
        style="transition-delay: 0.2s"
      >
        <div class="w-12 h-12 rounded-xl bg-amber-500/10 flex items-center justify-center mb-6 group-hover:bg-amber-500/20 transition-colors">
          <svg
            class="w-6 h-6 text-amber-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
            />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.home.features.items.free.title' | translate }}</h3>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.home.features.items.free.description' | translate }}
        </p>
      </div>
    </div>
  </div>
</section>

<app-ad-slot />

<!-- Gaming Section -->
<section class="relative py-32">
  <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-950/10 to-transparent"></div>
  <div class="relative container mx-auto px-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
      <div class="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"
        >
          <svg
            class="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
            />
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          {{ 'pages.home.gaming.badge' | translate }}
        </div>
        <h2 class="text-3xl md:text-5xl font-bold text-foreground mb-6">
          {{ 'pages.home.gaming.titleLine1' | translate }}<br />
          <span class="gradient-text">{{ 'pages.home.gaming.titleLine2' | translate }}</span>
        </h2>
        <p class="text-lg text-muted-foreground leading-relaxed mb-8">
          {{ 'pages.home.gaming.description' | translate }}
        </p>
        <ul class="space-y-4">
          <li class="flex items-center gap-3 text-muted-foreground">
            <svg
              class="w-5 h-5 text-purple-400 flex-shrink-0"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span>{{ 'pages.home.gaming.bullets.lowLatency' | translate }}</span>
          </li>
          <li class="flex items-center gap-3 text-muted-foreground">
            <svg
              class="w-5 h-5 text-purple-400 flex-shrink-0"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span>{{ 'pages.home.gaming.bullets.noiseSuppression' | translate }}</span>
          </li>
          <li class="flex items-center gap-3 text-muted-foreground">
            <svg
              class="w-5 h-5 text-purple-400 flex-shrink-0"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span>{{ 'pages.home.gaming.bullets.screenShare' | translate }}</span>
          </li>
          <li class="flex items-center gap-3 text-muted-foreground">
            <svg
              class="w-5 h-5 text-purple-400 flex-shrink-0"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span>{{ 'pages.home.gaming.bullets.fileTransfers' | translate }}</span>
          </li>
        </ul>
      </div>

      <div class="section-fade relative">
        <div class="relative rounded-2xl overflow-hidden border border-border/30 bg-card/30 backdrop-blur-sm aspect-video">
          <img
            ngSrc="/images/screenshots/screenshare_gaming.png"
            fill
            priority
            [attr.alt]="'pages.home.gaming.imageAlt' | translate"
            class="object-cover"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-sm text-muted-foreground/60">{{ 'pages.home.gaming.caption' | translate }}</div>
        </div>
        <!-- Glow effect -->
        <div class="absolute -inset-4 bg-purple-600/5 rounded-3xl blur-2xl -z-10"></div>
      </div>
    </div>
  </div>
</section>

<app-ad-slot />

<!-- Self-hostable Section -->
<section class="relative py-32">
  <div class="container mx-auto px-6">
    <div class="section-fade max-w-3xl mx-auto text-center">
      <div
        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium mb-6"
      >
        <svg
          class="w-4 h-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"
          />
        </svg>
        {{ 'pages.home.selfHostable.badge' | translate }}
      </div>
      <h2 class="text-3xl md:text-5xl font-bold text-foreground mb-6">
        {{ 'pages.home.selfHostable.titleLine1' | translate }}<br />
        <span class="gradient-text">{{ 'pages.home.selfHostable.titleLine2' | translate }}</span>
      </h2>
      <p class="text-lg text-muted-foreground leading-relaxed mb-8">
        {{ 'pages.home.selfHostable.description' | translate }}
      </p>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
        <a
          routerLink="/what-is-toju"
          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.learnHowItWorks' | translate }}
          <svg
            class="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 5l7 7-7 7"
            />
          </svg>
        </a>
        <a
          href="https://git.azaaxin.com/myxelium/Toju"
          target="_blank"
          rel="noopener"
          class="inline-flex items-center gap-2 px-6 py-3 text-muted-foreground hover:text-foreground transition-colors text-sm"
        >
          <img
            src="/images/gitea.png"
            alt=""
            width="16"
            height="16"
            class="w-4 h-4 object-contain"
          />
          {{ 'common.actions.viewSourceCode' | translate }}
        </a>
      </div>
    </div>
  </div>
</section>

<!-- CTA Banner -->
<section class="relative py-24">
  <div class="absolute inset-0 bg-gradient-to-r from-purple-950/20 via-violet-950/30 to-purple-950/20"></div>
  <div class="relative container mx-auto px-6 text-center section-fade">
    <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">{{ 'pages.home.cta.title' | translate }}</h2>
    <p class="text-muted-foreground text-lg mb-8 max-w-lg mx-auto">{{ 'pages.home.cta.description' | translate }}</p>
    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
      @if (downloadUrl()) {
        <a
          [href]="downloadUrl()"
          class="inline-flex items-center gap-2 px-8 py-4 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-2xl shadow-purple-500/25"
        >
          {{ 'common.actions.downloadFor' | translate:{ os: getDetectedOsLabel() } }}
        </a>
      } @else {
        <a
          routerLink="/downloads"
          class="inline-flex items-center gap-2 px-8 py-4 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-2xl shadow-purple-500/25"
        >
          {{ 'common.actions.downloadBrand' | translate }}
        </a>
      }
      <a
        href="https://web.toju.app/"
        target="_blank"
        rel="noopener"
        class="inline-flex items-center gap-2 px-8 py-4 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium hover:border-purple-500/30 transition-all"
      >
        {{ 'common.actions.tryInBrowser' | translate }}
      </a>
    </div>
  </div>
</section>
