<script lang="ts">
  interface Props {
    onclose: () => void;
  }

  let { onclose }: Props = $props();
</script>

<div
  class="modal-overlay"
  role="button"
  tabindex="0"
  onclick={onclose}
  onkeydown={(e) => e.key === "Enter" && onclose()}
>
  <div
    class="modal-content"
    role="dialog"
    aria-labelledby="modal-title"
    tabindex="-1"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
  >
    <h1 id="modal-title">Poof: a sample generator</h1>
    <p class="description">
      Do you need to generate audio samples for your projects? Poof, it's
      already done! These are not the best samples you'll ever hear, but they
      have the right to exist, nonetheless, in the realm of all the random and
      haphazardly generated digital sounds. Have fun, give computers some love!
    </p>
    <ul>
      <li class="description">
        Generate audio samples using various audio synthesis generators. Random
        parameters.
      </li>
      <li class="description">
        Process each sound with with a growing collection of random effects.
      </li>
      <li class="description">Export your samples as WAV files.</li>
    </ul>
    <div class="modal-links">
      <p>
        Created by <a
          href="https://raphaelforment.fr"
          target="_blank"
          rel="noopener noreferrer">Raphaël Forment (BuboBubo)</a
        >
      </p>
      <p>
        Licensed under <a
          href="https://www.gnu.org/licenses/gpl-3.0.html"
          target="_blank"
          rel="noopener noreferrer">GPL 3.0</a
        >
      </p>
    </div>
    <button class="modal-close" onclick={onclose}>Start</button>
  </div>
</div>

<style>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .modal-content {
    background-color: #000;
    border: 2px solid #fff;
    padding: 1.25rem;
    max-width: 500px;
    width: calc(100% - 2rem);
    color: #fff;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease-out;
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
  }

  .modal-content h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: bold;
    letter-spacing: 0.02em;
  }

  .modal-content .description {
    margin: 0 0 1rem 0;
    line-height: 1.6;
    color: #e0e0e0;
    font-size: 0.875rem;
  }

  .modal-content ul {
    margin: 0 0 1rem 0;
    padding-left: 1.25rem;
  }

  .modal-content ul li {
    margin-bottom: 0.5rem;
  }

  .modal-content ul li:last-child {
    margin-bottom: 0;
  }

  .modal-links {
    margin: 1.25rem 0;
    padding: 0.875rem 0;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
  }

  .modal-links p {
    margin: 0.375rem 0;
    font-size: 0.8125rem;
    color: #bbb;
    line-height: 1.5;
  }

  .modal-links a {
    color: #646cff;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.2s ease;
  }

  .modal-links a:hover {
    color: #8891ff;
    text-decoration: underline;
  }

  .modal-close {
    margin-top: 1rem;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    background-color: #fff;
    color: #000;
    border: 2px solid #fff;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .modal-close:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
  }

  .modal-close:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
  }

  @media (min-width: 480px) {
    .modal-content {
      padding: 1.75rem;
      width: calc(100% - 3rem);
    }

    .modal-content h1 {
      font-size: 2rem;
      margin: 0 0 0.75rem 0;
    }

    .modal-content .description {
      font-size: 0.9375rem;
    }

    .modal-links p {
      font-size: 0.875rem;
    }
  }

  @media (min-width: 768px) {
    .modal-content {
      padding: 2.5rem;
    }

    .modal-content h1 {
      font-size: 2.5rem;
      margin: 0 0 1rem 0;
    }

    .modal-content .description {
      margin: 0 0 1.25rem 0;
      font-size: 1rem;
      line-height: 1.7;
    }

    .modal-content ul {
      margin: 0 0 1.25rem 0;
    }

    .modal-links {
      margin: 1.75rem 0;
      padding: 1.125rem 0;
    }

    .modal-links p {
      font-size: 0.9375rem;
      margin: 0.5rem 0;
    }

    .modal-close {
      margin-top: 1.25rem;
      padding: 0.875rem;
      font-size: 1.125rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal-content {
      animation: none;
    }

    .modal-close {
      transition: none;
    }

    .modal-links a {
      transition: none;
    }
  }
</style>
