function parseSRT(text) {
  var TC_OFFSET = 3600; // timecodes start at 01:00:00
  function tcToSec(h, m, s, ms) {
    return parseInt(h) * 3600 + parseInt(m) * 60 + parseInt(s) + parseInt(ms) / 1000;
  }
  return text.trim().split(/\n\s*\n/).map(function(block) {
    var lines = block.trim().split('\n');
    if (lines.length < 3) return null;
    var tc = lines[1].match(/(\d+):(\d+):(\d+),(\d+)\s*-->\s*(\d+):(\d+):(\d+),(\d+)/);
    if (!tc) return null;
    var start = tcToSec(tc[1], tc[2], tc[3], tc[4]) - TC_OFFSET;
    var end   = tcToSec(tc[5], tc[6], tc[7], tc[8]) - TC_OFFSET;
    var clean = lines.slice(2).map(function(l) {
      return l.replace(/<\/?b>/g, '').replace(/\\w/g, 'w/').trim();
    }).filter(Boolean);
    if (!clean.length) return null;
    return {
      start,
      end,
      title:  clean[0],
      collab: clean.length === 3 ? clean[1] : null,
      meta:   clean[clean.length - 1],
    };
  }).filter(Boolean);
}

function HeroReel({ projects, onOpen }) {
  var videoRef = React.useRef(null);
  var [subtitles, setSubtitles] = React.useState([]);
  var [currentSub, setCurrentSub] = React.useState(null);
  var [muted, setMuted] = React.useState(true);

  React.useEffect(function() {
    if (videoRef.current) videoRef.current.muted = muted;
  }, [muted]);

  React.useEffect(function() {
    fetch('data/hero_subtitle.srt')
      .then(function(r) { return r.text(); })
      .then(function(text) { setSubtitles(parseSRT(text)); });
  }, []);

  React.useEffect(function() {
    var video = videoRef.current;
    if (!video || !subtitles.length) return;
    function onTimeUpdate() {
      var t = video.currentTime;
      var sub = null;
      for (var i = 0; i < subtitles.length; i++) {
        if (t >= subtitles[i].start && t < subtitles[i].end) { sub = subtitles[i]; break; }
      }
      setCurrentSub(sub);
    }
    video.addEventListener('timeupdate', onTimeUpdate);
    return function() { video.removeEventListener('timeupdate', onTimeUpdate); };
  }, [subtitles]);

  return (
    <section className="hero">
      <div className="hero-bracket hero-bracket-tl"></div>
      <div className="hero-bracket hero-bracket-tr"></div>
      <div className="hero-bracket hero-bracket-bl"></div>
      <div className="hero-bracket hero-bracket-br"></div>

      <div className="hero-reel-marker">
        <span className="topnav-dot"></span>
        <span>REEL — 2026</span>
        <button
          className="hero-mute-btn"
          onClick={function() { setMuted(function(m) { return !m; }); }}
        >
          {muted ? "◎ MUTED" : "◉ AUDIO"}
        </button>
      </div>

      <div className="hero-video-wrap">
        <video
          ref={videoRef}
          className="hero-video"
          autoPlay
          muted
          loop
          playsInline
          src="https://vz-d78da309-ded.b-cdn.net/ddf4020e-f44d-4c28-a03b-080acc1b9910/play_1080p.mp4"
        ></video>
        <div className="hero-video-overlay"></div>
      </div>

      <div className="hero-content">
        <h1 className="hero-h1">
          <span className="hero-word">Dan</span>
          <span className="hero-word">Molnar</span>
        </h1>
        <div className="hero-tagline">
          <span>TouchDesigner artist</span>
          <span className="hero-dot">·</span>
          <span>system designer</span>
          <span className="hero-dot">·</span>
          <span>Berlin</span>
        </div>
      </div>

      <div className={"hero-sub" + (currentSub ? " hero-sub--visible" : "")}>
        {currentSub && (
          <>
            <span className="hero-sub-label">NOW PLAYING ●</span>
            <span className="hero-sub-title">{currentSub.title}</span>
            {currentSub.collab && <span className="hero-sub-collab">{currentSub.collab}</span>}
            <span className="hero-sub-meta">{currentSub.meta}</span>
          </>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { HeroReel });