Hero Signup

"use client";

import { useId, useState, type FormEvent } from "react";
import { Check, Star } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeroSignupProps {
  title?: string;
  highlight?: string;
  description?: string;
  buttonLabel?: string;
  onSubmit?: (email: string) => void | Promise<void>;
  perks?: string[];
  rating?: { score: string; source: string };
  className?: string;
}

/** Sign-up hero on a soft butter panel: headline with a highlighted word, email + pill button form (success state), perks and a store rating. */
export function HeroSignup({
  title = "Get your team",
  highlight = "on the same page",
  description = "Boards, weekly plans and friendly reminders — set up in two minutes, free forever for teams up to 5.",
  buttonLabel = "Create my board",
  onSubmit,
  perks = ["Free for 5 people", "No credit card", "Import from Trello"],
  rating = { score: "4.8", source: "on the App Store" },
  className,
}: HeroSignupProps) {
  const id = useId();
  const [done, setDone] = useState(false);

  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    await onSubmit?.(String(new FormData(e.currentTarget).get("email")));
    setDone(true);
  };

  return (
    <section className={cn("bg-da-bg px-4 py-10 text-da-fg sm:py-16", className)}>
      <div className="mx-auto max-w-5xl rounded-[36px] bg-da-warning/25 px-6 py-16 text-center sm:px-12">
        <h1 className="mx-auto max-w-3xl font-da-display text-[clamp(2.25rem,6vw,4rem)] leading-[1.05] font-extrabold tracking-da-display text-balance">
          {title}{" "}
          <span className="relative inline-block">
            <span aria-hidden className="absolute inset-x-0 bottom-1 -z-0 h-4 rounded-da-pill bg-da-accent sm:h-5" />
            <span className="relative">{highlight}</span>
          </span>
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-pretty text-da-muted-fg">{description}</p>
        {done ? (
          <p role="status" className="mx-auto mt-8 inline-flex items-center gap-2 rounded-da-pill bg-da-secondary px-6 py-3 font-semibold text-da-secondary-fg">
            <Check aria-hidden className="size-5" /> Check your inbox — your board is ready!
          </p>
        ) : (
          <form
            onSubmit={submit}
            className="mx-auto mt-8 flex max-w-md flex-col gap-2 rounded-da-lg bg-da-surface p-2 shadow-da-md sm:flex-row sm:rounded-da-pill"
          >
            <label htmlFor={id} className="sr-only">
              Work email
            </label>
            <input
              id={id}
              name="email"
              type="email"
              required
              autoComplete="email"
              placeholder="you@team.com"
              className="da-focus h-12 min-w-0 sm:flex-1 rounded-da-pill bg-transparent px-5 outline-none placeholder:text-da-muted-fg"
            />
            <button
              type="submit"
              className="da-focus da-transition h-12 rounded-da-pill bg-da-primary px-6 font-semibold text-da-primary-fg hover:-translate-y-0.5"
            >
              {buttonLabel}
            </button>
          </form>
        )}
        <ul className="mt-6 flex flex-wrap justify-center gap-x-5 gap-y-2 text-sm font-medium">
          {perks.map((p) => (
            <li key={p} className="inline-flex items-center gap-1.5">
              <span aria-hidden className="grid size-5 place-items-center rounded-full bg-da-secondary text-da-secondary-fg">
                <Check className="size-3" />
              </span>
              {p}
            </li>
          ))}
        </ul>
        <p className="mt-8 inline-flex items-center gap-2 text-sm text-da-muted-fg">
          <span className="flex text-da-fg" aria-hidden>
            {Array.from({ length: 5 }, (_, i) => (
              <Star key={i} className="size-4 fill-current" />
            ))}
          </span>
          <span>
            <span className="font-semibold text-da-fg">{rating.score}</span> {rating.source}
          </span>
        </p>
      </div>
    </section>
  );
}

export default HeroSignup;