<%= content_for :page_title, "Feedback" %>

<div class="bg-container shadow-border-xs rounded-xl p-4">
  <h2 class="text-lg font-medium text-primary mb-1">Leave feedback</h2>
  <p class="text-sm text-secondary mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
  <div class="flex flex-col md:flex-row gap-4">
    <%= link_to "https://github.com/we-promise/sure/discussions/categories/feature-requests", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
      <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
      <span class="text-sm font-medium text-primary text-center">Write a feature request</span>
    <% end %>

    <%= link_to "https://github.com/we-promise/sure/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
      <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
      <span class="text-sm font-medium text-primary text-center">File a bug report</span>
    <% end %>

    <%= link_to "https://discord.gg/36ZGBsxYEK", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
      <%= image_tag "discord-icon.svg", class: "w-8 h-8 mb-2" %>
      <span class="text-sm font-medium text-primary text-center">Discuss <%= product_name %> with others</span>
    <% end %>
  </div>
</div>
