/* =====================================================================
   ACS — small components
   ===================================================================== */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ---------- arrow icon ---------- */
function ArrowR({ size = 14 }) {
  return (
    <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"></line>
      <polyline points="12 5 19 12 12 19"></polyline>
    </svg>
  );
}
function ArrowUR({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <line x1="7" y1="17" x2="17" y2="7"></line>
      <polyline points="8 7 17 7 17 16"></polyline>
    </svg>
  );
}
function PlusIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"></line>
      <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
  );
}
function CloseIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <line x1="6" y1="6" x2="18" y2="18"></line>
      <line x1="18" y1="6" x2="6" y2="18"></line>
    </svg>
  );
}

/* ---------- Reveal-on-scroll wrapper ---------- */
function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if ('IntersectionObserver' in window === false) { setSeen(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setSeen(true);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const cls = `reveal ${seen ? 'is-in' : ''} ${delay ? `reveal--delay-${delay}` : ''} ${className}`.trim();
  return <Tag ref={ref} className={cls} {...rest}>{children}</Tag>;
}

/* ---------- Top Nav ---------- */
function Nav({ lang, setLang, copy, inverse }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 40);
    onS();
    window.addEventListener("scroll", onS, { passive: true });
    return () => window.removeEventListener("scroll", onS);
  }, []);
  const dark = inverse && !scrolled;
  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''} ${inverse ? 'nav--inverse' : ''}`}>
      <div className="container nav__row">
        <a href="#top" className="nav__logo" aria-label="ACS Sportsmanagement Berlin">
          <img
            src={dark ? "assets/logo-subline-white.png" : "assets/logo-subline-green.png"}
            alt="ACS Sportsmanagement Berlin"
          />
        </a>
        <div className="nav__links">
          {copy.nav.links.map(([id, label]) => (
            <a key={id} href={`#${id}`} className="nav__link">{label}</a>
          ))}
          <div className="lang-toggle" role="tablist" aria-label="Language">
            <button className={lang === 'de' ? 'active' : ''} onClick={() => setLang('de')}>DE</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Marquee ---------- */
function Marquee({ items }) {
  const content = (
    <span>
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span>{t}</span>
          <span className="dot"></span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {content}{content}
      </div>
    </div>
  );
}

/* ---------- Hero (with video placeholder) ---------- */
function Hero({ copy, lang = 'de', videoSrc, overlayOpacity = 0.55 }) {
  const heroRef = useRef(null);

  /* mouse-driven highlight on the placeholder bg */
  useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width) * 100;
      const y = ((e.clientY - r.top) / r.height) * 100;
      el.style.setProperty('--mx', `${x}%`);
      el.style.setProperty('--my', `${y}%`);
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <header className="hero" id="top" ref={heroRef}>
      {videoSrc ? (
        <video className="hero__video" src={videoSrc} autoPlay muted loop playsInline />
      ) : (
        <div className="hero__placeholder" style={{
          backgroundImage: "url(assets/hero-pitch.jpg)",
          backgroundSize: "cover",
          backgroundPosition: "center",
          filter: "saturate(1.05) contrast(1.05)"
        }}>
          <div className="hero__placeholder-label">
            <span className="dot"></span>{copy.hero.placeholder}
          </div>
        </div>
      )}
      <div
        className="hero__overlay"
        style={{ background: `linear-gradient(180deg, rgba(0,0,0,${overlayOpacity}) 0%, rgba(0,0,0,${overlayOpacity * 0.6}) 30%, rgba(0,0,0,${Math.min(0.85, overlayOpacity + 0.1)}) 100%)` }}
      ></div>

      <div className="container hero__inner">
        <div className="hero__main">
          <h1 className="hero__title">
            {copy.hero.titleLines.map((line, i) => (
              <Reveal key={i} delay={i + 1} as="span" style={{ display: 'block' }}>
                {i === 0 || i === copy.hero.titleLines.length - 1 ? line : <em>{line}</em>}
              </Reveal>
            ))}
            <Reveal delay={4} as="span" style={{ display: 'block' }}>
              <span className="accent">{copy.hero.titleAccent}</span>
            </Reveal>
          </h1>
        </div>

        {copy.hero.lede && (
          <Reveal as="div" className="hero__bottom" delay={2}>
            <p className="hero__lede">{copy.hero.lede}</p>
          </Reveal>
        )}

        <div className="hero__strip">
          {copy.hero.stats.map(([num, label], i) => (
            <Reveal as="div" className="hero__stat" key={i} delay={(i + 1)}>
              <div className="num">{num}</div>
              <div className="label">{label}</div>
            </Reveal>
          ))}
          <div className="hero__stat hero__stat--scroll">
            <span className="scroll-cue"><span className="dash"></span>{copy.hero.scroll}</span>
          </div>
        </div>
      </div>
    </header>
  );
}

window.ArrowR = ArrowR;
window.ArrowUR = ArrowUR;
window.PlusIcon = PlusIcon;
window.CloseIcon = CloseIcon;
window.Reveal = Reveal;
window.Nav = Nav;
window.Marquee = Marquee;
window.Hero = Hero;