Paper_Print_Inspired_Autumn_Modal_Component

<div class="fixed inset-0 z-50 overflow-y-auto bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="relative w-full max-w-3xl bg-amber-50 dark:bg-gray-800 rounded-lg shadow-2xl transform transition-all duration-300 scale-100 opacity-100 border border-amber-200 dark:border-gray-700 overflow-hidden print:shadow-none print:border-none print:transform-none print:flex-initial print:block">
    <!-- Paper textured background (can be achieved via CSS classes if needed, or just color) -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-10 dark:opacity-[0.03] pointer-events-none"></div>

    <!-- Header - mimics a book/journal cover -->
    <div class="relative p-6 sm:p-8 lg:p-10 bg-gradient-to-r from-red-800 to-amber-900 dark:from-red-900 dark:to-orange-950 text-white border-b-4 border-amber-950 dark:border-red-950 shadow-md flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl font-serif tracking-wide text-amber-100 dark:text-orange-200 drop-shadow-lg">Course Syllabus: Ancient Civilizations</h2>
      <button class="text-orange-100 hover:text-white dark:text-orange-200 dark:hover:text-white text-3xl font-bold p-2 transition-transform transform hover:rotate-3 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500 rounded-full aria-label="Close modal">
        &times;
      </button>
    </div>

    <!-- Content - resembles printed pages -->
    <div class="relative p-6 sm:p-8 lg:p-10 text-gray-800 dark:text-gray-200 flex flex-col lg:flex-row gap-6 sm:gap-8 overflow-y-auto max-h-[70vh]">
      <div class="lg:w-2/3 space-y-6">
        <section class="mb-6 pb-4 border-b border-orange-200 dark:border-gray-700 print:border-b-0">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Course Overview</h3>
          <p class="text-base leading-relaxed font-sans text-gray-700 dark:text-gray-300 indent-8">This course offers a comprehensive exploration of major ancient civilizations, from Mesopotamia and Egypt to Greece and Rome. We will delve into their political structures, social hierarchies, cultural achievements, and lasting legacies, examining primary sources and archaeological evidence.</p>
        </section>

        <section class="mb-6 pb-4 border-b border-orange-200 dark:border-gray-700 print:border-b-0">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Learning Objectives</h3>
          <ul class="list-disc list-inside space-y-2 text-base font-sans text-gray-700 dark:text-gray-300">
            <li>Identify key characteristics of ancient civilizations.</li>
            <li>Analyze the impact of geography on historical development.</li>
            <li>Evaluate primary sources for historical interpretation.</li>
            <li>Discuss the contributions of ancient societies to modern culture.</li>
          </ul>
        </section>

        <section class="mb-6">
          <h3 class="text-xl sm:text-2xl font-serif text-red-800 dark:text-orange-400 mb-3">Instructor Information</h3>
          <div class="flex items-center space-x-4 mb-4 bg-orange-100 dark:bg-gray-700 p-3 rounded-lg shadow-inner">
            <img class="w-16 h-16 rounded-full border-2 border-orange-400 dark:border-orange-500 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Instructor Avatar">
            <div>
              <p class="font-semibold text-lg font-serif text-red-900 dark:text-gray-100">Prof. Alistair Finch</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Department of History</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            </div>
          </div>
          <div class="flex justify-around flex-wrap gap-3">
            <button class="flex-1 min-w-[120px] px-4 py-2 bg-orange-700 hover:bg-orange-800 dark:bg-orange-800 dark:hover:bg-orange-900 text-white rounded-md font-sans text-sm tracking-wide shadow-md transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">Message Instructor</button>
            <button class="flex-1 min-w-[120px] px-4 py-2 bg-red-700 hover:bg-red-800 dark:bg-red-800 dark:hover:bg-red-900 text-white rounded-md font-sans text-sm tracking-wide shadow-md transition-all duration-200 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-red-300 dark:focus:ring-red-500">Schedule Office Hours</button>
          </div>
        </section>
      </div>

      <aside class="lg:w-1/3 p-4 bg-orange-100 dark:bg-gray-700 rounded-lg shadow-inner border border-orange-200 dark:border-gray-600 space-y-4">
        <h3 class="text-xl font-serif text-red-800 dark:text-orange-400 mb-3">Resource Links</h3>
        <ul class="space-y-3">
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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.75 17L9 20l-1 1h-5a1 1 0 01-1-1v-1a1 1 0 011-1h4a1 1 0 001-1v-4a1 1 0 00-1-1h-4a1 1 0 01-1-1V5a1 1 0 011-1h5a1 1 0 011-1v1a1 1 0 001 1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 00-1 1z"></path></svg>
              <span class="block">Recommended Readings</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
              <span class="block">Lecture Slides</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
              <span class="block">Video Archive</span>
            </a>
          </li>
          <li>
            <a href="#" class="block p-3 bg-white dark:bg-gray-800 rounded-md shadow-sm hover:shadow-md transition-shadow font-sans text-base text-gray-900 dark:text-gray-100 flex items-center space-x-3 group">
              <svg class="w-5 h-5 text-red-600 dark:text-orange-500 group-hover:text-red-700 dark:group-hover:text-orange-600" 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 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="block">Discussion Forums</span>
            </a>
          </li>
        </ul>

        <div class="mt-6">
          <h3 class="text-xl font-serif text-red-800 dark:text-orange-400 mb-3">Upcoming Deadlines</h3>
          <ul class="space-y-3">
            <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="assignment1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="assignment1" class="flex-1">Essay 1: Nile Civilizations <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Oct 20</span></label>
            </li>
            <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="quiz1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="quiz1" class="flex-1">Quiz 1: Mesopotamia <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Oct 25</span></label>
            </li>
             <li class="flex items-center space-x-3 text-sm font-sans text-gray-700 dark:text-gray-300">
              <input type="checkbox" id="project1" class="form-checkbox text-red-600 dark:text-orange-500 ring-2 ring-red-300 dark:ring-orange-400 w-4 h-4 rounded-sm">
              <label for="project1" class="flex-1">Group Project: Greece <span class="font-medium text-red-700 dark:text-orange-600 ml-1">Nov 10</span></label>
            </li>
          </ul>
        </div>
      </aside>
    </div>

    <!-- Footer - like the bottom of a page -->
    <div class="relative p-4 sm:p-6 bg-amber-200 dark:bg-gray-900 border-t-2 border-amber-300 dark:border-gray-700 text-center text-gray-600 dark:text-gray-400 text-sm font-sans flex justify-between items-center">
      <p>&copy; 2023 Ancient Studies Dept.</p>
      <button class="px-5 py-2 bg-orange-700 hover:bg-orange-800 dark:bg-orange-800 dark:hover:bg-orange-900 text-white rounded-lg font-bold shadow-lg transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
        Enroll Now
      </button>
    </div>
  </div>
</div>