Circadian Sync Feature Section with UI Demo

<section class="z-20 w-full max-w-7xl mr-auto ml-auto pt-24 pr-6 pb-24 pl-6 relative">

  <!-- Feature 1: The Engine -->
  <div
    class="animate-on-scroll relative overflow-hidden rounded-[2.5rem] bg-zinc-900/30 border border-white/5 backdrop-blur-xl mb-6">
    <div class="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-transparent opacity-50 pointer-events-none">
    </div>

    <div class="grid lg:grid-cols-2 gap-0 gap-x-0 gap-y-0">
      <div class="md:p-16 flex flex-col z-10 pt-8 pr-8 pb-8 pl-8 relative justify-center">
        <div
          class="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-500/20 to-orange-600/10 border border-amber-500/20 flex items-center justify-center mb-6 text-amber-500">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
            class="iconify iconify--lucide">
            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
              <path d="M12 2v2"></path>
              <path d="m4.93 4.93l1.41 1.41"></path>
              <path d="M20 12h2"></path>
              <path d="m19.07 4.93l-1.41 1.41"></path>
              <path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"></path>
              <path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"></path>
            </g>
          </svg>
        </div>
        <h2 class="text-3xl md:text-4xl font-semibold text-white tracking-tight font-manrope mb-6">Circadian Sync Engine
        </h2>
        <p class="text-lg text-zinc-400 font-inter leading-relaxed mb-6">
          Morningside calculates your optimal wake-up window based on your sleep cycles and biometrics. Stop waking up
          groggy; start waking up ready.
        </p>
        <ul class="space-y-3">
          <li class="flex items-center gap-3 text-sm text-zinc-300">
            <svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Solar-aligned wake times
          </li>
          <li class="flex items-center gap-3 text-sm text-zinc-300">
            <svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            Core temperature tracking
          </li>
        </ul>
      </div>

      <!-- Code/Visual Side -->
      <div class="min-h-[400px] overflow-hidden font-geist bg-[#0A0A0A] border-white/5 border-l relative">


        <!-- Floating Widget -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-72">
          <div class="bg-zinc-900/90 backdrop-blur-xl rounded-2xl border border-white/10 shadow-2xl p-5">
            <div class="flex items-center justify-between mb-4">
              <span class="text-xs font-semibold uppercase tracking-wider text-zinc-500">Wake Window</span>
              <div
                class="px-2 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[10px] text-emerald-400 font-mono">
                OPTIMAL</div>
            </div>
            <div class="flex items-baseline gap-1 mb-2">
              <span class="text-3xl font-medium text-white font-manrope tracking-tight">06:45</span>
              <span class="text-sm text-zinc-500 font-medium">AM</span>
            </div>
            <div class="w-full h-12 relative mt-4">
              <!-- Wave Visualization -->
              <svg class="w-full h-full" viewBox="0 0 100 40" preserveAspectRatio="none">
                <path d="M0 35 Q 25 35 50 10 T 100 35" fill="none" stroke="url(#waveGradient)" stroke-width="2"></path>
                <defs>
                  <linearGradient id="waveGradient" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0%" stop-color="#27272a"></stop>
                    <stop offset="50%" stop-color="#f59e0b"></stop>
                    <stop offset="100%" stop-color="#27272a"></stop>
                  </linearGradient>
                </defs>
              </svg>
              <div class="absolute top-0 left-1/2 -translate-x-1/2 w-0.5 h-full bg-amber-500/50"></div>
            </div>
            <div class="text-center mt-2">
              <p class="text-[10px] text-zinc-400">High alertness projected at 07:15</p>
            </div>
          </div>
        </div>
        <div class="select-none opacity-40 pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0">
          <div class="flex gap-2 mb-4">
            <div class="w-3 h-3 rounded-full bg-zinc-800"></div>
            <div class="w-3 h-3 rounded-full bg-zinc-800"></div>
            <div class="w-3 h-3 rounded-full bg-zinc-800"></div>
          </div>
          <div class="space-y-2 text-xs md:text-sm font-mono text-zinc-600">
            <p><span class="text-amber-600">const</span> <span class="text-zinc-300">circadianState</span> =
              <span class="text-amber-600">await</span> Biometrics.<span class="text-orange-400">analyze</span>({
            </p>
            <p class="pl-4">hrv: <span class="text-emerald-500">true</span>,</p>
            <p class="pl-4">remCycles: <span class="text-emerald-500">last(4)</span>,</p>
            <p class="pl-4">sunriseTime: <span class="text-orange-300">"06:42:00"</span></p>
            <p class="">});</p>

            <p class=""><span class="text-zinc-500">// Calculate optimal wake window</span></p>
            <p><span class="text-amber-600">return</span>
              Window.<span class="text-orange-400">create</span>(circadianState);</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Feature 2: Privacy -->
    <div
      class="animate-on-scroll relative overflow-hidden rounded-[2rem] bg-zinc-900/20 border border-white/5 backdrop-blur-md group hover:bg-zinc-900/40 transition-colors duration-500">
      <div class="h-64 flex items-center justify-center relative bg-gradient-to-b from-white/[0.02] to-transparent">
        <div class="relative w-32 h-32">
          <div
            class="absolute inset-0 rounded-full border border-dashed border-white/10 animate-[spin_10s_linear_infinite]">
          </div>
          <div
            class="absolute inset-4 rounded-full border border-dashed border-white/10 animate-[spin_15s_linear_infinite_reverse]">
          </div>
          <div class="absolute inset-0 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
              class="iconify text-white iconify--lucide">
              <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
                <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
              </g>
            </svg>
          </div>
        </div>
      </div>
      <div class="p-8">
        <h3 class="text-xl font-semibold text-white tracking-tight font-manrope mb-3">Local Intelligence</h3>
        <p class="text-zinc-400 text-sm leading-relaxed">
          Your sleep data and morning routine stay on your device. We use on-device ML to process insights, ensuring
          your privacy is never compromised.
        </p>
      </div>
    </div>

    <!-- Feature 3: Routine -->
    <div
      class="animate-on-scroll relative overflow-hidden rounded-[2rem] bg-zinc-900/20 border border-white/5 backdrop-blur-md group hover:bg-zinc-900/40 transition-colors duration-500">
      <div
        class="h-64 flex items-center justify-center relative bg-gradient-to-b from-white/[0.02] to-transparent px-12">
        <div class="w-full space-y-3">
          <div
            class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 border border-white/5 transform translate-y-2 opacity-60 scale-95">
            <div class="w-4 h-4 rounded-full border border-zinc-500"></div>
            <div class="h-2 w-24 bg-zinc-700 rounded-full"></div>
          </div>
          <div
            class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800 border border-amber-500/30 shadow-lg shadow-amber-900/10">
            <div class="w-4 h-4 rounded-full bg-amber-500 flex items-center justify-center"><svg
                class="w-2.5 h-2.5 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
              </svg></div>
            <div class="h-2 w-32 bg-zinc-200 rounded-full"></div>
          </div>
          <div
            class="flex items-center gap-3 p-3 rounded-lg bg-zinc-800/50 border border-white/5 transform -translate-y-2 opacity-60 scale-95">
            <div class="w-4 h-4 rounded-full border border-zinc-500"></div>
            <div class="h-2 w-20 bg-zinc-700 rounded-full"></div>
          </div>
        </div>
      </div>
      <div class="p-8">
        <h3 class="text-xl font-semibold text-white tracking-tight font-manrope mb-3">Habit Stacking</h3>
        <p class="text-zinc-400 text-sm leading-relaxed">
          Build momentum with smart checklists that adapt to your energy levels. Complete low-friction tasks to trigger
          a flow state.
        </p>
      </div>
    </div>
  </div>
</section>