/* ARBEITSSCHIRM — sticky ink header with wordmark + Sprachumschalter */
(function () {
  const { Button } = window.ABIndustrieServiceDesignSystem_89df89;
  const { Icon } = window.ABIcons;

  const NAV = [
    { label: 'Warum', href: '#warum' },
    { label: 'Modelle', href: '#modelle' },
    { label: 'Technik', href: '#technik' },
    { label: 'Einsatz', href: '#einsatz' },
  ];

  const WX = [
    { key: 'wind', label: 'Wind', icon: 'wind' },
    { key: 'regen', label: 'Regen', icon: 'cloud-rain' },
    { key: 'sturm', label: 'Sturm', icon: 'cloud-lightning' },
    { key: 'schnee', label: 'Schnee', icon: 'snowflake' },
    { key: 'sonne', label: 'Sonne', icon: 'sun' },
  ];

  // ---- Sprachen (Vorbereitung Mehrsprachigkeit; Übersetzung folgt später) ----
  // Deutsch = aktuell aktiv. Reihenfolge wie vom Kunden vorgegeben.
  const LANGS = [
    { code: 'de', label: 'Deutsch' },
    { code: 'en', label: 'English' },
    { code: 'pl', label: 'Polski' },
    { code: 'fr', label: 'Français' },
    { code: 'nl', label: 'Nederlands' },
    { code: 'cs', label: 'Čeština' },
    { code: 'it', label: 'Italiano' },
    { code: 'ru', label: 'Русский' },
  ];

  // SVG-Flaggen (keine Emoji — Markenregel). viewBox 0 0 20 14.
  const FLAGS = {
    de: (
      <g>
        <rect width="20" height="14" fill="#000" />
        <rect y="4.667" width="20" height="9.333" fill="#DD0000" />
        <rect y="9.333" width="20" height="4.667" fill="#FFCE00" />
      </g>
    ),
    en: (
      <g>
        <rect width="20" height="14" fill="#012169" />
        <path d="M0,0 L20,14 M20,0 L0,14" stroke="#fff" strokeWidth="2.8" fill="none" />
        <path d="M0,0 L20,14 M20,0 L0,14" stroke="#C8102E" strokeWidth="1.2" fill="none" />
        <path d="M10,0 V14 M0,7 H20" stroke="#fff" strokeWidth="4" fill="none" />
        <path d="M10,0 V14 M0,7 H20" stroke="#C8102E" strokeWidth="2.2" fill="none" />
      </g>
    ),
    pl: (
      <g>
        <rect width="20" height="14" fill="#fff" />
        <rect y="7" width="20" height="7" fill="#DC143C" />
      </g>
    ),
    fr: (
      <g>
        <rect width="20" height="14" fill="#fff" />
        <rect width="6.667" height="14" fill="#0055A4" />
        <rect x="13.333" width="6.667" height="14" fill="#EF4135" />
      </g>
    ),
    nl: (
      <g>
        <rect width="20" height="14" fill="#fff" />
        <rect width="20" height="4.667" fill="#AE1C28" />
        <rect y="9.333" width="20" height="4.667" fill="#21468B" />
      </g>
    ),
    cs: (
      <g>
        <rect width="20" height="14" fill="#fff" />
        <rect y="7" width="20" height="7" fill="#D7141A" />
        <path d="M0,0 L10,7 L0,14 Z" fill="#11457E" />
      </g>
    ),
    it: (
      <g>
        <rect width="20" height="14" fill="#fff" />
        <rect width="6.667" height="14" fill="#009246" />
        <rect x="13.333" width="6.667" height="14" fill="#CE2B37" />
      </g>
    ),
    ru: (
      <g>
        <rect width="20" height="14" fill="#fff" />
        <rect y="4.667" width="20" height="4.667" fill="#0039A6" />
        <rect y="9.333" width="20" height="4.667" fill="#D52B1E" />
      </g>
    ),
  };

  function Flag({ code, w = 22 }) {
    const h = Math.round(w * 0.7);
    return (
      <span style={{ display: 'inline-flex', width: w, height: h, borderRadius: 3, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.22)', flex: 'none' }}>
        <svg viewBox="0 0 20 14" width={w} height={h} preserveAspectRatio="none" aria-hidden="true" style={{ display: 'block' }}>
          {FLAGS[code] || null}
        </svg>
      </span>
    );
  }

  function LangSwitch({ lang, onPick }) {
    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); };
      const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
      document.addEventListener('mousedown', onDoc);
      document.addEventListener('keydown', onKey);
      return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey); };
    }, [open]);

    const cur = LANGS.find((l) => l.code === lang) || LANGS[0];

    return (
      <div ref={ref} className="ab-lang" style={{ position: 'relative' }}>
        <button type="button" onClick={() => setOpen((o) => !o)} aria-haspopup="listbox" aria-expanded={open}
          aria-label={'Sprache wählen — aktuell ' + cur.label}
          style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height: 40, padding: '0 10px', cursor: 'pointer',
            background: 'rgba(0,0,0,0.32)', border: '1px solid var(--border-on-dark)', borderRadius: 'var(--radius-md)',
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.08em', color: '#fff', textTransform: 'uppercase',
            transition: 'background var(--dur-fast) var(--ease-out)' }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(0,0,0,0.5)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(0,0,0,0.32)'; }}>
          <Flag code={cur.code} />
          <span>{cur.code.toUpperCase()}</span>
          <Icon name="chevron-down" size={15} color="var(--steel-300)" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }} />
        </button>

        {open && (
          <ul role="listbox" aria-label="Sprache"
            style={{ position: 'absolute', top: 'calc(100% + 8px)', right: 0, zIndex: 60, minWidth: 200, margin: 0, padding: 6, listStyle: 'none',
              background: 'rgba(15,15,16,0.98)', backdropFilter: 'blur(10px)', border: '1px solid var(--border-on-dark)',
              borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-xl)' }}>
            {LANGS.map((l) => {
              const on = l.code === lang;
              return (
                <li key={l.code} role="option" aria-selected={on} tabIndex={0}
                  onClick={() => { onPick(l.code); setOpen(false); }}
                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onPick(l.code); setOpen(false); } }}
                  style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 10px', cursor: 'pointer', borderRadius: 'var(--radius-sm)',
                    background: on ? 'rgba(168,25,43,0.22)' : 'transparent', color: on ? '#fff' : 'var(--steel-300)', outline: 'none',
                    transition: 'background var(--dur-fast) var(--ease-out)' }}
                  onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
                  onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = 'transparent'; }}>
                  <Flag code={l.code} />
                  <span style={{ flex: 1, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, textTransform: 'none', whiteSpace: 'nowrap' }}>{l.label}</span>
                  {on && <Icon name="check" size={16} color="var(--red-400)" />}
                </li>
              );
            })}
          </ul>
        )}
      </div>
    );
  }

  function Header({ onCta, mode = 'sturm', onPick, auto = false, interval = 9000, lang = 'de', onLang }) {
    const [scrolled, setScrolled] = React.useState(false);
    const [open, setOpen] = React.useState(false);
    const tr = (s) => window.ABi18n.t(lang, s);
    React.useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 12);
      window.addEventListener('scroll', onScroll);
      return () => window.removeEventListener('scroll', onScroll);
    }, []);

    const pickLang = (code) => { if (onLang) onLang(code); };

    const go = (e, href) => {
      e.preventDefault();
      setOpen(false);
      const el = document.querySelector(href);
      if (!el) return;
      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: 'smooth' });
    };

    return (
      <header
        style={{
          position: 'sticky', top: 0, zIndex: 50,
          background: scrolled ? 'rgba(15,15,16,0.94)' : 'rgba(15,15,16,0.82)',
          backdropFilter: 'blur(10px)',
          borderBottom: '1px solid var(--border-on-dark)',
          transition: 'background var(--dur-base) var(--ease-out)',
        }}
      >
        <div className="ab-container" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)', height: 76 }}>
          <a href="#top" onClick={(e) => go(e, '#top')} style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
            <img src="assets/logo-ab-mark.png" alt="AB Industrie Service" style={{ height: 44, display: 'block' }} />
            <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
              <span style={{ fontFamily: 'var(--font-wordmark)', fontWeight: 400, fontSize: 18, letterSpacing: '0.02em', color: '#fff', textTransform: 'uppercase' }}>{tr('Arbeitsschirme')}</span>
              <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 10, letterSpacing: '0.16em', color: 'var(--red-400)', textTransform: 'uppercase', marginTop: 5 }}>{tr('von AB Industrie Service')}</span>
            </span>
          </a>

          <nav className="ab-nav" style={{ display: 'flex', gap: 'var(--space-6)', marginLeft: 'auto' }}>
            {NAV.map((n) => (
              <a key={n.label} href={n.href} onClick={(e) => go(e, n.href)}
                 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, letterSpacing: '0.04em', color: 'var(--steel-300)', textDecoration: 'none', textTransform: 'uppercase', transition: 'color var(--dur-fast)' }}
                 onMouseEnter={(e) => (e.currentTarget.style.color = '#fff')}
                 onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--steel-300)')}>{tr(n.label)}</a>
            ))}
          </nav>

          <div className="ab-headcta" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
            <LangSwitch lang={lang} onPick={pickLang} />
            <div className="ab-headweather" style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              <div role="tablist" aria-label="Wetterlage" style={{ display: 'inline-flex', gap: 4, padding: 4, background: 'rgba(0,0,0,0.32)', border: '1px solid var(--border-on-dark)', borderRadius: 'var(--radius-md)' }}>
                {WX.map((m) => {
                  const on = m.key === mode;
                  return (
                    <button key={m.key} role="tab" aria-selected={on} title={m.label} aria-label={'Wetter: ' + m.label} onClick={() => onPick && onPick(m.key)}
                      style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, cursor: 'pointer', background: on ? 'var(--brand)' : 'transparent', border: on ? '1px solid var(--brand)' : '1px solid transparent', borderRadius: 'var(--radius-sm)', transition: 'background var(--dur-fast) var(--ease-out)' }}>
                      <Icon name={m.icon} size={18} color={on ? '#fff' : 'var(--steel-300)'} />
                    </button>
                  );
                })}
              </div>
              {/* Laufbalken: visualisiert den Auto-Wechsel-Takt (interval ms).
                  Per key={mode} startet die Füllung bei jedem Wechsel neu; bei
                  manueller Wahl ist auto=false → Balken bleibt leer (pausiert). */}
              <div className="ab-wx-progress" aria-hidden="true"
                title={auto ? ('Auto-Wechsel alle ' + Math.round(interval / 1000) + ' s') : 'Auto-Wechsel pausiert'}
                style={{ height: 3, borderRadius: 999, background: 'rgba(255,255,255,0.14)', overflow: 'hidden' }}>
                {auto && (
                  <span key={mode} style={{ display: 'block', height: '100%', borderRadius: 999, background: 'var(--brand)', transformOrigin: 'left center', transform: 'scaleX(0)', animation: 'abWxFill ' + interval + 'ms linear forwards' }} />
                )}
              </div>
            </div>
            <Button variant="primary" size="sm" onClick={onCta} iconRight={<Icon name="arrow-right" size={16} color="#fff" />}>{tr('Angebot')}</Button>
          </div>

          <button className="ab-burger" onClick={() => setOpen((o) => !o)} aria-label="Menü"
            style={{ display: 'none', background: 'transparent', border: 0, color: '#fff', cursor: 'pointer', marginLeft: 'auto' }}>
            <Icon name={open ? 'x' : 'menu'} size={26} color="#fff" />
          </button>
        </div>

        {open && (
          <div className="ab-mobnav" style={{ borderTop: '1px solid var(--border-on-dark)', padding: 'var(--space-4) var(--container-pad)', display: 'flex', flexDirection: 'column', gap: 4 }}>
            {NAV.map((n) => (
              <a key={n.label} href={n.href} onClick={(e) => go(e, n.href)} style={{ color: '#fff', textDecoration: 'none', fontWeight: 600, padding: '10px 0', textTransform: 'uppercase', fontSize: 15 }}>{n.label}</a>
            ))}
            <a href="mailto:info@ab-industrie.de" style={{ color: 'var(--red-400)', textDecoration: 'none', fontWeight: 600, padding: '10px 0', fontSize: 15 }}>info@ab-industrie.de</a>
            <div style={{ marginTop: 'var(--space-3)', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-on-dark)' }}>
              <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--steel-400)', marginBottom: 10 }}>{tr('Sprache')}</span>
              <LangSwitch lang={lang} onPick={pickLang} />
            </div>
          </div>
        )}
      </header>
    );
  }

  window.ABArbeit = Object.assign(window.ABArbeit || {}, { Header });
})();