// Scroll-driven logo animation — the 5 circles drift apart, rotate, then settle.
// Pinned over a tall section so the user "scrolls through" the animation.
const { useEffect, useRef, useState } = React;

const LOGO_CIRCLES = [
  { cx: 100, cy: 62,      r: 28, fill: '#5db98a', label: 'Communicate', sub: 'Inbox · Calendar · Replies' },
  { cx: 136.14, cy: 88.257, r: 28, fill: '#5b8def', label: 'Fund',        sub: 'Investors · Updates · Grants' },
  { cx: 122.336, cy: 130.743, r: 28, fill: '#7c69e0', label: 'Grow',       sub: 'Leads · Pitches · Events' },
  { cx: 77.664, cy: 130.743, r: 28, fill: '#e07ab0', label: 'Build',       sub: 'Feedback · Hiring · Roadmap' },
  { cx: 63.86, cy: 88.257, r: 28, fill: '#e89e5b', label: 'Operate',     sub: 'Invoices · Contracts · Vendors' },
];

// Where each circle drifts to at the "exploded" mid-state (relative to center 100,100)
const EXPLODE = [
  { dx: 0,    dy: -160 },
  { dx: 200,  dy: -50  },
  { dx: 130,  dy: 170  },
  { dx: -130, dy: 170  },
  { dx: -200, dy: -50  },
];

const lerp = (a, b, t) => a + (b - a) * t;
const easeInOut = t => t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2)/2;
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));

const LogoScrollSection = () => {
  const ref = useRef(null);
  const [p, setP] = useState(0); // 0 → 1 progress through section

  useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      // start when section top reaches viewport top, end when bottom reaches viewport bottom
      const total = r.height - vh;
      const progress = clamp(-r.top / total, 0, 1);
      setP(progress);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // 3 phases: 0–0.35 explode, 0.35–0.65 hover apart with labels, 0.65–1 reassemble
  const phase = p < 0.35 ? p / 0.35
              : p < 0.65 ? 1
              : 1 - (p - 0.65) / 0.35;
  const e = easeInOut(clamp(phase, 0, 1));
  const labelOpacity = p > 0.30 && p < 0.72 ? 1 : 0;
  const rotation = lerp(0, 18, e);

  return (
    <section ref={ref} className="dirA-logo-scroll" style={{ position: 'relative', height: '300vh', background: '#fff' }}>
      <style>{`
.dirA-logo-scroll-svg { width: 820px; height: 640px; max-width: 96vw; }
.dirA-logo-scroll-closer-h { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; color: #1d1d1f; line-height: 1.05; max-width: 800px; margin: 0 auto; }
@media (max-width: 760px) {
  .dirA-logo-scroll-svg { width: 100%; height: auto; max-width: 100vw; max-height: 70vh; }
  .dirA-logo-scroll-closer { padding: 0 20px !important; }
  .dirA-logo-scroll-closer-h { font-size: 26px; }
}
      `}</style>
      <div style={{
        position: 'sticky', top: 0, height: '100vh',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden'
      }}>
        <div style={{
          fontSize: 13, fontWeight: 500, color: '#86868b',
          letterSpacing: -0.005, marginBottom: 28,
          opacity: 1 - clamp(p * 2, 0, 1),
          transition: 'opacity 0.2s ease'
        }}>Five jobs. One small team.</div>

        <svg className="dirA-logo-scroll-svg" viewBox="-310 -220 820 640" preserveAspectRatio="xMidYMid meet"
             style={{ transform: `rotate(${rotation}deg)`, transition: 'transform 0.05s linear' }}>
          {LOGO_CIRCLES.map((c, i) => {
            const ex = EXPLODE[i];
            const cx = lerp(c.cx, c.cx + ex.dx, e);
            const cy = lerp(c.cy, c.cy + ex.dy, e);
            const r  = lerp(c.r,  c.r * 1.05, e);
            return (
              <g key={i}>
                <circle cx={cx} cy={cy} r={r} fill={c.fill} fillOpacity="0.92" />
                {/* label — counter-rotated, fades in during explode */}
                <g transform={`rotate(${-rotation} ${cx} ${cy})`}>
                  <text
                    x={cx} y={cy + r + 28}
                    textAnchor="middle"
                    fontFamily="Inter, sans-serif"
                    fontWeight="600"
                    fontSize="18"
                    fill="#1d1d1f"
                    opacity={labelOpacity}
                    style={{ transition: 'opacity 0.3s ease' }}
                  >{c.label}</text>
                  <text
                    x={cx} y={cy + r + 50}
                    textAnchor="middle"
                    fontFamily="Inter, sans-serif"
                    fontWeight="400"
                    fontSize="13"
                    fill="#86868b"
                    opacity={labelOpacity}
                    style={{ transition: 'opacity 0.3s ease' }}
                  >{c.sub}</text>
                </g>
              </g>
            );
          })}
        </svg>

        <div className="dirA-logo-scroll-closer" style={{
          position: 'absolute', bottom: '12vh', left: 0, right: 0,
          textAlign: 'center', padding: '0 56px',
          opacity: clamp((p - 0.7) * 4, 0, 1),
          transition: 'opacity 0.3s ease'
        }}>
          <div className="dirA-logo-scroll-closer-h">
            Every founder does these five.
            <br/><span style={{ color: '#86868b' }}>So your team handles them.</span>
          </div>
        </div>
      </div>
    </section>
  );
};

window.LogoScrollSection = LogoScrollSection;