// Helpers and shared bits
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ── i18n ─────────────────────────────────────────────
window.STRINGS = {
  pt: {
    work: 'Trabalho', about: 'Sobre', contact: 'Contato', cv: 'Currículo',
    selectedWork: 'Selected work — 2022/26',
    available: 'Disponível para projetos · Q2 2026',
    based: 'Atibaia, SP — Brasil',
    portfolio: 'Portfolio · 2026',
    allProjects: 'Todos os projetos',
    filter: 'Filtro',
    next: 'Próximo projeto',
    prev: 'Projeto anterior',
    aboutTitle: 'Sobre',
    contactTitle: 'Contato',
    cvTitle: 'Currículo',
    download: 'Download PDF',
    name: 'Nome', email: 'E-mail', subject: 'Assunto', message: 'Mensagem',
    placeholderName: 'Como posso te chamar?',
    placeholderEmail: 'voce@email.com',
    placeholderMsg: 'Conte um pouco sobre o projeto…',
    interest: 'Interesse',
    send: 'Enviar mensagem',
    client: 'Cliente', year: 'Ano', role: 'Atuação', collab: 'Colaboração',
    experience: 'Experiência', education: 'Formação', recognition: 'Reconhecimentos', skills: 'Habilidades',
    selectedClients: 'Clientes selecionados',
    bio: 'Bio',
    catLabel: 'Categorias',
    photoLabel: 'Vinicius Siqueira · 2025 — Atibaia, SP',
  },
  en: {
    work: 'Work', about: 'About', contact: 'Contact', cv: 'CV',
    selectedWork: 'Selected work — 2022/26',
    available: 'Available for projects · Q2 2026',
    based: 'Atibaia, SP — Brazil',
    portfolio: 'Portfolio · 2026',
    allProjects: 'All projects',
    filter: 'Filter',
    next: 'Next project',
    prev: 'Previous project',
    aboutTitle: 'About',
    contactTitle: 'Contact',
    cvTitle: 'Résumé',
    download: 'Download PDF',
    name: 'Name', email: 'Email', subject: 'Subject', message: 'Message',
    placeholderName: 'What should I call you?',
    placeholderEmail: 'you@email.com',
    placeholderMsg: 'Tell me a bit about the project…',
    interest: 'Interest',
    send: 'Send message',
    client: 'Client', year: 'Year', role: 'Role', collab: 'Collaboration',
    experience: 'Experience', education: 'Education', recognition: 'Recognition', skills: 'Skills',
    selectedClients: 'Selected clients',
    bio: 'Bio',
    catLabel: 'Categories',
    photoLabel: 'Vinicius Siqueira · 2025 — Atibaia, SP',
  }
};

// ── Color-field placeholder ──────────────────────────
window.ColorField = function ColorField({ hue = 30, lightness = 45, label, chroma = 'normal', src, fit = 'cover' }) {
  if (src) {
    if (fit === 'contain') {
      return (
        <div className="colorfield has-image is-contain">
          <img src={src} alt={label || ''} style={{ width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'center', display: 'block' }} />
          {label && <span className="cf-label">{label}</span>}
        </div>
      );
    }
    return (
      <div className="colorfield has-image" style={{ backgroundImage: `url('${src}')` }}>
        {label && <span className="cf-label">{label}</span>}
      </div>
    );
  }
  const sat = chroma === 'rich' ? 65 : 38;
  const bg = `linear-gradient(135deg, hsl(${hue} ${sat}% ${lightness}%) 0%, hsl(${(hue+18)%360} ${sat-10}% ${Math.max(15, lightness-12)}%) 100%)`;
  return (
    <div className="colorfield" style={{ '--cf': bg }}>
      {label && <span className="cf-label">{label}</span>}
    </div>
  );
};

// ── Top bar ──────────────────────────────────────────
window.TopBar = function TopBar({ route, navigate, lang, setLang }) {
  const t = STRINGS[lang];
  const isHome = route.name === 'home';
  const [menuOpen, setMenuOpen] = useState(false);

  const go = (r) => { setMenuOpen(false); navigate(r); };

  return (
    <header className="topbar">
      <button className="brand" onClick={() => go({ name: 'home' })} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <img src="assets/logo hor preto.png" alt="Vinicius Siqueira" className="topbar-logo topbar-logo-dark" style={{ height: 36, width: 'auto' }} />
        <img src="assets/logo hor branco.png" alt="Vinicius Siqueira" className="topbar-logo topbar-logo-light" style={{ height: 36, width: 'auto' }} />
      </button>

      {/* Desktop nav */}
      <nav className="topbar-nav-desktop">
        <button className={!isHome && route.name !== 'about' && route.name !== 'contact' && route.name !== 'cv' ? 'active' : ''}
                onClick={() => go({ name: 'home' })}>{t.work}</button>
        <button className={route.name === 'about' ? 'active' : ''} onClick={() => go({ name: 'about' })}>{t.about}</button>
        <button className={route.name === 'cv' ? 'active' : ''} onClick={() => go({ name: 'cv' })}>{t.cv}</button>
        <button className={route.name === 'contact' ? 'active' : ''} onClick={() => go({ name: 'contact' })}>{t.contact}</button>
      </nav>

      <div className="lang-switch topbar-lang-desktop">
        <button className={lang === 'pt' ? 'active' : ''} onClick={() => setLang('pt')}>PT</button>
        <span className="sep">/</span>
        <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
      </div>

      {/* Hamburger button — mobile only */}
      <button className={`hamburger${menuOpen ? ' is-open' : ''}`} onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
        <span /><span /><span />
      </button>

      {/* Mobile drawer */}
      {menuOpen && (
        <div className="mobile-drawer" onClick={() => setMenuOpen(false)}>
          <nav onClick={e => e.stopPropagation()}>
            <button className={!isHome && route.name !== 'about' && route.name !== 'contact' && route.name !== 'cv' ? 'active' : ''}
                    onClick={() => go({ name: 'home' })}>{t.work}</button>
            <button className={route.name === 'about' ? 'active' : ''} onClick={() => go({ name: 'about' })}>{t.about}</button>
            <button className={route.name === 'cv' ? 'active' : ''} onClick={() => go({ name: 'cv' })}>{t.cv}</button>
            <button className={route.name === 'contact' ? 'active' : ''} onClick={() => go({ name: 'contact' })}>{t.contact}</button>
            <div className="drawer-lang">
              <button className={lang === 'pt' ? 'active' : ''} onClick={() => { setLang('pt'); setMenuOpen(false); }}>PT</button>
              <span>/</span>
              <button className={lang === 'en' ? 'active' : ''} onClick={() => { setLang('en'); setMenuOpen(false); }}>EN</button>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
};

Object.assign(window, { STRINGS: window.STRINGS, ColorField: window.ColorField, TopBar: window.TopBar });