Problem–Solution e-Learning Comparison Section

<section class="sm:py-32 overflow-hidden bg-white pt-24 pb-24 relative">
  <div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 gap-x-8 gap-y-8">

      <!-- Problem Side (Left) -->
      <div
        class="group sm:p-12 overflow-hidden flex flex-col animate-on-scroll bg-gray-50 border-gray-100 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative justify-between"
        style="animation: fadeSlideIn 1s ease-out 0.2s both">

        <!-- Text Content -->
        <div class="relative z-10 mb-10">
          <div
            class="inline-flex items-center gap-2 rounded-full bg-red-50/50 border border-red-100/50 px-3 py-1 text-xs font-medium text-red-600 font-geist mb-6">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-alert-circle">
              <circle cx="12" cy="12" r="10" class=""></circle>
              <line x1="12" x2="12" y1="8" y2="12" class=""></line>
              <line x1="12" x2="12.01" y1="16" y2="16" class=""></line>
            </svg>
            Das Problem
          </div>
          <h2 class="sm:text-4xl leading-[1.1] text-3xl font-semibold text-gray-900 tracking-tight font-geist">
            Im e-Learning sinkt die Lernqualität aufgrund fehlender Betreuung.
          </h2>
          <p class="text-base text-gray-500 font-geist max-w-md mt-4">
            Lernende fühlen sich oft isoliert. Fragen bleiben unbeantwortet und die Motivation sinkt ohne direktes
            Feedback.
          </p>
        </div>

        <!-- Visual: Frustrated/Empty State UI -->
        <div class="relative w-full mt-auto">
          <!-- Window Frame -->
          <div class="relative rounded-xl bg-white border border-gray-200 shadow-sm overflow-hidden select-none">
            <!-- Header -->
            <div class="h-10 border-b border-gray-100 flex items-center px-4 gap-2 bg-gray-50/50">
              <div class="flex gap-1.5">
                <div class="w-2.5 h-2.5 rounded-full bg-gray-200"></div>
                <div class="w-2.5 h-2.5 rounded-full bg-gray-200"></div>
              </div>
            </div>
            <!-- Body -->
            <div class="p-6 h-[240px] flex flex-col relative">
              <!-- Course Content Skeleton -->
              <div class="space-y-3 opacity-30 blur-[1px]">
                <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                <div class="h-4 bg-gray-200 rounded w-1/2"></div>
                <div class="h-32 bg-gray-100 rounded-lg w-full mt-4"></div>
              </div>

              <!-- Floating "No Support" Elements -->
              <div class="flex absolute top-0 right-0 bottom-0 left-0 blur-none items-center justify-center">
                <div class="relative">
                  <!-- Central Icon -->
                  <div
                    class="flex bg-gray-200 w-16 h-16 border-gray-100 border rounded-full relative shadow-sm items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                      data-lucide="book-text" aria-hidden="true" class="lucide lucide-book-text" data-icon-set="lucide"
                      data-icon-replaced="true" style="color: rgb(156, 163, 175);">
                      <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"
                        class=""></path>
                      <path d="M8 11h8" class=""></path>
                      <path d="M8 7h6" class=""></path>
                    </svg>
                  </div>

                  <!-- Question Marks -->
                  <div class="-top-6 -right-8 animate-pulse absolute" style="animation-duration: 3s">
                    <div
                      class="flex text-lg font-bold text-red-300 font-geist bg-red-50 w-10 h-10 border-red-100 border rounded-full items-center justify-center">
                      ?</div>
                  </div>
                  <div class="absolute -bottom-4 -left-10 animate-pulse"
                    style="animation-delay: 1s; animation-duration: 4s">
                    <div
                      class="flex text-sm font-bold text-red-300 font-geist bg-red-100 w-8 h-8 border-gray-100 border rounded-full items-center justify-center">
                      ?</div>
                  </div>

                  <!-- Tooltip -->
                  <div class="absolute top-20 left-1/2 -translate-x-1/2 whitespace-nowrap">
                    <span class="inline-flex items-center ring-inset text-xs font-medium text-gray-500 font-geist bg-gray-100 ring-gray-500/10 ring-1 rounded-md pt-1 pr-2 pb-1 pl-2">Scrollen durch e-Learning</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Solution Side (Right) -->
      <div
        class="group sm:p-12 overflow-hidden flex flex-col animate-on-scroll bg-white border-gray-200 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative shadow-[0_25px_70px_-20px_rgba(59,130,246,0.25),0_15px_40px_-20px_rgba(168,85,247,0.20)] justify-between"
        style="animation: fadeSlideIn 1s ease-out 0.4s both">

        <!-- Subtle Background Glow -->
        <div
          class="absolute -right-20 -top-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl pointer-events-none mix-blend-multiply">
        </div>
        <div
          class="absolute -left-20 bottom-0 w-60 h-60 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none mix-blend-multiply">
        </div>

        <!-- Text Content -->
        <div class="relative z-10 mb-10">
          <div
            class="inline-flex text-xs font-medium text-green-600 font-geist bg-green-50 border-blue-100 border rounded-full mb-6 pt-1 pr-3 pb-1 pl-3 gap-x-2 gap-y-2 items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-sparkles">
              <path
                d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
                class="">
              </path>
            </svg>
            Die Lösung
          </div>
          <h2
            class="sm:text-4xl leading-[1.1] bg-clip-text text-3xl font-semibold text-transparent tracking-tight font-geist bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600">
            Erhöhe die Lernqualität durch einen digitalen Privatlehrer.
          </h2>
          <p class="mt-4 text-base text-gray-500 font-geist max-w-md">
            Sofortige Unterstützung bei Fragen, interaktives Lernen und persönliche Begleitung – rund um die Uhr
            verfügbar.
          </p>
        </div>

        <!-- Visual: Active AI Tutor UI -->
        <div class="relative w-full mt-auto">
          <!-- Window Frame -->
          <div
            class="relative rounded-xl bg-white border border-gray-200 shadow-lg shadow-blue-900/5 overflow-hidden ring-1 ring-black/5">
            <!-- Header -->
            <div class="flex bg-white h-10 border-gray-100 border-b pr-4 pl-4 items-center justify-between">
              <div class="flex gap-1.5">
                <div class="w-2.5 h-2.5 rounded-full bg-red-400/80"></div>
                <div class="w-2.5 h-2.5 rounded-full bg-amber-400/80"></div>
                <div class="w-2.5 h-2.5 rounded-full bg-emerald-400/80"></div>
              </div>
              <div class="flex items-center gap-1.5">
                <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
                <span class="text-[10px] font-medium text-gray-400 font-geist uppercase tracking-wider">AI Tutor Online</span>
              </div>
            </div>
            <!-- Body -->
            <div
              class="flex flex-col bg-gradient-to-b from-white to-gray-50/50 h-[240px] pt-6 pr-6 pb-6 pl-6 relative shadow-inner">

              <!-- Chat Interaction -->
              <div class="flex flex-col gap-4 w-full max-w-[90%] mx-auto">
                <!-- User Message -->
                <div class="flex items-end gap-2 self-end max-w-[85%]">
                  <div
                    class="bg-gray-100 text-gray-700 px-4 py-2.5 rounded-2xl rounded-br-sm text-sm font-geist shadow-sm">
                    Kannst du das Beispiel nochmal erklären?
                  </div>
                  <div class="w-6 h-6 rounded-full bg-gray-200 border border-white shadow-sm flex-shrink-0"></div>
                </div>

                <!-- AI Response -->
                <div class="flex items-start gap-3 max-w-[90%] mt-1">
                  <div
                    class="flex shadow-blue-500/20 flex-shrink-0 bg-gradient-to-br from-blue-500 to-indigo-600 w-8 h-8 rounded-full shadow-md items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="lucide lucide-bot text-white">
                      <path d="M12 8V4H8" class=""></path>
                      <rect width="16" height="12" x="4" y="8" rx="2" class=""></rect>
                      <path d="M2 14h2" class=""></path>
                      <path d="M20 14h2" class=""></path>
                      <path d="M15 13v2" class=""></path>
                      <path d="M9 13v2" class=""></path>
                    </svg>
                  </div>
                  <div class="flex flex-col gap-1">
                    <div
                      class="bg-white border border-blue-100/50 text-gray-800 px-4 py-3 rounded-2xl rounded-tl-sm text-sm font-geist shadow-[0_2px_8px_-2px_rgba(0,0,0,0.08)]">
                      <p class="">Natürlich! Stell es dir wie einen persönlichen Coach vor, der immer für dich da ist.
                      </p>
                    </div>
                    <!-- Typing Indicator / Follow up -->
                    <div class="flex items-center gap-2 mt-1">
                      <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-600/20 font-geist">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                        Verstanden
                      </span>
                      <span class="inline-flex items-center gap-1 rounded-full bg-white px-2 py-0.5 text-[10px] font-medium text-gray-500 ring-1 ring-inset ring-gray-200 font-geist hover:bg-gray-50 cursor-pointer transition">
                        Mehr Details...
                      </span>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>