/* Typewriter text effect with blinking caret */
function Typewriter({ text, speed = 28, startDelay = 400, className, style, as = "span", caret = true, trigger = true }) {
  const [i, setI] = React.useState(0);
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    if (!trigger) return;
    let id;
    const start = setTimeout(() => {
      id = setInterval(() => {
        setI(n => {
          if (n >= text.length) {
            clearInterval(id);
            setDone(true);
            return n;
          }
          return n + 1;
        });
      }, speed);
    }, startDelay);
    return () => { clearTimeout(start); clearInterval(id); };
  }, [text, speed, startDelay, trigger]);

  const Tag = as;
  return (
    <Tag className={className} style={style}>
      {text.slice(0, i)}
      {caret && <span className="tw-caret" style={{opacity: done ? 0 : 1}}>▋</span>}
    </Tag>
  );
}

/* Triggered on scroll-into-view */
function TypewriterOnView({ text, ...rest }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) if (e.isIntersecting) { setVisible(true); io.disconnect(); }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <span ref={ref} style={{display:"inline-block"}}>
      <Typewriter text={text} trigger={visible} {...rest}/>
    </span>
  );
}

Object.assign(window, { Typewriter, TypewriterOnView });