Brutalism_Rainbow_Medical_Comments_Section

<section class="p-4 sm:p-8 md:p-12 min-h-screen bg-neutral-50 dark:bg-neutral-900 font-mono text-neutral-900 dark:text-neutral-50">

  <!-- Brutalist Rainbow Gradient Header -->
  <div class="mb-8 md:mb-12 border-4 border-neutral-900 dark:border-neutral-50 p-4 sm:p-6 md:p-8 
              bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
              dark:from-red-700 dark:via-yellow-700 dark:to-green-700 
              shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)] 
              relative overflow-hidden group">
    <h1 class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tighter uppercase relative z-10 text-neutral-900 dark:text-neutral-50">
      Patient Feedback Terminal
    </h1>
    <p class="text-sm sm:text-md md:text-lg mt-2 relative z-10 text-neutral-900 dark:text-neutral-50">
      Comments Interface // Unauthorized Access Will Be Logged
    </p>
    <!-- Glitch Effect -->
    <div class="absolute inset-0 bg-gradient-to-l from-blue-500 via-indigo-500 to-purple-500 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

  <!-- New Comment Submission Area -->
  <div class="mb-10 p-6 sm:p-8 border-4 border-neutral-900 dark:border-neutral-50 
              bg-neutral-200 dark:bg-neutral-800 
              shadow-[6px_6px_0_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_0_rgba(255,255,255,1)]">
    <h2 class="text-xl sm:text-2xl font-bold mb-4 uppercase">Transmit New Datum</h2>
    <form>
      <div class="mb-4">
        <label for="comment-author" class="block text-sm font-bold mb-2">ATTENDEE ID:</label>
        <input type="text" id="comment-author" placeholder="[ANONYMOUS]" class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
      </div>
      <div class="mb-4">
        <label for="comment-text" class="block text-sm font-bold mb-2">OBSERVATION LOG:</label>
        <textarea id="comment-text" rows="5" placeholder="State your findings..." class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-lime-400"></textarea>
      </div>
      <div class="flex flex-wrap gap-4 justify-between items-center">
        <button type="submit" class="px-6 py-3 
              bg-gradient-to-r from-purple-500 to-indigo-500 
              dark:from-purple-700 dark:to-indigo-700 
              text-neutral-50 dark:text-neutral-900 
              font-bold uppercase text-lg 
              border-2 border-neutral-900 dark:border-neutral-50 
              shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,1)] 
              hover:shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[2px_2px_0_0_rgba(255,255,255,1)] 
              transition-all duration-150 relative group overflow-hidden">
          <span class="relative z-10">INITIATE TRANSMISSION</span>
          <div class="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-600 dark:to-orange-600 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </button>
        <div class="flex items-center space-x-2">
          <input type="checkbox" id="anonymous" class="h-5 w-5 border-2 border-neutral-900 dark:border-neutral-50 accent-red-500 dark:accent-red-700">
          <label for="anonymous" class="text-sm font-bold">DESIGNATE ANONYMOUS</label>
        </div>
      </div>
    </form>
  </div>

  <!-- Comments List -->
  <div class="grid gap-8">

    <!-- Comment 1 -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-br from-cyan-200 to-blue-300 opacity-90 
                    dark:from-cyan-800 dark:to-blue-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: VERIFIED</div>
      
      <div class="flex items-start mb-4 relative z-10">
        <img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">Dr. Alex "The Blade" Mercer</p>
          <time datetime="2023-10-27T10:30:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:30 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-pink-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">SURGEON</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">CLASSIFIED</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        <strong class="uppercase text-red-700 dark:text-red-300">CRITICAL ALERT:</strong> Patient vitals stabilized post-procedure, but anomalous neurological readings persist. Recommending immediate Level IV diagnostic protocol. Data logs attached to secure server. Do not disregard this warning.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-br from-yellow-500 to-orange-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

    <!-- Comment 2 -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-bl from-amber-200 to-red-300 opacity-90 
                    dark:from-amber-800 dark:to-red-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: PENDING</div>

      <div class="flex items-start mb-4 relative z-10">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">P.N. "Ghost" Protocol</p>
          <time datetime="2023-10-27T10:45:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:45 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-indigo-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">NURSE</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">OBSERVER</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        The patient requested an additional blanket and a glass of water at 09:30. No fever detected. Sleep patterns irregular, per monitor. Overall, stable condition, but seems a bit restless. Waiting for Dr. Mercer's follow-up.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-bl from-green-500 to-blue-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

    <!-- Comment 3 (Anonymous) -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-tr from-green-200 to-lime-300 opacity-90 
                    dark:from-green-800 dark:to-lime-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: ANONYMOUS</div>

      <div class="flex items-start mb-4 relative z-10">
        <img src="https://picsum.photos/id/66/100/100" alt="Placeholder Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 filter grayscale hue-rotate-180 brightness-50 dark:brightness-150 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">[DATA CORRUPTED / ANONYMOUS]</p>
          <time datetime="2023-10-27T10:55:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:55 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-purple-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">GUEST</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">UNIDENTIFIED</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        The ventilation system in Sector Gamma-7 is emitting a low-frequency hum. It's disruptive. Also, why are the lights flickering in the containment unit? Investigation recommended before structural integrity is compromised. This is not a drill.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-tr from-cyan-500 to-fuchsia-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

  </div>

  <!-- Brutalist Footer -->
  <div class="mt-12 md:mt-16 p-4 sm:p-6 md:p-8 border-4 border-neutral-900 dark:border-neutral-50 
              bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
              dark:from-red-700 dark:via-yellow-700 dark:to-green-700 
              shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)] 
              relative overflow-hidden group">
    <p class="text-sm sm:text-base md:text-lg font-bold text-neutral-900 dark:text-neutral-50 relative z-10 text-center uppercase">
      // END OF LOG. SYSTEM INTEGRITY: COMPROMISED //
    </p>
    <div class="absolute inset-0 bg-gradient-to-l from-orange-500 via-pink-500 to-purple-500 dark:from-orange-700 dark:via-pink-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

</section>