<div class="min-h-screen pt-32 pb-20">
  <!-- Hero -->
  <section class="container mx-auto px-6 mb-24">
    <div class="max-w-3xl mx-auto text-center">
      <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.whatIsToju.hero.badge' | translate }}
      </div>
      <h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">{{ 'pages.whatIsToju.hero.titlePrefix' | translate }} <span class="gradient-text">{{ 'common.brand' | translate }}</span>?</h1>
      <p class="text-lg text-muted-foreground leading-relaxed">
        {{ 'pages.whatIsToju.hero.description' | translate }}
      </p>
    </div>
  </section>

  <app-ad-slot />

  <!-- How it works -->
  <section class="container mx-auto px-6 mb-24">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center section-fade">
        {{ 'pages.whatIsToju.howItWorks.titlePrefix' | translate }} <span class="gradient-text">{{ 'pages.whatIsToju.howItWorks.titleHighlight' | translate }}</span>?
      </h2>

      <div class="grid gap-8">
        <!-- Step 1 -->
        <div class="section-fade relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 md:p-10">
          <div class="flex items-start gap-6">
            <div
              class="flex-shrink-0 w-12 h-12 rounded-full bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400 font-bold text-lg"
            >
              1
            </div>
            <div>
              <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.whatIsToju.steps.one.title' | translate }}</h3>
              <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.whatIsToju.steps.one.description' | translate"></p>
            </div>
          </div>
        </div>

        <!-- Step 2 -->
        <div class="section-fade relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 md:p-10">
          <div class="flex items-start gap-6">
            <div
              class="flex-shrink-0 w-12 h-12 rounded-full bg-violet-500/10 border border-violet-500/20 flex items-center justify-center text-violet-400 font-bold text-lg"
            >
              2
            </div>
            <div>
              <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.whatIsToju.steps.two.title' | translate }}</h3>
              <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.whatIsToju.steps.two.description' | translate"></p>
            </div>
          </div>
        </div>

        <!-- Step 3 -->
        <div class="section-fade relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 md:p-10">
          <div class="flex items-start gap-6">
            <div
              class="flex-shrink-0 w-12 h-12 rounded-full bg-pink-500/10 border border-pink-500/20 flex items-center justify-center text-pink-400 font-bold text-lg"
            >
              3
            </div>
            <div>
              <h3 class="text-xl font-semibold text-foreground mb-3">{{ 'pages.whatIsToju.steps.three.title' | translate }}</h3>
              <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.whatIsToju.steps.three.description' | translate"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <app-ad-slot />

  <!-- Why designed this way -->
  <section class="container mx-auto px-6 mb-24">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center section-fade">
        {{ 'pages.whatIsToju.whyDesigned.titlePrefix' | translate }} <span class="gradient-text">{{ 'pages.whatIsToju.whyDesigned.titleHighlight' | translate }}</span> {{ 'pages.whatIsToju.whyDesigned.titleSuffix' | translate }}
      </h2>

      <div class="grid md:grid-cols-2 gap-8">
        <div class="section-fade rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8">
          <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center mb-4">
            <svg
              class="w-5 h-5 text-emerald-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
              />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-foreground mb-3">{{ 'pages.whatIsToju.benefits.privacyArchitecture.title' | translate }}</h3>
          <p class="text-muted-foreground leading-relaxed text-sm">
            {{ 'pages.whatIsToju.benefits.privacyArchitecture.description' | translate }}
          </p>
        </div>

        <div class="section-fade rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8">
          <div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-4">
            <svg
              class="w-5 h-5 text-blue-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 10V3L4 14h7v7l9-11h-7z"
              />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-foreground mb-3">{{ 'pages.whatIsToju.benefits.performance.title' | translate }}</h3>
          <p class="text-muted-foreground leading-relaxed text-sm">
            {{ 'pages.whatIsToju.benefits.performance.description' | translate }}
          </p>
        </div>

        <div class="section-fade rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8">
          <div class="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center mb-4">
            <svg
              class="w-5 h-5 text-amber-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-foreground mb-3">{{ 'pages.whatIsToju.benefits.sustainable.title' | translate }}</h3>
          <p class="text-muted-foreground leading-relaxed text-sm">
            {{ 'pages.whatIsToju.benefits.sustainable.description' | translate }}
          </p>
        </div>

        <div class="section-fade rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8">
          <div class="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center mb-4">
            <svg
              class="w-5 h-5 text-purple-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-foreground mb-3">{{ 'pages.whatIsToju.benefits.independence.title' | translate }}</h3>
          <p class="text-muted-foreground leading-relaxed text-sm">
            {{ 'pages.whatIsToju.benefits.independence.description' | translate }}
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ-style section -->
  <section class="container mx-auto px-6 mb-24">
    <div class="max-w-3xl mx-auto section-fade">
      <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center">{{ 'pages.whatIsToju.faq.titlePrefix' | translate }} <span class="gradient-text">{{ 'pages.whatIsToju.faq.titleHighlight' | translate }}</span></h2>

      <div class="space-y-6">
        <div class="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-6 md:p-8">
          <h3 class="text-lg font-semibold text-foreground mb-2">{{ 'pages.whatIsToju.faq.items.free.question' | translate }}</h3>
          <p class="text-muted-foreground leading-relaxed text-sm">
            {{ 'pages.whatIsToju.faq.items.free.answer' | translate }}
          </p>
        </div>

        <div class="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-6 md:p-8">
          <h3 class="text-lg font-semibold text-foreground mb-2">{{ 'pages.whatIsToju.faq.items.technical.question' | translate }}</h3>
          <p class="text-muted-foreground leading-relaxed text-sm">
            {{ 'pages.whatIsToju.faq.items.technical.answer' | translate }}
          </p>
        </div>

        <div class="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-6 md:p-8">
          <h3 class="text-lg font-semibold text-foreground mb-2">{{ 'pages.whatIsToju.faq.items.selfHost.question' | translate }}</h3>
          <p class="text-muted-foreground leading-relaxed text-sm">
            {{ 'pages.whatIsToju.faq.items.selfHost.answer' | translate }}
          </p>
        </div>

        <div class="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-6 md:p-8">
          <h3 class="text-lg font-semibold text-foreground mb-2">{{ 'pages.whatIsToju.faq.items.safe.question' | translate }}</h3>
          <p class="text-muted-foreground leading-relaxed text-sm">
            {{ 'pages.whatIsToju.faq.items.safe.answer' | translate }}
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="container mx-auto px-6">
    <div
      class="section-fade max-w-2xl mx-auto text-center rounded-2xl border border-purple-500/20 bg-gradient-to-br from-purple-950/20 to-violet-950/20 p-12"
    >
      <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">{{ 'pages.whatIsToju.cta.title' | translate }}</h2>
      <p class="text-muted-foreground mb-8">{{ 'pages.whatIsToju.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.downloadBrand' | 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.openInBrowser' | translate }}
        </a>
      </div>
    </div>
  </section>
</div>
