// Components.jsx — shared primitives for 1snob umbrella site
const { useState, useEffect, useMemo } = React;

// ---------- Copy dictionary (EN / FR) ----------
const COPY = {
  nav: {
    home:     { en: 'Index',     fr: 'Index' },
    work:     { en: 'Work',      fr: 'Travail' },
    about:    { en: 'About',     fr: 'À propos' },
    contact:  { en: 'Contact',   fr: 'Contact' },
  },
  footer: {
    cta:       { en: 'Hire a snob.',                      fr: 'Engagez un snob.' },
    note:      { en: 'Based in Montréal. Working worldwide.', fr: 'Basé à Montréal. Partout, autrement.' },
    email:     { en: 'hi@1snob.com',                      fr: 'hi@1snob.com' },
    rights:    { en: '© 2025 1snob. All rights reserved.', fr: '© 2025 1snob. Tous droits réservés.' },
    est:       { en: 'Est. 2024 — Montréal',               fr: 'Depuis 2024 — Montréal' },
  },
};

// ---------- Logo ----------
const Logo = ({ size = 32, color = 'var(--ink-1)', onClick }) => (
  <a href="#/" onClick={onClick} className="logo" style={{ fontSize: size, color }}>
    <span className="one-slot">
      <svg viewBox="0 0 52 72" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <g className="glyph" fill={color}>
          <path d="M6 18 L24 2 L36 2 L36 18 Z" />
          <rect x="22" y="2" width="14" height="62" />
          <rect x="4" y="60" width="44" height="10" />
        </g>
      </svg>
    </span>
    <span className="letters">SNOB</span>
  </a>
);

// ---------- Rainbow bar ----------
const RainbowBar = ({ thick = false }) => (
  <hr className={`rainbow-bar ${thick ? 'thick' : ''}`} aria-hidden />
);

// ---------- Lang toggle ----------
const LangToggle = ({ lang, setLang }) => (
  <div className="lang-toggle" role="group" aria-label="Language">
    <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
    <button className={lang === 'fr' ? 'active' : ''} onClick={() => setLang('fr')}>FR</button>
  </div>
);

// ---------- Header ----------
const Header = ({ route, go, lang, setLang }) => {
  const L = (k) => COPY.nav[k][lang];
  const item = (id) => (
    <a
      href={`#/${id === 'home' ? '' : id}`}
      className={route === id ? 'active' : ''}
      onClick={(e) => { e.preventDefault(); go(id); }}
    >{L(id)}</a>
  );
  return (
    <header className="site-header">
      <div className="wrap bar">
        <Logo size={28} onClick={(e) => { e.preventDefault(); go('home'); }} />
        <nav className="nav" aria-label="Primary">
          {item('home')}
          {item('work')}
          {item('about')}
          {item('contact')}
        </nav>
        <LangToggle lang={lang} setLang={setLang} />
      </div>
    </header>
  );
};

// ---------- Footer ----------
const Footer = ({ lang, go }) => {
  const F = COPY.footer;
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="top">
          <div>
            <h1 className="big">{F.cta[lang]}</h1>
            <a href="mailto:hi@1snob.com" style={{ fontFamily: 'var(--font-body)', fontSize: 15, letterSpacing: '0.04em' }}>
              {F.email[lang]} →
            </a>
          </div>

          <div>
            <h5>— {lang === 'en' ? 'Index' : 'Index'}</h5>
            <ul>
              <li><a href="#/" onClick={(e)=>{e.preventDefault();go('home');}}>{COPY.nav.home[lang]}</a></li>
              <li><a href="#/work" onClick={(e)=>{e.preventDefault();go('work');}}>{COPY.nav.work[lang]}</a></li>
              <li><a href="#/about" onClick={(e)=>{e.preventDefault();go('about');}}>{COPY.nav.about[lang]}</a></li>
              <li><a href="#/contact" onClick={(e)=>{e.preventDefault();go('contact');}}>{COPY.nav.contact[lang]}</a></li>
            </ul>
          </div>

          <div>
            <h5>— {lang === 'en' ? 'Practice' : 'Pratique'}</h5>
            <ul>
              <li><a href="#/work" onClick={(e)=>{e.preventDefault();go('work');}}>Orchestration</a></li>
              <li><a href="#/work" onClick={(e)=>{e.preventDefault();go('work');}}>RAG &amp; Memory</a></li>
              <li><a href="#/work" onClick={(e)=>{e.preventDefault();go('work');}}>FinOps</a></li>
              <li><a href="#/work" onClick={(e)=>{e.preventDefault();go('work');}}>NautilusEngine</a></li>
            </ul>
          </div>

          <div>
            <h5>— {lang === 'en' ? 'Elsewhere' : 'Ailleurs'}</h5>
            <ul>
              <li><a href="https://www.linkedin.com/in/leandroalvarez" target="_blank" rel="noreferrer">LinkedIn ↗</a></li>
              <li><a href="https://leandroalvarez.ca" target="_blank" rel="noreferrer">leandroalvarez.ca ↗</a></li>
              <li><a href="#" onClick={(e)=>e.preventDefault()}>GitHub ↗</a></li>
            </ul>
          </div>
        </div>

        <div className="bottom">
          <span>{F.est[lang]}</span>
          <span>{F.rights[lang]}</span>
        </div>
      </div>
    </footer>
  );
};

// ---------- Button ----------
const Btn = ({ children, href, onClick, ghost, arrow = true }) => {
  const Comp = href ? 'a' : 'button';
  return (
    <Comp className={`btn ${ghost ? 'ghost' : ''}`} href={href} onClick={onClick}>
      {children}{arrow && <span className="arrow">→</span>}
    </Comp>
  );
};

// ---------- Section wrapper ----------
const Section = ({ eyebrow, children, dark, noBorder, style }) => (
  <section
    className="section"
    style={{
      background: dark ? 'var(--ink-1)' : undefined,
      color:      dark ? 'var(--paper)' : undefined,
      borderTopColor: noBorder ? 'transparent' : undefined,
      ...style,
    }}
  >
    <div className="wrap">
      {eyebrow && (
        <div className="eyebrow">
          <span className="dash" style={{ background: dark ? 'var(--paper)' : undefined }} />
          <span className="micro-label" style={{ color: dark ? 'rgba(250,250,247,0.7)' : undefined }}>{eyebrow}</span>
        </div>
      )}
      {children}
    </div>
  </section>
);

// ---------- useHashRoute ----------
const useHashRoute = () => {
  const parse = () => (location.hash.replace(/^#\/?/, '') || 'home').split('/')[0] || 'home';
  const [route, setRoute] = useState(parse());
  useEffect(() => {
    const on = () => setRoute(parse());
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  const go = (id) => {
    location.hash = '#/' + (id === 'home' ? '' : id);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  return [route, go];
};

// ---------- Export to window ----------
Object.assign(window, { COPY, Logo, RainbowBar, LangToggle, Header, Footer, Btn, Section, useHashRoute });