var Hero = function (props) {
  var navigate = props.navigate;
  var config = props.config || {};
  var siteDescription = props.siteDescription || 'Field notes on AI red-teaming, kill chains, and the sound things make when they fail. Pete McKernan and the Cipher Circle, transmitting from Iowa.';

  var lines = config.hero_lines || [['We build things with AI.', 'Then we break them on purpose.']];
  var rotate = config.rotate_hero !== false && lines.length > 1;
  var seconds = (config.rotate_seconds || 10) * 1000;

  var _idx = React.useState(0);
  var idx = _idx[0], setIdx = _idx[1];

  var _fading = React.useState(false);
  var fading = _fading[0], setFading = _fading[1];

  var fillRef = React.useRef(null);

  React.useEffect(function () {
    if (!rotate) return;
    var timer = setInterval(function () {
      setFading(true);
      setTimeout(function () {
        setIdx(function (i) { return (i + 1) % lines.length; });
        setFading(false);
      }, 320);
    }, seconds);
    return function () { clearInterval(timer); };
  }, [rotate, seconds, lines.length]);

  React.useEffect(function () {
    if (!fillRef.current || !rotate) return;
    var el = fillRef.current;
    el.style.animation = 'none';
    el.offsetHeight;
    el.style.animation = 'ib-hero-bar ' + seconds + 'ms linear';
  }, [idx, rotate, seconds]);

  var current = lines[idx] || lines[0];

  return (
    <section className="ib-hero">
      <div className="ib-hero-left">
        <div className="ib-hero-eyebrow">// FIELD NOTES · VOL 02 · IOWA</div>
        <h1 className="ib-hero-h1" style={{
          transition: fading ? 'opacity .32s ease, transform .32s ease' : 'opacity .32s ease, transform .32s ease',
          opacity: fading ? 0 : 1,
          transform: fading ? 'translateY(-6px)' : 'translateY(0)',
        }}>
          <span className="ib-hero-line">{current[0] || ''}</span>
          <span className="ib-hero-line accent">
            {current[1] || ''}<span className="ib-caret-lg"></span>
          </span>
          {current[2] && <span className="ib-hero-line">{current[2]}</span>}
        </h1>
        {rotate && (
          <div className="ib-hero-progress" aria-hidden="true">
            <span>{String(idx + 1).padStart(2, '0')} / {String(lines.length).padStart(2, '0')}</span>
            <span className="ib-hero-progress-bar">
              <span ref={fillRef} className="ib-hero-progress-fill"></span>
            </span>
            <span>auto</span>
          </div>
        )}
        <p className="ib-hero-lede">
          <span className="prompt">&gt;</span> {siteDescription}
        </p>
        <div className="ib-hero-cta">
          <a className="ib-btn-secondary" href="#subscribe" onClick={function (e) { e.preventDefault(); var el = document.querySelector('.ib-cta'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }}>$ ./subscribe</a>
          <a className="ib-btn-primary" href="#latest" onClick={function (e) { e.preventDefault(); var el = document.querySelector('.ib-feed-section'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }}>$ cat /latest</a>
          <a className="ib-btn-secondary" href="/shop" onClick={function (e) { e.preventDefault(); navigate && navigate('shop'); }}>$ ./merch-store</a>
        </div>
      </div>

      <div className="ib-hero-right">
        <div className="ib-hero-logo">
          <img src="assets/images/taribai-logo.png" alt="It's Broken AI" width="220" height="220" />
        </div>
        {props.children}
      </div>
    </section>
  );
};

window.Hero = Hero;