// Hero.jsx — Word-reveal animation, mobile-first
const WordReveal = ({ text, visible, baseDelay = 0, style = {} }) => {
  const words = text.split(' ');
  return (
    <span style={{ display: 'inline', ...style }}>
      {words.map((word, i) => (
        <span key={i} style={{ display: 'inline-block', overflow: 'hidden', marginRight: '0.22em', paddingBottom: '0.15em', marginBottom: '-0.15em' }}>
          <span style={{
            display: 'inline-block',
            opacity: visible ? 1 : 0,
            transform: visible ? 'translateY(0)' : 'translateY(100%)',
            transition: `opacity 700ms ${EASE} ${baseDelay + i * 60}ms, transform 700ms ${EASE} ${baseDelay + i * 60}ms`,
          }}>{word}</span>
        </span>
      ))}
    </span>
  );
};

const HighlightReveal = ({ text, visible, delay = 0 }) => {
  const highlightDelay = delay + 400; 
  return (
    <span style={{ display: 'inline-block', position: 'relative', padding: '0.04em 0.2em', margin: '-0.04em 0 -0.04em 0.1em' }}>
      <span style={{ display: 'inline-block', overflow: 'hidden', paddingBottom: '0.15em', marginBottom: '-0.15em' }}>
        <span style={{
          display: 'inline-block',
          opacity: visible ? 1 : 0,
          transform: visible ? 'translateY(0)' : 'translateY(100%)',
          transition: `opacity 700ms ${EASE} ${delay}ms, transform 700ms ${EASE} ${delay}ms`,
        }}>{text}</span>
      </span>

      <span style={{
        position: 'absolute', top: 0, left: 0, bottom: 0,
        background: '#0A0A0A',
        overflow: 'hidden', whiteSpace: 'nowrap',
        width: visible ? '100%' : '0%',
        transition: `width 800ms cubic-bezier(0.85, 0, 0.15, 1) ${highlightDelay}ms`,
        borderRadius: '12px',
      }}>
        <span style={{ display: 'inline-block', overflow: 'hidden', padding: '0.04em 0.2em', paddingBottom: '0.19em', marginBottom: '-0.15em' }}>
          <span style={{
            display: 'inline-block', color: '#fff',
            opacity: visible ? 1 : 0,
            transform: visible ? 'translateY(0)' : 'translateY(100%)',
            transition: `opacity 700ms ${EASE} ${delay}ms, transform 700ms ${EASE} ${delay}ms`,
          }}>{text}</span>
        </span>
      </span>
    </span>
  );
};

const Hero = ({ onCTA }) => {
  const [visible, setVisible] = React.useState(false);
  const isMobile = useIsMobile();

  React.useEffect(() => {
    const t = setTimeout(() => setVisible(true), 120);
    return () => clearTimeout(t);
  }, []);

  const s = {
    section: {
      minHeight: '100svh',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', textAlign: 'center',
      padding: isMobile ? '120px 24px 60px' : '140px 48px 80px',
      background: '#FFFFFF', position: 'relative', overflow: 'hidden',
    },
    eyebrow: {
      fontFamily: "'DM Sans', sans-serif", fontSize: '11px', fontWeight: 500,
      letterSpacing: '0.14em', textTransform: 'uppercase', color: '#A3A3A3',
      marginBottom: isMobile ? '24px' : '36px',
      display: 'inline-flex', alignItems: 'center', gap: '8px',
      opacity: visible ? 1 : 0,
      transition: `opacity 600ms ${EASE} 0ms`,
    },
    dot: {
      width: '5px', height: '5px', borderRadius: '50%', background: '#0A0A0A',
      animation: 'pulse 2.5s infinite', flexShrink: 0,
    },
    h1: {
      fontFamily: "'Space Grotesk', sans-serif",
      fontSize: isMobile ? 'clamp(44px, 12vw, 64px)' : 'clamp(64px, 7vw, 100px)',
      fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 0.98,
      color: '#0A0A0A', maxWidth: isMobile ? '100%' : '900px',
      marginBottom: isMobile ? '20px' : '28px',
    },
    sub: {
      fontFamily: "'DM Sans', sans-serif",
      fontSize: isMobile ? '16px' : '19px',
      lineHeight: 1.6, color: '#6B6B6B',
      maxWidth: isMobile ? '340px' : '540px',
      marginBottom: isMobile ? '36px' : '52px',
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(20px)',
      transition: `opacity 800ms ${EASE} 600ms, transform 800ms ${EASE} 600ms`,
    },
    actions: {
      display: 'flex', gap: isMobile ? '10px' : '12px',
      alignItems: 'center', justifyContent: 'center',
      flexDirection: isMobile ? 'column' : 'row',
      width: isMobile ? '100%' : 'auto',
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(20px)',
      transition: `opacity 800ms ${EASE} 720ms, transform 800ms ${EASE} 720ms`,
    },
    primaryBtn: {
      fontFamily: "'DM Sans', sans-serif", fontSize: isMobile ? '16px' : '16px', fontWeight: 500,
      background: '#0A0A0A', color: '#fff',
      padding: isMobile ? '15px 0' : '15px 36px',
      width: isMobile ? '100%' : 'auto',
      borderRadius: '10px', border: 'none', cursor: 'pointer',
      transition: `all 350ms ${EASE}`,
    },
    secondaryBtn: {
      fontFamily: "'DM Sans', sans-serif", fontSize: '15px', fontWeight: 500,
      background: 'transparent', color: '#6B6B6B',
      padding: isMobile ? '10px 0' : '15px 24px',
      borderRadius: '10px', border: 'none', cursor: 'pointer',
      transition: `color 200ms`,
    },
    social: {
      marginTop: isMobile ? '48px' : '72px',
      display: 'flex', alignItems: 'center', gap: '8px',
      color: '#A3A3A3', fontSize: '13px', fontFamily: "'DM Sans', sans-serif",
      flexWrap: 'wrap', justifyContent: 'center',
      opacity: visible ? 1 : 0,
      transition: `opacity 800ms ${EASE} 900ms`,
    },
  };

  const avatarStyle = (i) => ({
    width: '26px', height: '26px', borderRadius: '50%',
    background: `hsl(0,0%,${80 - i * 10}%)`,
    border: '2px solid #fff', marginLeft: i === 0 ? 0 : '-7px',
    fontSize: '9px', fontWeight: 700, color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  });

  return (
    <section style={s.section}>
      <style>{`
        @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.2;transform:scale(0.7)} }
      `}</style>

      <div style={s.eyebrow}>
        <span style={s.dot}></span>
        Elite · Entrega em 24h
      </div>

      <h1 style={s.h1}>
        <WordReveal text="Pagina clara." visible={visible} baseDelay={80} />
        <br />
        <WordReveal text="Resultado" visible={visible} baseDelay={220} />
        <HighlightReveal text="certo." visible={visible} delay={280} />
      </h1>

      <p style={s.sub}>
        Landing pages premium criadas em menos de 24 horas.
        Qualidade sem concessões. Resultado sem espera.
      </p>

      <div style={s.actions}>
        <button style={s.primaryBtn} onClick={() => document.getElementById('precos')?.scrollIntoView({ behavior: 'smooth' })}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 14px 36px rgba(0,0,0,0.18)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
          Começar agora →
        </button>
        <button style={s.secondaryBtn} onClick={() => document.getElementById('como-funciona')?.scrollIntoView({ behavior: 'smooth' })}
          onMouseEnter={e => e.target.style.color = '#0A0A0A'}
          onMouseLeave={e => e.target.style.color = '#6B6B6B'}>
          Ver como funciona
        </button>
      </div>

      <div style={s.social}>
        <div style={{ display: 'flex' }}>
          {[0, 1, 2, 3].map(i => <div key={i} style={avatarStyle(i)}>{String.fromCharCode(65 + i)}</div>)}
        </div>
        Confiado por 200+ fundadores e times de growth
      </div>
    </section>
  );
};

Object.assign(window, { Hero });