// hero.jsx — hero with typewriter + 3 layout variants
// Exports to window: Hero, useTypewriter

function useTypewriter(words, enabled) {
  const [text, setText] = React.useState(enabled ? '' : words[0]);
  const [idx, setIdx] = React.useState(0);
  const [phase, setPhase] = React.useState('typing'); // typing | hold | deleting
  React.useEffect(() => {
    if (!enabled) { setText(words[idx % words.length]); return; }
    const word = words[idx % words.length];
    let t;
    if (phase === 'typing') {
      if (text.length < word.length) t = setTimeout(() => setText(word.slice(0, text.length + 1)), 65);
      else t = setTimeout(() => setPhase('hold'), 1500);
    } else if (phase === 'hold') {
      t = setTimeout(() => setPhase('deleting'), 1100);
    } else {
      if (text.length > 0) t = setTimeout(() => setText(word.slice(0, text.length - 1)), 32);
      else { setIdx(i => i + 1); setPhase('typing'); }
    }
    return () => clearTimeout(t);
  }, [text, phase, idx, enabled, words]);
  return text;
}

const HERO_WORDS = ['TOTVS', 'Protheus', 'Fluig', 'RM', 'de Compras', 'de RH', 'de TI'];

function RotatingWord({ motion }) {
  const tw = useTypewriter(HERO_WORDS, motion);
  return (
    <span className="hero__rot">
      {tw}<span className="hero__caret" aria-hidden="true"></span>
    </span>
  );
}

function HeroCopy({ motion, align }) {
  const L = window.JYNX_LINKS;
  return (
    <div className={'hero__copy hero__copy--' + align}>
      <div className="hero__badge" data-reveal>
        <JynxMark size={15} color="var(--accent)" />
        Plataforma e especialistas TOTVS, +7 anos no ecossistema
      </div>
      <h1 className="hero__h1" data-reveal style={{ '--reveal-delay': '60ms' }}>
        A extensão do<br />seu time{' '}
        <RotatingWord motion={motion} />
      </h1>
      <p className="hero__sub" data-reveal style={{ '--reveal-delay': '140ms' }}>
        Mais de 20 soluções prontas, consultoria especializada e alocação de profissionais
        para Protheus, Fluig, RM e Analytics, com acompanhamento em tempo real.
        Implantação em semanas, não meses.
      </p>
      <div className="hero__cta" data-reveal style={{ '--reveal-delay': '220ms' }}>
        <a href={L.signup} className="btn btn--primary btn--lg">Cadastre-se gratuitamente <Icon name="arrow-right" size={18} /></a>
        <a href={L.demo} className="btn btn--ghost btn--lg">Agendar demonstração</a>
      </div>
      <div className="hero__sublinks" data-reveal style={{ '--reveal-delay': '280ms' }}>
        <a href={L.wa} className="link-wa"><Icon name="message-circle" size={16} /> Ou fale pelo WhatsApp</a>
        <span className="hero__sep"></span>
        <a href={L.diagnostico} className="link-wa"><Icon name="stethoscope" size={16} /> Solicitar diagnóstico gratuito</a>
      </div>
      <div className="hero__proof" data-reveal style={{ '--reveal-delay': '340ms' }}>
        <span><b>+7 anos</b> no ecossistema TOTVS</span>
        <span className="hero__pdot"></span>
        <span><b>+200</b> processos automatizados</span>
      </div>
    </div>
  );
}

function Hero({ variant = 'split', motion = true }) {
  return (
    <section className={'hero hero--' + variant} id="top">
      <div className="hero__atmo" aria-hidden="true"></div>
      <div className="wrap hero__inner">
        <HeroCopy motion={motion} align={variant === 'center' ? 'center' : 'left'} />
        <div className="hero__visual" data-reveal style={{ '--reveal-delay': '180ms' }}>
          <div className="hero__glow" aria-hidden="true"></div>
          <PlatformMock />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, useTypewriter });