<template>
  <div
    class="modal fade"
    id="specialPageBanner"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">
            <i class="fa fa-info-circle me-2"></i> بنر صفحه فروش ویژه
          </h5>
        </div>
        <div class="modal-body">
          <div class="subject-container">
            <img
              src="../../../assets/custom/فروش ویژه.png"
              alt="Guidance Image"
              class="img-fluid rounded"
            />
          </div>
        </div>
        <div class="modal-footer">
          <div class="w-100 d-flex justify-content-center">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              بستن
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>

<style scoped>
.modal-dialog {
  max-width: 700px; /* Increase the size of the modal for better visibility */
  margin-top: 15vh; /* Center vertically with some padding */
}

.modal-content {
  border-radius: 16px; /* Rounded corners */
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15); /* Larger shadow for depth */
  background: #ffffff; /* White background */
  border: none;
}

.modal-header {
  border-bottom: 1px solid #ddd; /* Soft border at the bottom */
  padding: 1rem 1.5rem;
}

.modal-title {
  color: #007bff;
  font-weight: 600;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
}

.modal-title i {
  margin-right: 12px;
  font-size: 2rem;
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  color: #007bff;
  transition: color 0.3s ease;
}

.btn-close:hover {
  color: #0056b3;
}

.modal-body {
  padding: 2rem;
  text-align: center; /* Center the image */
}

.subject-container {
  background: #f9f9f9;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subject-container img {
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  transition: background 0.3s;
  font-size: 1.1rem;
}

.btn-secondary:hover {
  background-color: #5a6268;
}
</style>
