Split CTA With Lead Form

export default function CtaSplitForm() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-5xl overflow-hidden rounded-3xl border border-zinc-200 bg-zinc-50 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <div className="grid md:grid-cols-2">
          <div className="flex flex-col justify-center gap-6 p-8 md:p-12">
            <div>
              <span className="text-sm font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
                Free strategy session
              </span>
              <h2 className="mt-3 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
                Tell us where you are stuck.
              </h2>
              <p className="mt-4 text-pretty text-lg text-zinc-600 dark:text-zinc-400">
                Share a few details and a senior specialist will reply within one
                working day with honest, specific next steps.
              </p>
            </div>
            <ul className="space-y-3 text-sm text-zinc-700 dark:text-zinc-300">
              {[
                "A tailored plan, not a sales script",
                "Clear pricing before any commitment",
                "Real people who reply fast",
              ].map((point) => (
                <li key={point} className="flex items-start gap-3">
                  <svg
                    aria-hidden="true"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                    className="mt-0.5 h-5 w-5 flex-none text-indigo-600 dark:text-indigo-400"
                  >
                    <path
                      fillRule="evenodd"
                      d="M16.704 5.29a.75.75 0 0 1 .006 1.06l-7.5 7.6a.75.75 0 0 1-1.07 0l-3.85-3.9a.75.75 0 1 1 1.068-1.052l3.316 3.358 6.97-7.064a.75.75 0 0 1 1.06-.006Z"
                      clipRule="evenodd"
                    />
                  </svg>
                  <span>{point}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="border-t border-zinc-200 bg-white p-8 md:border-l md:border-t-0 md:p-12 dark:border-zinc-800 dark:bg-zinc-950">
            <form className="flex flex-col gap-5">
              <div>
                <label
                  htmlFor="cta-split-name"
                  className="block text-sm font-medium text-zinc-800 dark:text-zinc-200"
                >
                  Full name
                </label>
                <input
                  id="cta-split-name"
                  name="name"
                  type="text"
                  autoComplete="name"
                  placeholder="Alex Morgan"
                  className="mt-2 block w-full rounded-lg border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm placeholder:text-zinc-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
                />
              </div>
              <div>
                <label
                  htmlFor="cta-split-email"
                  className="block text-sm font-medium text-zinc-800 dark:text-zinc-200"
                >
                  Work email
                </label>
                <input
                  id="cta-split-email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="you@company.com"
                  className="mt-2 block w-full rounded-lg border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm placeholder:text-zinc-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
                />
              </div>
              <div>
                <label
                  htmlFor="cta-split-message"
                  className="block text-sm font-medium text-zinc-800 dark:text-zinc-200"
                >
                  What can we help with?
                </label>
                <textarea
                  id="cta-split-message"
                  name="message"
                  rows={3}
                  placeholder="A sentence or two is plenty."
                  className="mt-2 block w-full resize-none rounded-lg border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-900 shadow-sm placeholder:text-zinc-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
                />
              </div>
              <button
                type="submit"
                className="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
              >
                Request my session
              </button>
              <p className="text-center text-xs text-zinc-500 dark:text-zinc-500">
                By submitting you agree to our privacy policy. We never share your
                details.
              </p>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}