Extract custom hooks for reusable logic

app/hooks/useAnalytics.ts

@@ -0,0 +1,90 @@
+/**
+ * Analytics tracking hook for component interactions
+ * Supports both custom callback tracking and Google Analytics (gtag)
+ *
+ * @example
+ * ```tsx
+ * const { trackEvent } = useAnalytics();
+ *
+ * const handleClick = () => {
+ *   trackEvent({
+ *     event: "button_click",
+ *     category: "engagement",
+ *     label: "contact_button",
+ *     component: "AskOrganizer",
+ *   });
+ * };
+ * ```
+ */
+
+interface AnalyticsEvent {
+  event: string;
+  category?: string;
+  label?: string;
+  value?: number;
+  component?: string;
+  variant?: string;
+  [key: string]: unknown;
+}
+
+interface UseAnalyticsReturn {
+  trackEvent: (event: AnalyticsEvent) => void;
+  trackCustomEvent: (
+    event: string,
+    data: Record<string, unknown>,
+    callback?: (data: Record<string, unknown>) => void,
+  ) => void;
+}
+
+declare global {
+  interface Window {
+    gtag?: (
+      command: string,
+      eventName: string,
+      params?: Record<string, unknown>,
+    ) => void;
+  }
+}
+
+export function useAnalytics(): UseAnalyticsReturn {
+  const trackEvent = (eventData: AnalyticsEvent) => {
+    const { event, category = "engagement", label, value, ...rest } = eventData;
+
+    // Track with Google Analytics if available
+    if (typeof window !== "undefined" && window.gtag) {
+      window.gtag("event", event, {
+        event_category: category,
+        event_label: label,
+        value: value ?? 1,
+        ...rest,
+      });
+    }
+  };
+
+  const trackCustomEvent = (
+    event: string,
+    data: Record<string, unknown>,
+    callback?: (data: Record<string, unknown>) => void,
+  ) => {
+    // Execute custom callback if provided
+    if (callback) {
+      callback({
+        event,
+        ...data,
+        timestamp: new Date().toISOString(),
+      });
+    }
+
+    // Also track with Google Analytics
+    trackEvent({
+      event,
+      category: "custom",
+      ...data,
+    });
+  };
+
+  return {
+    trackEvent,
+    trackCustomEvent,
+  };
+}