// TransitionSection.jsx, Scroll-driven human→AI morph
const TransitionSection = () => {
  const sectionRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      if (!sectionRef.current) return;
      const rect = sectionRef.current.getBoundingClientRect();
      const total = sectionRef.current.offsetHeight - window.innerHeight;
      const scrolled = -rect.top;
      const p = Math.max(0, Math.min(1, scrolled / total));
      setProgress(p);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Text fade logic
  const t1Opacity = progress < 0.25 ? 1 : progress < 0.35 ? 1 - (progress - 0.25) / 0.1 : 0;
  const t2Opacity = progress < 0.3 ? 0 : progress < 0.4 ? (progress - 0.3) / 0.1 : progress < 0.55 ? 1 : progress < 0.65 ? 1 - (progress - 0.55) / 0.1 : 0;
  const t3Opacity = progress < 0.6 ? 0 : progress < 0.7 ? (progress - 0.6) / 0.1 : 1;

  // Figure opacities
  const humanOpacity = progress < 0.4 ? 1 : progress < 0.65 ? 1 - (progress - 0.4) / 0.25 : 0;
  const aiOpacity    = progress < 0.4 ? 0 : progress < 0.65 ? (progress - 0.4) / 0.25 : 1;

  // Scan line
  const scanTop = progress < 0.3 ? -10 : progress < 0.6 ? ((progress - 0.3) / 0.3) * 110 : 110;

  // AI pulse
  const aiScale = aiOpacity > 0.8 ? 1 + Math.sin(Date.now() / 800) * 0.012 : 1;

  return (
    <div ref={sectionRef} style={{ height: '400vh', position: 'relative' }}>
      <div style={{ position: 'sticky', top: 0, height: '100vh', background: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
        
        {/* Left text column */}
        <div style={{ position: 'absolute', left: '8%', top: '50%', transform: 'translateY(-50%)', maxWidth: 300 }}>
          {[
            { text: "Meet your current interviewer.", op: t1Opacity },
            { text: "Tired. Biased. Unavailable.", op: t2Opacity },
            { text: "Meet your next one.", op: t3Opacity },
          ].map((item, i) => (
            <div key={i} style={{
              position: 'absolute', top: 0,
              fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(1.5rem, 3vw, 2.2rem)',
              fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.2,
              color: i === 2 ? '#C9A84C' : '#F5F0E8',
              opacity: item.op, transition: 'opacity 0.05s',
              pointerEvents: 'none',
            }}>{item.text}</div>
          ))}
        </div>

        {/* Center figures */}
        <div style={{ position: 'relative', width: 280, height: 320 }}>
          
          {/* Human figure */}
          <div style={{ position: 'absolute', inset: 0, opacity: humanOpacity, transition: 'opacity 0.05s' }}>
            <svg viewBox="0 0 200 260" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
              {/* Head */}
              <circle cx="100" cy="60" r="32" stroke="#F5F0E8" strokeWidth="1.5"/>
              {/* Neck */}
              <path d="M88 90 L88 108 M112 90 L112 108" stroke="#F5F0E8" strokeWidth="1.5" strokeLinecap="round"/>
              {/* Shoulders / suit */}
              <path d="M40 140 C40 120 70 110 100 110 C130 110 160 120 160 140 L160 220 L40 220 Z" stroke="#F5F0E8" strokeWidth="1.5" fill="none" strokeLinejoin="round"/>
              {/* Lapels */}
              <path d="M100 110 L88 145 L76 135" stroke="#F5F0E8" strokeWidth="1" strokeOpacity="0.5"/>
              <path d="M100 110 L112 145 L124 135" stroke="#F5F0E8" strokeWidth="1" strokeOpacity="0.5"/>
              {/* Tie */}
              <path d="M100 115 L95 155 L100 162 L105 155 Z" stroke="#F5F0E8" strokeWidth="1" strokeOpacity="0.4"/>
              {/* Arms */}
              <path d="M40 140 L20 185" stroke="#F5F0E8" strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.6"/>
              <path d="M160 140 L180 185" stroke="#F5F0E8" strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.6"/>
            </svg>
            {/* Scan line overlay */}
            <div style={{
              position: 'absolute', left: -10, right: -10,
              top: `${scanTop}%`,
              height: 2,
              background: 'linear-gradient(90deg, transparent, #C9A84C, transparent)',
              boxShadow: '0 0 12px rgba(201,168,76,0.8)',
              opacity: progress > 0.3 && progress < 0.6 ? 1 : 0,
              transition: 'opacity 0.2s',
            }}/>
          </div>

          {/* AI figure */}
          <div style={{ position: 'absolute', inset: 0, opacity: aiOpacity, transition: 'opacity 0.05s', transform: `scale(${aiScale})` }}>
            <svg viewBox="0 0 200 260" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
              {/* Hexagonal head */}
              <path d="M100 28 L130 45 L130 79 L100 96 L70 79 L70 45 Z" stroke="#C9A84C" strokeWidth="1.5"/>
              {/* Face facets */}
              <path d="M100 28 L100 96 M70 45 L130 79 M130 45 L70 79" stroke="#C9A84C" strokeWidth="0.5" strokeOpacity="0.4"/>
              {/* Eyes */}
              <rect x="83" y="54" width="8" height="6" rx="1" fill="#C9A84C" fillOpacity="0.7"/>
              <rect x="109" y="54" width="8" height="6" rx="1" fill="#C9A84C" fillOpacity="0.7"/>
              {/* Inner glow */}
              <circle cx="100" cy="62" r="18" stroke="#C9A84C" strokeWidth="0.5" strokeOpacity="0.25"/>
              {/* Neck connector */}
              <path d="M88 96 L88 116 M112 96 L112 116" stroke="#C9A84C" strokeWidth="1.5"/>
              {/* Body chassis */}
              <path d="M50 150 L50 116 C50 116 70 110 100 110 C130 110 150 116 150 116 L150 150" stroke="#C9A84C" strokeWidth="1.5"/>
              <rect x="50" y="150" width="100" height="70" rx="4" stroke="#C9A84C" strokeWidth="1.5"/>
              {/* Circuit lines on body */}
              <path d="M66 168 L86 168 L86 178 L110 178" stroke="#C9A84C" strokeWidth="0.6" strokeOpacity="0.5"/>
              <path d="M134 165 L120 165 L120 185 L100 185" stroke="#C9A84C" strokeWidth="0.6" strokeOpacity="0.5"/>
              <circle cx="66" cy="168" r="2" fill="#C9A84C" fillOpacity="0.7"/>
              <circle cx="134" cy="165" r="2" fill="#C9A84C" fillOpacity="0.7"/>
              {/* Arms */}
              <path d="M50 125 L22 160 L22 195" stroke="#C9A84C" strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.7"/>
              <path d="M150 125 L178 160 L178 195" stroke="#C9A84C" strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.7"/>
              {/* Glow aura */}
              <ellipse cx="100" cy="62" rx="45" ry="45" stroke="#C9A84C" strokeWidth="0.3" strokeOpacity="0.15" strokeDasharray="4 6"/>
            </svg>
          </div>
        </div>

        {/* Figure labels */}
        <div style={{ position: 'absolute', bottom: '16%', display: 'flex', justifyContent: 'center', width: '100%' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', transition: 'opacity 0.3s', opacity: humanOpacity > 0.5 ? 1 : 0, color: '#888880', position: 'absolute' }}>
            The Traditional Interviewer
          </div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', transition: 'opacity 0.3s', opacity: aiOpacity > 0.5 ? 1 : 0, color: '#C9A84C', position: 'absolute' }}>
            Your intervieHire Agent
          </div>
        </div>

        {/* Scroll hint */}
        <div style={{ position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)', opacity: progress < 0.05 ? 0.5 : 0, transition: 'opacity 0.4s', color: '#555550', fontFamily: 'Outfit, sans-serif', fontSize: 12, letterSpacing: '0.1em' }}>
          SCROLL
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TransitionSection });