// hero.jsx — kinetic typography hero with variants
const { useEffect: useEffectHero, useState: useStateHero } = React;

function HeroSplit({ ready }) {
  return (
    <div className="hero__type hero__type--single">
      <div className="hero__line hero__line--phon" data-reveal>
        <span className="hero__phon" style={{ fontSize: "24px" }}>[ džastmajty ]</span>
      </div>
      <div className="hero__line" data-reveal style={{ "--reveal-delay": "160ms" }}>
        <h1 className="hero__word hero__word--white">justmighty</h1>
      </div>
    </div>);

}

function HeroStacked() {
  return (
    <div className="hero__type">
      <div className="hero__line" data-reveal>
        <h1 className="hero__word">just<span style={{ color: 'var(--coral)' }}>.</span></h1>
      </div>
      <div className="hero__line" data-reveal style={{ "--reveal-delay": "180ms", justifyContent: 'flex-end' }}>
        <h1 className="hero__word hero__word--outline">mighty</h1>
      </div>
    </div>);

}

function HeroMarquee() {
  // Wide marquee word with subtle scroll-coupled offset
  const [tx, setTx] = useStateHero(0);
  useEffectHero(() => {
    const onScroll = () => setTx(window.scrollY * 0.35);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className="hero__type">
      <div className="hero__line" data-reveal style={{ transform: `translateX(${-tx}px)` }}>
        <h1 className="hero__word">justmighty —</h1>
      </div>
      <div className="hero__line" data-reveal style={{ "--reveal-delay": "180ms", transform: `translateX(${tx * 0.7}px)`, justifyContent: 'flex-end' }}>
        <h1 className="hero__word hero__word--outline">justmighty —</h1>
      </div>
    </div>);

}

function Hero({ variant = 'split' }) {
  const [ready, setReady] = useStateHero(false);
  useEffectHero(() => {
    const t = setTimeout(() => setReady(true), 50);
    return () => clearTimeout(t);
  }, []);
  return (
    <section className={"hero " + (ready ? "ready" : "")} data-screen-label="01 Hero">
      <div className="hero__bg" />
      <img className="hero__crystal" src="./assets/crystal-large.png" alt="" />
      <div className="hero__grain" />

      <div className="hero__topline">
        <span className="mono">STRATEGICKÁ KREATIVNÍ AGENTURA · BRNO/PRAHA · od 2014</span>
        <span className="mono">↓ SCROLL</span>
      </div>

      {variant === 'split' && <HeroSplit ready={ready} />}
      {variant === 'stacked' && <HeroStacked />}
      {variant === 'marquee' && <HeroMarquee />}

      <div className="hero__bottom">
        <p className="hero__claim" data-reveal style={{ "--reveal-delay": "600ms" }}>
          Kreativní marketingová agentura pro značky, které se chtějí opravdu posunout.
          Záleží nám na dopadu — ne na zářezu do portfolia.
        </p>
        <div className="hero__cta" data-reveal style={{ "--reveal-delay": "700ms" }}>
          <button
            className="hero__scroll-btn"
            onClick={() => {
              const el = document.querySelector('[data-screen-label="02 Intro"]');
              if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 20, behavior: 'smooth' });
            }}
            aria-label="Poznej nás">
            <span>poznej nás</span>
            <span className="hero__scroll-arrow">↓</span>
          </button>
        </div>
        <div className="hero__meta" data-reveal style={{ "--reveal-delay": "800ms" }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span className="pulse" />
            <span className="mono">BEREME NOVÉ PROJEKTY · Q3 2026</span>
          </span>
          <span className="mono">12+ LET / 500+ PROJEKTŮ</span>
        </div>
      </div>
    </section>);

}

window.Hero = Hero;