update

components/contact/ContactCtaData.ts

@@ -5,17 +5,23 @@ import {
   ClockIcon,
 } from "@phosphor-icons/react/dist/ssr";
 
-export type ContactInfo = {
+export type CompanyContactKey = "phone" | "email" | "openingHours";
+
+export type CompanyContactItem = {
+  type: "company";
+  contactKey: CompanyContactKey;
+  icon: ElementType;
+};
+
+export type StaticContactItem = {
+  type: "static";
   icon: ElementType;
   label: string;
   href?: string;
-  obfuscated?: {
-    user?: string;
-    domain?: string;
-    tel?: string;
-  };
 };
 
+export type ContactInfo = CompanyContactItem | StaticContactItem;
+
 export type ContactCtaData = {
   heading: string;
   lead: string;
@@ -31,18 +37,19 @@ export const contactCtaData: ContactCtaData = {
   buttonHref: "/kontakt",
   contacts: [
     {
+      type: "company",
+      contactKey: "phone",
       icon: PhoneIcon,
-      label: "0172 621 0606",
-      obfuscated: { tel: "01726210606" },
     },
     {
+      type: "company",
+      contactKey: "email",
       icon: EnvelopeSimpleIcon,
-      label: "info@basiclean.de",
-      obfuscated: { user: "info", domain: "basiclean.de" },
     },
     {
+      type: "company",
+      contactKey: "openingHours",
       icon: ClockIcon,
-      label: "Mo. - Fr. 08:00 - 17:00 Uhr",
     },
   ],
 };

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>