import Link from "next/link";
import { PlaceholderImage } from "./PlaceholderImage";

export function CtaSplit() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-6xl px-8">
        <div className="grid grid-cols-1 overflow-hidden rounded-[26px] md:grid-cols-2">
          <div className="flex flex-col justify-center bg-navy px-12 py-14 text-white">
            <h2 className="mb-3.5 font-heading text-3xl font-semibold md:text-4xl">
              Ready to see what this looks like for your business?
            </h2>
            <p className="mb-6 text-[15.5px] text-white/60">
              Free for the first 30 minutes. No deck — just your business and a
              whiteboard.
            </p>
            <Link
              href="/book"
              className="w-fit rounded-full bg-green px-6 py-4 text-[15px] font-semibold text-white"
            >
              Book your free call
            </Link>
          </div>
          <PlaceholderImage
            label="Photo placeholder — warm, human · 700×560"
            className="h-full min-h-[280px] rounded-none border-none"
          />
        </div>
      </div>
    </section>
  );
}