import { Star } from "lucide-react";

// Template rating and quotes — use your own, real reviews.
const rating = { score: "4.9", label: "from 2,000+ studio owners", faces: ["RK", "AS", "DM", "MI", "KB"] };
const quotes = [
  { quote: "No more no-shows since we started taking deposits.", name: "Riya K.", role: "Hair studio owner", initials: "RK" },
  { quote: "Clients book at midnight. I wake up to a full Saturday.", name: "Dev M.", role: "Barber", initials: "DM" },
  { quote: "Setting it up took one coffee. Rescheduling takes one tap.", name: "Meera I.", role: "Yoga teacher", initials: "MI" },
];

export function HeroSocialProof({ action = "/signup" }: { action?: string }) {
  return (
    <section aria-labelledby="hero-title" className="bg-bg font-sans">
      <div className="mx-auto flex max-w-5xl flex-col items-center gap-5 px-4 py-16 text-center sm:px-6 sm:py-24">
        <div className="flex flex-wrap items-center justify-center gap-x-3.5 gap-y-2 text-[13.5px] text-fg-muted">
          <div className="flex [&>*]:-ml-2 [&>*:first-child]:ml-0">
            {rating.faces.map((f) => (
              <span key={f} className="grid size-7 place-items-center rounded-full border-2 border-bg bg-primary-soft text-[11px] font-medium text-primary-soft-fg">{f}</span>
            ))}
          </div>
          <span role="img" aria-label={rating.score + " out of 5 stars"} className="flex gap-0.5 text-warning">
            {Array.from({ length: 5 }, (_, i) => <Star key={i} className="size-[15px] fill-current" />)}
          </span>
          <span><b className="font-semibold text-fg">{rating.score}</b> {rating.label}</span>
        </div>

        <h1 id="hero-title" className="max-w-3xl text-balance text-4xl font-semibold leading-[1.04] tracking-tight text-fg sm:text-5xl lg:text-6xl">
          The booking page your regulars will actually use.
        </h1>
        <p className="max-w-xl text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">
          Slotwise gives your studio a simple page to book, pay a deposit and reschedule — and gives you your evenings back.
        </p>

        <form action={action} className="flex w-full max-w-md flex-col gap-1.5 rounded-lg border border-border-strong bg-bg p-1.5 focus-within:border-primary focus-within:ring-4 focus-within:ring-ring/20 sm:flex-row">
          <label htmlFor="hero-email" className="sr-only">Email address</label>
          <input id="hero-email" name="email" type="email" required placeholder="you@studio.com" className="h-10 min-w-0 flex-1 bg-transparent px-2.5 text-[14.5px] text-fg outline-none placeholder:text-fg-subtle" />
          <button type="submit" className="h-10 rounded bg-primary px-4 text-sm font-medium text-primary-fg transition hover:bg-primary-hover">Start free</button>
        </form>
        <p className="text-[13px] text-fg-subtle">14 days of every feature · No card needed</p>

        <div className="mt-8 grid w-full gap-3 text-left md:grid-cols-3">
          {quotes.map((q, i) => (
            <figure key={q.name} className={i > 0 ? "hidden gap-3.5 rounded-lg border border-border bg-surface p-[18px] md:grid" : "grid gap-3.5 rounded-lg border border-border bg-surface p-[18px]"}>
              <blockquote className="text-sm leading-relaxed text-fg">“{q.quote}”</blockquote>
              <figcaption className="flex items-center gap-2.5 text-[12.5px] text-fg-muted">
                <span className="grid size-7 place-items-center rounded-full bg-primary-soft text-[11px] font-medium text-primary-soft-fg">{q.initials}</span>
                <span><b className="block font-medium text-fg">{q.name}</b>{q.role}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}