// About — hug variant (soft spring wash, circular portrait, cursor-follow spot)

function About() {
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState({ x: 50, y: 50, active: false });

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;

    // Touch devices have no cursor; drive the spot from scroll position
    // instead so the section still feels alive on mobile.
    const isTouch = window.matchMedia('(hover: none)').matches;

    if (isTouch) {
      let ticking = false;
      const compute = () => {
        ticking = false;
        const r = el.getBoundingClientRect();
        const vh = window.innerHeight;
        // -1 (section center below viewport) → 0 (centered) → 1 (above viewport)
        const center = r.top + r.height / 2;
        const travel = vh / 2 + r.height / 2;
        const p = Math.max(-1, Math.min(1, (center - vh / 2) / travel));
        // map to spot — y traverses top→bottom as we scroll past the section,
        // x drifts on a gentle sine for a parallax feel.
        const y = 50 - p * 60;
        const x = 50 + Math.sin((1 - p) * Math.PI) * 18;
        const inView = r.top < vh && r.bottom > 0;
        setPos({ x, y, active: inView });
      };
      const onScroll = () => {
        if (ticking) return;
        ticking = true;
        requestAnimationFrame(compute);
      };
      compute();
      window.addEventListener('scroll', onScroll, { passive: true });
      window.addEventListener('resize', onScroll);
      return () => {
        window.removeEventListener('scroll', onScroll);
        window.removeEventListener('resize', onScroll);
      };
    }

    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width) * 100;
      const y = ((e.clientY - r.top) / r.height) * 100;
      setPos({ x, y, active: true });
    };
    const onLeave = () => setPos(p => ({ ...p, active: false }));
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  const style = {
    '--hug-mx': pos.x + '%',
    '--hug-my': pos.y + '%',
    '--hug-spot-op': pos.active ? 1 : 0,
  };

  return (
    <section
      ref={ref}
      className="about about-hug"
      id="about"
      data-screen-label="03 About"
      style={style}
    >
      <div className="hug-wash" aria-hidden="true">
        <div className="hug-orb hug-orb-peach" />
        <div className="hug-orb hug-orb-butter" />
        <div className="hug-orb hug-orb-rose" />
        <div className="hug-orb hug-orb-sage" />
      </div>
      <div className="hug-spot" aria-hidden="true" />
      <div className="hug-grain" aria-hidden="true" />

      <div className="hug-inner">
        <div className="hug-portrait">
          <div className="hug-circle">
            <img className="portrait-img" src="uploads/portrait.jpg" alt="Jennifer Shen" />
          </div>
        </div>

        <h2 className="hug-hello">
          <span className="serif">Hi, I'm Jenn.</span>
        </h2>
        <p className="hug-tagline">
          I'm a Senior Product Design Manager at Roblox. As a design leader, I build indispensable products and empower the teams behind them. I chase the connections as a systems thinker — where the pieces find their pattern, the middle finds its meaning, the scaffolding becomes the structure, and the tangled becomes the tango. Building something new? <em>Let's talk.</em>
        </p>

        <div className="hug-cta" id="contact" data-screen-label="04 Contact">
          <a className="cta-btn cta-secondary" href="mailto:shen.j.yue@gmail.com">
            <span>Email me</span>
            <ArrowGlyph />
          </a>
          <a className="cta-btn cta-secondary" href="https://www.linkedin.com/in/jenn-shen/" target="_blank" rel="noreferrer">
            <span>LinkedIn</span>
            <ArrowGlyph />
          </a>
        </div>
      </div>

      <footer className="site-footer">
        <div>© Jennifer Shen</div>
        <div>Designed &amp; coded with care</div>
      </footer>
    </section>
  );
}

function ArrowGlyph() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 13L13 3M13 3H5M13 3v8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
    </svg>
  );
}

window.About = About;