Real-time Analysis Dashboard & Live Coaching Component

<div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
  <div
    class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-gray-800 pb-5">
    <h3 class="text-2xl text-white font-semibold tracking-tight"
      style="font-family: 'Space Grotesk', Inter, sans-serif;">Real-time Analysis Engine</h3>
    <span class="inline-flex items-center gap-2 text-xs text-gray-300 bg-gray-800/50 border border-gray-700 rounded-full px-2.5 py-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" class=""><path d="M12 20v-6l4-2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
      Live coaching
    </span>
  </div>

  <!-- Main showcase area -->
  <div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Left: Live analysis display -->
    <div class="lg:col-span-2 overflow-hidden bg-gray-900/60 border-gray-800 border rounded-2xl">
      <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="text-sm font-medium text-gray-200">Live Analysis Dashboard</span>
          <span class="inline-flex items-center gap-1.5 text-[11px] text-emerald-300 bg-emerald-500/10 border border-emerald-500/20 rounded-full px-2 py-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" class=""><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
            Processing
          </span>
        </div>
        <div class="text-right">
          <div class="text-lg font-semibold text-white">8.4/10</div>
          <div class="text-[11px] text-gray-400">Current Score</div>
        </div>
      </div>

      <!-- Real-time metrics grid -->
      <div class="p-4 space-y-4">
        <div class="grid grid-cols-3 gap-4">
          <div class="bg-gray-900/70 border border-gray-800 rounded-lg p-3">
            <div class="text-[11px] text-gray-400 mb-2">Structure &amp; Flow</div>
            <div class="flex items-center gap-2 mb-1">
              <div class="text-lg font-semibold text-white">85%</div>
              <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                <div class="h-2 bg-emerald-400/80 rounded-full transition-all duration-300" style="width: 85%"></div>
              </div>
            </div>
            <div class="text-[10px] text-emerald-300">STAR method detected</div>
            <div class="text-[10px] text-gray-500 mt-1">Clear situation setup ✓</div>
          </div>

          <div class="bg-gray-900/70 border border-gray-800 rounded-lg p-3">
            <div class="text-[11px] text-gray-400 mb-2">Delivery Quality</div>
            <div class="flex items-center gap-2 mb-1">
              <div class="text-lg font-semibold text-white">78%</div>
              <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                <div class="h-2 bg-blue-400/80 rounded-full transition-all duration-300" style="width: 78%"></div>
              </div>
            </div>
            <div class="text-[10px] text-blue-300">Good pace, clear tone</div>
            <div class="text-[10px] text-amber-300 mt-1">⚠ 3 filler words detected</div>
          </div>

          <div class="bg-gray-900/70 border border-gray-800 rounded-lg p-3">
            <div class="text-[11px] text-gray-400 mb-2">Impact &amp; Metrics</div>
            <div class="flex items-center gap-2 mb-1">
              <div class="text-lg font-semibold text-white">92%</div>
              <div class="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                <div class="h-2 bg-purple-400/80 rounded-full transition-all duration-300" style="width: 92%"></div>
              </div>
            </div>
            <div class="text-[10px] text-purple-300">Quantified results</div>
            <div class="text-[10px] text-gray-500 mt-1">30% improvement cited</div>
          </div>
        </div>

        <!-- Live coaching tips -->
        <div class="bg-gray-900/70 border border-gray-800 rounded-lg p-4">
          <div class="flex items-center justify-between mb-3">
            <div class="text-sm text-gray-300 font-medium">Live Coaching Tips</div>
            <span class="text-[10px] text-blue-300 bg-blue-500/10 border border-blue-500/20 rounded px-2 py-0.5">Real-time</span>
          </div>

          <div class="space-y-3">
            <div class="flex items-start gap-3 p-2 bg-emerald-500/5 border border-emerald-500/20 rounded-lg">
              <div class="w-2 h-2 rounded-full bg-emerald-400 mt-2 flex-shrink-0"></div>
              <div class="flex-1">
                <div class="text-xs text-emerald-300 font-medium">Great opening structure</div>
                <div class="text-[11px] text-gray-400 mt-1">You've clearly set the situation. Now dive into the specific
                  challenge you faced.</div>
              </div>
            </div>

            <div class="flex items-start gap-3 p-2 bg-blue-500/5 border border-blue-500/20 rounded-lg">
              <div class="w-2 h-2 rounded-full bg-blue-400 mt-2 flex-shrink-0"></div>
              <div class="flex-1">
                <div class="text-xs text-blue-300 font-medium">Add stakeholder details</div>
                <div class="text-[11px] text-gray-400 mt-1">Mention who you influenced and your approach to gain their
                  buy-in.</div>
              </div>
            </div>

            <div class="flex items-start gap-3 p-2 bg-amber-500/5 border border-amber-500/20 rounded-lg">
              <div class="w-2 h-2 rounded-full bg-amber-400 mt-2 flex-shrink-0"></div>
              <div class="flex-1">
                <div class="text-xs text-amber-300 font-medium">Watch pacing</div>
                <div class="text-[11px] text-gray-400 mt-1">You're speaking a bit fast. Take a breath before your next
                  point.</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Analysis timeline -->
        <div class="bg-gray-900/70 border border-gray-800 rounded-lg p-4">
          <div class="text-sm text-gray-300 font-medium mb-3">Response Analysis Timeline</div>
          <div class="space-y-2">
            <div class="flex items-center gap-3">
              <div class="text-[10px] text-gray-500 w-12">0:00-0:15</div>
              <div class="flex-1 h-1 bg-gray-800 rounded-full overflow-hidden">
                <div class="h-1 bg-emerald-400/80 rounded-full" style="width: 90%"></div>
              </div>
              <div class="text-[10px] text-emerald-300">Strong setup</div>
            </div>
            <div class="flex items-center gap-3">
              <div class="text-[10px] text-gray-500 w-12">0:15-0:45</div>
              <div class="flex-1 h-1 bg-gray-800 rounded-full overflow-hidden">
                <div class="h-1 bg-blue-400/80 rounded-full" style="width: 75%"></div>
              </div>
              <div class="text-[10px] text-blue-300">Good detail</div>
            </div>
            <div class="flex items-center gap-3">
              <div class="text-[10px] text-gray-500 w-12">0:45-1:20</div>
              <div class="flex-1 h-1 bg-gray-800 rounded-full overflow-hidden">
                <div class="h-1 bg-purple-400/80 rounded-full" style="width: 95%"></div>
              </div>
              <div class="text-[10px] text-purple-300">Excellent impact</div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex border-gray-800 border-t pt-3 pr-4 pb-3 pl-4 items-center justify-between">
        <div class="text-[11px] text-gray-400">Analyzing in real-time • 1min 23s</div>
        <span class="inline-flex gap-1.5 text-[11px] text-gray-200 bg-emerald-500/10 border-emerald-500/20 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3 items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" class=""><path d="M12 20v-6l4-2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          Live feedback active
        </span>
      </div>
    </div>

    <!-- Right: Feature details -->
    <div class="space-y-4">
      <!-- How it works -->
      <div class="rounded-2xl bg-gray-900/60 border border-gray-800 p-4">
        <div class="text-sm font-medium text-gray-200 mb-3">How Real-time Analysis Works</div>
        <div class="space-y-3">
          <div class="flex items-start gap-2">
            <div
              class="w-5 h-5 rounded-full bg-blue-500/20 border border-blue-500/30 grid place-items-center flex-shrink-0 mt-0.5">
              <div class="w-2 h-2 bg-blue-400 rounded-full"></div>
            </div>
            <div class="">
              <div class="text-xs text-gray-300">Speech Recognition</div>
              <div class="text-[11px] text-gray-500 mt-1">Converts speech to text with 95%+ accuracy</div>
            </div>
          </div>

          <div class="flex items-start gap-2">
            <div
              class="w-5 h-5 rounded-full bg-purple-500/20 border border-purple-500/30 grid place-items-center flex-shrink-0 mt-0.5">
              <div class="w-2 h-2 bg-purple-400 rounded-full"></div>
            </div>
            <div class="">
              <div class="text-xs text-gray-300">Content Analysis</div>
              <div class="text-[11px] text-gray-500 mt-1">Evaluates structure, clarity, and impact</div>
            </div>
          </div>

          <div class="flex items-start gap-2">
            <div
              class="w-5 h-5 rounded-full bg-emerald-500/20 border border-emerald-500/30 grid place-items-center flex-shrink-0 mt-0.5">
              <div class="w-2 h-2 bg-emerald-400 rounded-full"></div>
            </div>
            <div class="">
              <div class="text-xs text-gray-300">Live Coaching</div>
              <div class="text-[11px] text-gray-500 mt-1">Provides instant tips and suggestions</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Key benefits -->
      <div class="rounded-2xl bg-gray-900/60 border border-gray-800 p-4">
        <div class="text-sm font-medium text-gray-200 mb-3">Key Benefits</div>
        <div class="space-y-2">
          <div class="flex items-center gap-2 text-xs text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="1.5" class="">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Instant feedback during practice
          </div>
          <div class="flex items-center gap-2 text-xs text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="1.5" class="">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            STAR method structure detection
          </div>
          <div class="flex items-center gap-2 text-xs text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="1.5" class="">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Filler word and pacing alerts
          </div>
          <div class="flex items-center gap-2 text-xs text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="1.5" class="">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Impact and metrics validation
          </div>
        </div>
      </div>

      <!-- Technical specs -->
      <div class="rounded-2xl bg-gray-900/60 border border-gray-800 p-4">
        <div class="text-sm font-medium text-gray-200 mb-3">Technical Details</div>
        <div class="space-y-2 text-xs text-gray-400">
          <div class="flex justify-between">
            <span class="">Processing Latency</span>
            <span class="text-emerald-300">&lt;200ms</span>
          </div>
          <div class="flex justify-between">
            <span class="">Accuracy Rate</span>
            <span class="text-blue-300">95%+</span>
          </div>
          <div class="flex justify-between">
            <span>Analysis Depth</span>
            <span class="text-purple-300">12 factors</span>
          </div>
          <div class="flex justify-between">
            <span class="">Language Support</span>
            <span class="text-gray-300">English</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bottom section -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 border-gray-800 border-t mt-8 pt-6">
    <div class="">
      <h4 class="text-lg font-medium text-white tracking-tight">Instant Feedback</h4>
      <p class="mt-2 text-sm text-gray-400">Get coaching tips as you speak, helping you adjust your response in
        real-time.</p>
    </div>
    <div class="">
      <h4 class="text-lg font-medium tracking-tight text-white">Smart Detection</h4>
      <p class="mt-2 text-sm text-gray-400">AI recognizes story structure, metrics, and competency signals
        automatically.</p>
    </div>
    <div class="">
      <h4 class="text-lg font-medium tracking-tight text-white">Detailed Scoring</h4>
      <p class="mt-2 text-sm text-gray-400">Multi-factor analysis provides granular feedback on every aspect of your
        answer.</p>
    </div>
  </div>

  <div class="mt-6 pt-6 border-t border-gray-800">
    <a href="#deep-dive" class="inline-flex items-center gap-2 text-xs font-medium text-gray-100 hover:text-gray-300">
      Try real-time analysis now
      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24"
        stroke="currentColor" stroke-width="1.5" class="">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
    </a>
  </div>
</div>