Ahrefs 96->100

src/components/ui/ObfuscatedMailto.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+interface ObfuscatedMailtoProps {
+    email: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+
+/**
+ * Renders an email link that only becomes a clickable mailto: link after client-side hydration.
+ * This prevents Cloudflare's Email Obfuscation from breaking the link in the static HTML,
+ * which causes crawlers like Ahrefs to report 404 errors on /cdn-cgi/l/email-protection.
+ */
+export function ObfuscatedMailto({ email, className, children }: ObfuscatedMailtoProps) {
+    const [isMounted, setIsMounted] = useState(false);
+
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+
+    // Before hydration, render as plain text/span to avoid Cloudflare manipulation
+    if (!isMounted) {
+        return <span className={className}>{children || email}</span>;
+    }
+
+    // After hydration, render as a proper mailto link
+    return (
+        <a href={`mailto:${email}`} className={className}>
+            {children || email}
+        </a>
+    );
+}