/* ============================================================
   PETRI GAMES — shared UI components
   ============================================================ */

function Arrow({ d = 'right' }) {
  const rot = { right: 0, up: -45, diag: -45 }[d] || 0;
  return (
    <svg className="arr" width="16" height="16" viewBox="0 0 16 16" fill="none"
         style={{ transform: `rotate(${rot}deg)` }}>
      <path d="M3 8h9M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.8"
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Button({ children, variant = 'primary', onClick, arrow = false, diag = false }) {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {children}
      {arrow && <Arrow d={diag ? 'diag' : 'right'} />}
    </button>
  );
}

function StatusBadge({ status, label }) {
  return (
    <span className={`badge ${status}`}>
      <span className="dot" />{label}
    </span>
  );
}

// reveal-on-scroll wrapper
function Reveal({ children, delay = 0, className = '', as = 'div' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let done = false;
    const reveal = () => { if (!done) { done = true; el.classList.add('in'); } };
    // already in (or near) viewport on mount → reveal right away
    const r = el.getBoundingClientRect();
    if (r.top < (window.innerHeight || 0) + 120 && r.bottom > -120) reveal();
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { reveal(); io.unobserve(el); } });
    }, { threshold: 0, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    // safety net: if the observer never fires (paused timeline, print, etc.) reveal anyway
    const fallback = window.setTimeout(reveal, 1400);
    return () => { io.disconnect(); window.clearTimeout(fallback); };
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={`reveal ${className}`} style={{ transitionDelay: delay + 'ms' }}>
      {children}
    </Tag>
  );
}

// ---- NAV ----
function Nav({ route, setRoute, lang, setLang, t }) {
  const [open, setOpen] = React.useState(false);
  const items = [
    { id: 'home', label: t.routes.home },
    { id: 'projects', label: t.nav.games },
    { id: 'services', label: t.nav.services },
    { id: 'about', label: t.nav.about },
  ];
  const go = (id) => { setRoute(id); setOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="brand" onClick={() => go('home')}>
          <span className="brand-mark"><PetriMark /></span>
          <span className="brand-name">Petri<b> Games</b></span>
        </div>

        <div className={`nav-links ${open ? 'open' : ''}`}>
          {items.map((it) => (
            <span key={it.id}
                  className={`nav-link ${route === it.id ? 'active' : ''}`}
                  onClick={() => go(it.id)}>{it.label}</span>
          ))}
        </div>

        <div className="lang-toggle">
          <button className={lang === 'ru' ? 'on' : ''} onClick={() => setLang('ru')}>RU</button>
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
        </div>

        <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menu">
          <i /><i /><i />
        </button>
      </div>
    </nav>
  );
}

// ---- FOOTER ----
function Footer({ t, setRoute }) {
  const go = (id) => { setRoute(id); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-inner">
          <div style={{ maxWidth: 320 }}>
            <div className="brand" style={{ cursor: 'pointer' }} onClick={() => go('home')}>
              <span className="brand-mark" style={{ width: 30, height: 30 }}><PetriMark /></span>
              <span className="brand-name">Petri<b> Games</b></span>
            </div>
          </div>

          <div className="footer-cols">
            <div className="footer-col">
              <h6>{t.footer.explore}</h6>
              <a onClick={() => go('home')}>{t.routes.home}</a>
              <a onClick={() => go('projects')}>{t.routes.projects}</a>
              <a onClick={() => go('about')}>{t.routes.about}</a>
              <a onClick={() => go('contact')}>{t.routes.contact}</a>
            </div>
            <div className="footer-col">
              <h6>{t.footer.connect}</h6>
              <a href="https://petrigames.itch.io" target="_blank" rel="noreferrer">itch.io</a>
              <a href="mailto:hello@petrigames.com">hello@petrigames.com</a>
              <a href="https://petrigames.com" target="_blank" rel="noreferrer">petrigames.com</a>
            </div>
          </div>
        </div>
        <div className="footer-base">
          <span>{t.footer.rights}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Arrow, Button, StatusBadge, Reveal, Nav, Footer });