/* ARBEITSSCHIRM — "Warum": Wetterschutz als Pflicht (TOP-Prinzip, Normen) */
(function () {
  const { SectionHeading, Hinweisbox } = window.ABIndustrieServiceDesignSystem_89df89;
  const { Icon } = window.ABIcons;

  const BLOG = 'https://www.ab-industrie.de/Wetterschutz-Baustelle-Sicherheit-bei-jedem-Wetter';

  // Witterungs-Risiken mit den Schwellen aus den einschlägigen Regeln.
  const RISKS = [
    { icon: 'sun', title: 'UV-Strahlung', t: 'ab UV-Index 3', note: 'Hautkrebs ist als Berufskrankheit anerkannt (BK 5103).' },
    { icon: 'thermometer-sun', title: 'Hitze', t: 'ab 30 °C', note: 'ASR A3.5: ab 30 °C Maßnahmenpflicht, über 35 °C kein Arbeitsraum.' },
    { icon: 'wind', title: 'Sturm', t: 'ab Windstärke 8', note: '≈ 62 km/h — Arbeiten einstellen, Herstellergrenzen beachten.' },
    { icon: 'cloud-lightning', title: 'Gewitter', t: 'sofort', note: 'Arbeit sofort einstellen, 30 min nach letztem Donner warten.' },
  ];

  // TOP-Prinzip: technische Maßnahme (der Schirm) steht ganz oben.
  const TOP = [
    { k: 'T', title: 'Technisch', note: 'Überdachung, Schirm, Zelt — direkt am Arbeitspunkt. Wirkt sofort, unabhängig vom Verhalten.', strong: true },
    { k: 'O', title: 'Organisatorisch', note: 'Arbeitszeiten verlegen, Pausen regeln, Tätigkeit wechseln.' },
    { k: 'P', title: 'Personenbezogen', note: 'Schutzkleidung, Sonnencreme, Brille — als Ergänzung, zuletzt.' },
  ];

  // Zählt von 0 auf die Zielzahl, sobald sie ins Bild scrollt.
  function CountUp({ to, duration = 1600 }) {
    const [val, setVal] = React.useState(0);
    const ref = React.useRef(null);
    const started = React.useRef(false);
    React.useEffect(() => {
      const el = ref.current;
      if (!el) return;
      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (reduce) { setVal(to); return; }
      let timer = null;
      const run = () => {
        if (started.current) return;
        started.current = true;
        const startTime = Date.now();
        timer = setInterval(() => {
          const p = Math.min(1, (Date.now() - startTime) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(Math.round(to * eased));
          if (p >= 1) { clearInterval(timer); timer = null; }
        }, 33);
      };
      const check = () => {
        const r = el.getBoundingClientRect();
        const vh = window.innerHeight || document.documentElement.clientHeight;
        if (r.top < vh * 0.85 && r.bottom > 0) run();
      };
      check();
      window.addEventListener('scroll', check, { passive: true });
      window.addEventListener('resize', check);
      return () => { window.removeEventListener('scroll', check); window.removeEventListener('resize', check); if (timer) clearInterval(timer); };
    }, [to, duration]);
    return <span ref={ref}>{val.toLocaleString('de-DE')}</span>;
  }

  function RiskCard({ r }) {
    return (
      <div style={{ background: 'var(--surface-sunken)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 'var(--radius-sm)', background: 'var(--brand-soft)', border: '1px solid var(--red-100)', flex: 'none' }}>
            <Icon name={r.icon} size={18} color="var(--brand)" />
          </span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-base)', color: 'var(--text-strong)' }}>{r.title}</span>
        </div>
        <span style={{ display: 'inline-block', marginBottom: 8, padding: '3px 9px', borderRadius: 'var(--radius-pill)', background: 'var(--brand)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-2xs)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{r.t}</span>
        <p style={{ margin: 0, fontSize: 'var(--fs-sm)', lineHeight: 1.5, color: 'var(--text-muted)' }}>{r.note}</p>
      </div>
    );
  }

  function Pflicht() {
    return (
      <section id="warum" style={{ background: 'var(--surface-page)', paddingBlock: 'var(--section-y)' }}>
        <div className="ab-container">
          <div className="ab-pflicht-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-9)', alignItems: 'stretch' }}>
            {/* LINKS — Argumentation */}
            <div>
              <SectionHeading
                eyebrow="Pflicht, nicht Kür"
                title="Wetterschutz ist keine nette Geste. Es ist Vorschrift."
                lead="Wer im Freien arbeitet, ist dem Wetter ausgesetzt — und der Arbeitgeber in der Verantwortung. Arbeitsschutzgesetz (§ 5), DGUV Vorschrift 1 (§ 23) und die ASR A3.5 machen aus Schutz eine Pflicht, keine Option." />

              <p style={{ marginTop: 'var(--space-5)', fontSize: 'var(--fs-md)', lineHeight: 1.7, color: 'var(--text-body)', maxWidth: '54ch' }}>
                Regen interessiert die Schweißnaht nicht. Den Prüfer schon. Ein durchnässter Schacht, eine
                ausgekühlte Mannschaft, eine unterbrochene Naht — jede Stunde Wetterstillstand kostet bares Geld.
                Der Arbeitsschirm dreht das um: Schutz an genau dem Punkt, an dem gearbeitet wird.
              </p>

              <Hinweisbox type="achtung">
                <strong>§ 5 ArbSchG · § 23 DGUV Vorschrift 1</strong> — die Gefährdungsbeurteilung muss Witterung
                erfassen; bei Gefahr sind geeignete Maßnahmen am Arbeitsplatz vorzusehen. Fehlt der Schutz, drohen
                Haftung und im Ernstfall der Baustellenstopp.
              </Hinweisbox>

              <a href={BLOG} target="_blank" rel="noopener noreferrer"
                style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 'var(--space-3)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-sm)', letterSpacing: '0.03em', textTransform: 'uppercase', color: 'var(--brand)', textDecoration: 'none' }}
                onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--brand-strong)')}
                onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--brand)')}>
                <Icon name="book-open" size={17} color="currentColor" /> Den ganzen Ratgeber lesen <span aria-hidden="true">→</span>
              </a>
            </div>

            {/* RECHTS — TOP-Prinzip + Mahnzahl (füllt die volle Spaltenhöhe) */}
            <aside style={{ alignSelf: 'stretch', display: 'flex', flexDirection: 'column', background: 'var(--grad-ink)', color: '#fff', borderRadius: 'var(--radius-lg)', padding: 'var(--space-7)', boxShadow: 'var(--shadow-lg)', position: 'relative', overflow: 'hidden' }}>
              <span style={{ position: 'absolute', insetInline: 0, top: 0, height: 'var(--border-bar)', background: 'var(--brand)' }} />
              <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 12, color: 'var(--red-400)' }}>Die Rangfolge der Maßnahmen</span>
            <div style={{ marginTop: 8, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(1.7rem, 3.4vw, 2.4rem)', letterSpacing: '0.1em', color: '#fff', lineHeight: 1 }}>
              T<span style={{ color: 'var(--red-400)' }}>-</span>O<span style={{ color: 'var(--red-400)' }}>-</span>P<span style={{ marginLeft: 10, fontSize: 'var(--fs-sm)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-on-dark-muted)', verticalAlign: 'middle' }}>Prinzip</span>
            </div>

              <ol style={{ listStyle: 'none', margin: '20px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
                {TOP.map((s) => (
                  <li key={s.k} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span style={{ flex: 'none', width: 34, height: 34, borderRadius: 'var(--radius-sm)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16,
                      background: s.strong ? 'var(--brand)' : 'rgba(255,255,255,0.08)',
                      color: '#fff', border: s.strong ? '1px solid var(--brand)' : '1px solid var(--border-on-dark)' }}>{s.k}</span>
                    <div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-md)', color: '#fff' }}>
                        {s.title}
                        {s.strong && <span style={{ padding: '2px 8px', borderRadius: 'var(--radius-pill)', background: 'var(--brand-soft)', color: 'var(--brand)', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Der Schirm</span>}
                      </div>
                      <p style={{ margin: '4px 0 0', fontSize: 'var(--fs-sm)', lineHeight: 1.55, color: 'var(--text-on-dark-muted)' }}>{s.note}</p>
                    </div>
                  </li>
                ))}
              </ol>

              <div style={{ marginTop: 'auto', paddingTop: 'var(--space-6)', borderTop: '1px solid var(--border-on-dark)', display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(1.5rem, 2.4vw, 2rem)', lineHeight: 1, letterSpacing: '-0.02em', color: '#fff' }}><CountUp to={38000} /></span>
                <span style={{ fontSize: 'var(--fs-sm)', lineHeight: 1.5, color: 'var(--text-on-dark-muted)', maxWidth: '30ch' }}>
                  anerkannte Fälle von UV-bedingtem Hautkrebs als Berufskrankheit (bis 2022) — eine der häufigsten in Deutschland.
                </span>
              </div>
            </aside>
          </div>

          {/* Witterungs-Risiken — volle Breite, eine Zeile auf PC (responsiv umbrechend) */}
          <div className="ab-risk-grid" style={{ marginTop: 'var(--space-7)', display: 'grid', gap: 'var(--space-4)' }}>
            {RISKS.map((r) => <RiskCard key={r.title} r={r} />)}
          </div>
        </div>
      </section>
    );
  }

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