Update

components/contact/ContactCtaSection.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
+import styles from "./ContactCtaSection.module.css";
+import { contactCtaData, type ContactInfo } from "./ContactCtaData";
+
+function ObfuscatedLink({ item }: { item: ContactInfo }) {
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (item.obfuscated?.tel) {
+      ref.current.href = `tel:${item.obfuscated.tel}`;
+    } else if (item.obfuscated?.user && item.obfuscated?.domain) {
+      ref.current.href = `mailto:${item.obfuscated.user}@${item.obfuscated.domain}`;
+    }
+  }, [item.obfuscated]);
+
+  const Icon = item.icon;
+
+  return (
+    <a ref={ref} href="#" className={styles.contactItem}>
+      <Icon size={20} weight="regular" aria-hidden="true" />
+      {item.label}
+    </a>
+  );
+}
+
+export default function ContactCtaSection() {
+  const { heading, lead, buttonLabel, buttonHref, contacts } = contactCtaData;
+
+  return (
+    <section className={styles.section} aria-labelledby="contact-cta-heading">
+      <div className={styles.inner}>
+        <div className={styles.card}>
+          <div className={styles.top}>
+            <div className={styles.text}>
+              <h2 id="contact-cta-heading" className={styles.heading}>
+                {heading}
+              </h2>
+              <p className={styles.lead}>{lead}</p>
+            </div>
+
+            <Link href={buttonHref} className="btn btn--filled-inverse">
+              <span className="btn-icon animate" aria-hidden="true">
+                <ArrowRightIcon size={16} weight="bold" />
+              </span>
+              {buttonLabel}
+            </Link>
+          </div>
+
+          <hr className={styles.divider} aria-hidden="true" />
+
+          <div className={styles.contactRow}>
+            {contacts.map((item: ContactInfo) =>
+              item.obfuscated ? (
+                <ObfuscatedLink key={item.label} item={item} />
+              ) : (
+                <span key={item.label} className={styles.contactItem}>
+                  <item.icon size={20} weight="regular" aria-hidden="true" />
+                  {item.label}
+                </span>
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}