// Nav, Hero, Marquee components
const { useState: useStateHero, useEffect: useEffectHero } = React;

function Nav() {
  const scrolled = window.useScrolled(20);
  const [mobileOpen, setMobileOpen] = useStateHero(false);
  const close = () => setMobileOpen(false);

  useEffectHero(() => {
    if (!mobileOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [mobileOpen]);

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`} aria-label="Main navigation">
      <div className="nav-inner">
        <a href="#top" className="brand" onClick={close}>
          <span className="brand-mark">KV</span>
          <span className="brand-name">
            <b>Kshitij Verma</b> <span>// dir + vfx</span>
          </span>
        </a>
        <div className={`nav-links ${mobileOpen ? 'mobile-open' : ''}`}>
          <a href="#work-director" onClick={close}><span className="num">01</span>Work</a>
          <a href="#work-vfx" onClick={close}><span className="num">02</span>VFX</a>
          <a href="#work-live" onClick={close}><span className="num">03</span>Live</a>
          <a href="#about" onClick={close}><span className="num">04</span>About</a>
          <a href="#contact" onClick={close}><span className="num">05</span>Contact</a>
        </div>
        <div className="nav-right">
          <a href="#contact" className="nav-cta">
            <span className="dot"></span>
            Available
          </a>
          <button
            className="nav-mobile-btn"
            onClick={() => setMobileOpen(v => !v)}
            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={mobileOpen}
            aria-controls="nav-mobile-menu"
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const [time, setTime] = useStateHero(() => new Date());
  useEffectHero(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  window.useHeroParallax('.hero');

  const fmt = (n) => String(n).padStart(2, '0');
  const istHour = (time.getUTCHours() * 60 + time.getUTCMinutes() + 330) % 1440;
  const h = Math.floor(istHour / 60);
  const m = istHour % 60;
  const s = time.getUTCSeconds();
  const istClock = `${fmt(h)}:${fmt(m)}:${fmt(s)} IST`;

  return (
    <>
      <section className="hero" id="top">
        <div className="hero-grid-bg"></div>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <div className="hero-meta-top">
            <span className="live-rec">
              <span className="rec-dot"></span> MUMBAI · IN, {istClock}
            </span>
            <span>v.2026 / personal-site</span>
          </div>

          <span className="hero-tag">Director · VFX Sup · Virtual Prod</span>

          <h1 className="hero-headline">
            <span className="line"><span>Post-first</span></span>
            <span className="line"><span><i className="stroke">director</i> shaping</span></span>
            <span className="line"><span><span className="accent">cinematic</span> dreamworlds<span className="cursor"></span></span></span>
          </h1>

          <p className="hero-sub">
            I'm <b>Kshitij Verma</b>, a director, Live Virtual Production specialist and VFX Supervisor.
            A decade weaving tech and craft into frames people remember. Tech kid at heart, movie kid
            since forever, obsessed with figuring out how the magic works, then building it.
          </p>

          <div className="hero-stats">
            <div>
              <div className="hero-stat-num">
                <window.Counter to={10} suffix="+" accent />
              </div>
              <div className="hero-stat-label">Yrs in craft</div>
            </div>
            <div>
              <div className="hero-stat-num"><window.Counter to={50} suffix="+" /></div>
              <div className="hero-stat-label">Hrs of content delivered</div>
            </div>
            <div>
              <div className="hero-stat-num"><window.Counter to={8} prefix="0" /></div>
              <div className="hero-stat-label">Live VP episodes</div>
            </div>
            <div>
              <div className="hero-stat-num"><span className="accent">∞</span></div>
              <div className="hero-stat-label">Frames tinkered</div>
            </div>
          </div>
        </div>
      </section>

      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {[...Array(2)].map((_, i) => (
            <React.Fragment key={i}>
              <span className="marquee-item">Direction</span>
              <span className="marquee-item">VFX Supervision</span>
              <span className="marquee-item"><span className="accent">Virtual Production</span></span>
              <span className="marquee-item">Post Pipeline</span>
              <span className="marquee-item">Live Streams</span>
              <span className="marquee-item"><span className="accent">Real-time CG</span></span>
              <span className="marquee-item">Concept → Final</span>
              <span className="marquee-item">Tinkerer / Storyteller</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </>
  );
}

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