// UI components — Nav, Footer, primitives
const { useState, useEffect, useRef, useMemo } = React;

function useLang() {
  const [lang, setLang] = useState(() => localStorage.getItem('deb_lang') || 'es');
  useEffect(() => { localStorage.setItem('deb_lang', lang); }, [lang]);
  return [lang, setLang];
}

function Reveal({ children, delay = 0, className = '' }) {
  const ref = useRef(null);
  const [on, setOn] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    // If already in viewport on mount, show immediately
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      setOn(true);
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setOn(true); io.disconnect(); }});
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} className={'reveal ' + (on ? 'reveal-on ' : '') + className} style={{ transitionDelay: delay + 'ms' }}>
      {children}
    </div>
  );
}

function Img({ src, alt, className = '', style, ratio }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className={'img-wrap ' + className} style={{ ...style, aspectRatio: ratio }}>
      <img src={src} alt={alt || ''} loading="lazy" onLoad={() => setLoaded(true)} className={loaded ? 'img-on' : ''} />
    </div>
  );
}

function Nav({ lang, setLang, route, navigate }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const onHome = route.page === 'home';
  const transparent = onHome && !scrolled;

  const links = [
    { id: 'work', page: 'work' },
    { id: 'studio', page: 'about' },
    { id: 'publications', page: 'press' },
    { id: 'contact', page: 'contact' },
  ];

  return (
    <>
      <header className={'nav ' + (transparent ? 'nav-transparent' : 'nav-solid')}>
        <div className="nav-inner">
          <a className="nav-logo" href="#" aria-label="D.E.B. Architecture" onClick={(e) => { e.preventDefault(); navigate({ page: 'home' }); }}>
            <img src="https://cdn.prod.website-files.com/640376c0a141a9d836dab029/640522078128bec56dfae8ce_Logo_deb.png" alt="D.E.B. Architecture" className="nav-logo-img" />
          </a>
          <nav className="nav-links">
            {links.map(l => (
              <a key={l.id} href="#" className={route.page === l.page || (l.page === 'work' && route.page === 'project') ? 'active' : ''}
                 onClick={(e) => { e.preventDefault(); navigate({ page: l.page }); }}>
                {t(COPY.nav[l.id], lang)}
              </a>
            ))}
          </nav>
          <div className="nav-right">
            <div className="lang-switch" role="group" aria-label="language">
              <button className={lang === 'es' ? 'on' : ''} onClick={() => setLang('es')}>ES</button>
              <span>·</span>
              <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
            </div>
            <button className="nav-burger" onClick={() => setMenuOpen(true)} aria-label="menu">
              <span /><span />
            </button>
          </div>
        </div>
      </header>
      {menuOpen && (
        <div className="mobile-menu" onClick={() => setMenuOpen(false)}>
          <div className="mobile-menu-inner" onClick={(e) => e.stopPropagation()}>
            <button className="mobile-close" onClick={() => setMenuOpen(false)}>✕</button>
            {links.map(l => (
              <a key={l.id} href="#" onClick={(e) => { e.preventDefault(); navigate({ page: l.page }); setMenuOpen(false); }}>
                {t(COPY.nav[l.id], lang)}
              </a>
            ))}
          </div>
        </div>
      )}
    </>
  );
}

function Footer({ lang, navigate }) {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <img src="https://cdn.prod.website-files.com/640376c0a141a9d836dab029/640522078128bec56dfae8ce_Logo_deb.png" alt="D.E.B. Architecture" className="footer-logo-img" />
          <div className="mono tiny muted" style={{marginTop:16}}>{t(COPY.footer.colophon, lang)}</div>
        </div>
        <div className="footer-col">
          <div className="mono tiny muted">{t(COPY.nav.contact, lang)}</div>
          <a href="mailto:hr@debconsulting.co" className="footer-link">hr@debconsulting.co</a>
          <div className="footer-link">Barranquilla, Colombia</div>
        </div>
        <div className="footer-col">
          <div className="mono tiny muted">{lang === 'es' ? 'Navegar' : 'Navigate'}</div>
          <a href="#" className="footer-link" onClick={(e)=>{e.preventDefault();navigate({page:'work'});}}>{t(COPY.nav.work, lang)}</a>
          <a href="#" className="footer-link" onClick={(e)=>{e.preventDefault();navigate({page:'about'});}}>{t(COPY.nav.studio, lang)}</a>
          <a href="#" className="footer-link" onClick={(e)=>{e.preventDefault();navigate({page:'press'});}}>{t(COPY.nav.publications, lang)}</a>
        </div>
        <div className="footer-col">
          <div className="mono tiny muted">{t(COPY.contact.social, lang)}</div>
          <a href="https://co.linkedin.com/company/deb-consultingcol" className="footer-link" target="_blank" rel="noreferrer">LinkedIn ↗</a>
          <a href="https://instagram.com/deb_consulting" className="footer-link" target="_blank" rel="noreferrer">Instagram ↗</a>
        </div>
      </div>
      <div className="footer-bottom">
        <div className="mono tiny muted">{t(COPY.footer.rights, lang)}</div>
        <div className="mono tiny muted">11°00′N · 74°48′W</div>
      </div>
    </footer>
  );
}

Object.assign(window, { useLang, Reveal, Img, Nav, Footer });