// Header.jsx
Object.assign(window, { Header });

const t = window.t;

const LANG_OPTIONS = [
  { code: 'en', cc: 'gb', label: 'English'    },
  { code: 'fr', cc: 'fr', label: 'Français'   },
  { code: 'es', cc: 'es', label: 'Español'    },
  { code: 'de', cc: 'de', label: 'Deutsch'    },
  { code: 'it', cc: 'it', label: 'Italiano'   },
  { code: 'pl', cc: 'pl', label: 'Polski'     },
  { code: 'nl', cc: 'nl', label: 'Nederlands' },
  { code: 'cs', cc: 'cz', label: 'Čeština'    },
  { code: 'sk', cc: 'sk', label: 'Slovenčina' },
  { code: 'sl', cc: 'si', label: 'Slovenščina'},
  { code: 'ru', cc: 'ru', label: 'Русский'    },
];

function Header({ lang, onLangChange }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [langOpen, setLangOpen] = React.useState(false);

  const currentLang = LANG_OPTIONS.find(l => l.code === (lang || window.LANG || 'en')) || LANG_OPTIONS[0];

  const links = [
    { labelKey: 'nav.services', id: 'services' },
    { labelKey: 'nav.about',    id: 'about'    },
    { labelKey: 'nav.reviews',  id: 'reviews'  },
    { labelKey: 'nav.contacts', id: 'contacts' },
  ];

  const goto = id => {
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  /* close lang dropdown on outside click */
  React.useEffect(() => {
    if (!langOpen) return;
    const close = () => setLangOpen(false);
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, [langOpen]);

  const handleLangSelect = (code) => {
    setLangOpen(false);
    if (onLangChange) onLangChange(code);
  };

  const Flag = ({ cc, w = 20, h = 14 }) => (
    <img
      src={`https://flagcdn.com/w${w * 2}/${cc}.png`}
      srcSet={`https://flagcdn.com/w${w * 4}/${cc}.png 2x`}
      width={w} height={h} alt={cc}
      style={{ borderRadius: 2, objectFit: 'cover', flexShrink: 0, display: 'block' }}
    />
  );

  /* ── Language Dropdown ── */
  const LangDropdown = ({ mobile }) => (
    <div style={{ position: 'relative' }} onClick={e => e.stopPropagation()}>

      {/* Trigger button */}
      <button
        onClick={() => setLangOpen(v => !v)}
        style={{
          display: 'flex', alignItems: 'center', gap: 7,
          background: langOpen ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.07)',
          border: '1px solid rgba(255,255,255,0.18)',
          borderRadius: 8, padding: mobile ? '10px 14px' : '7px 12px',
          cursor: 'pointer', transition: 'background 0.15s',
          width: mobile ? '100%' : 'auto',
          justifyContent: mobile ? 'space-between' : 'flex-start',
        }}>
        <Flag cc={currentLang.cc} />
        <span style={{ fontFamily: 'Unbounded, sans-serif', fontSize: 12, fontWeight: 600, color: '#fff', minWidth: 24 }}>
          {currentLang.code.toUpperCase()}
        </span>
        <svg
          width="10" height="6" viewBox="0 0 10 6" fill="none"
          style={{ transition: 'transform 0.2s', transform: langOpen ? 'rotate(180deg)' : 'none', flexShrink: 0 }}>
          <path d="M1 1L5 5L9 1" stroke="rgba(255,255,255,0.7)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>

      {/* Dropdown panel */}
      {langOpen && (
        <div style={{
          position: mobile ? 'static' : 'absolute',
          top: mobile ? 'auto' : 'calc(100% + 8px)',
          right: mobile ? 'auto' : 0,
          background: '#003E40',
          border: '1px solid rgba(255,255,255,0.14)',
          borderRadius: 12,
          boxShadow: mobile ? 'none' : '0 16px 40px rgba(0,0,0,0.45)',
          zIndex: 200,
          minWidth: mobile ? '100%' : 200,
          maxHeight: 300,
          overflowY: 'auto',
          marginTop: mobile ? 6 : 0,
          scrollbarWidth: 'thin',
          scrollbarColor: 'rgba(244,135,75,0.5) transparent',
        }}>
          {LANG_OPTIONS.map((l, i) => {
            const isActive = l.code === currentLang.code;
            return (
              <div
                key={l.code}
                onClick={() => handleLangSelect(l.code)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '11px 16px',
                  cursor: 'pointer',
                  background: isActive ? 'rgba(244,135,75,0.18)' : 'transparent',
                  borderBottom: i < LANG_OPTIONS.length - 1 ? '1px solid rgba(255,255,255,0.06)' : 'none',
                  transition: 'background 0.12s',
                }}>
                <Flag cc={l.cc} />
                <span style={{ fontFamily: 'Unbounded, sans-serif', fontSize: 12, fontWeight: isActive ? 700 : 400, color: isActive ? '#f4874b' : 'rgba(255,255,255,0.85)', flex: 1 }}>
                  {l.label}
                </span>
                {isActive && (
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <circle cx="7" cy="7" r="6" fill="#f4874b"/>
                    <path d="M4 7l2 2 4-4" stroke="#fff" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: '#003E40',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '0 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 72,
      }}>

        {/* Logo */}
        <div style={{ cursor: 'pointer', flexShrink: 0, lineHeight: 0 }}
          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          <img src="assets/images/Group.png" alt="Apex Claim"
            style={{ height: 48, width: 'auto', display: 'block' }} />
        </div>

        {/* Desktop nav + lang switcher */}
        <nav className="hd-nav-desktop" style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          {links.map(l => (
            <a key={l.id} href={'#' + l.id}
              onClick={e => { e.preventDefault(); goto(l.id); }}
              style={{
                fontFamily: 'Unbounded, sans-serif', fontSize: 11, fontWeight: 400,
                color: 'rgba(255,255,255,0.7)', textDecoration: 'none',
                whiteSpace: 'nowrap', transition: 'color 0.15s',
              }}>
              {t(l.labelKey)}
            </a>
          ))}
          <LangDropdown />
        </nav>

        {/* Mobile hamburger */}
        <button className="hd-hamburger-btn"
          onClick={() => setMenuOpen(v => !v)}
          style={{
            display: 'none', background: 'none', border: 'none',
            cursor: 'pointer', padding: 4,
            flexDirection: 'column', gap: 5, alignItems: 'center',
          }}>
          <span style={{ display: 'block', width: 24, height: 2, background: 'rgba(255,255,255,0.8)', borderRadius: 1 }} />
          <span style={{ display: 'block', width: 24, height: 2, background: 'rgba(255,255,255,0.8)', borderRadius: 1 }} />
          <span style={{ display: 'block', width: 24, height: 2, background: 'rgba(255,255,255,0.8)', borderRadius: 1 }} />
        </button>
      </div>

      {/* Mobile dropdown menu */}
      {menuOpen && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: '#003E40',
          borderBottom: '1px solid rgba(255,255,255,0.1)',
          padding: '8px 0 16px',
          zIndex: 99,
        }}>
          {links.map(l => (
            <a key={l.id} href={'#' + l.id}
              onClick={e => { e.preventDefault(); goto(l.id); }}
              style={{
                display: 'block', padding: '14px 32px',
                fontFamily: 'Unbounded, sans-serif', fontSize: 13, fontWeight: 400,
                color: 'rgba(255,255,255,0.7)', textDecoration: 'none',
                borderBottom: '1px solid rgba(255,255,255,0.07)',
              }}>
              {t(l.labelKey)}
            </a>
          ))}
          <div style={{ padding: '14px 32px' }}>
            <LangDropdown mobile={true} />
          </div>
        </div>
      )}
    </header>
  );
}