Rework contact page emails and simplify mailto actions.

- Add support@bilhej.se for orders and technical issues
- Move complaints to klagomal@bilhej.se instead of personal Gmail
- Show one mailto chip per card instead of duplicate link and button
- Update ContactPage tests and production email checklist for all @bilhej.se addresses

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/production-email-checklist.md

@@ -55,23 +55,29 @@ Fallback: reset links still log when `MAIL_HOST` is empty.
 Keep using Mailpit (`docker compose up`, http://localhost:8025). Do not point local Docker at
 Resend unless you intend to send real mail.
 
-## 5. Contact email (`kontakt@bilhej.se`)
+## 5. Inbound email on bilhej.se
 
 Inbound mail uses **Resend Receiving** on the root domain `bilhej.se`. No mailbox is created in
-Strato; the MX record routes all `@bilhej.se` addresses to Resend.
+Strato; the MX record routes all `@bilhej.se` addresses to Resend. You do not create each address
+separately in Resend.
 
 **Setup (done once):**
 
 1. Resend → **Domains** → `bilhej.se` → enable **Receiving**
 2. Strato → **DNS** → add the receiving MX record (e.g. `inbound-smtp.eu-west-1.amazonaws.com`)
 3. Wait until Resend shows receiving as **Verified**
-4. Send a test mail to `kontakt@bilhej.se` and confirm it appears under **Emails → Receiving**
+4. Send test mail to `support@bilhej.se` and `kontakt@bilhej.se`; confirm both appear under **Emails → Receiving**
 
 **Reading mail:** open the [Resend Receiving inbox](https://resend.com/emails/receiving). There is
 no automatic forward to Gmail unless you add a webhook handler later.
 
 | Address | Purpose | Where mail goes |
 |---------|---------|-----------------|
-| `kontakt@bilhej.se` | General questions (site, orders, support) | Resend dashboard |
+| `support@bilhej.se` | Orders, Swish, status, technical issues | Resend dashboard |
-| `jcamorling@gmail.com` | Complaints (shown on `/kontakt` only) | Gmail directly |
+| `kontakt@bilhej.se` | General contact, printed letter footer | Resend dashboard |
+| `klagomal@bilhej.se` | Complaints (shown on `/kontakt`) | Resend dashboard |
 | `noreply@bilhej.se` | Outbound only (password reset) | Not an inbox |
+
+**Optional later (same Resend inbox, no extra DNS):** `abuse@bilhej.se` if you want a published
+address for misuse reports; `privacy@bilhej.se` if integritetspolicy asks for a dedicated
+data-protection contact.

frontend/src/__tests__/ContactPage.spec.ts

@@ -9,17 +9,26 @@ describe('ContactPage', () => {
     expect(wrapper.text()).toContain('klagomål')
   })
 
-  it('renders general support email', () => {
+  it('renders support email', () => {
     const wrapper = mount(ContactPage)
-    const link = wrapper.find('a[href="mailto:kontakt@bilhej.se"]')
+    expect(wrapper.text()).toContain('support@bilhej.se')
-    expect(link.exists()).toBe(true)
+  })
-    expect(link.text()).toBe('kontakt@bilhej.se')
+
+  it('renders general contact email', () => {
+    const wrapper = mount(ContactPage)
+    expect(wrapper.text()).toContain('kontakt@bilhej.se')
   })
 
   it('renders complaints email', () => {
     const wrapper = mount(ContactPage)
-    const link = wrapper.find('a[href="mailto:jcamorling@gmail.com"]')
+    expect(wrapper.text()).toContain('klagomal@bilhej.se')
+  })
+
+  it('links support to mailto', () => {
+    const wrapper = mount(ContactPage)
+    const link = wrapper.find('a[href="mailto:support@bilhej.se"]')
     expect(link.exists()).toBe(true)
-    expect(wrapper.text()).toContain('jcamorling@gmail.com')
+    expect(link.text()).toBe('support@bilhej.se')
+    expect(link.attributes('aria-label')).toBe('Skicka till support: support@bilhej.se')
   })
 })

frontend/src/pages/ContactPage.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
 const contactChannels = [
   {
-    variant: 'general',
+    variant: 'support',
-    title: 'Frågor om tjänsten',
+    title: 'Support',
     description:
-      'Beställningar, betalning, tekniska problem eller allmänna frågor om hur Bilhej fungerar.',
+      'Beställningar, betalning via Swish, tekniska problem eller frågor om status och spårning.',
+    email: 'support@bilhej.se',
+    label: 'Skicka till support',
+  },
+  {
+    variant: 'general',
+    title: 'Allmän kontakt',
+    description:
+      'Övriga frågor om tjänsten, synpunkter som inte är klagomål, eller om du är osäker på vilken adress du ska använda.',
     email: 'kontakt@bilhej.se',
     label: 'Skicka e-post',
   },
   {
     variant: 'complaints',
-    title: 'Klagomål och synpunkter',
+    title: 'Klagomål',
     description:
       'Om något gått fel eller du vill lämna ett klagomål direkt till oss som driver tjänsten.',
-    email: 'jcamorling@gmail.com',
+    email: 'klagomal@bilhej.se',
     label: 'Skicka klagomål',
   },
 ]
@@ -25,8 +33,8 @@ const contactChannels = [
       <p class="contact__eyebrow">Kontakt</p>
       <h1 class="contact__title">Kontakta oss</h1>
       <p class="contact__lead">
-        Vi svarar så snart vi kan. Välj rätt adress beroende på om det gäller en
+        Vi svarar så snart vi kan. Använd support för beställningar och tekniska
-        vanlig fråga eller ett klagomål.
+        frågor, kontakt för övrigt, eller klagomål-adressen om något gått fel.
       </p>
     </section>
 
@@ -40,14 +48,12 @@ const contactChannels = [
         >
           <h2>{{ channel.title }}</h2>
           <p>{{ channel.description }}</p>
-          <a class="contact__email" :href="`mailto:${channel.email}`">
-            {{ channel.email }}
-          </a>
           <a
-            class="btn btn--ghost contact__btn"
+            class="contact__mailto"
             :href="`mailto:${channel.email}`"
+            :aria-label="`${channel.label}: ${channel.email}`"
           >
-            {{ channel.label }}
+            {{ channel.email }}
           </a>
         </article>
       </div>
@@ -155,6 +161,10 @@ const contactChannels = [
   background: var(--contact-accent);
 }
 
+.contact__card--support {
+  --contact-accent: linear-gradient(90deg, #0f766e, #2dd4bf);
+}
+
 .contact__card--general {
   --contact-accent: linear-gradient(90deg, #1d4ed8, #60a5fa);
 }
@@ -176,22 +186,24 @@ const contactChannels = [
   color: var(--color-muted);
 }
 
-.contact__email {
+.contact__mailto {
-  display: inline-block;
+  display: inline-flex;
-  margin-bottom: var(--space-md);
+  align-items: center;
+  padding: 0.65rem 1rem;
+  font-family: var(--font-sans);
   font-size: 1rem;
   font-weight: 600;
-  color: var(--color-primary);
+  color: var(--color-primary-dark);
-  word-break: break-all;
+  background: var(--color-primary-soft);
+  border: 1px solid #bfdbfe;
+  border-radius: var(--radius-md);
+  transition: background var(--transition-fast), border-color var(--transition-fast);
 }
 
-.contact__email:hover {
+.contact__mailto:hover {
-  text-decoration: underline;
+  background: #dbeafe;
-  text-underline-offset: 2px;
+  border-color: #93c5fd;
-}
+  color: var(--color-primary-dark);
-
-.contact__btn {
-  display: inline-flex;
 }
 
 .contact__tips {