Contact — simple centred form

import { Mail, Phone } from "lucide-react";

const field = "w-full rounded border border-border-strong bg-bg px-3 text-sm text-fg outline-none placeholder:text-fg-subtle focus:border-primary focus:ring-[3px] focus:ring-primary/20";

export function ContactCentered({ action = "/api/contact" }: { action?: string }) {
  return (
    <section aria-labelledby="contact-simple-title" className="bg-surface px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-2xl text-center">
        <h2 id="contact-simple-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Get in touch</h2>
        <p className="mt-4 text-base text-fg-muted sm:text-lg">Questions about bookings, billing or your account? Send us a note and we’ll reply the same day.</p>
      </div>

      <form action={action} method="post" className="mx-auto mt-10 grid max-w-[520px] gap-4">
        <label className="grid gap-1.5"><span className="text-[13px] font-medium text-fg">Name</span><input name="name" required autoComplete="name" placeholder="Your name" className={field + " h-9"} /></label>
        <label className="grid gap-1.5"><span className="text-[13px] font-medium text-fg">Email</span><input name="email" type="email" required autoComplete="email" placeholder="you@example.com" className={field + " h-9"} /></label>
        <label className="grid gap-1.5"><span className="text-[13px] font-medium text-fg">How can we help?</span><textarea name="message" required rows={5} placeholder="Tell us a little about it…" className={field + " py-2.5"} /></label>
        <button type="submit" className="h-11 rounded bg-primary text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover">Send message</button>
        <p className="text-center text-[13px] text-fg-subtle">We only use your details to answer this message.</p>
      </form>

      <div className="mt-7 flex flex-wrap justify-center gap-x-5 gap-y-2 text-[13.5px] text-fg-muted">
        <span>Prefer something else?</span>
        <a href="mailto:hello@slotwise.example" className="inline-flex items-center gap-1.5 text-fg hover:underline"><Mail className="size-3.5" aria-hidden />hello@slotwise.example</a>
        <a href="tel:+15550177" className="inline-flex items-center gap-1.5 text-fg hover:underline"><Phone className="size-3.5" aria-hidden />+1 555 0177</a>
      </div>
    </section>
  );
}