Industrial_Purple_Comments_Section

<section class="font-sans bg-gray-50 dark:bg-gray-950 py-12 px-4 shadow-inner dark:shadow-purple-950 border-t border-purple-200 dark:border-purple-800">
  <div class="max-w-4xl mx-auto rounded-lg overflow-hidden bg-white dark:bg-gray-900 border-2 border-purple-300 dark:border-purple-700 shadow-xl dark:shadow-2xl dark:shadow-purple-900/50 relative">
    <!-- Top exposed 'metal' plate effect -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-purple-200/50 dark:from-purple-900/50 to-transparent dark:to-transparent border-b border-purple-300 dark:border-purple-800 -z-0 pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-purple-200/50 dark:from-purple-900/50 to-transparent dark:to-transparent border-t border-purple-300 dark:border-purple-800 -z-0 pointer-events-none"></div>

    <div class="p-6 sm:p-8 relative z-10">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-purple-300 mb-6 border-b-2 border-purple-400 dark:border-purple-600 pb-3 flex items-center justify-between">
        Comments
        <span class="text-sm text-gray-600 dark:text-purple-400 font-normal"> (5)</span>
      </h2>

      <!-- New Comment Section -->
      <div class="mb-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-lg border border-purple-200 dark:border-purple-700 shadow-inner dark:shadow-purple-900/30">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-purple-400 mb-4">Leave a Comment</h3>
        <textarea
          class="w-full p-4 mb-4 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20 resize-y"
          rows="4"
          placeholder="Share your thoughts..."
        ></textarea>
        <div class="flex flex-col sm:flex-row gap-4 mb-4">
          <input
            type="text"
            class="flex-1 p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20"
            placeholder="Your Name"
          />
          <input
            type="email"
            class="flex-1 p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20"
            placeholder="Your Email (private)"
          />
        </div>
        <button class="w-full sm:w-auto px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-md shadow-lg dark:shadow-purple-800/50 transform hover:-translate-y-0.5 transition-all duration-300 border-b-2 border-purple-800 dark:border-purple-950 inline-flex items-center justify-center">
          Post Comment
          <svg class="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </button>
      </div>

      <!-- Comments List -->
      <div class="space-y-8">
        <!-- Comment 1 -->
        <div class="flex flex-col sm:flex-row p-6 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-md dark:shadow-purple-900/30 border border-purple-200 dark:border-purple-700">
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
          </div>
          <div class="flex-grow">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">John Doe</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              This article provided some fascinating insights into the topic. The industrial aesthetics for the comments section truly set a unique tone!
            </p>
            <div class="flex gap-4">
              <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
                Reply
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
                Upvote (3)
              </button>
            </div>
          </div>
        </div>

        <!-- Comment 2 (Reply) -->
        <div class="ml-0 sm:ml-16 flex flex-col sm:flex-row p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-inner dark:shadow-purple-950/30 border border-purple-200 dark:border-purple-700 relative">
          <div class="absolute top-0 left-0 w-full h-full border-l-4 border-purple-400 dark:border-purple-600 rounded-l-lg transform -translate-x-2 sm:-translate-x-1 sm:translate-y-0.5 pointer-events-none"></div>
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center z-10">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Avatar">
          </div>
          <div class="flex-grow z-10">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">Jane Smith</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">1 hour ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              @John Doe, I totally agree! The design choice adds an interesting layer to the user experience. Very well implemented.
            </p>
            <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
              Reply
            </button>
          </div>
        </div>

        <!-- Comment 3 -->
        <div class="flex flex-col sm:flex-row p-6 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-md dark:shadow-purple-900/30 border border-purple-200 dark:border-purple-700">
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          </div>
          <div class="flex-grow">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">Alex P.</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">5 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              Great job explaining the complex concepts. I found the examples particularly helpful for understanding the nuances.
              Keep up the excellent work!
            </p>
            <div class="flex gap-4">
              <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
                Reply
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
                Upvote (7)
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Load More Button -->
      <div class="mt-10 pt-6 border-t-2 border-purple-400 dark:border-purple-600 text-center">
        <button class="inline-flex items-center px-8 py-4 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-purple-200 font-semibold rounded-md shadow-md dark:shadow-purple-950/40 transform hover:-translate-y-1 transition-all duration-300 border-b-2 border-gray-400 dark:border-purple-800">
          Load More Comments
          <svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</section>