/* global React */
const { useState: useHeroState, useEffect: useHeroEffect, useRef: useHeroRef } = React;

// ============================================
// HERO — typewriter/text morph ambient + grid
// ============================================
function Hero() {
  const rotations = [
    "conversion",
    "design engineering",
    "good UX",
    "shipping",
    "design systems",
    "data analytics",
  ];
  const [idx, setIdx] = useHeroState(0);
  const [display, setDisplay] = useHeroState("");
  const [phase, setPhase] = useHeroState("typing"); // typing | holding | deleting

  useHeroEffect(() => {
    const word = rotations[idx];
    let timer;
    if (phase === "typing") {
      if (display.length < word.length) {
        timer = setTimeout(() => setDisplay(word.slice(0, display.length + 1)), 55);
      } else {
        timer = setTimeout(() => setPhase("holding"), 1600);
      }
    } else if (phase === "holding") {
      timer = setTimeout(() => setPhase("deleting"), 200);
    } else if (phase === "deleting") {
      if (display.length > 0) {
        timer = setTimeout(() => setDisplay(word.slice(0, display.length - 1)), 30);
      } else {
        setIdx((i) => (i + 1) % rotations.length);
        setPhase("typing");
      }
    }
    return () => clearTimeout(timer);
  }, [display, phase, idx]);

  const heroRef = useHeroRef(null);

  // Cursor-reactive subtle tilt on ambient orbs
  useHeroEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      el.style.setProperty("--mx", x);
      el.style.setProperty("--my", y);
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section className="hero" ref={heroRef}>
      <div className="hero__grid" />
      <div className="hero__ambient">
        <div className="hero__orb" style={{ left: "-180px", top: "10%", transform: "translate(calc(var(--mx, 0) * 30px), calc(var(--my, 0) * 20px))" }} />
        <div className="hero__orb hero__orb--2" style={{ transform: "translate(calc(var(--mx, 0) * -40px), calc(var(--my, 0) * -20px))" }} />
      </div>

      <div className="container hero__inner">
        <div className="hero__meta fade-in">
          <span className="hero__meta-dot" />
          <span>Available to work on new projects</span>
          <span className="hero__meta-sep">·</span>
          <span>Sao Paulo/Brazil → Remote</span>
        </div>

        <h1 className="hero__title">
          <span className="hero__title-line fade-in-up" style={{ animationDelay: "0.05s" }}>
            Product designer
          </span>
          <span className="hero__title-line fade-in-up" style={{ animationDelay: "0.15s" }}>
            <span className="hero__title-accent">obsessed with</span>
          </span>
          <span className="hero__title-line fade-in-up" style={{ animationDelay: "0.2s" }}>
            <span className="hero__morph">
              <span className="hero__morph-word">{display}</span>
              <span className="hero__morph-caret" />
            </span>
          </span>
        </h1>

        <p className="hero__lede fade-in-up" style={{ animationDelay: "0.3s" }}>
          I'm <b>Guilherme Piluski</b>. For over 5 years I've helped teams turn
          fuzzy ideas into measurable outcomes. I care about the details. All of them.
        </p>

        <div className="hero__actions fade-in-up" style={{ animationDelay: "0.45s" }}>
          <a href="#work" className="btn btn--primary btn--lg">
            <span>See selected work</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12l7 7 7-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
          <a href="about.html" className="btn btn--secondary btn--lg">
            <span>About me</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;