import { Check } from "lucide-react";

const points = [
  "Card and bank transfer on every invoice",
  "Reminders that stop the moment you’re paid",
  "Export everything for your accountant",
];
const clientCounts = [
  { value: "1", label: "Just one" },
  { value: "2-10", label: "2 – 10" },
  { value: "11+", label: "More than 10" },
];

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

export function HeroSignupForm({ action = "/api/signup" }: { action?: string }) {
  return (
    <section aria-labelledby="hero-title" className="bg-bg bg-gradient-to-b from-bg from-55% to-primary-soft/40 font-sans">
      <div className="mx-auto grid max-w-6xl items-center gap-10 px-4 py-16 sm:px-6 sm:py-24 lg:grid-cols-[1.15fr_0.85fr] lg:gap-14">
        <div className="flex flex-col items-start gap-5">
          <p className="text-[13px] font-medium text-primary">Free for your first 5 invoices</p>
          <h1 id="hero-title" className="text-balance text-4xl font-semibold leading-[1.04] tracking-tight text-fg sm:text-5xl lg:text-6xl">
            Your next invoice could be out in two minutes.
          </h1>
          <p className="max-w-lg text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">
            Make an account, add a client and send a branded invoice with a pay link — before your coffee’s cold.
          </p>
          <ul className="grid gap-2.5 text-sm text-fg">
            {points.map((p) => (
              <li key={p} className="flex gap-2.5"><Check className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden />{p}</li>
            ))}
          </ul>
        </div>

        <form action={action} method="post" aria-labelledby="signup-title" className="grid gap-3.5 rounded-xl border border-border bg-bg p-5 shadow-2xl sm:p-7">
          <h2 id="signup-title" className="text-lg font-semibold tracking-tight text-fg">Create your free account</h2>
          <label className="grid gap-1.5">
            <span className="text-[13px] font-medium text-fg">Your name</span>
            <input name="name" required autoComplete="name" placeholder="Asha Rao" className={field} />
          </label>
          <label className="grid gap-1.5">
            <span className="text-[13px] font-medium text-fg">Work email</span>
            <input name="email" type="email" required autoComplete="email" placeholder="asha@studio.com" className={field} />
          </label>
          <label className="grid gap-1.5">
            <span className="text-[13px] font-medium text-fg">How many clients do you bill?</span>
            <select name="clients" defaultValue="2-10" className={field}>
              {clientCounts.map((c) => <option key={c.value} value={c.value}>{c.label}</option>)}
            </select>
          </label>
          <button type="submit" className="h-[42px] rounded bg-primary text-sm font-medium text-primary-fg transition hover:bg-primary-hover">Create account</button>
          <p className="text-xs leading-relaxed text-fg-subtle">
            By signing up you agree to the <a href="/terms" className="text-fg-muted underline">Terms</a> and{" "}
            <a href="/privacy" className="text-fg-muted underline">Privacy Policy</a>. No card needed.
          </p>
        </form>
      </div>
    </section>
  );
}