/* Header · Hero · Stats */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function Header({ onEnquire }) {
  const [scrolled, setScrolled] = useStateA(false);
  const [dark, setDark] = useStateA(true);
  const [menu, setMenu] = useStateA(false);
  useEffectA(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 24);
      setDark(y < window.innerHeight - 90);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);
  const cls = "header" + (scrolled ? " scrolled" : "") + (dark ? " hdr-dark" : "");
  useEffectA(() => { if (window.lucide) window.lucide.createIcons(); }, [menu]);
  return (
    <header className={cls}>
      <div className="wrap header__inner">
        <Logo />
        <nav className="nav">
          {window.TRILOK.nav.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
        </nav>
        <div className="header__actions">
          <button className="btn" onClick={onEnquire}>Request a quote <Arrow /></button>
          <button className="menu-btn" aria-label="Menu" onClick={() => setMenu((m) => !m)}>
            <i data-lucide={menu ? "x" : "menu"}></i>
          </button>
        </div>
      </div>
      {menu && (
        <div className="mobile-menu">
          {window.TRILOK.nav.map((n) => (
            <a key={n.href} href={n.href} onClick={() => setMenu(false)}>{n.label}</a>
          ))}
          <button className="btn btn--lg" onClick={() => { setMenu(false); onEnquire(); }}>Request a quote <Arrow /></button>
        </div>
      )}
    </header>
  );
}

function Hero({ headlineOverride }) {
  const slides = window.TRILOK.heroSlides;
  const [idx, setIdx] = useStateA(0);
  const timer = useRefA(null);
  useEffectA(() => {
    timer.current = setInterval(() => setIdx((i) => (i + 1) % slides.length), 6000);
    return () => clearInterval(timer.current);
  }, []);
  const go = (i) => { setIdx(i); clearInterval(timer.current); timer.current = setInterval(() => setIdx((p) => (p + 1) % slides.length), 6000); };

  return (
    <section className="hero on-dark" id="top">
      <div className="hero__slides">
        {slides.map((s, i) => (
          <div className={"hero__slide" + (i === idx ? " active" : "")} key={s.id}>
            <div className="hero__media">
              <image-slot id={s.id} shape="rect" placeholder={"Drop photo · " + s.tab + " · upload 2560 × 1440px (16:9)"}></image-slot>
            </div>
            <div className="hero__scrim"></div>
          </div>
        ))}
        <div className="hero__grid"></div>
      </div>

      <div className="hero__inner wrap">
        <div className="hero__content">
          {slides.map((s, i) => i === idx && (
            <div key={s.id}>
              <div className="hero__kick hero__fade-item d1"><span className="kicker on-dark"><span className="num">—</span> {s.kicker}</span></div>
              <h1 className="hero__title hero__fade-item d2">
                {i === 0 && headlineOverride
                  ? headlineOverride
                  : <>{s.title[0]}<span className="accentword">{s.title[1]}</span>{s.title[2]}</>}
              </h1>
              <p className="hero__sub hero__fade-item d3">{s.sub}</p>
              <div className="hero__cta hero__fade-item d3">
                <a className="btn btn--lg" href={s.ctaHref}>{s.cta} <Arrow /></a>
                <a className="btn btn--ghost btn--lg" href="#projects">View projects</a>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="hero__bar">
        <div className="wrap hero__bar-inner">
          <div className="hero__dots">
            {slides.map((s, i) => (
              <button key={s.id} className={"hero__dot" + (i === idx ? " active" : "")} onClick={() => go(i)}>
                <span className="dn">0{i + 1}</span>
                <span className="dl">{s.tab}</span>
              </button>
            ))}
          </div>
          <div className="hero__scrollcue">
            <span>Scroll</span><span className="ar"><i data-lucide="arrow-down" style={{ width: 14, height: 14 }}></i></span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="stats">
      <div className="wrap">
        <div className="stats__grid">
          {window.TRILOK.stats.map((s, i) => (
            <div className="stat" key={i}>
              <CountUp end={s.num} suffix={s.suffix} />
              <div className="stat__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero, Stats });