Contact Form with Topic Pills

Build a contact form with topic pills and server-side validation.

Stack: Next.js (App Router), React, TypeScript and Tailwind CSS v4. Use a Server Action with React useActionState.

DESIGN SYSTEM (use exactly):
- Page background #edeef2. Surface (light cards, light pills) #f6f6f8. Muted (gray cards) #d9d9dc. Border #dcdde2.
- Ink #1e1e1e for text, dark cards and primary buttons. Muted text #8a8a8f. Text on dark: #ffffff.
- Accents: purple #c084fc, lime #a3f207.
- Font: Geist Sans. Headings semibold with tight tracking (-0.04em) and tight leading (0.95–1.05).
- Cards: 28px corner radius. Buttons and chips: fully rounded pills (9999px).
- When a card wraps pills, its radius = pill radius + card padding (e.g. 40px pills + 8px padding → 28px card).
- Side gutter: 30px from 768px up, 20px on phones.
- Links and buttons never change color, background or opacity on hover.

CARD
- <form> with background #f6f6f8, radius 28px, padding 12px (16px from 768px). Flex column, 12px gap.
- It should stretch to the height of its grid row.

TOPIC PILLS
- A fieldset with legend "I'm interested in" (12px uppercase, #8a8a8f, 12px below).
- Radio options, styled as pills: Products, Custom prompt, Custom website/app, Collaboration, Other.
- Each is a visually hidden radio plus a span: 44px tall on phones (40px from 768px), padding 0 16px, 1px #dcdde2 border, 14px medium.
- Checked: background and border #1e1e1e, white text. Focus-visible: a 2px #1e1e1e ring. The first option is checked by default.

FIELDS
- Name and Email sit side by side from 768px.
- Both: 56px tall, fully rounded, background #edeef2, padding 0 20px (24px from 768px), 16px text, #8a8a8f placeholder.
- No outline; a 2px #1e1e1e ring on focus. Use autocomplete name/email and add aria-labels.
- Message: textarea, 5 rows, min-height 160px, radius 24px, same styling, resize none.
  - Put it in a flex-1 wrapper so it grows and keeps the submit button at the bottom of the card.

SUBMIT
- Full-width 56px black pill: "Send message" with a paper-plane icon.
- Shows "Sending…" and 60% opacity while pending.

VALIDATION (on the server)
- Name required. Email must match a basic email pattern. Message at least 10 characters.
- Return { ok, errors } and show each error under its field: 12px, red, padding 0 24px.

SUCCESS STATE
- Replace the form with a #f6f6f8 card (radius 28px, min-height 360px; 420px from 768px), centered.
- Inside: a 56px lime #a3f207 circle with a check icon, "Message received" (30px semibold), and a muted thank-you line.