"use client";

import Image from "next/image";
import { Button as BaseButton } from "@base-ui/react/button";
// Milky-white glass casing with restrained peach and rust reflections. The
// broad white inset keeps the outer ring neutral while the edge colors softly
// pick up the gradient beneath it.
const GLASS_SHADOW = [
  "rgba(255,255,255,0.72) 0px 1.99903px 1.6253px 0px inset",
  "rgba(234,186,173,0.55) 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.32) -4.34853px -3.47882px 2.31921px 0px inset",
  "rgba(255,253,250,0.88) 0px 0px 0px 12px 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(", ");

// The slim gap between the glass casing and pill follows the pill perimeter:
// peach/orange across the top, yellow on the right, and blue along the left.
const RIM_GRADIENT =
  "conic-gradient(from 0deg at 50% 50%, #ffd9c4 0%, #ffae70 16%, #ffd15f 27%, #f3cf59 43%, #b7d8c4 56%, #a9d4f2 70%, #b7dcff 82%, #e2ecff 92%, #ffd9c4 100%)";

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">
          <Image
            src="https://i.pravatar.cc/150?img=12"
            alt=""
            width={56}
            height={56}
            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]">
          <Image
            src="/book-a-call-gradient.png"
            alt=""
            aria-hidden
            draggable={false}
            width={340}
            height={190}
            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 transition-transform duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100">
              {/* Pill button */}
              <BaseButton
                type="button"
                style={{ boxShadow: PILL_SHADOW }}
                className="peer relative z-10 flex h-11 w-full items-center justify-center gap-2 rounded-full border-2 border-black bg-[#2c2c39] px-5 text-[13px] font-semibold tracking-tight text-white transition-[background-color,border-color] duration-200 ease group-hover:border-transparent group-hover:bg-[#343442] focus-visible:border-transparent focus-visible:bg-[#343442] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:transition-none"
              >
                <MeetIcon className="size-[18px] shrink-0" />
                Book a 15 min call
              </BaseButton>

              {/* Glass casing — cross-fades on hover or keyboard focus. */}
              <span
                aria-hidden
                style={{ boxShadow: GLASS_SHADOW }}
                className="pointer-events-none absolute inset-0 rounded-full bg-white/80 opacity-0 backdrop-blur-[3px] transition-opacity duration-200 ease group-hover:opacity-100 peer-focus-visible:opacity-100 motion-reduce:transition-none"
              />

              {/* Iridescent rim — uses the same timing as the casing and pill. */}
              <span
                aria-hidden
                style={{
                  background: RIM_GRADIENT,
                  padding: "3px",
                  WebkitMask:
                    "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
                  WebkitMaskComposite: "xor",
                  mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
                  maskComposite: "exclude",
                }}
                className="pointer-events-none absolute inset-3 z-20 rounded-full opacity-0 transition-opacity duration-200 ease group-hover:opacity-100 peer-focus-visible:opacity-100 motion-reduce:transition-none"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Book a Call

Can't find your answer?
