Agency: Contact

"use client";

import { CopyIcon, useCopy } from "../../_primitives/copy/copy";
import { Button } from "../../button/button";
import { contact } from "./content";
import { Reveal, Section } from "./kit";

/**
 * The close: the question, a line on how the studio answers, and the email set as large as the
 * question, as the one way in. A button beside it copies the address, its label swapping to
 * Copied, for people whose mail app is not the default.
 */
export function Contact() {
  const { copied, copy } = useCopy(contact.email);
  return (
    <Section id="contact" label={contact.label} className="flex flex-col gap-pad-lg">
      <Reveal className="flex flex-col gap-pad-base">
        <p className="font-display text-display-5xl font-medium tracking-display text-balance text-text sm:text-display-6xl">{contact.title}</p>
        <p className="max-w-xl text-ui-md text-pretty text-text-secondary">{contact.body}</p>
      </Reveal>
      <Reveal index={1} className="flex flex-wrap items-center gap-x-pad-md gap-y-in">
        <a
          href={`mailto:${contact.email}`}
          className="focus-ring min-w-0 rounded-control-sm font-display text-display-3xl font-medium tracking-display break-all text-text underline decoration-line-strong decoration-2 underline-offset-[0.18em] transition-colors duration-(--eased-duration-fast) ease-standard hover-fine:decoration-text sm:text-display-5xl"
        >
          {contact.email}
        </a>
        <Button variant="secondary" swapKey={copied ? "copied" : "idle"} onClick={() => void copy()}>
          <CopyIcon copied={copied} />
          {copied ? contact.copied : contact.copy}
        </Button>
        <span role="status" className="sr-only">
          {copied ? contact.copied : ""}
        </span>
      </Reveal>
    </Section>
  );
}