const Header = ({ currentPage, navigate }) => {
  const [navOpen, setNavOpen] = React.useState(false);
  const [langOpen, setLangOpen] = React.useState(false);
  const [lang, setLang] = React.useState(() => ((window.DP_I18N && window.DP_I18N.get && window.DP_I18N.get()) || 'en').toUpperCase());
  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth <= 820);

  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= 820);
    const onLang = (e) => setLang(((e.detail && e.detail.lang) || (window.DP_I18N && window.DP_I18N.get && window.DP_I18N.get()) || 'en').toUpperCase());
    window.addEventListener('resize', onResize);
    window.addEventListener('dp-lang-change', onLang);
    return () => {
      window.removeEventListener('resize', onResize);
      window.removeEventListener('dp-lang-change', onLang);
    };
  }, []);

  const NAV = [
    { id: 'home',       label: 'Home',       num: '01' },
    { id: 'about',      label: 'About Us',   num: '02' },
    { id: 'portfolio',  label: 'Portfolio',  num: '03' },
    { id: 'investment', label: 'Investment', num: '04' },
    { id: 'contact',    label: 'Contact',    num: '05' },
  ];
  const LANGS = ['EN', 'ES', 'DE'];

  const hdrStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, height: 66,
    background: 'rgba(244,241,236,0.94)', backdropFilter: 'blur(12px)',
    borderBottom: '1px solid rgba(44,44,42,0.11)',
    display: 'flex', alignItems: 'center',
    justifyContent: 'space-between', padding: '0 52px',
    zIndex: 1000,
  };

  const dropBase = {
    position: 'absolute', top: '100%', right: 0,
    background: '#F4F1EC', border: '1px solid rgba(44,44,42,0.22)',
    boxShadow: '0 4px 12px rgba(44,44,42,0.06)',
  };

  return React.createElement('header', { style: hdrStyle },

    // ── Logo ──────────────────────────────────────────────────
    React.createElement('div', {
      onClick: () => navigate('home'),
      style: { display: 'flex', alignItems: 'baseline', gap: 1, cursor: 'pointer' },
    },
      React.createElement('span', {
        style: { fontFamily: "'Cormorant Garamond', serif", fontSize: 24, fontWeight: 300, color: '#2C2C2A', lineHeight: 1 },
      }, 'D'),
      React.createElement('span', {
        style: { fontFamily: "'DM Mono', monospace", fontSize: 15, fontWeight: 400, color: '#2C2C2A', letterSpacing: '0.32em', textTransform: 'uppercase', paddingBottom: 1 },
      }, 'property')
    ),

    // ── Right controls ────────────────────────────────────────
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: isMobile ? 10 : 28 } },

      // Language selector
      isMobile
        ? React.createElement('div', {
            style: {
              display: 'flex', alignItems: 'center', gap: 2,
              border: '1px solid rgba(44,44,42,0.18)',
              background: 'rgba(244,241,236,0.72)',
              padding: 2,
            },
          },
            LANGS.map(l => React.createElement('button', {
              key: l,
              'data-dp-lang': l.toLowerCase(),
              onClick: () => {
                setLang(l);
                if (window.DP_I18N && window.DP_I18N.set) window.DP_I18N.set(l.toLowerCase());
              },
              style: {
                minWidth: 34, minHeight: 34,
                background: l === lang ? '#2C2C2A' : 'transparent',
                border: 'none', cursor: 'pointer',
                fontFamily: "'DM Mono', monospace", fontSize: 10, fontWeight: 500,
                letterSpacing: '0.08em', textTransform: 'uppercase',
                color: l === lang ? '#F4F1EC' : '#2C2C2A',
                padding: '0 8px',
              },
            }, l))
          )
        : React.createElement('div', {
            style: { position: 'relative' },
          },
            React.createElement('button', {
              onClick: () => setLangOpen(v => !v),
              style: {
                background: 'none', border: '1px solid rgba(44,44,42,0.16)', cursor: 'pointer',
                fontFamily: "'DM Mono', monospace", fontSize: 13, fontWeight: 500,
                color: '#2C2C2A', letterSpacing: '0.14em', textTransform: 'uppercase',
                padding: '8px 12px', minWidth: 54,
              },
            }, lang),
            langOpen && React.createElement('div', { style: { ...dropBase, minWidth: 120, padding: '6px 0', zIndex: 1005 } },
              LANGS.map(l =>
                React.createElement('button', {
                  key: l,
                  'data-dp-lang': l.toLowerCase(),
                  onClick: () => {
                    setLang(l);
                    setLangOpen(false);
                    if (window.DP_I18N && window.DP_I18N.set) window.DP_I18N.set(l.toLowerCase());
                  },
                  style: {
                    display: 'block', width: '100%', background: l === lang ? '#EAE6DE' : 'none', border: 'none',
                    borderLeft: l === lang ? '2px solid #B8922A' : '2px solid transparent',
                    padding: '12px 18px', textAlign: 'left', cursor: 'pointer',
                    fontFamily: "'DM Mono', monospace", fontSize: 13, fontWeight: 500,
                    letterSpacing: '0.14em', textTransform: 'uppercase',
                    color: l === lang ? '#B8922A' : '#2C2C2A',
                  },
                }, l)
              )
            )
          ),

      // Nav burger
      React.createElement('div', {
        style: { position: 'relative' },
        onMouseEnter: () => setNavOpen(true),
        onMouseLeave: () => setNavOpen(false),
      },
        React.createElement('button', {
          onClick: () => setNavOpen(v => !v),
          style: {
            background: 'none', border: 'none', cursor: 'pointer',
            padding: '10px 0', display: 'flex', flexDirection: 'column',
            gap: 5, alignItems: 'flex-end',
          },
        },
          React.createElement('span', { style: { display: 'block', height: 1, width: 26, background: '#2C2C2A' } }),
          React.createElement('span', { style: { display: 'block', height: 1, width: 18, background: '#2C2C2A' } }),
          React.createElement('span', { style: { display: 'block', height: 1, width: 22, background: '#2C2C2A' } })
        ),
        React.createElement('div', {
          style: {
            ...dropBase, width: 228,
            opacity: navOpen ? 1 : 0,
            transform: navOpen ? 'translateY(0)' : 'translateY(-8px)',
            transition: 'opacity 250ms ease, transform 250ms ease',
            pointerEvents: navOpen ? 'all' : 'none',
            overflow: 'hidden',
          },
        },
          NAV.map((item, i) => React.createElement(React.Fragment, { key: item.id },
            i === 4 && React.createElement('div', {
              style: { height: 1, background: 'rgba(44,44,42,0.1)', margin: '4px 0' },
            }),
            React.createElement('button', {
              onClick: () => { navigate(item.id); setNavOpen(false); },
              style: {
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                width: '100%', background: currentPage === item.id ? '#EAE6DE' : 'transparent',
                border: 'none',
                borderLeft: currentPage === item.id ? '2px solid #B8922A' : '2px solid transparent',
                padding: '13px 18px', cursor: 'pointer',
                fontFamily: "'DM Mono', monospace", fontSize: 14, fontWeight: 400,
                letterSpacing: '0.16em', textTransform: 'uppercase', color: '#2C2C2A',
                transition: 'background 150ms',
              },
              onMouseEnter: e => { e.currentTarget.style.background = '#EAE6DE'; },
              onMouseLeave: e => { e.currentTarget.style.background = currentPage === item.id ? '#EAE6DE' : 'transparent'; },
            },
              React.createElement('span', null, item.label),
              React.createElement('span', { style: { color: '#8A8A85', fontSize: 12} }, item.num)
            )
          ))
        )
      )
    )
  );
};

Object.assign(window, { Header });