Cta 5

import { CalendarClock, Mail, Phone } from "lucide-react";
import Image from "next/image";

import { cn } from "@/lib/utils";

import type { ImageAsset } from "../_types/common";
import type { CtaContactIcon, CtaContent } from "../_types/cta";
import { defaultCta5Background, defaultCta5Content } from "./data";
import { EnquiryForm } from "./enquiry-form";
import { SectionHeader } from "./section-header";

const contactIcons: Record<CtaContactIcon, typeof Phone> = {
  clock: CalendarClock,
  mail: Mail,
  phone: Phone,
};

export default function Cta5({
  backgroundImage = defaultCta5Background,
  content = defaultCta5Content,
  onPhoto = false,
  onSubmit,
}: {
  /** Photo behind the band. Pass `null` for a plain primary band. */
  backgroundImage?: ImageAsset | null;
  content?: CtaContent;
  /** A parent already paints a photo behind this band (and usually the
   *  footer below): stay transparent but keep the photo text colours. */
  onPhoto?: boolean;
  onSubmit?: (values: Record<string, unknown>) => Promise<void> | void;
}) {
  const photo = Boolean(backgroundImage) || onPhoto;

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden",
        photo ? "text-white" : "bg-primary text-primary-foreground",
      )}
    >
      {backgroundImage && (
        <>
          <Image
            alt={backgroundImage.alt}
            className="-z-10 object-cover"
            fill
            sizes="100vw"
            src={backgroundImage.src}
          />
          <div className="absolute inset-0 -z-10 bg-primary/55" />
        </>
      )}

      <div className="mx-auto max-w-7xl px-5 py-20 sm:px-8 sm:py-28 lg:px-12">
        <div className="grid gap-14 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-6">
            <SectionHeader
              description={content.description}
              eyebrow={content.eyebrow}
              title={content.title}
              tone={photo ? "photo" : "primary"}
            />

            {content.contacts && content.contacts.length > 0 && (
              <div className="mt-10 flex flex-col gap-4 border-current/15 border-t pt-8 sm:flex-row sm:gap-10">
                {content.contacts.map((contact) => {
                  const Icon = contactIcons[contact.icon];
                  const body = (
                    <>
                      <Icon className="size-5" />
                      <span>
                        <span className="block text-xs opacity-50">
                          {contact.label}
                        </span>
                        {contact.value}
                      </span>
                    </>
                  );

                  return contact.href ? (
                    <a
                      className="flex items-center gap-3 transition-colors hover:text-secondary"
                      href={contact.href}
                      key={contact.label}
                    >
                      {body}
                    </a>
                  ) : (
                    <span
                      className="flex items-center gap-3"
                      key={contact.label}
                    >
                      {body}
                    </span>
                  );
                })}
              </div>
            )}
          </div>

          {content.form && (
            <div className="lg:col-span-6 lg:pl-8">
              <EnquiryForm
                className="rounded-lg text-foreground"
                content={content.form}
                onSubmit={onSubmit}
                size="sm"
              />
            </div>
          )}
        </div>
      </div>
    </section>
  );
}