// Header COMPARTIDO — fuente única de verdad para las 5 páginas
(function () {
  const { useState, useEffect, useRef } = React;

  // ── CSS global (solo se inyecta una vez) ───────────────────────
  if (!document.getElementById('bx-global-styles')) {
    const s = document.createElement('style');
    s.id = 'bx-global-styles';
    s.textContent = `
      .bx-card-3d { transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .35s !important; transform-style: preserve-3d; }
      .bx-card-3d:hover { transform: perspective(700px) rotateX(-4deg) rotateY(4deg) translateY(-5px) !important; box-shadow: 0 20px 40px rgba(0,0,0,.3), 4px 4px 0 rgba(255,255,255,.04) !important; }
      .bx-card-3d-left:hover { transform: perspective(700px) rotateX(-4deg) rotateY(-4deg) translateY(-5px) !important; box-shadow: 0 20px 40px rgba(0,0,0,.3), -4px 4px 0 rgba(255,255,255,.04) !important; }
      @keyframes bxDevFloat { 0%,100%{transform:translateY(0) rotateX(3deg) rotateY(-5deg)} 50%{transform:translateY(-12px) rotateX(-1deg) rotateY(3deg)} }
      .bx-dev-float { animation: bxDevFloat 5s ease-in-out infinite; transform-style: preserve-3d; }
      img.btech-logo {
        filter:
          drop-shadow(0.62px 0 0.4px rgba(255,255,255,.95))
          drop-shadow(-0.62px 0 0.4px rgba(255,255,255,.95))
          drop-shadow(0 0.62px 0.4px rgba(255,255,255,.95))
          drop-shadow(0 -0.62px 0.4px rgba(255,255,255,.95))
          drop-shadow(0.42px 0.42px 0.4px rgba(255,255,255,.9))
          drop-shadow(-0.42px -0.42px 0.4px rgba(255,255,255,.9))
          drop-shadow(0.42px -0.42px 0.4px rgba(255,255,255,.9))
          drop-shadow(-0.42px 0.42px 0.4px rgba(255,255,255,.9));
      }
      @media (max-width: 768px) {
        img.btech-logo {
          filter:
            drop-shadow(0.94px 0 0.5px rgba(255,255,255,.98))
            drop-shadow(-0.94px 0 0.5px rgba(255,255,255,.98))
            drop-shadow(0 0.94px 0.5px rgba(255,255,255,.98))
            drop-shadow(0 -0.94px 0.5px rgba(255,255,255,.98))
            drop-shadow(0.62px 0.62px 0.5px rgba(255,255,255,.92))
            drop-shadow(-0.62px -0.62px 0.5px rgba(255,255,255,.92))
            drop-shadow(0.62px -0.62px 0.5px rgba(255,255,255,.92))
            drop-shadow(-0.62px 0.62px 0.5px rgba(255,255,255,.92)) !important;
        }
      }
      a.bx-btn-primary { transition: transform .2s, box-shadow .2s !important; }
      a.bx-btn-primary:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 30px rgba(245,166,35,.45) !important; }
      a.bx-btn-ghost { transition: border-color .2s, color .2s, background .2s !important; }
      a.bx-btn-ghost:hover { border-color: rgba(248,244,238,.8) !important; color: #fff !important; background: rgba(255,255,255,.06) !important; }
      a.bx-btn-link { transition: opacity .2s, letter-spacing .2s !important; }
      a.bx-btn-link:hover { opacity: 1 !important; letter-spacing: .4px !important; }
      a.bx-nav-link { transition: color .18s !important; }
      a.bx-nav-link:hover { color: #fff !important; }
      a.bx-nav-cta { transition: transform .2s, box-shadow .2s !important; }
      a.bx-nav-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(245,166,35,.4) !important; }
      /* Lang picker */
      .bx-lang-btn { background:none;border:1px solid rgba(248,244,238,.22);border-radius:100px;cursor:pointer;display:flex;align-items:center;gap:6px;padding:7px 13px;color:rgba(248,244,238,.8);font-size:13px;font-weight:600;transition:border-color .2s,color .2s; }
      .bx-lang-btn:hover{border-color:rgba(248,244,238,.55);color:#fff}
      .bx-lang-dd{position:absolute;top:calc(100% + 8px);right:0;background:#0D1B2A;border:1px solid rgba(248,244,238,.12);border-radius:12px;padding:6px;min-width:140px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:300;}
      .bx-lang-item{display:block;width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:500;color:rgba(248,244,238,.75);transition:background .15s,color .15s;}
      .bx-lang-item:hover,.bx-lang-item.active{background:rgba(248,244,238,.08);color:#fff}
      @media(max-width:768px){
        .bx-nav-bar{padding:16px 20px!important}
        .bx-nav-desktop{display:none!important}
        .bx-hamburger{display:flex!important}
      }
    `;
    document.head.appendChild(s);
  }

  const BX = window.BX;
  const NAVY = BX.navy, ORANGE = BX.orange;
  const body = '"Inter", system-ui, sans-serif';

  // ── useLang hook ───────────────────────────────────────────────
  function useLang() {
    const [, rerender] = useState(0);
    useEffect(() => {
      const h = () => rerender(n => n + 1);
      window.addEventListener('langchange', h);
      return () => window.removeEventListener('langchange', h);
    }, []);
    return window.getLang ? window.getLang() : 'es';
  }

  // ── LangPicker ─────────────────────────────────────────────────
  function LangPicker() {
    const [open, setOpen] = useState(false);
    const ref = useRef(null);
    const lang = useLang();
    const langs = window.SUPPORTED_LANGS || ['en','es','fr','pt'];

    useEffect(() => {
      const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
      document.addEventListener('mousedown', close);
      return () => document.removeEventListener('mousedown', close);
    }, []);

    const labels = { en:'EN', es:'ES', fr:'FR', pt:'PT' };
    const names = { en:'English', es:'Español', fr:'Français', pt:'Português' };

    return (
      <div style={{ position:'relative' }} ref={ref}>
        <button className="bx-lang-btn" onClick={() => setOpen(o => !o)}
          style={{ fontFamily: body }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10A15.3 15.3 0 0 1 8 12 15.3 15.3 0 0 1 12 2z"/>
          </svg>
          {labels[lang] || 'EN'}
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        {open && (
          <div className="bx-lang-dd">
            {langs.map(l => (
              <button key={l} className={'bx-lang-item' + (l === lang ? ' active' : '')}
                style={{ fontFamily: body }}
                onClick={() => { window.setLang && window.setLang(l); setOpen(false); }}>
                {names[l]}
              </button>
            ))}
          </div>
        )}
      </div>
    );
  }

  // ── BXHeader ───────────────────────────────────────────────────
  function BXHeader({ home = false }) {
    const [mOpen, setMOpen] = useState(false);
    const lang = useLang();
    const base = home ? '' : 'index.html';
    const link = (anchor) => `${base}${anchor}`;
    const T = window.t || ((k) => k);

    const links = [
      [T('footer.nav_home'),  'index.html'],
      [T('footer.nav_about'), link('#quienes-somos')],
      [T('nav.contact'),      link('#contacto')],
    ];

    return (
      <>
        <div className="bx-nav-bar" style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
          padding:'20px 64px', position:'relative', zIndex:200 }}>
          <a href="index.html" style={{ display:'block' }}>
            <img src={window.BRITXIA_LOGO || 'assets/britxia-wordmark.png'} alt="BRITXIA"
              style={{ height:46, width:'auto', display:'block' }} />
          </a>
          {/* Desktop nav */}
          <div className="bx-nav-desktop" style={{ display:'flex', alignItems:'center', gap:28 }}>
            {links.map(([label, href]) => (
              <a key={label} href={href} className="bx-nav-link"
                style={{ textDecoration:'none', fontFamily:body, fontSize:15, fontWeight:500, color:'rgba(248,244,238,0.82)' }}>
                {label}
              </a>
            ))}
            <LangPicker />
            <a href={link('#quienes-somos')} className="bx-nav-cta"
              style={{ textDecoration:'none', fontFamily:body, fontSize:14, fontWeight:600, color:NAVY,
                background:ORANGE, borderRadius:100, padding:'11px 24px' }}>
              {T('nav.explore_brand')}
            </a>
          </div>
          {/* Hamburger */}
          <button onClick={() => setMOpen(o => !o)} className="bx-hamburger"
            style={{ display:'none', alignItems:'center', justifyContent:'center',
              background:'none', border:'none', cursor:'pointer', padding:8,
              color:'rgba(248,244,238,.9)', lineHeight:0, zIndex:201 }}>
            {mOpen
              ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              : <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            }
          </button>
        </div>
        {/* Mobile menu */}
        {mOpen && (
          <div style={{ position:'fixed', inset:0, background:'rgba(10,16,26,.97)',
            backdropFilter:'blur(14px)', zIndex:190, display:'flex', flexDirection:'column',
            alignItems:'center', justifyContent:'center', gap:36, padding:40 }}>
            {links.map(([label, href]) => (
              <a key={label} href={href} onClick={() => setMOpen(false)}
                style={{ textDecoration:'none', fontFamily:body, fontSize:24, fontWeight:500,
                  color:'rgba(248,244,238,0.88)', letterSpacing:-.3 }}>{label}</a>
            ))}
            <div style={{ display:'flex', gap:12, flexWrap:'wrap', justifyContent:'center' }}>
              {(window.SUPPORTED_LANGS || ['en','es','fr','pt']).map(l => (
                <button key={l} onClick={() => { window.setLang && window.setLang(l); setMOpen(false); }}
                  style={{ background: window.getLang && window.getLang()===l ? 'rgba(248,244,238,.15)' : 'none',
                    border:'1px solid rgba(248,244,238,.25)', borderRadius:100,
                    color:'rgba(248,244,238,.8)', fontFamily:body, fontSize:13, fontWeight:600,
                    padding:'7px 16px', cursor:'pointer' }}>
                  {l.toUpperCase()}
                </button>
              ))}
            </div>
            <a href={link('#quienes-somos')} onClick={() => setMOpen(false)}
              style={{ textDecoration:'none', fontFamily:body, fontSize:16, fontWeight:600,
                color:NAVY, background:ORANGE, borderRadius:100, padding:'15px 40px', marginTop:8 }}>
              {T('nav.explore_brand')}
            </a>
          </div>
        )}
      </>
    );
  }

  window.BXHeader = BXHeader;
})();