"use client"

const TEXT = "I'm Robert."

type Direction = "up" | "down" | "r" | "e" | "t"

const LETTER_ANIMS: Record<number, Direction> = {
  0: "down", // I
  1: "up", // '
  2: "down", // m
  3: "down", // space - treat as down for delay
  4: "r", // R (special)
  5: "down", // o
  6: "up", // b
  7: "e", // e (special: o first, then e)
  8: "down", // r
  9: "t", // t (special: appears with o, then slides right)
  10: "down", // .
}

const DELAYS_MS = [0, 80, 240, 320, 400, 560, 680, 760, 1400, 760, 1560]

export function AnimatedHeroTitle() {
  return (
    <h1
      className="home-hero-title mb-2 font-bold tracking-tight text-slate-900"
      style={{ fontSize: "var(--fluid-hero)" }}
    >
      {TEXT.split("").map((char, i) => {
        if (char === " ") {
          return <span key={i} className="inline-block" style={{ width: "0.25em" }} aria-hidden />
        }
        const dir = LETTER_ANIMS[i] ?? "down"
        const delay = DELAYS_MS[i] ?? i * 80

        const animClass =
          dir === "r"
            ? "hero-letter-r animate-letter-from-up"
            : dir === "e"
              ? "hero-letter-e"
              : dir === "t"
                ? "hero-letter-t animate-letter-t-slide"
                : dir === "up"
                  ? "animate-letter-from-up"
                  : "animate-letter-from-down"
        const animDelay =
          dir === "r" ? delay + 320 : dir === "e" ? delay + 1050 : delay
        const style =
          dir === "r"
            ? { "--b-delay": `${delay}ms`, animationDelay: `${animDelay}ms` } as React.CSSProperties
            :             dir === "e"
              ? { "--o-delay": `${delay}ms` } as React.CSSProperties
              : { animationDelay: `${animDelay}ms` }

        return (
          <span
            key={i}
            className={`inline-block overflow-hidden ${animClass}`}
            style={style}
            aria-hidden
          >
            {dir === "e" ? (
              <span className="block animate-letter-e-fade-in" style={{ animationDelay: `${animDelay}ms` }}>
                e
              </span>
            ) : dir === "r" ? (
              "R"
            ) : dir === "t" ? (
              "t"
            ) : (
              char
            )}
          </span>
        )
      })}
    </h1>
  )
}