<script setup lang="ts"></script>

<template>
  <div class="media-showcase-hero">
    <!-- <div class="spacer"></div> -->
    <div class="media-showcase-info">
      <div class="media-showcase-logo">
        <img src="@/assets/images/vvitch_logo.png" alt="" class="no-select" />
      </div>
      <div class="media-showcase-info-misc">
        <div class="media-showcase-misc-info-year">2019</div>
        <div class="media-showcase-misc-info-runtime">2h 12m</div>
        <div class="media-showcase-misc-info imdb-rating">
          <font-awesome-icon icon="fa-solid fa-star" size="xs" class="star-rating" /> 7.6
        </div>
        <div class="media-showcase-misc-info-age-rating"><span class="age-rating">R</span></div>
      </div>
      <div class="media-showcase-summary">
        In 1630, a farmer relocates his family to a remote plot of land on the edge of a forest
        where strange, unsettling things happen. With suspicion and paranoia mounting, each family
        member's faith, loyalty and love are tested in shocking ways.
      </div>
      <div class="media-showcase-detail-buttons">
        <div class="media-showcase-play-button">
          <button class="primary-button">
            <font-awesome-icon icon="fa-solid fa-play" size="md" />Play Now
          </button>
          <div class="media-showcase-end-time">Ends at 6:23pm</div>
        </div>
        <div class="media-showcase-details">
          <div class="media-showcase-watched">
            <font-awesome-icon icon="fa-solid fa-check" size="xl" class="clickable" />
          </div>
          <div class="media-showcase-favorited">
            <font-awesome-icon icon="fa-solid fa-heart" size="xl" class="clickable" />
          </div>
        </div>
      </div>
      <div class="media-showcase-carousel">
        <font-awesome-icon icon="fa-solid fa-circle" size="xs" class="active" />
        <font-awesome-icon icon="fa-solid fa-circle" size="xs" />
        <font-awesome-icon icon="fa-solid fa-circle" size="xs" />
        <font-awesome-icon icon="fa-solid fa-circle" size="xs" />
        <font-awesome-icon icon="fa-solid fa-circle" size="xs" />
        <font-awesome-icon icon="fa-solid fa-circle" size="xs" />
      </div>
    </div>
    <div class="media-showcase-image">
      <img src="@/assets/images/vvitch_bg.jpg" alt="" class="no-select" />
    </div>
  </div>
</template>

<style scoped>
.media-showcase-hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  background: linear-gradient(var(--color-background), var(--color-background-darker));
}
.media-showcase-logo img {
  max-height: 90px;
}
.media-showcase-image img {
  max-height: 475px;
  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
}
.media-showcase-info {
  text-align: center;
  padding: 3em 3em;
  margin-left: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3em;
  max-height: 475px;
  max-width: 700px;
}
.media-showcase-info-misc {
  display: flex;
  justify-content: space-around;
  min-width: 20em;
}
.media-showcase-summary {
  text-align: left;
}
.media-showcase-detail-buttons {
  padding-top: 1.5em;
  display: flex;
  min-width: 100%;
  justify-content: space-around;
}
.media-showcase-play-button {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 50%;
}
.media-showcase-details {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 25%;
}
.media-showcase-carousel {
  display: flex;
  gap: 1.25em;
  padding-top: 1em;
}
.media-showcase-carousel svg {
  opacity: 25%;
  height: 8px;
}
.media-showcase-carousel svg:hover {
  cursor: pointer;
}
.media-showcase-carousel svg.active {
  opacity: 100%;
}
</style>
