Hero Demo

"use client";

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

export interface HeroDemoProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  bullets?: string[];
  onSubmit?: (data: Record<string, string>) => void | Promise<void>;
  className?: string;
}

/** Enterprise demo-request hero: copy + check bullets + quote on the left, a bordered lead form (name, work email, company, size, submit) with validation-ready fields and success state on the right. */
export function HeroDemo({
  eyebrow = "Ledgerly for Enterprise",
  title = "See how Ledgerly fits your finance stack",
  description = "Get a tailored 30-minute walkthrough with a solutions engineer. We’ll map your entities, ERP and approval flows.",
  bullets = ["Native NetSuite, SAP and Xero sync", "Multi-entity and multi-currency close", "SSO, SCIM and granular roles", "Dedicated implementation manager"],
  onSubmit,
  className,
}: HeroDemoProps) {
  const id = useId();
  const [state, setState] = useState<"idle" | "pending" | "done">("idle");
  const submit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setState("pending");
    await onSubmit?.(Object.fromEntries(new FormData(e.currentTarget)) as Record<string, string>);
    setState("done");
  };
  const field = "da-focus da-stroke h-11 w-full rounded-da-md bg-da-input px-3 text-[15px] placeholder:text-da-muted-fg hover:border-da-border-strong";

  return (
    <section className={cn("bg-da-surface-2 py-16 text-da-fg sm:py-24", className)}>
      <div className="da-container grid items-start gap-12 lg:grid-cols-2">
        <div>
          <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
          <h1 className="mt-4 font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-[1.06] font-extrabold tracking-da-display text-balance">{title}</h1>
          <p className="mt-5 max-w-lg text-lg text-da-muted-fg">{description}</p>
          <ul className="mt-8 space-y-3">
            {bullets.map((b) => (
              <li key={b} className="flex items-center gap-3">
                <span aria-hidden className="grid size-6 place-items-center rounded-full bg-da-primary text-da-primary-fg">
                  <Check className="size-3.5" strokeWidth={3} />
                </span>
                {b}
              </li>
            ))}
          </ul>
          <figure className="mt-10 border-l-2 border-da-primary pl-5">
            <blockquote className="text-da-muted-fg">“We went from a 15-day close to 4 days across 11 entities in one quarter.”</blockquote>
            <figcaption className="mt-2 text-sm font-semibold">Dana Whitfield, Controller at Oakridge</figcaption>
          </figure>
        </div>
        <div className="da-stroke rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-md sm:p-8">
          {state === "done" ? (
            <div role="status" className="py-10 text-center">
              <span aria-hidden className="mx-auto grid size-12 place-items-center rounded-full bg-da-success text-da-success-fg">
                <Check className="size-6" />
              </span>
              <p className="mt-4 font-da-display text-xl font-bold">Thanks — we’ll be in touch within one business day.</p>
            </div>
          ) : (
            <form onSubmit={submit} className="grid gap-4 sm:grid-cols-2">
              <p className="font-da-display text-xl font-bold sm:col-span-2">Request a demo</p>
              <div className="grid gap-1.5">
                <label htmlFor={`${id}-fn`} className="text-sm font-medium">
                  First name
                </label>
                <input id={`${id}-fn`} name="firstName" required autoComplete="given-name" className={field} />
              </div>
              <div className="grid gap-1.5">
                <label htmlFor={`${id}-ln`} className="text-sm font-medium">
                  Last name
                </label>
                <input id={`${id}-ln`} name="lastName" required autoComplete="family-name" className={field} />
              </div>
              <div className="grid gap-1.5 sm:col-span-2">
                <label htmlFor={`${id}-em`} className="text-sm font-medium">
                  Work email
                </label>
                <input id={`${id}-em`} name="email" type="email" required autoComplete="email" placeholder="name@company.com" className={field} />
              </div>
              <div className="grid gap-1.5">
                <label htmlFor={`${id}-co`} className="text-sm font-medium">
                  Company
                </label>
                <input id={`${id}-co`} name="company" required autoComplete="organization" className={field} />
              </div>
              <div className="grid gap-1.5">
                <label htmlFor={`${id}-sz`} className="text-sm font-medium">
                  Company size
                </label>
                <select id={`${id}-sz`} name="size" className={field} defaultValue="201-1000">
                  <option>1-50</option>
                  <option>51-200</option>
                  <option>201-1000</option>
                  <option>1000+</option>
                </select>
              </div>
              <button
                type="submit"
                disabled={state === "pending"}
                className="da-focus da-transition mt-2 h-12 rounded-da-md bg-da-primary font-semibold text-da-primary-fg hover:bg-da-primary/90 disabled:opacity-60 sm:col-span-2"
              >
                {state === "pending" ? "Sending…" : "Book my demo"}
              </button>
              <p className="text-xs text-da-muted-fg sm:col-span-2">
                By submitting you agree to our{" "}
                <a href="#privacy" className="da-focus rounded-da-sm underline">
                  Privacy Policy
                </a>
                .
              </p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

export default HeroDemo;