function Flag(props) {
  const { code } = props;
  if (code === 'NL') return React.createElement('svg', { viewBox: '0 0 24 16', width: 18, height: 12, style: { borderRadius: 2, flexShrink: 0 } },
    React.createElement('rect', { width: 24, height: 16, fill: '#21468B' }),
    React.createElement('rect', { width: 24, height: 10.67, fill: '#FFFFFF' }),
    React.createElement('rect', { width: 24, height: 5.33, fill: '#AE1C28' }));
  if (code === 'DE') return React.createElement('svg', { viewBox: '0 0 24 16', width: 18, height: 12, style: { borderRadius: 2, flexShrink: 0 } },
    React.createElement('rect', { width: 24, height: 16, fill: '#FFCE00' }),
    React.createElement('rect', { width: 24, height: 10.67, fill: '#DD0000' }),
    React.createElement('rect', { width: 24, height: 5.33, fill: '#000000' }));
  return React.createElement('svg', { viewBox: '0 0 24 16', width: 18, height: 12, style: { borderRadius: 2, flexShrink: 0 } },
    React.createElement('rect', { width: 24, height: 16, fill: '#00247D' }),
    React.createElement('path', { d: 'M0 0 L24 16 M24 0 L0 16', stroke: '#fff', strokeWidth: 3 }),
    React.createElement('path', { d: 'M0 0 L24 16 M24 0 L0 16', stroke: '#CF142B', strokeWidth: 1.5 }),
    React.createElement('path', { d: 'M12 0 V16 M0 8 H24', stroke: '#fff', strokeWidth: 5 }),
    React.createElement('path', { d: 'M12 0 V16 M0 8 H24', stroke: '#CF142B', strokeWidth: 3 }));
}
const ISOLATIE = [
  { id: 'spouwmuurisolatie', nl: 'Spouwmuurisolatie', en: 'Cavity wall insulation' },
  { id: 'dakisolatie', nl: 'Dakisolatie', en: 'Roof insulation' },
  { id: 'vloerisolatie', nl: 'Vloerisolatie', en: 'Floor insulation' },
  { id: 'bodemisolatie', nl: 'Bodemisolatie', en: 'Crawl space insulation' },
  { id: 'gevelisolatie', nl: 'Gevelisolatie', en: 'Facade insulation' },
];

const OVERIGE = [
  { id: 'airconditioning', nl: 'Airconditioning', en: 'Air conditioning' },
  { id: 'gevelreiniging', nl: 'Gevelreiniging', en: 'Facade cleaning' },
  { id: 'impregneren', nl: 'Impregneren', en: 'Impregnating' },
  { id: 'dakkapellen', nl: 'Dakkapellen', en: 'Dormers' },
  { id: 'dakramen', nl: 'Dakramen', en: 'Roof windows' },
  { id: 'overige-diensten', nl: 'Afbouw en renovatie', en: 'Finishing & renovation' },
];

function MenuHeading(props) {  return React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: 21, color: '#fff', marginBottom: 14 } }, props.children);
}

function MenuLink(props) {
  const { onClick, size = 21, muted = false, children } = props;
  const [hover, setHover] = React.useState(false);
  const base = muted ? 'var(--ink-300)' : '#fff';
  return React.createElement('a', {
    onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: {
      display: 'block', padding: muted ? '7px 0' : '9px 0', fontFamily: muted ? 'var(--font-body)' : 'var(--font-display)',
      fontSize: size, color: hover ? 'var(--brand-primary)' : base, cursor: 'pointer', textDecoration: 'none',
      transition: 'color var(--dur-fast) var(--ease-standard)',
    },
  }, children);
}

const SOCIALS = [
  { name: 'facebook', href: 'https://www.facebook.com/', path: 'M17 2h-3a5 5 0 0 0-5 5v3H6v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z' },
  { name: 'instagram', href: 'https://www.instagram.com/', rect: true },
];

function SocialLinks() {
  const box = { width: 42, height: 42, borderRadius: 10, border: '1px solid rgba(255,255,255,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center' };
  const item = (name, href) => React.createElement('a', { key: name, href, target: '_blank', rel: 'noreferrer', style: box, 'aria-label': name },
    React.createElement('img', { src: 'https://unpkg.com/simple-icons@11/icons/' + name + '.svg', alt: name, style: { width: 18, height: 18, filter: 'brightness(0) invert(1)' } }));
  return React.createElement('div', { style: { display: 'flex', gap: 10 } }, item('facebook', 'https://www.facebook.com/'), item('instagram', 'https://www.instagram.com/'));
}

function LangPicker(props) {
  const { lang, setLang } = props;
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);
  const options = [
    { code: 'NL', label: 'Nederlands' },
    { code: 'EN', label: 'English' },
    { code: 'DE', label: 'Deutsch' },
  ];
  return React.createElement('div', { ref, style: { position: 'relative', flexShrink: 0 } },
    React.createElement('button', {
      type: 'button', onClick: () => setOpen((o) => !o), 'aria-haspopup': 'listbox', 'aria-expanded': open,
      style: { display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius-pill)', padding: '7px 12px', color: '#fff', fontWeight: 700, fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap' },
    }, React.createElement(Flag, { code: lang }), lang,
      React.createElement('span', { style: { display: 'inline-block', width: 0, height: 0, marginLeft: 2, borderLeft: '4px solid transparent', borderRight: '4px solid transparent', borderTop: '5px solid rgba(255,255,255,0.7)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-standard)' } })),
    open ? React.createElement('div', {
      role: 'listbox',
      style: { position: 'absolute', top: 'calc(100% + 8px)', right: 0, minWidth: 168, background: '#fff', borderRadius: 12, boxShadow: '0 16px 40px rgba(0,0,0,0.22)', padding: 6, display: 'flex', flexDirection: 'column', gap: 2, zIndex: 60 },
    }, options.map((o) => React.createElement('button', {
      key: o.code, type: 'button', role: 'option', 'aria-selected': o.code === lang,
      onClick: () => { setLang(o.code); setOpen(false); },
      style: { display: 'flex', alignItems: 'center', gap: 10, width: '100%', background: o.code === lang ? 'var(--ink-100, #f1f1f1)' : 'none', border: 'none', borderRadius: 8, padding: '9px 10px', font: 'inherit', fontSize: 14, fontWeight: o.code === lang ? 700 : 500, color: 'var(--ink-900, #111)', cursor: 'pointer', textAlign: 'left' },
    }, React.createElement(Flag, { code: o.code }), o.label))) : null
  );
}

function Header(props) {
  const { active, onNavigate } = props;
  const [lang, setLang] = React.useState(window.ISOGetLang ? window.ISOGetLang() : 'NL');
  React.useEffect(() => { if (window.ISOSetLang) window.ISOSetLang(lang); }, [lang]);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [materialsOpen, setMaterialsOpen] = React.useState(false);
  const links = lang === 'NL'
    ? [{ id: 'diensten', label: 'Diensten' }, { id: 'subsidie', label: 'Subsidie' }, { id: 'faq', label: 'FAQ' }, { id: 'contact', label: 'Contact' }]
    : [{ id: 'diensten', label: 'Services' }, { id: 'subsidie', label: 'Subsidy' }, { id: 'faq', label: 'FAQ' }, { id: 'contact', label: 'Contact' }];
  const materialenLabel = lang !== 'EN' ? 'Materialen' : 'Materials';
  const materials = [
    { id: 'supafil-cavity-wall', nl: 'Knauf Supafil inblaasglaswol', en: 'Knauf Supafil blown glass wool' },
    { id: 'eps-parels', nl: 'EPS-isolatieparels', en: 'EPS insulation beads' },
    { id: 'glaswol-platen', nl: 'Glaswol platen en rollen', en: 'Glass wool boards and rolls' },
    { id: 'pir-kingspan', nl: 'PIR / Kingspan platen', en: 'PIR / Kingspan boards' },
    { id: 'pif-folie', nl: 'Isolatiefolie (PIF)', en: 'Reflective foil (PIF)' },
    { id: 'biobased-isovlas', nl: 'Biobased isolatie', en: 'Biobased insulation' },
    { id: 'bodemfolie', nl: 'Bodemfolie', en: 'Ground foil' },
  ];
  const cta = lang !== 'EN' ? 'Adviesgesprek' : 'Book advice';
  function go(id, sub) { setMenuOpen(false); setMaterialsOpen(false); onNavigate(id, sub); }
  return React.createElement('header', {
    style: { background: 'var(--ink-900)', color: '#fff', display: 'flex', alignItems: 'stretch', fontFamily: 'var(--font-body)', height: 76, position: 'relative' },
  },
    React.createElement('div', {
      style: {
        display: 'flex', alignItems: 'center', gap: 18, background: 'var(--ink-800)', padding: '0 36px 0 40px',
        clipPath: 'polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%)', marginRight: -20, whiteSpace: 'nowrap', flexShrink: 0,
      },
    },
      React.createElement('img', { src: './assets/logo-full-blended.png', style: { height: 56, cursor: 'pointer', flexShrink: 0 }, onClick: () => go('home') }),
      React.createElement('div', { style: { width: 1, height: 28, background: 'rgba(255,255,255,0.15)', flexShrink: 0 } }),
      React.createElement('a', { href: 'tel:+31247920023', style: { color: '#fff', fontWeight: 700, fontSize: 14, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' } },
        React.createElement('img', { src: 'https://unpkg.com/lucide-static@latest/icons/phone.svg', style: { width: 14, height: 14, filter: 'invert(1)', flexShrink: 0 } }), '+31 24 792 00 23')
    ),
    React.createElement('div', { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 14, padding: '0 24px', minWidth: 0 } },
      React.createElement(LangPicker, { lang, setLang }),
      React.createElement('button', {
        type: 'button', onClick: () => go('contact'),
        style: { display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'inherit', fontWeight: 700, fontSize: 13, border: 'none', borderRadius: 'var(--radius-pill)', padding: '11px 18px', background: 'var(--brand-primary)', color: '#fff', cursor: 'pointer', boxShadow: 'var(--shadow-cta)', flexShrink: 0, whiteSpace: 'nowrap' },
      }, cta),
      React.createElement('button', {
        type: 'button', onClick: () => setMenuOpen((o) => !o), 'aria-label': 'Menu',
        style: { display: 'flex', alignItems: 'center', gap: 8, background: 'none', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius-pill)', padding: '10px 18px', cursor: 'pointer', flexShrink: 0, color: '#fff', fontFamily: 'inherit', fontWeight: 700, fontSize: 14 },
      },
        menuOpen ? React.createElement('span', { style: { fontSize: 16 } }, '✕') : React.createElement('span', { style: { display: 'flex', flexDirection: 'column', gap: 3 } },
          React.createElement('span', { style: { width: 16, height: 2, background: '#fff' } }),
          React.createElement('span', { style: { width: 16, height: 2, background: '#fff' } }),
          React.createElement('span', { style: { width: 16, height: 2, background: '#fff' } })),
        menuOpen ? (lang !== 'EN' ? 'Sluiten' : 'Close') : 'Menu'
      )
    ),
    menuOpen && React.createElement('div', { style: { position: 'fixed', inset: 0, background: 'var(--ink-900)', zIndex: 100, overflowY: 'auto' } },
      React.createElement('img', { src: '../../assets/icon-mark.png', alt: '', style: { position: 'fixed', right: '40px', bottom: '160px', width: 380, maxWidth: '34vw', opacity: 0.16, pointerEvents: 'none', userSelect: 'none' } }),
      React.createElement('div', { style: { display: 'flex', alignItems: 'stretch', height: 76, borderBottom: '1px solid rgba(255,255,255,0.1)' } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 14, background: 'var(--ink-800)', padding: '0 36px 0 24px', clipPath: 'polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%)', marginRight: -20 } },
          React.createElement('img', { src: './assets/logo-full-blended.png', style: { height: 40, cursor: 'pointer' }, onClick: () => go('home') })),
        React.createElement('div', { style: { flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 14, padding: '0 24px' } },
          React.createElement('button', { type: 'button', onClick: () => setMenuOpen(false), style: { display: 'flex', alignItems: 'center', gap: 8, background: 'none', border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius-pill)', padding: '10px 18px', cursor: 'pointer', color: '#fff', fontFamily: 'inherit', fontWeight: 700, fontSize: 14 } }, '✕ ' + (lang !== 'EN' ? 'Sluiten' : 'Close'))
        )
      ),
      React.createElement('div', { style: { maxWidth: 1080, margin: '0 auto', padding: '56px 40px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 48, position: 'relative' } },
        React.createElement('div', null,
          React.createElement(MenuHeading, null, lang !== 'EN' ? 'Isolatie' : 'Insulation'),
          React.createElement('div', { style: { borderLeft: '1px solid rgba(255,255,255,0.14)', paddingLeft: 18, marginBottom: 36 } },
            ISOLATIE.map((it) => React.createElement(MenuLink, { key: it.id, size: 17, onClick: () => go('diensten', it.id) }, lang !== 'EN' ? it.nl : it.en))),
          React.createElement(MenuLink, { onClick: () => go('materialen'), size: 21 }, materialenLabel),
          React.createElement('div', { style: { borderLeft: '1px solid rgba(255,255,255,0.14)', paddingLeft: 18 } },
            materials.map((m) => React.createElement(MenuLink, { key: m.id, size: 15, muted: true, onClick: () => go('materialen', m.id) }, lang !== 'EN' ? m.nl : m.en)))
        ),
        React.createElement('div', null,
          React.createElement(MenuHeading, null, lang !== 'EN' ? 'Overige diensten' : 'Other services'),
          React.createElement('div', { style: { borderLeft: '1px solid rgba(255,255,255,0.14)', paddingLeft: 18 } },
            OVERIGE.map((it) => React.createElement(MenuLink, { key: it.id, size: 17, onClick: () => go('diensten', it.id) }, lang !== 'EN' ? it.nl : it.en)))
        ),
        React.createElement('div', null,
          React.createElement(MenuLink, { onClick: () => go('subsidie') }, links.find((l) => l.id === 'subsidie').label),
          React.createElement(MenuLink, { onClick: () => go('natuurvriendelijk') }, lang !== 'EN' ? 'Natuurvriendelijk isoleren' : 'Nature-inclusive insulation'),
          React.createElement(MenuLink, { onClick: () => go('warmtefonds') }, lang !== 'EN' ? 'Warmtefonds' : 'Warmtefonds'),
          React.createElement(MenuLink, { onClick: () => go('zakelijk') }, lang !== 'EN' ? 'Zakelijk' : 'Business'),
          React.createElement(MenuLink, { onClick: () => go('over-ons') }, lang !== 'EN' ? 'Over ons' : 'About us'),
          React.createElement(MenuLink, { onClick: () => go('faq') }, lang !== 'EN' ? 'Veelgestelde vragen' : 'FAQ'),
          React.createElement(MenuLink, { onClick: () => go('contact') }, links.find((l) => l.id === 'contact').label)
        )
      ),
      React.createElement('div', { style: { maxWidth: 1080, margin: '0 auto', padding: '0 40px 64px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' } },
        React.createElement('a', { href: 'tel:+31247920023', style: { display: 'flex', alignItems: 'center', gap: 10, border: '1px solid rgba(255,255,255,0.25)', borderRadius: 'var(--radius-pill)', padding: '12px 20px', color: '#fff', fontWeight: 700, fontSize: 14, textDecoration: 'none' } },
          '+31 24 792 00 23', React.createElement('img', { src: 'https://unpkg.com/lucide-static@latest/icons/phone.svg', style: { width: 15, height: 15, filter: 'invert(1)' } })),
        React.createElement('button', { type: 'button', onClick: () => go('contact'), style: { display: 'flex', alignItems: 'center', gap: 10, border: 'none', borderRadius: 'var(--radius-pill)', padding: '13px 22px', background: 'var(--brand-primary)', color: '#fff', fontFamily: 'inherit', fontWeight: 700, fontSize: 14, cursor: 'pointer', boxShadow: 'var(--shadow-cta)' } }, cta, '→'),
        React.createElement('div', { style: { flex: 1 } }),
        React.createElement(SocialLinks, null)
      )
    )
  );
}
window.Header = Header;