/* Round country-flag icons + language dropdown. */
function FlagIcon({ code, size = 22 }) {
  const flags = {
    us: (
      <svg viewBox="0 0 24 24" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
        <rect width="24" height="24" fill="#fff"/>
        {[0,2,4,6,8,10,12].map(i => <rect key={i} x="0" y={i*1.846} width="24" height="1.846" fill="#B22234"/>)}
        <rect width="10.5" height="9.9" fill="#3C3B6E"/>
        {[1.6,4.4,7.2].map((y,r)=>[1.6,4,6.4,8.8].map((x,c)=>(c%2===r%2)&&<circle key={`${r}-${c}`} cx={x} cy={y} r="0.55" fill="#fff"/>))}
      </svg>
    ),
    br: (
      <svg viewBox="0 0 24 24" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
        <rect width="24" height="24" fill="#009C3B"/>
        <polygon points="12,2.4 21.6,12 12,21.6 2.4,12" fill="#FEDF00"/>
        <circle cx="12" cy="12" r="4.3" fill="#002776"/>
      </svg>
    ),
    pt: (
      <svg viewBox="0 0 24 24" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
        <rect width="9.6" height="24" fill="#006600"/>
        <rect x="9.6" width="14.4" height="24" fill="#FF0000"/>
        <circle cx="9.6" cy="12" r="2.6" fill="#FFE000"/>
        <circle cx="9.6" cy="12" r="1.05" fill="#1A3C8C"/>
      </svg>
    ),
    es: (
      <svg viewBox="0 0 24 24" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
        <rect width="24" height="24" fill="#AA151B"/>
        <rect y="6" width="24" height="12" fill="#F1BF00"/>
        <rect x="4.5" y="9.4" width="2.6" height="3.6" rx="0.4" fill="#AA151B"/>
      </svg>
    ),
    ca: (
      <svg viewBox="0 0 24 24" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
        <rect width="24" height="24" fill="#fff"/>
        <rect width="6" height="24" fill="#D52B1E"/>
        <rect x="18" width="6" height="24" fill="#D52B1E"/>
        <path fill="#D52B1E" d="M12 6.5l.9 1.9 2-.5-.7 1.7 1.3.5-1.6 1.2.3 1.1-1.7-.3.1 2.1h-.6l.1-2.1-1.7.3.3-1.1L9 11.8l1.3-.5-.7-1.7 2 .5z"/>
      </svg>
    ),
    gb: (
      <svg viewBox="0 0 24 24" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
        <rect width="24" height="24" fill="#012169"/>
        <path d="M0 0l24 24M24 0L0 24" stroke="#fff" strokeWidth="3.5"/>
        <path d="M0 0l24 24M24 0L0 24" stroke="#C8102E" strokeWidth="2"/>
        <path d="M12 0v24M0 12h24" stroke="#fff" strokeWidth="5.5"/>
        <path d="M12 0v24M0 12h24" stroke="#C8102E" strokeWidth="3"/>
      </svg>
    ),
  };
  return (
    <span style={{ display:'inline-block', width:size, height:size, borderRadius:'50%', overflow:'hidden',
      boxShadow:'0 0 0 1px rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.35)', flexShrink:0, verticalAlign:'middle' }}>
      {flags[code]}
    </span>
  );
}

const BNE_COUNTRIES = [
  { code:'us', name:'United States', lang:'en'    },
  { code:'br', name:'Brasil',        lang:'pt-br' },
  { code:'pt', name:'Portugal',      lang:'pt'    },
];

const LANG_TO_CODE = { en:'us', 'pt-br':'br', pt:'pt' };

function LangDropdown({ lang, setLang, up = false, align = 'right' }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('pointerdown', h);
    return () => document.removeEventListener('pointerdown', h);
  }, []);
  const cur = BNE_COUNTRIES.find(c => c.code === (LANG_TO_CODE[lang] || 'us')) || BNE_COUNTRIES[0];
  const pick = (c) => { setLang(c.lang); setOpen(false); };
  return (
    <div ref={ref} style={{ position:'relative' }}>
      <button onClick={()=>setOpen(o=>!o)} aria-label="Select country / language" aria-expanded={open}
        style={{ display:'inline-flex', alignItems:'center', gap:6, cursor:'pointer', padding:'5px 8px',
          background:'transparent', border:'1px solid var(--border-1)', borderRadius:'var(--r-pill)',
          color:'var(--text-1)', transition:'border-color var(--dur)' }}>
        <FlagIcon code={cur.code} size={22} />
        <Icon name="chevron" size={14} style={{ transform: open?'rotate(180deg)':'none', transition:'transform var(--dur)', opacity:.8 }} />
      </button>
      {open && (
        <div role="menu" style={{ position:'absolute', [up?'bottom':'top']:'calc(100% + 10px)', [align]:0, minWidth:190, zIndex:300,
          background:'#1B1033', border:'1px solid rgba(255,255,255,.14)', borderRadius:'var(--r-card)',
          boxShadow:'0 24px 60px rgba(8,3,18,.55)', padding:6, animation:'bneFade .18s var(--ease-out)' }}>
          {BNE_COUNTRIES.map(c => {
            const active = c.code === cur.code;
            return (
              <button key={c.code} role="menuitem" onClick={()=>pick(c)}
                onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,.07)'}
                onMouseLeave={e=>e.currentTarget.style.background = active?'rgba(123,47,190,.22)':'transparent'}
                style={{ display:'flex', alignItems:'center', gap:11, width:'100%', cursor:'pointer',
                  padding:'9px 11px', borderRadius:9, border:'none', textAlign:'left',
                  background: active?'rgba(123,47,190,.22)':'transparent',
                  color:'#fff', fontFamily:'var(--font-body)', fontSize:14.5, fontWeight: active?600:400 }}>
                <FlagIcon code={c.code} size={20} />
                <span style={{ flex:1 }}>{c.name}</span>
                {active && <Icon name="check" size={15} stroke={2.4} style={{ color:'var(--purple-light)' }} />}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { FlagIcon, LangDropdown });