Call to action — with email capture

"use client";
import { useState } from "react";
import { ArrowRight } from "lucide-react";

export function CtaEmailCapture({ onSubmit }: { onSubmit?: (email: string) => void }) {
  const [email, setEmail] = useState("");
  return (
    <section aria-labelledby="cta-email-title" className="bg-surface px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto grid max-w-2xl justify-items-center gap-4 text-center">
        <h2 id="cta-email-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Try Slotwise free for 30 days</h2>
        <p className="text-base text-fg-muted sm:text-lg">Put in your work email and we’ll set up a booking page you can share today.</p>
        <form
          onSubmit={(e) => { e.preventDefault(); onSubmit?.(email); }}
          className="mt-2 flex w-full max-w-[480px] flex-col gap-1.5 rounded-lg border border-border-strong bg-bg p-1.5 shadow-lg focus-within:border-primary focus-within:ring-[3px] focus-within:ring-primary/20 sm:flex-row"
        >
          <label htmlFor="cta-email" className="sr-only">Work email</label>
          <input
            id="cta-email"
            type="email"
            required
            autoComplete="email"
            placeholder="you@yourbusiness.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="h-[42px] min-w-0 flex-1 bg-transparent px-3 text-sm text-fg outline-none placeholder:text-fg-subtle"
          />
          <button type="submit" className="inline-flex h-[42px] items-center justify-center gap-1.5 rounded bg-primary px-4 text-sm font-medium text-primary-fg transition hover:bg-primary-hover">
            Get my page <ArrowRight className="size-4" aria-hidden />
          </button>
        </form>
        <div className="mt-2 flex flex-wrap items-center justify-center gap-2.5 text-[13px] text-fg-muted">
          <div className="flex [&>*]:-ml-2 [&>*]:border-2 [&>*]:border-surface [&>*:first-child]:ml-0" aria-hidden>
            {["LF", "BO", "AK", "RS"].map((i) => (
              <span key={i} className="grid size-7 place-items-center rounded-full bg-primary-soft text-[11px] font-medium text-primary-soft-fg">{i}</span>
            ))}
          </div>
          <span>No card needed. Cancel with one click.</span>
        </div>
      </div>
    </section>
  );
}