/* ARBEITSSCHIRM — Live-Wetter-Hero mit Modus-Umschalter */
(function () {
  const { Button } = window.ABIndustrieServiceDesignSystem_89df89;
  const { Icon } = window.ABIcons;
  const { WeatherCanvas } = window.ABArbeit;

  const MODES = [
    { key: 'wind',   label: 'Wind',  icon: 'wind',            head: 'STEHT IM WIND.',        sub: 'Bodenverankerung, die hält — auch wenn die Böe schiebt. Kein Wegfliegen, kein Nachjustieren.' },
    { key: 'regen',  label: 'Regen', icon: 'cloud-rain',      head: 'DACH ÜBER DER NAHT.',   sub: 'Trockene Schweißnaht, trockener Schacht. Der Guss da oben interessiert Ihre Arbeit nicht mehr.' },
    { key: 'sturm',  label: 'Sturm', icon: 'cloud-lightning', head: 'WENN ANDERE EINPACKEN.', sub: 'Sturmfest verankert. Während die Nachbarbaustelle Feierabend macht, läuft Ihre weiter.' },
    { key: 'schnee', label: 'Schnee', icon: 'snowflake',      head: 'TRÄGT DIE SCHNEELAST.', sub: 'Stabiles Gestänge unter Schnee — kein Durchhängen, kein Einsturz, kein Stillstand.' },
    { key: 'sonne',  label: 'Sonne', icon: 'sun',             head: 'SCHATTEN STATT HITZE.', sub: 'UV-beständige Bespannung — Schatten für Mensch und Material, auch wenn die Sonne knallt.' },
  ];

  // Hero-Bild-Slider — 14 Slots, sanfter Crossfade (kein harter Schnitt).
  // Bilder kommen später per Drag & Drop in jeden Slot (eigene id je Slot).
  const SLIDE_COUNT = 14;
  const SLIDE_INTERVAL = 5000;

  function arrowStyle(side) {
    return {
      position: 'absolute', top: '50%', [side]: 10, transform: 'translateY(-50%)', zIndex: 3,
      width: 36, height: 36, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(17,16,11,0.55)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 'var(--radius-pill)',
      cursor: 'pointer', color: '#fff', backdropFilter: 'blur(4px)', transition: 'background var(--dur-fast) var(--ease-out)',
    };
  }

  function HeroSlider({ lang }) {
    const tr = (s) => window.ABi18n.t(lang, s);
    // Anzeige-Reihenfolge bei jedem Laden zufällig mischen (Fisher–Yates).
    // Die Slot-IDs (und damit die Bilddateien) bleiben fix — nur die
    // Abspielreihenfolge ist gemischt.
    const [order] = React.useState(() => {
      const a = Array.from({ length: SLIDE_COUNT }, (_, n) => n);
      for (let k = a.length - 1; k > 0; k--) {
        const j = Math.floor(Math.random() * (k + 1));
        const t = a[k]; a[k] = a[j]; a[j] = t;
      }
      return a;
    });
    const [p, setP] = React.useState(0); // Position in der gemischten Reihenfolge
    const hover = React.useRef(false);
    React.useEffect(() => {
      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (reduce) return; // kein Auto-Lauf bei reduzierter Bewegung
      const id = setInterval(() => { if (!hover.current) setP((x) => (x + 1) % SLIDE_COUNT); }, SLIDE_INTERVAL);
      return () => clearInterval(id);
    }, []);
    const go = (k) => setP((k + SLIDE_COUNT) % SLIDE_COUNT);
    const active = order[p];

    return (
      <div className="ab-hero-slider"
        onMouseEnter={() => { hover.current = true; }}
        onMouseLeave={() => { hover.current = false; }}
        style={{ position: 'relative', zIndex: 1, width: '100%', height: 300, borderRadius: 14, overflow: 'hidden', boxShadow: 'var(--shadow-xl)', border: '1px solid rgba(255,255,255,0.14)' }}>
        {Array.from({ length: SLIDE_COUNT }).map((_, n) => (
          <image-slot
            key={n}
            id={'arbeitsschirm-hero-' + (n + 1)}
            shape="rect"
            fit="cover"
            placeholder={'Bild ' + (n + 1) + ' / ' + SLIDE_COUNT + ' — hierher ziehen'}
            alt={tr('Arbeitsschirm im Einsatz auf der Baustelle')}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: n === active ? 1 : 0, pointerEvents: n === active ? 'auto' : 'none', transition: 'opacity 700ms var(--ease-out)' }}
          ></image-slot>
        ))}

        <button type="button" aria-label="Vorheriges Bild" onClick={() => go(p - 1)} style={arrowStyle('left')}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--brand)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(17,16,11,0.55)'; }}>
          <Icon name="chevron-left" size={20} color="#fff" />
        </button>
        <button type="button" aria-label="Nächstes Bild" onClick={() => go(p + 1)} style={arrowStyle('right')}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--brand)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(17,16,11,0.55)'; }}>
          <Icon name="chevron-right" size={20} color="#fff" />
        </button>

        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 12, zIndex: 3, display: 'flex', justifyContent: 'center', gap: 6, padding: '0 12px', flexWrap: 'wrap' }}>
          {Array.from({ length: SLIDE_COUNT }).map((_, k) => (
            <button key={k} type="button" aria-label={'Bild ' + (k + 1)} aria-current={k === p} onClick={() => go(k)}
              style={{ width: k === p ? 18 : 7, height: 7, padding: 0, border: 0, borderRadius: 999, cursor: 'pointer',
                background: k === p ? 'var(--brand)' : 'rgba(255,255,255,0.5)',
                transition: 'width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)' }} />
          ))}
        </div>
      </div>
    );
  }

  function Hero({ onCta, onModelle, mode = 'sturm', onPick, lang = 'de' }) {
    const tr = (s) => window.ABi18n.t(lang, s);
    // 4 product names (rotating wordmark) — two forced lines = constant height
    const WORDS = [
      { p: 'BAUSTELLEN', s: 'SCHIRM' },
      { p: 'ARBEITS', s: 'SCHIRM' },
      { p: 'SCHWEISSER', s: 'SCHIRM' },
      { p: 'WETTERSCHUTZ', s: 'SCHIRM' },
    ];
    // 4 headlines (independent of the weather)
    const HEADS = [
      { icon: 'wind',            head: 'STEHT IM WIND.',        sub: 'Bodenverankerung, die hält — auch wenn die Böe schiebt. Kein Wegfliegen, kein Nachjustieren.' },
      { icon: 'cloud-rain',      head: 'DACH ÜBER DER NAHT.',   sub: 'Trockene Schweißnaht, trockener Schacht. Der Guss da oben interessiert Ihre Arbeit nicht mehr.' },
      { icon: 'cloud-lightning', head: 'WENN ANDERE EINPACKEN.', sub: 'Sturmfest verankert. Während die Nachbarbaustelle Feierabend macht, läuft Ihre weiter.' },
      { icon: 'snowflake',       head: 'TRÄGT DIE SCHNEELAST.',  sub: 'Stabiles Gestänge unter Schnee — kein Durchhängen, kein Einsturz, kein Stillstand.' },
      { icon: 'sun',             head: 'SCHATTEN STATT HITZE.',  sub: 'UV-beständige Bespannung — Schatten für Mensch und Material, auch wenn die Sonne knallt.' },
    ];
    // EINE Markenfarbe — Farbe trägt die Marke, nie Dekoration (DS: keine
    // bunte Akzent-Rotation). Dash, Unterstrich und Headline-Icon = Akzent-Rot.
    const accent = 'var(--accent)';

    const [wi, setWi] = React.useState(0);   // name
    const [hi, setHi] = React.useState(0);   // headline
    React.useEffect(() => {
      // bewusst unterschiedliche, ruhige Takte, damit Name & Headline durchwandern
      const a = setInterval(() => setWi((i) => (i + 1) % WORDS.length), 7000);
      const b = setInterval(() => setHi((i) => (i + 1) % HEADS.length), 9500);
      return () => { clearInterval(a); clearInterval(b); };
    }, []);
    const word = WORDS[wi];
    const head = HEADS[hi];

    return (
      <section id="top" style={{ position: 'relative', background: 'var(--grad-ink)', color: '#fff', overflow: 'hidden', isolation: 'isolate' }}>
        {/* darken + vignette so storm never fights the type */}
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(130% 100% at 70% 0%, rgba(17,16,11,0) 30%, rgba(17,16,11,0.72) 100%)', zIndex: 1 }} />
        {/* diagonal red slash motif */}
        <div aria-hidden style={{ position: 'absolute', top: 0, right: 0, width: '42%', height: '100%', background: 'var(--grad-slash)', clipPath: 'polygon(34% 0, 100% 0, 100% 100%, 0% 100%)', opacity: 0.22, zIndex: 1, mixBlendMode: 'screen' }} />

        <div className="ab-container ab-hero-grid" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1.12fr 0.88fr', gap: 'var(--space-9)', alignItems: 'start', paddingTop: 'clamp(2rem, 3.5vw, 3.25rem)', paddingBottom: 'var(--space-5)', minHeight: '0' }}>
          <div style={{ minWidth: 0 }}>
            <span className="ab-eyebrow" style={{ color: 'var(--red-400)' }}>
              <span style={{ width: 26, height: 3, background: accent, borderRadius: 999, transition: 'background 600ms var(--ease-out)' }} /> {tr('Wetterschutz für den Rohrleitungs-, Anlagen- und Kanalbau')}
            </span>

            <h1 className="ab-hero-word" style={{ fontFamily: 'var(--font-wordmark)', fontWeight: 400, lineHeight: 1, margin: '18px 0 0', fontSize: 'clamp(1.1rem, 3.1vw, 2.3rem)', color: '#fff', letterSpacing: '0.01em', textShadow: '0 10px 40px rgba(0,0,0,0.55)', minHeight: '1.15em', whiteSpace: 'nowrap' }}>
              <span key={wi} style={{ display: 'inline-block', animation: 'abWord 380ms var(--ease-out)' }}>
                {tr(word.p + word.s)}
              </span>
            </h1>

            <div style={{ width: 64, height: 'var(--border-bar)', background: accent, borderRadius: 999, margin: '22px 0 18px', transition: 'background 600ms var(--ease-out)' }} />

            <div style={{ height: 150, overflow: 'hidden' }}>
              <p style={{ display: 'flex', alignItems: 'center', gap: 12, margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800, letterSpacing: '-0.01em', fontSize: 'clamp(1.25rem, 2.5vw, 2.05rem)', color: '#fff', lineHeight: 1.04, minHeight: '1.1em', whiteSpace: 'nowrap' }}>
                <Icon name={head.icon} size={30} color={accent} strokeWidth={2.2} />
                <span key={'h' + hi} style={{ animation: 'abWord 360ms var(--ease-out)' }}>{tr(head.head)}</span>
              </p>
              <p key={'s' + hi} style={{ marginTop: 14, fontSize: 'var(--fs-md)', lineHeight: 1.6, color: 'var(--steel-300)', maxWidth: '46ch', animation: 'abWord 420ms var(--ease-out)' }}>
                {tr(head.sub)}
              </p>
            </div>

            {/* WETTER-UMSCHALTER */}
            <div role="tablist" aria-label="Wetterlage" className="ab-weather-switch" style={{ display: 'inline-flex', gap: 6, marginTop: 22, padding: 6, background: 'rgba(0,0,0,0.34)', border: '1px solid var(--border-on-dark)', borderRadius: 'var(--radius-md)', backdropFilter: 'blur(6px)', flexWrap: 'wrap' }}>
              {MODES.map((m) => {
                const on = m.key === mode;
                return (
                  <button key={m.key} role="tab" aria-selected={on} onClick={() => onPick && onPick(m.key)}
                    style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height: 44, padding: '0 16px', cursor: 'pointer',
                      fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase',
                      color: on ? '#fff' : 'var(--steel-300)', 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), color var(--dur-fast) var(--ease-out)' }}
                    onMouseEnter={(e) => { if (!on) e.currentTarget.style.color = '#fff'; }}
                    onMouseLeave={(e) => { if (!on) e.currentTarget.style.color = 'var(--steel-300)'; }}>
                    <Icon name={m.icon} size={17} color={on ? '#fff' : 'var(--red-400)'} /> {tr(m.label)}
                  </button>
                );
              })}
            </div>

            <div style={{ display: 'flex', gap: 'var(--space-4)', marginTop: 28, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" onClick={onCta} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>{tr('Angebot anfordern')}</Button>
              <Button variant="outline" size="lg" onClick={onModelle} style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.42)' }}>{tr('Modelle ansehen')}</Button>
            </div>

            <div className="ab-hero-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, max-content)', columnGap: 'var(--space-7)', rowGap: 'var(--space-5)', marginTop: 36, paddingTop: 26, borderTop: '1px solid var(--border-on-dark)' }}>
              {[
                { v: 'bis 100 km/h', l: 'Windfest im Einsatz' },
                { v: 'bis zu 36 Streben', l: 'Verstärktes Gestell' },
                { v: 'DIN 4102 B1', l: 'schwer entflammbar (Pipeliner)' },
                { v: 'Ø 2,5 · 3,0 m', l: 'Rund & Rechteck' },
                { v: 'UV-stabil', l: 'Fäulnishemmend' },
                { v: '5 Modelle', l: 'Worker · Pipeliner · Heavy …' },
              ].map((s) => (
                <div key={s.l}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(1.15rem, 1.7vw, 1.45rem)', lineHeight: 1, letterSpacing: '-0.02em', color: '#fff', whiteSpace: 'nowrap' }}>{tr(s.v)}</div>
                  <div style={{ marginTop: 6, fontSize: 'var(--fs-xs)', fontWeight: 600, letterSpacing: '0.07em', textTransform: 'uppercase', color: 'var(--text-on-dark-muted)', whiteSpace: 'nowrap' }}>{tr(s.l)}</div>
                </div>
              ))}
            </div>
          </div>

          {/* DRY ZONE — Produktbild */}
          <div className="ab-hero-media" style={{ position: 'relative' }}>
            <HeroSlider lang={lang} />
            {/* Tag-Cluster oben links gestapelt — hält Pfeile (Mitte) und Punkte (unten) frei */}
            <div style={{ position: 'absolute', top: 16, left: 16, zIndex: 4, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--brand)', color: '#fff', borderRadius: 'var(--radius-sm)', padding: '8px 13px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', boxShadow: 'var(--shadow-md)', whiteSpace: 'nowrap' }}>
                <Icon name="umbrella" size={16} color="#fff" /> {tr("Hier bleibt's trocken")}
              </span>
            </div>
          </div>
        </div>

        {/* Wetter-Ticker */}
        <div style={{ position: 'relative', zIndex: 2, borderTop: '1px solid var(--border-on-dark)', background: 'rgba(0,0,0,0.32)', overflow: 'hidden' }}>
          <div className="ab-container" style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-5)', paddingBlock: 15, color: 'var(--steel-400)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            {['Windstabil', 'Regendicht', 'Sturmfest verankert', 'Schneelast geprüft', 'UV-beständig'].map((t, i) => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--space-5)' }}>
                {i > 0 && <span style={{ color: 'var(--red-500)' }}>·</span>}{tr(t)}
              </span>
            ))}
          </div>
        </div>
      </section>
    );
  }

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