<section class="home-shell">
  <div class="hero-grid">
    <div class="hero-copy section-fade">
      <p class="eyebrow">{{ 'pages.home.hero.badge' | translate }}</p>
      <h1>
        <span>{{ 'pages.home.hero.titleLine1' | translate }}</span>
        <span>{{ 'pages.home.hero.titleLine2' | translate }}</span>
      </h1>
      <p class="hero-description">{{ 'pages.home.hero.description' | translate }}</p>

      <div class="hero-actions">
        @if (downloadUrl()) {
          <a
            [href]="downloadUrl()"
            class="button-primary"
          >
            {{ 'common.actions.downloadFor' | translate:{ os: getDetectedOsLabel() } }}
            <span aria-hidden="true">{{ detectedOS().icon }}</span>
          </a>
        } @else {
          <a
            routerLink="/downloads"
            class="button-primary"
          >
            {{ 'common.actions.downloadBrand' | translate }}
          </a>
        }

        <a
          href="https://web.toju.app/"
          target="_blank"
          rel="noopener"
          class="button-secondary"
        >
          {{ 'common.actions.openInBrowser' | translate }}
        </a>
      </div>

      @if (latestVersion()) {
        <p class="release-note">
          {{ 'pages.home.hero.version' | translate:{ version: latestVersion() } }}
          <a routerLink="/downloads">{{ 'pages.home.hero.allPlatforms' | translate }}</a>
        </p>
      }
    </div>

    <div class="hero-product section-fade">
      <img
        ngSrc="/images/screenshots/screenshot_main.png"
        width="1320"
        height="860"
        priority
        [attr.alt]="'pages.gallery.featured.imageAlt' | translate"
      />
      <div class="product-note">
        <strong>{{ 'pages.home.features.items.privacy.title' | translate }}</strong>
        <span>{{ 'pages.home.features.items.privacy.description' | translate }}</span>
      </div>
    </div>
  </div>
</section>

<app-ad-slot />

<section class="feature-editorial">
  <div class="section-heading section-fade">
    <p class="eyebrow">{{ 'pages.home.features.titleLine1' | translate }}</p>
    <h2>{{ 'pages.home.features.titleLine2' | translate }}</h2>
    <p>{{ 'pages.home.features.description' | translate }}</p>
  </div>

  <div class="feature-layout">
    <article class="feature-panel feature-panel-large section-fade">
      <span>01</span>
      <h3>{{ 'pages.home.features.items.voiceCalls.title' | translate }}</h3>
      <p>{{ 'pages.home.features.items.voiceCalls.description' | translate }}</p>
    </article>

    <article class="feature-panel section-fade">
      <span>02</span>
      <h3>{{ 'pages.home.features.items.screenSharing.title' | translate }}</h3>
      <p>{{ 'pages.home.features.items.screenSharing.description' | translate }}</p>
    </article>

    <article class="feature-panel section-fade">
      <span>03</span>
      <h3>{{ 'pages.home.features.items.fileSharing.title' | translate }}</h3>
      <p>{{ 'pages.home.features.items.fileSharing.description' | translate }}</p>
    </article>

    <article class="feature-panel feature-panel-wide section-fade">
      <span>04</span>
      <h3>{{ 'pages.home.features.items.openSource.title' | translate }}</h3>
      <p>{{ 'pages.home.features.items.openSource.description' | translate }}</p>
    </article>

    <article class="feature-panel feature-panel-quiet section-fade">
      <span>05</span>
      <h3>{{ 'pages.home.features.items.free.title' | translate }}</h3>
      <p>{{ 'pages.home.features.items.free.description' | translate }}</p>
    </article>
  </div>
</section>

<app-ad-slot />

<section class="proof-section">
  <div class="proof-image section-fade">
    <img
      ngSrc="/images/screenshots/screenshare_gaming.png"
      width="1280"
      height="720"
      [attr.alt]="'pages.home.gaming.imageAlt' | translate"
    />
  </div>

  <div class="proof-copy section-fade">
    <p class="eyebrow">{{ 'pages.home.gaming.badge' | translate }}</p>
    <h2>
      {{ 'pages.home.gaming.titleLine1' | translate }}
      {{ 'pages.home.gaming.titleLine2' | translate }}
    </h2>
    <p>{{ 'pages.home.gaming.description' | translate }}</p>

    <ul>
      <li>{{ 'pages.home.gaming.bullets.lowLatency' | translate }}</li>
      <li>{{ 'pages.home.gaming.bullets.noiseSuppression' | translate }}</li>
      <li>{{ 'pages.home.gaming.bullets.screenShare' | translate }}</li>
      <li>{{ 'pages.home.gaming.bullets.fileTransfers' | translate }}</li>
    </ul>
  </div>
</section>

<app-ad-slot />

<section class="host-section section-fade">
  <div>
    <p class="eyebrow">{{ 'pages.home.selfHostable.badge' | translate }}</p>
    <h2>
      {{ 'pages.home.selfHostable.titleLine1' | translate }}
      {{ 'pages.home.selfHostable.titleLine2' | translate }}
    </h2>
  </div>
  <div class="host-section-copy">
    <p>{{ 'pages.home.selfHostable.description' | translate }}</p>
    <a
      routerLink="/what-is-toju"
      class="text-link"
    >
      {{ 'common.actions.learnHowItWorks' | translate }}
    </a>
  </div>
</section>

<section class="closing-cta section-fade">
  <p class="eyebrow">Toju</p>
  <h2>{{ 'pages.home.cta.title' | translate }}</h2>
  <p>{{ 'pages.home.cta.description' | translate }}</p>
  <div class="hero-actions">
    @if (downloadUrl()) {
      <a
        [href]="downloadUrl()"
        class="button-primary"
      >
        {{ 'common.actions.downloadFor' | translate:{ os: getDetectedOsLabel() } }}
      </a>
    } @else {
      <a
        routerLink="/downloads"
        class="button-primary"
      >
        {{ 'common.actions.downloadBrand' | translate }}
      </a>
    }
    <a
      href="https://web.toju.app/"
      target="_blank"
      rel="noopener"
      class="button-secondary"
    >
      {{ 'common.actions.tryInBrowser' | translate }}
    </a>
  </div>
</section>