update

components/contact/ContactCtaSection.tsx

@@ -1,32 +1,35 @@
-"use client";
-
 import Link from "next/link";
-import { useEffect, useRef } from "react";
 import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
+import { companyData } from "@/data/companyData";
 import styles from "./ContactCtaSection.module.css";
 import { contactCtaData, type ContactInfo } from "./ContactCtaData";
 
-function ObfuscatedLink({ item }: { item: ContactInfo }) {
-  const ref = useRef<HTMLAnchorElement>(null);
+function resolveCompanyContact(
+  item: Extract<ContactInfo, { type: "company" }>,
+) {
+  if (item.contactKey === "phone") {
+    return {
+      label: companyData.contact.phone.display,
+      href: `tel:${companyData.contact.phone.value}`,
+    };
+  }
 
-  useEffect(() => {
-    if (!ref.current) return;
+  if (item.contactKey === "email") {
+    const email = `${companyData.contact.email.user}@${companyData.contact.email.domain}`;
 
-    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]);
+    return {
+      label: email,
+      href: `mailto:${email}`,
+    };
+  }
 
-  const Icon = item.icon;
+  if (item.contactKey === "openingHours") {
+    return {
+      label: companyData.contact.openingHours.display,
+    };
+  }
 
-  return (
-    <a ref={ref} href="#" className={styles.contactItem}>
-      <Icon size={20} weight="regular" aria-hidden="true" />
-      {item.label}
-    </a>
-  );
+  return null;
 }
 
 export default function ContactCtaSection() {
@@ -55,16 +58,50 @@ export default function ContactCtaSection() {
           <hr className={styles.divider} aria-hidden="true" />
 
           <div className={styles.contactRow}>
-            {contacts.map((item: ContactInfo) =>
-              item.obfuscated ? (
-                <ObfuscatedLink key={item.label} item={item} />
-              ) : (
+            {contacts.map((item) => {
+              const icon = (
+                <item.icon size={20} weight="regular" aria-hidden="true" />
+              );
+
+              if (item.type === "company") {
+                const resolved = resolveCompanyContact(item);
+
+                if (!resolved) return null;
+
+                return (
+                  <a
+                    key={item.contactKey}
+                    href={resolved.href}
+                    className={styles.contactItem}
+                    aria-label={resolved.label}
+                  >
+                    {icon}
+                    {resolved.label}
+                  </a>
+                );
+              }
+
+              if (item.href) {
+                return (
+                  <a
+                    key={item.label}
+                    href={item.href}
+                    className={styles.contactItem}
+                    aria-label={item.label}
+                  >
+                    {icon}
+                    {item.label}
+                  </a>
+                );
+              }
+
+              return (
                 <span key={item.label} className={styles.contactItem}>
-                  <item.icon size={20} weight="regular" aria-hidden="true" />
+                  {icon}
                   {item.label}
                 </span>
-              ),
-            )}
+              );
+            })}
           </div>
         </div>
       </div>