Newsletter — inline row

import { Mail } from "lucide-react";

export function NewsletterInline({ action = "/api/subscribe" }: { action?: string }) {
  return (
    <section aria-labelledby="newsletter-inline-title" className="bg-bg px-5 py-12 font-sans sm:px-10">
      <div className="mx-auto grid max-w-6xl items-center gap-5 border-y border-border py-8 lg:grid-cols-[1fr_440px] lg:gap-12">
        <div className="flex items-start gap-4">
          <span className="grid size-10 shrink-0 place-items-center rounded bg-primary-soft text-primary-soft-fg"><Mail className="size-[19px]" aria-hidden /></span>
          <div>
            <h2 id="newsletter-inline-title" className="text-lg font-semibold tracking-tight text-fg">The Friday cash-flow note</h2>
            <p className="mt-1 text-sm leading-relaxed text-fg-muted">One practical tip on getting paid, every Friday. Two-minute read, no sales pitch.</p>
          </div>
        </div>
        <form action={action} method="post" className="grid gap-2">
          <div className="flex flex-wrap gap-2">
            <label htmlFor="newsletter-inline-email" className="sr-only">Email address</label>
            <input id="newsletter-inline-email" name="email" type="email" required autoComplete="email" placeholder="you@example.com"
              className="h-[42px] min-w-0 flex-[1_1_200px] 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" />
            <button type="submit" className="h-[42px] shrink-0 rounded bg-primary px-4 text-sm font-medium text-primary-fg transition hover:bg-primary-hover">Subscribe</button>
          </div>
          <p className="text-[13px] text-fg-subtle">Unsubscribe with one click. We never share your address.</p>
        </form>
      </div>
    </section>
  );
}