Brutalist_Video_Player

<div class="font-['Arial_Black',_sans-serif] min-h-screen bg-cyan-100 text-purple-900 dark:bg-purple-900 dark:text-cyan-100 p-4 sm:p-8 md:p-12 lg:p-16 flex items-center justify-center">
  <div class="w-full max-w-7xl border-8 border-purple-900 dark:border-cyan-100 shadow-[10px_10px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[10px_10px_0_0_rgba(8,_145,_178,_1)] bg-purple-200 dark:bg-purple-800 transition-all duration-300 ease-in-out">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-0 border-b-8 border-purple-900 dark:border-cyan-100">
      <!-- Main Video Player -->
      <div class="lg:col-span-2 relative aspect-video bg-black flex items-center justify-center overflow-hidden border-b-8 lg:border-b-0 lg:border-r-8 border-purple-900 dark:border-cyan-100">
        <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-70">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
        <button class="relative z-10 p-6 sm:p-8 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-5xl sm:text-7xl font-extrabold focus:outline-none hover:scale-105 transition-transform duration-200 ease-in-out shadow-[5px_5px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[5px_5px_0_0_rgba(8,_145,_178,_1)]">
          ▶
        </button>
      </div>

      <!-- Video Details / Controls -->
      <div class="p-4 sm:p-6 lg:p-8 bg-purple-300 dark:bg-purple-700 transition-colors duration-300 ease-in-out flex flex-col justify-between">
        <div>
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight uppercase border-b-4 border-purple-900 dark:border-cyan-100 pb-2">
            Corporate Vision: Future Forward
          </h2>
          <p class="text-base sm:text-lg mb-4 opacity-80 min-h-[60px]">
            Unveiling our strategic roadmap for innovation and sustainable growth across global markets.
          </p>
          <div class="flex items-center mb-6">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Presenter Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-purple-900 dark:border-cyan-100 mr-4">
            <div>
              <p class="text-lg font-bold uppercase">Dr. Evelyn Reed</p>
              <p class="text-sm opacity-70">Chief Innovation Officer</p>
            </div>
          </div>
        </div>

        <div class="mt-auto">
          <div class="flex justify-between items-center mb-4 border-t-4 border-purple-900 dark:border-cyan-100 pt-4">
            <span class="text-xl sm:text-2xl font-bold">0:00 / 12:45</span>
            <div class="flex space-x-2">
              <button class="p-2 sm:p-3 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold shadow-[3px_3px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[3px_3px_0_0_rgba(8,_145,_178,_1)] hover:scale-105 transition-transform duration-200">⚙️</button>
              <button class="p-2 sm:p-3 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold shadow-[3px_3px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[3px_3px_0_0_rgba(8,_145,_178,_1)] hover:scale-105 transition-transform duration-200">🔲</button>
            </div>
          </div>
          <div class="w-full h-4 bg-purple-500 dark:bg-purple-600 border-2 border-purple-900 dark:border-cyan-100 mb-4">
            <div class="h-full w-1/4 bg-cyan-500 dark:bg-cyan-600 border-r-2 border-r-purple-900 dark:border-r-cyan-100"></div>
          </div>
          <button class="w-full p-3 sm:p-4 bg-cyan-600 dark:bg-cyan-500 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold uppercase shadow-[5px_5px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[5px_5px_0_0_rgba(8,_145,_178,_1)] hover:scale-[1.01] transition-transform duration-200 focus:outline-none">
            Watch Full Presentation
          </button>
        </div>
      </div>
    </div>

    <!-- Related Videos / Episodes -->
    <div class="p-4 sm:p-6 lg:p-8">
      <h3 class="text-2xl sm:text-3xl font-extrabold mb-6 uppercase border-b-4 border-purple-900 dark:border-cyan-100 pb-2">
        Related Insights & Episodes
      </h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8">

        <!-- Related Video Item 1 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=2" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Market Trends 2024</h4>
          <p class="text-sm opacity-80 mb-2">Deep dive into emerging market opportunities.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>8:15</span>
            <span>3 days ago</span>
          </div>
        </div>

        <!-- Related Video Item 2 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=3" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Sustainable Practices</h4>
          <p class="text-sm opacity-80 mb-2">Our commitment to ecological stewardship.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>15:30</span>
            <span>1 week ago</span>
          </div>
        </div>

        <!-- Related Video Item 3 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=4" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Team Synergy Workshop</h4>
          <p class="text-sm opacity-80 mb-2">Behind the scenes of our collaborative culture.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>22:00</span>
            <span>2 weeks ago</span>
          </div>
        </div>

        <!-- Related Video Item 4 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=5" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Client Success Stories</h4>
          <p class="text-sm opacity-80 mb-2">Hear directly from our valued partners.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>10:05</span>
            <span>1 month ago</span>
          </div>
        </div>

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