// Hero with orbiting circles + word-rise display heading
const { useEffect, useRef, useState } = React;

function OrbitingCircles() {
  const ref = useRef(null);
  const [mouse, setMouse] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const onMove = (e) => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      setMouse({
        x: (e.clientX - cx) / r.width,
        y: (e.clientY - cy) / r.height,
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  const px = mouse.x * 16;
  const py = mouse.y * 16;

  return (
    <div ref={ref} className="orbit-wrap" style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden',
    }}>
      {/* ambient glow */}
      <div style={{
        position: 'absolute',
        width: '60vmin', height: '60vmin',
        right: '-10vmin', top: '-8vmin',
        background: 'radial-gradient(circle, rgba(240,107,143,.22), transparent 62%)',
        filter: 'blur(40px)',
        transform: `translate(${px * 1.5}px, ${py * 1.5}px)`,
        transition: 'transform .6s cubic-bezier(.2,.8,.2,1)',
      }} />
      <div style={{
        position: 'absolute',
        width: '40vmin', height: '40vmin',
        left: '-10vmin', bottom: '-10vmin',
        background: 'radial-gradient(circle, rgba(240,184,122,.18), transparent 62%)',
        filter: 'blur(40px)',
        transform: `translate(${-px}px, ${-py}px)`,
        transition: 'transform .6s cubic-bezier(.2,.8,.2,1)',
      }} />

      {/* Three overlapping circles — the logo mark, drifting */}
      <div style={{
        position: 'absolute',
        right: 'max(6vw, 40px)',
        top: '48%',
        transform: 'translateY(-50%)',
        width: 'clamp(280px, 40vw, 560px)',
        height: 'clamp(280px, 40vw, 560px)',
      }}>
        {[
          { c: '#f4a8b8', dx: -0.22, dy: 0.08, size: 0.58, anim: 'orbit-a 14s ease-in-out infinite', parallax: 1 },
          { c: '#f06b8f', dx: 0.08, dy: -0.18, size: 0.58, anim: 'orbit-b 16s ease-in-out infinite', parallax: 1.4 },
          { c: '#e85a5a', dx: 0.14, dy: 0.18, size: 0.58, anim: 'orbit-c 18s ease-in-out infinite', parallax: 0.7 },
        ].map((d, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: `${50 + d.dx * 100}%`,
            top: `${50 + d.dy * 100}%`,
            width: `${d.size * 100}%`,
            height: `${d.size * 100}%`,
            marginLeft: `-${d.size * 50}%`,
            marginTop: `-${d.size * 50}%`,
            borderRadius: '50%',
            background: d.c,
            mixBlendMode: 'screen',
            opacity: 0.92,
            animation: d.anim,
            filter: 'blur(0.4px)',
            boxShadow: `inset 0 0 80px rgba(255,255,255,.15)`,
          }}>
            <div style={{
              position: 'absolute', inset: 0, borderRadius: '50%',
              background: `radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%)`,
            }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero({ t }) {
  const h1Ref = useRef(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setInView(true), 150);
    return () => clearTimeout(timer);
  }, []);

  return (
    <section className="hero" style={{
      position: 'relative',
      minHeight: '100vh',
      display: 'flex', alignItems: 'center',
      paddingTop: 120, paddingBottom: 80,
      borderBottom: '1px solid var(--rule)',
      overflow: 'hidden',
    }}>
      <OrbitingCircles />

      <div className="container" style={{ position: 'relative', zIndex: 2, width: '100%' }}>
        <div style={{ maxWidth: '12ch', display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 28 }}>
          <span className={`eyebrow reveal ${inView ? 'in' : ''}`}>
            <span className="mono" style={{ color: 'var(--pink)' }}>●</span> {t.hero.eyebrow}
          </span>
        </div>

        <h1 className="display" ref={h1Ref} style={{ marginBottom: 40 }}>
          <span className={`word-rise ${inView ? 'in' : ''}`}><span>{t.hero.l1a} </span></span>
          <span className={`word-rise ${inView ? 'in' : ''}`} style={{ transitionDelay: '.08s' }}><span><em className="gradient-text serif" style={{ fontStyle: 'italic' }}>{t.hero.l1b}</em></span></span>
          <br/>
          <span className={`word-rise ${inView ? 'in' : ''}`} style={{ transitionDelay: '.16s' }}><span>{t.hero.l2a} </span></span>
          <span className={`word-rise ${inView ? 'in' : ''}`} style={{ transitionDelay: '.24s' }}><span><em style={{ fontStyle: 'italic', fontWeight: 300 }}>{t.hero.l2b}</em></span></span>
        </h1>

        <div className={`reveal d2 ${inView ? 'in' : ''}`} style={{ display: 'flex', flexDirection: 'column', gap: 28, maxWidth: 520, marginBottom: 120 }}>
          <p className="body-lg">{t.hero.sub}</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#community" className="btn btn-primary">
              {t.hero.cta1} <span className="arrow">→</span>
            </a>
            <a href="#podcast" className="btn btn-ghost">
              {t.hero.cta2}
            </a>
          </div>
        </div>

        {/* Bottom meta strip */}
        <div className={`reveal d4 ${inView ? 'in' : ''}`} style={{
          position: 'absolute', left: 'clamp(20px, 4vw, 56px)', right: 'clamp(20px, 4vw, 56px)',
          bottom: 40,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase',
          color: 'var(--text-faint)',
          gap: 24, flexWrap: 'wrap',
        }}>
          <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap' }}>
            <div><span style={{ color: 'var(--pink)' }}>01</span> &nbsp; {t.hero.meta1}</div>
            <div><span style={{ color: 'var(--pink)' }}>02</span> &nbsp; {t.hero.meta2}</div>
            <div><span style={{ color: 'var(--pink)' }}>03</span> &nbsp; {t.hero.meta3}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{
              display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
              background: 'var(--pink)', animation: 'pulse 2s ease-in-out infinite',
            }} />
            {t.hero.status}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;