<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-2xl">
    <div class="text-sm font-semibold text-primary">{gettext("SUPPORT")}</div>
    <h1 class="mt-2 text-4xl font-black">{gettext("Contact Who Need Help")}</h1>
    <p class="mt-3 text-base-content/65">
      {gettext(
        "Use this form for account access, technical problems, privacy questions, or other support. For illegal content or a removal request, use the dedicated removal form."
      )}
    </p>

    <div class="mt-5 flex flex-wrap gap-2">
      <.link navigate={~p"/legal/content-removal"} class="btn btn-outline btn-sm">
        {gettext("Report content")}
      </.link>
      <.link navigate={~p"/legal/take-it-down"} class="btn btn-outline btn-sm">
        {gettext("TAKE IT DOWN request")}
      </.link>
      <.link navigate={~p"/account/delete"} class="btn btn-outline btn-sm">
        {gettext("Delete an account")}
      </.link>
    </div>

    <.form for={@form} action={~p"/support"} class="mt-8 space-y-4">
      <.input
        field={@form[:kind]}
        type="select"
        label={gettext("What do you need help with?")}
        options={[
          {gettext("Account access"), "account_access"},
          {gettext("Technical issue"), "technical_issue"},
          {gettext("Safety concern"), "safety_concern"},
          {gettext("Appeal a moderation decision"), "moderation_appeal"},
          {gettext("Privacy request"), "privacy_request"},
          {gettext("Data export"), "data_export"},
          {gettext("Other"), "other"}
        ]}
        prompt={gettext("Choose a topic")}
        required
      />
      <.input
        field={@form[:contact_email]}
        type="email"
        label={gettext("Contact email")}
        value={@contact_email || @form[:contact_email].value}
        readonly={not is_nil(@contact_email)}
        required
      />
      <.input field={@form[:subject]} label={gettext("Subject")} required />
      <.input
        field={@form[:details]}
        type="textarea"
        label={gettext("Describe the problem")}
        required
      />
      <p class="text-xs text-base-content/55">
        {gettext(
          "Do not include passwords, payment card details, access codes, prescriptions, or unnecessary medical information."
        )}
      </p>
      <.button class="btn btn-primary w-full">{gettext("Send support request")}</.button>
    </.form>
  </div>
</Layouts.app>
