// hero.jsx — Hero with photo hover trick, orbit, witty headline
const { useEffect: _useE, useRef: _useR, useState: _useS } = React;

function HeroBlob() {
  const ref = _useR(null);
  _useE(() => {
    let mx = 0, my = 0, x = 0, y = 0, raf;
    const onMove = (e) => { mx = e.clientX; my = e.clientY; };
    const loop = () => {
      x += (mx - x) * 0.04;
      y += (my - y) * 0.04;
      if (ref.current) ref.current.style.transform = `translate(${x - 0.5 * ref.current.offsetWidth}px, ${y - 0.5 * ref.current.offsetHeight}px)`;
      raf = requestAnimationFrame(loop);
    };
    window.addEventListener("mousemove", onMove);
    loop();
    return () => { window.removeEventListener("mousemove", onMove); cancelAnimationFrame(raf); };
  }, []);
  return <div className="hero-blob" ref={ref}></div>;
}

function OrbitText({ text = "GRAPHIC DESIGNER • MOTION DABBLER • MOODBOARD WIZARD • BRAND WHISPERER • " }) {
  // SVG with text along a circular path
  return (
    <svg className="orbit" viewBox="0 0 400 400" aria-hidden="true">
      <defs>
        <path id="orbit-path" d="M 200,200 m -180,0 a 180,180 0 1,1 360,0 a 180,180 0 1,1 -360,0" />
      </defs>
      <text>
        <textPath href="#orbit-path">{text + text}</textPath>
      </text>
    </svg>
  );
}

function Hero() {
  return (
    <section className="hero hero--text" id="top" data-screen-label="01 Hero">
      <HeroBlob />
      <div className="container">
        <div className="hero-text">
          <div className="mono reveal" style={{ marginBottom: 36, color: "var(--muted)" }}>
            <span style={{ color: "var(--accent)" }}>✦</span> Portfolio &nbsp; / &nbsp; Uditi Das &nbsp; / &nbsp; 2026
          </div>

          <WordsReveal as="h1">Designed with grace.</WordsReveal>
          <WordsReveal as="h1" delay={350}>
            Built to be <i className="it">remembered.</i>
          </WordsReveal>

          <p className="lede reveal">
            Graphic designer based in Kolkata. Identity, posters, packaging, social, and the
            occasional ad campaign — made with intention, restraint, and a quiet sense of
            mischief. (Reels and motion edits, too — but more on those later.)
          </p>
          <div className="meta reveal">
            <span>Branding</span>
            <span>Social</span>
            <span>Campaigns</span>
            <span>Moodboards</span>
            <span>Reels &amp; motion</span>
          </div>

          <div className="hero-scroll reveal mono">scroll ↓</div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.OrbitText = OrbitText;