/* Chrome: cursor, nav, loader, marquee, scroll reveal */

const { useState, useEffect, useRef, useLayoutEffect } = React;

/* ── Custom cursor (magnetic-ish) ── */
function Cursor() {
  const dotRef = useRef(null);
  const ringRef = useRef(null);
  const target = useRef({ x: 0, y: 0 });
  const ringPos = useRef({ x: 0, y: 0 });

  useEffect(() => {
    if (window.matchMedia('(max-width: 720px)').matches) return;
    const onMove = (e) => {
      target.current.x = e.clientX;
      target.current.y = e.clientY;
      if (dotRef.current) {
        dotRef.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
      }
    };

    const onEnter = (e) => {
      if (e.target.closest && e.target.closest('a, button, .hoverable, [data-hover]')) {
        dotRef.current?.classList.add('hover');
        ringRef.current?.classList.add('hover');
      }
    };
    const onLeave = (e) => {
      if (e.target.closest && e.target.closest('a, button, .hoverable, [data-hover]')) {
        dotRef.current?.classList.remove('hover');
        ringRef.current?.classList.remove('hover');
      }
    };

    let raf;
    const tick = () => {
      ringPos.current.x += (target.current.x - ringPos.current.x) * 0.18;
      ringPos.current.y += (target.current.y - ringPos.current.y) * 0.18;
      if (ringRef.current) {
        ringRef.current.style.transform = `translate(${ringPos.current.x}px, ${ringPos.current.y}px) translate(-50%, -50%)`;
      }
      raf = requestAnimationFrame(tick);
    };
    tick();

    window.addEventListener('mousemove', onMove);
    document.addEventListener('mouseover', onEnter);
    document.addEventListener('mouseout', onLeave);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseover', onEnter);
      document.removeEventListener('mouseout', onLeave);
    };
  }, []);

  return (
    <React.Fragment>
      <div ref={ringRef} className="cursor-ring"></div>
      <div ref={dotRef} className="cursor-dot"></div>
    </React.Fragment>
  );
}

/* ── Loader ── */
function Loader({ gone }) {
  return (
    <div className={"loader" + (gone ? " gone" : "")}>
      <div className="loader__text">
        <span className="blob"></span>
        <span>Leonardo Cotta · loading portfolio</span>
      </div>
    </div>
  );
}

/* ── Lang toggle (top-left) ── */
function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle">
      <button
        className={lang === 'it' ? 'on' : ''}
        onClick={() => setLang('it')}
        data-hover
      >IT</button>
      <span>/</span>
      <button
        className={lang === 'en' ? 'on' : ''}
        onClick={() => setLang('en')}
        data-hover
      >EN</button>
    </div>
  );
}

/* ── Nav ── */
function Nav({ lang, setLang }) {
  const t = (k) => window.__t(lang, k);
  const [time, setTime] = useState('');
  useEffect(() => {
    const update = () => {
      const d = new Date();
      const opts = { timeZone: 'Europe/Rome', hour12: false, hour: '2-digit', minute: '2-digit' };
      setTime(d.toLocaleTimeString(lang === 'it' ? 'it-IT' : 'en-GB', opts) + ' CET');
    };
    update();
    const id = setInterval(update, 30000);
    return () => clearInterval(id);
  }, [lang]);
  return (
    <nav className="nav">
      <div className="nav__brand">
        <span className="nav__brand-dot"></span>
        <span>Leonardo Cotta — {t('nav.available')}</span>
      </div>
      <div className="nav__links">
        <a href="#about" className="nav__link"><span className="nav__num">01</span>{t('nav.profile')}</a>
        <a href="#skills" className="nav__link"><span className="nav__num">02</span>{t('nav.skills')}</a>
        <a href="#experience" className="nav__link"><span className="nav__num">03</span>{t('nav.experience')}</a>
        <a href="#network" className="nav__link"><span className="nav__num">04</span>{t('nav.network')}</a>
        <a href="#projects" className="nav__link"><span className="nav__num">05</span>{t('nav.projects')}</a>
        <a href="#contact" className="nav__link"><span className="nav__num">06</span>{t('nav.contact')}</a>
      </div>
      <div className="nav__right">
        <button
          className={"nav__lang " + (lang === 'it' ? 'on' : '')}
          onClick={() => setLang('it')}
          data-hover
        >IT</button>
        <span className="nav__lang-sep">/</span>
        <button
          className={"nav__lang " + (lang === 'en' ? 'on' : '')}
          onClick={() => setLang('en')}
          data-hover
        >EN</button>
        <span className="nav__time">{time}</span>
      </div>
    </nav>
  );
}

/* ── Marquee ── */
function Marquee({ items }) {
  const content = (
    <React.Fragment>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span>{it}</span>
          <span className="star">✦</span>
        </React.Fragment>
      ))}
    </React.Fragment>
  );
  return (
    <div className="marquee">
      <div className="marquee__track">
        {content}
        {content}
      </div>
    </div>
  );
}

/* ── Scroll reveal helper ── */
function useReveal(dep) {
  useEffect(() => {
    const id = setTimeout(() => {
      const els = document.querySelectorAll('.reveal:not(.in)');
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
      els.forEach(el => io.observe(el));
      return () => io.disconnect();
    }, 50);
    return () => clearTimeout(id);
  }, [dep]);
}

Object.assign(window, { Cursor, Loader, Nav, LangToggle, Marquee, useReveal });