<% content_for :head do %>
  <%# <%= javascript_pack_tag "application-bundle" %>
<% end %>
<div class="mt-2 sm:m-2 sm:p-4">
  <%= react_component("UserSearchBar", props: {}, prerender: true, strict_mode: true) %>
  <div
    class="mx-auto mt-2 w-full border-y border-slate-300 bg-slate-50 p-2 shadow-lg sm:max-w-md sm:rounded-xl sm:border"
  >
    <div class="space-y-4 p-1">
      <div class="border-b border-slate-200 pb-3">
        <h2 class="font-medium text-slate-700">Questions? Comments? Suggestions?</h2>
        <div class="mt-2 text-sm text-slate-600">
          Contact @DeltaNoises on:
          <div class="mt-1 flex items-center gap-3">
            <%= link_to "https://t.me/DeltaNoises", target: "_blank", class: "blue-link inline-flex items-center gap-1" do %>
              <i class="fab fa-telegram"></i> Telegram
            <% end %>
            <%= link_to "https://bsky.app/profile/delta.refurrer.com", target: "_blank", class: "blue-link inline-flex items-center gap-1" do %>
              <i class="fas fa-cloud"></i> BlueSky
            <% end %>
          </div>
        </div>
      </div>
      <div class="text-sm">
        <span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">New</span>
        <div class="mt-1">
          Try the <%= link_to "FurAffinity User Recommender",
                           furecs_user_script_path,
                           class: "blue-link" %> user script to discover similar artists and users!
        </div>
      </div>
    </div>
  </div>
</div>
