Contact 5

import { CalendarClock, Mail, MapPin, Phone } from "lucide-react";

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

import type { Surface } from "../_types/common";
import type { ContactContent } from "../_types/contact";
import { defaultContact5Content } from "./data";
import { EnquiryForm } from "./enquiry-form";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

function telHref(phone: string): string {
  return `tel:${phone.replace(/[^\d+]/g, "")}`;
}

/** An enquiry form beside a column of office cards and a general inbox. */
export default function Contact5({
  content = defaultContact5Content,
  onSubmit,
  surface = "default",
}: {
  content?: ContactContent;
  onSubmit?: (values: Record<string, unknown>) => Promise<void> | void;
  surface?: Surface;
}) {
  const { aside } = content;

  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <div className="grid gap-14 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-7">
            <EnquiryForm
              className="rounded-lg border border-border sm:p-10"
              content={content.form}
              onSubmit={onSubmit}
            />
          </div>

          <div className="lg:col-span-5">
            <SectionHeader
              description={aside.description}
              eyebrow={aside.eyebrow}
              size="sm"
              title={aside.title}
              tone={toneFor(surface)}
            />

            <div className="mt-8 grid gap-px overflow-hidden rounded-lg bg-border">
              {aside.locations.map((location) => (
                <div className="bg-card p-6" key={location.label}>
                  <h3 className="font-display text-2xl text-primary">
                    {location.label}
                  </h3>
                  <p className="mt-3 flex items-start gap-3 text-muted-foreground text-sm">
                    <MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground/70" />
                    {location.address}
                  </p>
                  {location.phone && (
                    <a
                      className="mt-2 flex items-center gap-3 text-muted-foreground text-sm transition-colors hover:text-primary"
                      href={telHref(location.phone)}
                    >
                      <Phone className="size-4 shrink-0 text-muted-foreground/70" />
                      {location.phone}
                    </a>
                  )}
                  {location.hours && (
                    <p className="mt-2 flex items-center gap-3 text-muted-foreground text-sm">
                      <CalendarClock className="size-4 shrink-0 text-muted-foreground/70" />
                      {location.hours}
                    </p>
                  )}
                </div>
              ))}

              {aside.email && (
                <div className="bg-card p-6">
                  <h3 className="font-display text-2xl text-primary">
                    {aside.email.title}
                  </h3>
                  <a
                    className="mt-3 flex items-center gap-3 text-muted-foreground text-sm transition-colors hover:text-primary"
                    href={`mailto:${aside.email.address}`}
                  >
                    <Mail className="size-4 shrink-0 text-muted-foreground/70" />
                    {aside.email.address}
                  </a>
                  {aside.email.note && (
                    <p className="mt-3 text-muted-foreground text-sm leading-relaxed">
                      {aside.email.note}
                    </p>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}