Cta Contact

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

export interface CtaContactProps {
  label?: string;
  title?: string;
  email?: string;
  channels?: { label: string; value: string; href: string }[];
  className?: string;
}

/** Studio-style contact CTA: mono label, headline, the email address set huge as a link, and a row of contact channels (studio, press, careers) in mono under a hairline. */
export function CtaContact({
  label = "(08) Contact",
  title = "Questions, partnerships, or just hello.",
  email = "hello@frame.studio",
  channels = [
    { label: "Studio", value: "Keizersgracht 62, Amsterdam", href: "#map" },
    { label: "Press", value: "press@frame.studio", href: "mailto:press@frame.studio" },
    { label: "Careers", value: "3 open roles", href: "#careers" },
  ],
  className,
}: CtaContactProps) {
  return (
    <section aria-labelledby="mc-cc-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <p className="font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{label}</p>
        <h2 id="mc-cc-title" className="mt-4 max-w-xl text-xl text-da-muted-fg">
          {title}
        </h2>
        <a
          href={`mailto:${email}`}
          className="da-focus mt-6 inline-block rounded-da-sm font-da-display text-[clamp(2.25rem,8vw,7rem)] leading-none font-medium tracking-da-display break-all underline decoration-2 underline-offset-[0.15em] decoration-da-border hover:decoration-da-accent"
        >
          {email}
        </a>
        <ul className="mt-14 grid gap-6 border-t border-da-border pt-6 sm:grid-cols-3">
          {channels.map((c) => (
            <li key={c.label} className="font-da-mono text-xs tracking-da-label uppercase">
              <span className="block text-da-muted-fg">{c.label}</span>
              <a href={c.href} className="da-focus mt-1 inline-block rounded-da-sm hover:underline">
                {c.value}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default CtaContact;