hwilliams-dev/components/ContactMethods.tsx

"use client";

import { useState } from "react";
import type { ContactMethod } from "@/data/content";
import { useStaggerReveal } from "@/hooks/useAnimations";

function ContactIcon({ type }: { type: string }) {
  const s = {
    width: 16,
    height: 16,
    strokeWidth: 1.5,
    stroke: "currentColor",
    fill: "none" as const,
  };

  if (type === "tel")
    return (
      <svg {...s} viewBox="0 0 24 24">
        <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" />
      </svg>
    );

  if (type === "email")
    return (
      <svg {...s} viewBox="0 0 24 24">
        <rect x="2" y="4" width="20" height="16" rx="2" />
        <path d="M22 4L12 13 2 4" />
      </svg>
    );

  return (
    <svg {...s} viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 16v-4M12 8h.01" />
    </svg>
  );
}

function maskValue(label: string, icon: string): string {
  if (icon === "tel") {
    const digits = label.replace(/\D/g, "");
    return `•••-•••-${digits.slice(-4)}`;
  }
  return "•".repeat(Math.min(label.length, 12));
}

function getHref(label: string, icon: string): string {
  if (icon === "tel") return `tel:${label.replace(/\D/g, "")}`;
  if (icon === "email") return `mailto:${label}`;
  return "#";
}

type Props = {
  methods: ContactMethod[];
  visibleCount: number;
  visibleComponent: Set<Number>;
  isVisible: boolean;
};

export default function ContactMethods({ methods, visibleComponent, visibleCount, isVisible }: Props) {
  const [revealed, setRevealed] = useState<Set<number>>(new Set());
  const [hovered, setHovered] = useState<number | null>(null);

  return (
    <div style={{ marginTop: 32 }}>
      <div
        style={{
          marginBottom: 12,
          fontFamily: "var(--mono)",
          fontSize: "var(--text-xs)",
          color: "var(--muted)",
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          opacity: isVisible ? 1.0 : 0.0
        }}
      >
        {"contact"}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {methods.map((method, i) => {
          const isRevealed = !method.masked || revealed.has(i);
          const isHovered = hovered === i;

          return (
            <div
              key={`${method.icon}-${i}`}
              onMouseEnter={() => {
                setHovered(i);
                if (method.masked) {
                  setRevealed((prev) => new Set(prev).add(i));
                }
              }}
              onMouseLeave={() => setHovered(null)}
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 10,
                padding: "8px 14px",
                fontFamily: "var(--mono)",
                fontSize: "var(--text-sm)",
                color: isHovered ? "var(--fg)" : "var(--fg-secondary)",
                background: isHovered ? "var(--surface-hover)" : "var(--surface)",
                border: `1px solid ${isHovered ? "var(--border-strong)" : "var(--border)"}`,
                borderRadius: "var(--radius-md)",
                transition: `all var(--duration-normal) var(--ease-in-out)`,
                cursor: isRevealed ? "pointer" : "default",
                alignSelf: "flex-start",
                opacity: visibleComponent.has(i + visibleCount) ? 1.0 : 0.0
              }}
              onClick={() => {
                if (isRevealed) {
                  window.location.href = getHref(method.label, method.icon);
                }
              }}
            >
              <span
                style={{
                  color: isHovered ? "var(--accent)" : "var(--muted)",
                  transition: `color var(--duration-normal) var(--ease-in-out)`,
                  display: "flex",
                  flexShrink: 0,
                }}
              >
                <ContactIcon type={method.icon} />
              </span>

              <span
                style={{
                  transition: `opacity var(--duration-normal) var(--ease-in-out)`,
                }}
              >
                {isRevealed ? method.label : maskValue(method.label, method.icon)}
              </span>

              {method.masked && !revealed.has(i) && (
                <span
                  style={{
                    fontSize: "var(--text-xs)",
                    color: "var(--faint)",
                    fontStyle: "italic",
                    marginLeft: 4,
                  }}
                >
                  hover to reveal
                </span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}