Book a Call

"use client";

// Exact layered casing from the reference hover state: white gloss highlights,
// a warm peach inner glow, a rust bottom-left shadow, and a 10px light-blue
// inner ring — a frosted, iridescent frame that wraps the button on hover.
const GLASS_SHADOW = [
  "rgba(255,255,255,0.5) 0px 1.99903px 1.6253px 0px inset",
  "rgb(234,186,173) 0px 4.63843px 4.34853px 0px inset",
  "rgba(255,255,255,0.06) 0px 0.579804px 0.289902px 0px inset",
  "rgba(255,255,255,0.88) 0px 0.579804px 2.34751px 0px inset",
  "rgba(180,62,29,0.8) -4.34853px -3.47882px 2.31921px 0px inset",
  "rgb(160,182,247) 0px 0px 0px 10px inset",
  "rgba(0,0,0,0.18) 0px 14px 30px -10px",
].join(", ");

// Grey top-edge inset highlight + a soft float shadow. The black outer edge is
// a real border (uniform all the way around, unlike a box-shadow spread ring).
const PILL_SHADOW = [
  "inset 0 1px 1px #7B7B83",
  "0 12px 24px -10px rgba(0,0,0,0.5)",
].join(", ");

function MeetIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 87.5 72"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        fill="#00832d"
        d="M49.5 36l8.53 9.75 11.47 7.33 2-17.02-2-16.64-11.69 6.44z"
      />
      <path
        fill="#0066da"
        d="M0 51.5V66c0 3.315 2.685 6 6 6h14.5l3-10.96-3-9.54-9.95-3z"
      />
      <path fill="#e94235" d="M20.5 0L0 20.5l10 3 10.5-3 3-10z" />
      <path fill="#2684fc" d="M20.5 20.5H0v31h20.5z" />
      <path
        fill="#00ac47"
        d="M82.6 8.68L69.5 19.42v33.66l13.16 10.79c1.97 1.54 4.85.135 4.85-2.37V11c0-2.535-2.945-3.925-4.91-2.32zM49.5 36v15.5h-29V72h43c3.315 0 6-2.685 6-6V53.08z"
      />
      <path
        fill="#ffba00"
        d="M63.5 0h-43v20.5h29V36l20-16.57V6c0-3.315-2.685-6-6-6z"
      />
    </svg>
  );
}

export default function BookACall() {
  return (
    <div className="flex h-full w-full items-center justify-center p-8">
      <div className="relative w-[340px] overflow-hidden rounded-[28px] border border-black/[0.07] bg-[#f3f3f5] shadow-[0_24px_60px_-24px_rgba(0,0,0,0.55)]">
        {/* Header */}
        <div className="relative z-10 px-7 pt-7">
          <img
            src="https://i.pravatar.cc/150?img=12"
            alt=""
            draggable={false}
            className="size-14 rounded-full object-cover shadow-md ring-4 ring-white"
          />
          <h3 className="mt-5 text-[26px] font-bold leading-tight tracking-tight text-[#1b1b1f]">
            Can&apos;t find your answer?
          </h3>
          <p className="mt-1 text-[15px] text-[#77777e]">
            Book a call and let&apos;s talk.
          </p>
        </div>

        {/* Gradient bottom + CTA */}
        <div className="relative mt-6 h-[190px]">
          <img
            src="/book-a-call-gradient.png"
            alt=""
            aria-hidden
            draggable={false}
            className="absolute inset-0 h-full w-full object-cover"
          />
          {/* Blend the seam between the light card and the gradient */}
          <div className="pointer-events-none absolute inset-x-0 top-0 h-14 bg-gradient-to-b from-[#f3f3f5] to-transparent" />

          {/* CTA */}
          <div className="absolute inset-x-5 bottom-6 flex justify-center">
            <div className="group relative flex cursor-pointer rounded-full p-3">
              {/* Glass casing — fades in on hover; the pill itself stays put */}
              <span
                aria-hidden
                style={{ boxShadow: GLASS_SHADOW }}
                className="pointer-events-none absolute inset-0 scale-[0.98] rounded-full bg-white/40 opacity-0 backdrop-blur-[3px] transition-all duration-300 ease-out group-hover:scale-100 group-hover:opacity-100"
              />
              {/* Pill button */}
              <button
                type="button"
                style={{ boxShadow: PILL_SHADOW }}
                className="relative z-10 flex h-11 w-full items-center justify-center gap-2 rounded-full border-[3px] border-black bg-[#2c2c39] px-5 text-[13px] font-semibold tracking-tight text-white transition-colors duration-300 group-hover:border-transparent"
              >
                <MeetIcon className="size-[18px] shrink-0" />
                Book a 15 min call
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}