"use client";

import { useState } from "react";
import { PROFILE } from "@/data/content";
import LinkIcon from "./LinkIcon";
import ContactMethods from "./ContactMethods";
import { useStaggerReveal } from "@/hooks/useAnimations";

export default function Profile() {
  const [hovered, setHovered] = useState<number | null>(null);
  const visible = useStaggerReveal(PROFILE.links.length + PROFILE.contactMethods.length, 100);
  return (
    <div style={{ padding: "48px 0", maxWidth: 640 }}>
      <div
        style={{
          marginBottom: 8,
          fontFamily: "var(--mono)",
          fontSize: 11,
          color: "var(--muted)",
          letterSpacing: "0.08em",
          textTransform: "uppercase",
        }}
      >
        {"# about"}
      </div>
      <h1
        style={{
          fontFamily: "var(--sans)",
          fontSize: 42,
          fontWeight: 700,
          color: "var(--fg)",
          margin: "0 0 4px 0",
          lineHeight: 1.1,
          letterSpacing: "-0.02em",
        }}
      >
        {PROFILE.name}
      </h1>
      <div
        style={{
          fontFamily: "var(--mono)",
          fontSize: 15,
          color: "var(--accent)",
          marginBottom: 32,
          fontWeight: 500,
        }}
      >
        {PROFILE.title}    
      </div>
      <p
        style={{
          fontFamily: "var(--sans)",
          fontSize: 16,
          lineHeight: 1.7,
          color: "var(--fg-secondary)",
          margin: "0 0 40px 0",
          maxWidth: 560,
        }}
      >
        {PROFILE.bio}
      </p>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        {PROFILE.links.map((link, i) => (
          <a key={link.label}
            href={link.url}
            target="_blank"
            rel="noopener noreferrer"
            onMouseEnter={() => setHovered(i)}
            onMouseLeave={() => setHovered(null)}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              padding: "10px 18px",
              fontFamily: "var(--mono)",
              fontSize: 13,
              fontWeight: 500,
              color: hovered === i ? "var(--accent)" : "var(--fg-secondary)",
              background: hovered === i ? "var(--accent-bg)" : "var(--surface)",
              border: `1px solid ${hovered === i ? "var(--accent)" : "var(--border)"}`,
              borderRadius: 6,
              textDecoration: "none",
              transition: "all var(--duration-slow)",
              transform: hovered === i ? "translateY(-2px)" : "none",
              opacity: visible.has(i) ? 1.0 : 0
            }}
          >
            <LinkIcon type={link.icon} />
            {link.label}
          </a>
        ))}
      </div>
      <ContactMethods methods={PROFILE.contactMethods} visibleCount={PROFILE.links.length} visibleComponent={visible} isVisible={visible.has(PROFILE.links.length-1)} />
    </div>
  );
}