@if (cookieConsentOpen) {
  <div id="cookieConsent" tuiCardLarge>
    <h1>
      <tui-icon icon="@tui.cookie"></tui-icon>
      {{'home.cookies'|translate}}
    </h1>

    <p>{{'home.cookiesDesc'|translate}}</p>

    <button (click)="consent()" tuiButton iconStart="@tui.check">
      {{'home.understood'|translate}}
    </button>
  </div>
}

<ng-template [(tuiDialog)]="androidBetaTestDialogOpen"
             [tuiDialogOptions]="{label: translateService.instant('home.requestAlphaAccess'), size: 's'}">
  <span>{{'home.joinGoogleGroupWhy'|translate}}</span>

  <button (click)="enterGGroup()" style="width: 100%; margin-top: 10px" tuiButton iconStart="@tui.users">{{'home.joinGoogleGroup'|translate}}</button>

</ng-template>

<ng-template [(tuiDialog)]="appleBetaTestDialogOpen"
             [tuiDialogOptions]="{label: translateService.instant('home.requestAlphaAccess'), size: 's'}">
  <span>{{'home.testFlightDesc'|translate}}</span>

  <button (click)="openTestFlight()" style="width: 100%; margin-top: 10px" tuiButton >
    <i class="fa-brands fa-apple" style="font-size: 25px"></i>
    {{'home.testFlight'|translate}}
  </button>
</ng-template>

<ng-template [(tuiDialog)]="msBetaTestDialogOpen"
             [tuiDialogOptions]="{label: translateService.instant('home.requestAlphaAccess'), size: 's'}">
  <span>{{'home.microsoftStoreDesc'|translate}}</span>

  <button (click)="openMsStore()" style="width: 100%; margin-top: 10px" tuiButton >
    <i class="fa-brands fa-microsoft" style="font-size: 25px"></i>
    {{'home.microsoftStore'|translate}}
  </button>
</ng-template>

<main>
  <section id="hero">
    <div id="imgScroller" [style]="'opacity:'+scrollerOpacity">
      <img [src]="'/images/homepage/new_customi_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
      <img [src]="'/images/homepage/new_dm_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
      <img [src]="'/images/homepage/new_network_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
      <img [src]="'/images/homepage/new_network_discovery_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
      <img [src]="'/images/homepage/new_picture_stats_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
      <img [src]="'/images/homepage/new_pictures_'+theme+'.png'" alt="ARYA_BLUE_IMAGES">
    </div>

    <div id="introducer">
      <svg viewBox="0 0 350 60" width="1000px" height="200px">
        <text class="logo" x="50%" y="80%" text-anchor="middle">Chatenium</text>
      </svg>

      <div id="quickFeatures">
        <h1>
          {{ 'aChatProgram'|translate }}
        </h1>

        <p class="chtn_desc">
          {{ 'whatIsChtn'|translate }}
        </p>

        <button style="width: 350px" routerLink="/chat" tuiButton iconStart="@tui.globe">
          {{'home.enterChtnOnWeb'|translate}}
        </button>

        <button style="width: 350px" tuiButton appearance="secondary" (click)="openGit()">
          <fa-icon [icon]="faGitAlt" style="font-size: 25px; display: flex; justify-content: center; width: 10px"></fa-icon>
          Git
        </button>

        <button style="width: 350px" appearance="secondary" (click)="openRoadmap()" tuiButton iconStart="@tui.chart-no-axes-gantt">
          Roadmap
        </button>

        <p style="display: flex; align-items: center; gap: 5px;">
          <tui-icon icon="@tui.mouse"></tui-icon>
          {{ 'scrollDownForMore'|translate }}
        </p>
      </div>
    </div>
  </section>

  <section class="detailedFeature">
    <div class="style">
      <h1>{{ 'home.chtnIs'|translate }} <span style="color: var(--tui-status-positive)"><tui-icon icon="@tui.lock"></tui-icon>
        {{ 'home.secure'|translate }}</span></h1>
      <p>{{ 'home.secureDesc'|translate }}</p>

      <div class="cardList">
        <div tuiCardLarge>
          <tui-icon icon="@tui.file"></tui-icon>

          <h2>{{ 'home.secureCdn'|translate }}</h2>
          <p>{{ 'home.secureCdnDesc'|translate }}</p>
        </div>

        <div tuiCardLarge>
          <tui-icon icon="@tui.message-circle"></tui-icon>

          <h2>{{ 'home.encryptedText'|translate }}</h2>
          <p>{{ 'home.encryptedTextDesc'|translate }}</p>
        </div>

        <div tuiCardLarge>
          <tui-icon icon="@tui.shredder"></tui-icon>

          <h2>{{ 'home.zeroDataCollection'|translate }}</h2>
          <p>{{ 'home.zeroDataCollectionDesc'|translate }}</p>
        </div>

        <div tuiCardLarge>
          <tui-icon icon="@tui.phone"></tui-icon>

          <h2>{{ 'home.secureCalling'|translate }}</h2>
          <p>{{ 'home.secureCallingDesc'|translate }}</p>
        </div>

        <div tuiCardLarge>
          <tui-icon icon="@tui.footprints"></tui-icon>

          <h2>{{ 'home.zeroDigitalFootprint'|translate }}</h2>
          <p>{{ 'home.zeroDigitalFootprintDesc'|translate }}</p>
        </div>
      </div>
    </div>
  </section>

  <section class="detailedFeature" id="platformList" style="margin-bottom: 5%;">
    <div class="style">
      <h1>{{ 'home.adaptsTo'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.heart"></tui-icon>
        {{ 'home.you'|translate }}</span></h1>
      <p>{{ 'home.adaptsToYouDesc'|translate }}</p>

      <div class="cardList">
        <div class="disabled card">
          <fa-icon [icon]="faLinux"></fa-icon>
          <h2>Linux</h2>
          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

        <div class="disabled card">
          <fa-icon [icon]="faGoogle"></fa-icon>
          <h2>Google</h2>
          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

        <div class="disabled card">
          <fa-icon [icon]="faApple"></fa-icon>
          <h2>Apple</h2>
          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

        <div class="disabled card">
          <fa-icon [icon]="faMicrosoft"></fa-icon>
          <h2>Microsoft</h2>
          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>
      </div>
    </div>
  </section>
</main>

<footer>
  <h1>Chatenium</h1>
  <span>2026 &copy;</span>

  <div style="display: flex; gap: 10px; margin-top: 10px;">
    <button routerLink="/privacy" tuiButton iconStart="@tui.lock">
      {{'home.privacyPolicy'|translate}}
    </button>

    <button routerLink="/tos" tuiButton iconStart="@tui.scroll">
      {{'home.tos'|translate}}
    </button>

    <button (click)="openHelp()" tuiButton iconStart="@tui.badge-question-mark">
      {{'home.help'|translate}}
    </button>

    <button (click)="openBlog()" tuiButton iconStart="@tui.scroll-text">
      {{'home.blog'|translate}}
    </button>

    <button (click)="openAPISpecs()" tuiButton iconStart="@tui.braces">
      {{'home.apiSpecs'|translate}}
    </button>
  </div>
</footer>