---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base

### PAGE CONFIG ###
# Hero Section
hero:
  headline: "We'd love your"
  headline_accent: "feedback"
  subheadline: "Help us improve {{ site.brand.name }} by sharing your experience"

# Feedback Form Section
feedback_form:
  superheadline:
    icon: "face-smile"
    text: "Your experience"
  headline: "How would you rate"
  headline_accent: "{{ site.brand.name }}?"
  subheadline: "Select a rating and let us know what you think."
  ratings:
    - id: "dislike"
      label: "Poor"
      image: "https://cdn.itwcreativeworks.com/assets/general/images/feedback/dislike.png?cb={{ site.uj.cache_breaker }}"
    - id: "neutral"
      label: "Okay"
      image: "https://cdn.itwcreativeworks.com/assets/general/images/feedback/neutral.png?cb={{ site.uj.cache_breaker }}"
    - id: "like"
      label: "Good"
      image: "https://cdn.itwcreativeworks.com/assets/general/images/feedback/like.png?cb={{ site.uj.cache_breaker }}"
    - id: "love"
      label: "Excellent"
      image: "https://cdn.itwcreativeworks.com/assets/general/images/feedback/love.png?cb={{ site.uj.cache_breaker }}"

# Prerender icons for JS
prerender_icons:
  - name: "star"
  - name: "arrow-up-right-from-square"
  - name: "copy"
  - name: "check"
---

<!-- Hero Section -->
<section>
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-lg-8" data-lazy="@class animation-slide-up">
        <h1 class="h1 mb-3">
          {{ page.resolved.hero.headline }} <span class="text-gradient-rainbow">{{ page.resolved.hero.headline_accent }}</span>
        </h1>
        {% iftruthy page.resolved.hero.subheadline %}
          <p class="fs-5 text-muted">
            {{ page.resolved.hero.subheadline }}
          </p>
        {% endiftruthy %}
      </div>
    </div>
  </div>
</section>

<!-- Feedback Form Section -->
<section class="pt-0">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="card border-0 shadow-lg" data-lazy="@class animation-slide-up">
          <div class="card-body p-5">
            <div class="text-center mb-4">
              {% iftruthy page.resolved.feedback_form.superheadline.text %}
                <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">
                  {% iftruthy page.resolved.feedback_form.superheadline.icon %}
                    {% uj_icon page.resolved.feedback_form.superheadline.icon, "me-1" %}
                  {% endiftruthy %}
                  {{ page.resolved.feedback_form.superheadline.text }}
                </span>
              {% endiftruthy %}
              <h2 class="h3 mb-2">
                {{ page.resolved.feedback_form.headline }}
                {% iftruthy page.resolved.feedback_form.headline_accent %}
                  <span class="text-accent">{{ page.resolved.feedback_form.headline_accent }}</span>
                {% endiftruthy %}
              </h2>
              {% iftruthy page.resolved.feedback_form.subheadline %}
                <p class="text-muted">{{ page.resolved.feedback_form.subheadline }}</p>
              {% endiftruthy %}
            </div>

            <form id="feedback-form" autocomplete="off" onsubmit="return false">
              <!-- Rating Selection -->
              <div class="feedback-rating-group mb-4">
                <input type="hidden" name="rating" id="feedback-rating-input" required>
                <div class="row g-3 justify-content-center">
                  {% for rating in page.resolved.feedback_form.ratings %}
                    <div class="col-6 col-sm-3">
                      <button type="button" class="feedback-rating-btn w-100 border rounded-3 bg-body text-center" data-rating="{{ rating.id }}">
                        <img src="{{ rating.image }}" alt="{{ rating.label }}" class="feedback-rating-img mb-2" width="64" height="64" loading="eager">
                        <span class="d-block small fw-semibold text-muted">{{ rating.label }}</span>
                      </button>
                    </div>
                  {% endfor %}
                </div>
                <div class="invalid-feedback"></div>
              </div>

              <!-- Honeypot field (bot detection) -->
              <div class="form-group" style="display: none;" aria-hidden="true">
                <input type="text" class="form-control" name="honey" tabindex="-1" autocomplete="off">
              </div>

              <!-- Hidden auth fields (auto-populated via bindings) -->
              <input type="hidden" aria-hidden="true" name="auth.user.uid" data-wm-bind="@value auth.user.uid">
              <input type="hidden" aria-hidden="true" name="auth.user.email" data-wm-bind="@value auth.user.email">

              <!-- Positive feedback? -->
              <div class="mb-4">
                <label for="feedback-positive" class="form-label fw-semibold">
                  {% uj_icon "thumbs-up", "me-1 text-success" %}
                  What do you like about {{ site.brand.name }}?
                </label>
                <textarea class="form-control form-control-lg" id="feedback-positive" name="positive" rows="2"
                  placeholder="Tell us what you enjoy..."
                  maxlength="2000"></textarea>
              </div>

              <!-- Negative feedback? -->
              <div class="mb-4">
                <label for="feedback-negative" class="form-label fw-semibold">
                  {% uj_icon "thumbs-down", "me-1 text-danger" %}
                  What could we improve?
                </label>
                <textarea class="form-control form-control-lg" id="feedback-negative" name="negative" rows="2"
                  placeholder="Let us know how we can do better..."
                  maxlength="2000"></textarea>
              </div>

              <!-- Additional Comments -->
              <div class="mb-4">
                <label for="feedback-comments" class="form-label fw-semibold">
                  {% uj_icon "message-lines", "me-1 text-info" %}
                  Additional comments
                </label>
                <textarea class="form-control form-control-lg" id="feedback-comments" name="comments" rows="3"
                  placeholder="Anything else you'd like to share..."
                  maxlength="5000"></textarea>
              </div>

              <!-- Submit -->
              <div class="d-grid">
                <button type="submit" class="btn btn-primary btn-lg">
                  {% uj_icon "paper-plane", "me-2" %}
                  Submit feedback
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Review Prompt Modal -->
<div class="modal fade" id="review-modal" tabindex="-1" aria-labelledby="review-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-body text-center p-5">
        <div class="mb-4">
          <img src="https://cdn.itwcreativeworks.com/assets/general/images/feedback/love.png?cb={{ site.uj.cache_breaker }}" alt="Thank you" width="80" height="80">
        </div>
        <h3 class="mb-3" id="review-modal-label">You're awesome!</h3>
        <p class="text-muted mb-3">
          We're so glad you love {{ site.brand.name }}! Share your experience on a review site to be entered to win a $100 gift card.
        </p>
        <div class="alert alert-warning text-start small mb-4" role="alert">
          {% uj_icon "circle-exclamation", "me-1" %}
          You must actually post your review to be eligible for the $100 gift card &mdash; closing this without publishing a review won't qualify.
        </div>

        <!-- Copy-paste feedback -->
        <div class="text-start mb-4">
          <label class="form-label fw-semibold small text-muted">
            {% uj_icon "copy", "me-1" %}
            Your feedback (copy and paste into your review)
          </label>
          <div class="position-relative">
            <textarea id="review-modal-feedback" class="form-control bg-body-tertiary" rows="4" readonly></textarea>
            <button type="button" id="review-modal-copy" class="btn btn-sm btn-primary position-absolute top-0 end-0 m-2">
              {% uj_icon "copy", "me-1" %}
              Copy
            </button>
          </div>
        </div>

        <a id="review-modal-link" href="#" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg mb-3">
          {% uj_icon "arrow-up-right-from-square", "me-2" %}
          Post your review
        </a>
        <div>
          <button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Maybe later</button>
        </div>
      </div>
    </div>
  </div>
</div>

{{ content | uj_content_format }}