// Hero — carousel of use cases, auto-advances every 10s with proper fade transitions
const Hero = ({ onNav }) => {
  const [parRef, mouse] = useMouseParallax();
  const [revealRef, shown] = useReveal(0);
  const [activeUseCase, setActiveUseCase] = React.useState(0);
  const [fadeState, setFadeState] = React.useState('in'); // 'in' | 'out'
  const isMobile = useResponsive();

  const useCases = [
    {
      title: 'Interact in natural language',
      user: 'Hey BlinkFree, Give me a summary of the entire workday',
      response: 'Hello boss, new stocks arrived... Customers were mostly in aisle G31... 3 customers stopped at the return center... etc.',
      image: 'uploads/1.jpg?v=2',
    },
    {
      title: 'Retrieve any piece of information very easily',
      user: 'Hey BlinkFree, I cannot find my car keys, could you please check if you can find anything',
      response: 'Sure, it looks like you dropped them at the reception',
      image: 'uploads/2.jpg?v=2',
    },
    {
      title: 'Get customized analytics and set your real-time metrics',
      user: 'Hey BlinkFree, how many customers did we have today?',
      response: 'We had 40 customers, 15 of them walked out without buying anything',
      image: 'uploads/3.jpg?v=2',
    },
    {
      title: 'Maintain high situational awareness and set custom triggers',
      user: 'Hey BlinkFree, alert me if a customer waits at the counter for more than 2 minutes',
      response: 'Got it. I\'ll notify you immediately if any customer remains unattended at the counter for over 2 minutes',
      image: 'uploads/4.jpg?v=2',
    },
    {
      title: 'Automates company policies, reduce mistakes, and protect assets and efficiency',
      user: 'Hey BlinkFree, notify anyone who enters the loading dock without a safety vest',
      response: 'Understood. I\'ll remind employees at the loading dock to wear a safety vest if they enter without one',
      image: 'uploads/5.jpg?v=2',
    },
    {
      title: 'Get fast and accurate incident reporting',
      user: 'Thank you for informing me',
      response: 'Attention; A Toyota Camry with license plate \'xxxxxxx\' hit a red Corvette at 1:30 pm. Should I pull up the footage for you?',
      inverted: true,
      image: 'uploads/6.jpg?v=2',
    },
    {
      title: 'Turn emotions into insights',
      user: 'Hey BlinkFree, how was the overall workplace atmosphere today?',
      response: 'Overall, the workplace atmosphere was calm, though several customers appeared frustrated',
      image: 'uploads/7.jpg?v=2',
    },
  ];

  // Auto-advance every 10s with fade transition
  React.useEffect(() => {
    const fadeOutTimer = setTimeout(() => {
      setFadeState('out');
    }, 9000); // start fading out at 9s

    const switchTimer = setTimeout(() => {
      setActiveUseCase(i => (i + 1) % useCases.length);
      setFadeState('in');
    }, 10000); // switch + fade in at 10s

    return () => {
      clearTimeout(fadeOutTimer);
      clearTimeout(switchTimer);
    };
  }, [activeUseCase, useCases.length]);

  const goTo = (i) => {
    setFadeState('out');
    setTimeout(() => {
      setActiveUseCase(i);
      setFadeState('in');
    }, 400);
  };

  const current = useCases[activeUseCase];
  const opacity = fadeState === 'in' ? 1 : 0;
  const fadeStyle = {
    opacity,
    transition: 'opacity 800ms cubic-bezier(0.2,0,0,1)',
  };

  return (
    <section ref={parRef} style={{
      position: 'relative',
      paddingTop: 80,
      paddingBottom: 120,
      overflow: 'hidden',
      minHeight: 720,
    }}>
      {/* ambient glow — drifts subtly with mouse */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(circle at ${75 + mouse.x * 4}% ${30 + mouse.y * 4}%, rgba(145,70,255,0.22), transparent 55%), radial-gradient(circle at ${15 - mouse.x * 3}% ${80 - mouse.y * 3}%, rgba(145,70,255,0.10), transparent 50%)`,
        transition: 'background 400ms cubic-bezier(0.2,0,0,1)',
      }} />
      {/* grid lines */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.4,
        backgroundImage: 'linear-gradient(#18181B 1px, transparent 1px), linear-gradient(90deg, #18181B 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)',
      }} />

      <Container style={{ position: 'relative', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr', gap: isMobile ? 40 : 60, alignItems: isMobile ? 'center' : 'start' }} className="bf-hero-grid">
        <div ref={revealRef} className="bf-hero-left" style={{
          opacity: shown ? 1 : 0,
          transform: shown ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 500ms cubic-bezier(0.2,0,0,1), transform 500ms cubic-bezier(0.2,0,0,1)',
          display: 'flex', flexDirection: 'column', gap: 24,
          minHeight: isMobile ? 'auto' : 720,
          position: 'relative',
        }}>
          {/* Use case title — min height so layout doesn't shift between slides */}
          <div style={{ ...fadeStyle, minHeight: 310, flexShrink: 0 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 9999,
              background: 'rgba(145,70,255,0.10)',
              border: '1px solid rgba(145,70,255,0.30)',
              marginBottom: 16,
            }}>
              <LiveDot />
              <span style={{
                fontSize: 12.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.10em',
                color: '#BF94FF',
              }}>USE CASE {activeUseCase + 1} / {useCases.length}</span>
            </div>
            <h1 className="bf-hero-title" style={{
              fontSize: 55,
              fontWeight: 800,
              lineHeight: 1.1,
              letterSpacing: '-0.025em',
              color: '#EFEFF1',
              margin: 0,
            }}>
              {current.title}
            </h1>
          </div>

          {/* Conversation flow — fixed height */}
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 16,
            ...fadeStyle,
          }}>
            {(() => {
              const userBubble = (
                <div key="user" style={{
                  background: '#18181B', border: '1px solid #2F2F35',
                  borderRadius: 6, padding: 16,
                }}>
                  <div style={{ fontSize: 13.75, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#6E6E78', marginBottom: 8 }}>You</div>
                  <div style={{ fontSize: 17.5, color: '#EFEFF1', lineHeight: 1.6 }}>{current.user}</div>
                </div>
              );

              const blinkBubble = (
                <div key="blink" style={{
                  background: 'linear-gradient(135deg, rgba(145,70,255,0.08), #18181B 70%)',
                  border: '1px solid rgba(145,70,255,0.25)',
                  borderRadius: 6, padding: 16,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                    <div style={{
                      width: 20, height: 20, borderRadius: 9999,
                      background: 'rgba(145,70,255,0.20)', border: '1px solid rgba(145,70,255,0.30)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <div style={{ fontSize: 9, fontWeight: 800, color: '#BF94FF' }}>B</div>
                    </div>
                    <span style={{ fontSize: 13.75, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#BF94FF' }}>BlinkFree</span>
                  </div>
                  <div style={{ fontSize: 17.5, color: '#ADADB8', lineHeight: 1.6 }}>{current.response}</div>
                </div>
              );

              return current.inverted ? [blinkBubble, userBubble] : [userBubble, blinkBubble];
            })()}
          </div>

          {/* Spacer to push dots and button to bottom */}
          <div style={{ flex: isMobile ? 0 : 1, minHeight: isMobile ? 32 : 0 }} />

          {/* Carousel dots */}
          <div style={{
            position: 'absolute', bottom: 56, left: 0,
            display: 'flex', gap: 10,
          }}>
            {useCases.map((_, i) => (
              <button key={i}
                onClick={() => goTo(i)}
                style={{
                  width: 8, height: 8, borderRadius: 9999,
                  background: i === activeUseCase ? '#9146FF' : '#2F2F35',
                  boxShadow: i === activeUseCase ? '0 0 0 3px rgba(145,70,255,0.20)' : 'none',
                  border: 'none', cursor: 'pointer',
                  transition: 'background 200ms cubic-bezier(0.2,0,0,1), box-shadow 200ms cubic-bezier(0.2,0,0,1)',
                  padding: 0,
                }}
              />
            ))}
          </div>

          <div style={{ display: 'flex', gap: 12, position: 'absolute', bottom: 0, left: 0 }}>
            <Button variant="primary" onClick={() => onNav?.('pricing')}>Get Started Now</Button>
          </div>
        </div>

        {/* Right: image carousel — visible on all screen sizes */}
        <div className="bf-hero-image" style={{
          background: '#18181B',
          borderRadius: 10,
          boxShadow: '0 0 0 1px #2F2F35, 0 50px 90px -20px rgba(145,70,255,0.30)',
          overflow: 'hidden',
          transform: isMobile ? 'none' : `perspective(1200px) rotateY(${mouse.x * -2}deg) rotateX(${mouse.y * 2}deg) translateZ(0)`,
          transition: 'transform 200ms cubic-bezier(0.2,0,0,1)',
          height: isMobile ? 300 : 560,
          position: 'relative',
          marginTop: isMobile ? 24 : 0,
        }}>
          {current.image ? (
            <img
              src={current.image}
              alt={current.title}
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover',
                ...fadeStyle,
              }}
            />
          ) : (
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: 'linear-gradient(135deg, #1a1530 0%, #0E0E10 100%)',
              ...fadeStyle,
            }}>
              <div style={{
                fontSize: 13.75, fontWeight: 700, textTransform: 'uppercase',
                letterSpacing: '0.16em', color: '#6E6E78',
              }}>
                Image coming soon
              </div>
            </div>
          )}
        </div>
      </Container>

      {/* down arrow */}
      <div style={{
        position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        color: '#6E6E78', fontSize: 12.5, textTransform: 'uppercase', letterSpacing: '0.16em',
        animation: 'bf-bob 2.4s ease-in-out infinite',
      }}>
        <span>Scroll</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 5v14m0 0l-6-6m6 6l6-6"/></svg>
      </div>
      <style>{`
        @keyframes bf-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
      `}</style>
    </section>
  );
};

window.Hero = Hero;