Newsletter — card with perks

import { Calendar, Clock, Users, type LucideIcon } from "lucide-react";

const perks: { icon: LucideIcon; title: string; body: string }[] = [
  { icon: Calendar, title: "Fuller diaries", body: "Tactics for filling quiet weekday slots." },
  { icon: Clock, title: "Fewer no-shows", body: "Reminder and deposit setups that work." },
  { icon: Users, title: "Real stories", body: "How other small teams run their week." },
];

export function NewsletterPerks({ action = "/api/subscribe" }: { action?: string }) {
  return (
    <section aria-labelledby="newsletter-perks-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto grid max-w-3xl justify-items-center gap-7 rounded-xl border border-border bg-gradient-to-b from-primary-soft to-bg to-60% px-6 py-10 text-center sm:px-12 sm:py-14">
        <div className="grid justify-items-center gap-3">
          <span className="rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">Free, every other Tuesday</span>
          <h2 id="newsletter-perks-title" className="text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Run a calmer booking business</h2>
          <p className="text-base text-fg-muted sm:text-lg">The Slotwise letter for salon owners, therapists and studio managers.</p>
        </div>

        <ul className="grid w-full gap-3 text-left sm:grid-cols-3">
          {perks.map(({ icon: Icon, title, body }) => (
            <li key={title} className="grid gap-1.5 rounded-lg border border-border bg-bg p-[18px] text-[13.5px]">
              <span className="flex items-center gap-2 text-sm font-semibold text-fg"><Icon className="size-4 text-primary" aria-hidden />{title}</span>
              <span className="leading-relaxed text-fg-muted">{body}</span>
            </li>
          ))}
        </ul>

        <form action={action} method="post" className="grid w-full max-w-[460px] gap-2.5">
          <div className="flex flex-wrap gap-2">
            <label htmlFor="newsletter-perks-email" className="sr-only">Email address</label>
            <input id="newsletter-perks-email" name="email" type="email" required autoComplete="email" placeholder="you@yourstudio.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">Send me the letter</button>
          </div>
          <p className="text-[13px] text-fg-subtle">Read by people who run studios, salons and clinics. Leave whenever you like.</p>
        </form>
      </div>
    </section>
  );
}