/* Shared Godet component + useInView hook */

function useInView(ref, threshold = 0.15) {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [ref, threshold]);
  return visible;
}

function Godet({ dry, wet, size = 60, revealed, onMouseEnter, onMouseLeave, onClick, className = '', style = {} }) {
  const [splashing, setSplashing] = React.useState(false);
  const [isRevealed, setIsRevealed] = React.useState(false);

  React.useEffect(() => { setIsRevealed(revealed); }, [revealed]);

  const handleEnter = () => { setSplashing(true); onMouseEnter && onMouseEnter(); };
  const handleLeave = () => { setSplashing(false); onMouseLeave && onMouseLeave(); };

  const color = isRevealed ? wet : dry;
  const rim = size + 8;

  const godetStyles = {
    width: size, height: size, borderRadius: '50%', position: 'relative', cursor: 'pointer',
    background: `radial-gradient(circle at 35% 35%, color-mix(in srgb, ${color} 60%, white), ${color} 55%, color-mix(in srgb, ${color} 80%, black) 100%)`,
    boxShadow: `0 0 0 3px #A8A8A8, 0 0 0 5px #8A8A8A, 2px 4px 8px rgba(0,0,0,0.25)`,
    transition: 'background 0.6s ease-in-out',
    zIndex: 2,
    ...style,
  };

  const rimStyles = {
    position: 'absolute', top: -4, left: -4, width: rim, height: rim, borderRadius: '50%',
    background: 'conic-gradient(#C8C8C8 0deg, #E8E8E8 45deg, #A0A0A0 90deg, #D0D0D0 135deg, #B8B8B8 180deg, #E0E0E0 225deg, #A8A8A8 270deg, #C8C8C8 360deg)',
    zIndex: 1,
  };

  return (
    <div className={className} style={{ position: 'relative', width: rim, height: rim, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
      onMouseEnter={handleEnter} onMouseLeave={handleLeave} onClick={onClick}>
      <div style={rimStyles}></div>
      <div style={godetStyles}></div>
      {splashing && <div key={Date.now()} style={{
        position: 'absolute', inset: 0, borderRadius: '50%', background: wet, zIndex: 3,
        animation: 'splash 0.6s ease-out forwards', pointerEvents: 'none',
      }}></div>}
    </div>
  );
}

function SectionReveal({ children, className = '', style = {}, delay = 0 }) {
  const ref = React.useRef(null);
  const visible = useInView(ref, 0.1);
  return (
    <div ref={ref} className={className} style={{
      ...style,
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(24px)',
      transition: `opacity 0.5s ease-out ${delay}ms, transform 0.5s ease-out ${delay}ms`,
    }}>
      {children}
    </div>
  );
}

Object.assign(window, { Godet, SectionReveal, useInView });