/* ARBEITSSCHIRM — Einsatz: Branchen-Wegweiser + typische Einsatzpunkte */
(function () {
  const { Icon } = window.ABIcons;
  const { SectionHeading } = window.ABIndustrieServiceDesignSystem_89df89;

  // Branche/Einsatz → passendes Modell (aus dem Branchen-Ratgeber).
  const BRANCHES = [
    { id: 'rohr', icon: 'git-commit-horizontal', branch: 'Rohrleitungs- & Pipelinebau', model: 'Pipeliner', reason: 'Schwer entflammbar, schnell am Graben gesetzt — Funkenflug beim Schweißen macht nichts.' },
    { id: 'team', icon: 'flame', branch: 'Schweißer-Teams · große Werkstücke', model: 'Pipeliner Heavy Ø 3,0 m', reason: 'Große flammhemmende Fläche für mehrere Schweißer und lange Nähte.' },
    { id: 'montage', icon: 'wrench', branch: 'Montage · Service · Vermessung', model: 'Worker', reason: 'Leicht, werkzeuglos gesetzt — der mobile Allrounder am Arbeitspunkt.' },
    { id: 'strasse', icon: 'traffic-cone', branch: 'Straßenbau · Verkehrssicherung', model: 'Heavy Ø 3,0 m', reason: 'Große Fläche, gut sichtbar (Orange), standfest auf Asphalt.' },
    { id: 'tiefbau', icon: 'shovel', branch: 'Tiefbau · GaLaBau · Dauereinsatz', model: 'Verstärkte Ausführung', reason: 'Robustes Gestell, deutsche Fertigung — für den täglichen Auf- und Abbau.' },
    { id: 'lang', icon: 'rectangle-horizontal', branch: 'Lange & eckige Werkstücke', model: 'Rechteckschirm', reason: 'Rechteckige Fläche für lange Teile und eckige Aufstellpunkte.' },
  ];

  // Typische Punkte auf der Baustelle (Foto-Slots).
  const USECASES = [
    { id: 'schweissen', icon: 'flame', title: 'Rohrleitungsschweißen', body: 'Trockene Naht, windstiller Arbeitsplatz — die Schweißqualität steht nicht im Regen.' },
    { id: 'schacht', icon: 'git-commit-horizontal', title: 'Schacht- & Kanalarbeiten', body: 'Schachtkopf überdacht, Einstieg trocken, Material geschützt — bei jedem Wetter.' },
    { id: 'montage', icon: 'wrench', title: 'Montage & Materialschutz', body: 'Werkzeug, Geräte und Mannschaft im Trockenen. Kein Einpacken bei jedem Schauer.' },
  ];

  function BranchCard({ b }) {
    const [h, setH] = React.useState(false);
    return (
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 'var(--space-5)', boxShadow: h ? 'var(--shadow-md)' : 'var(--shadow-xs)', transform: h ? 'translateY(-3px)' : 'none', transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)' }}>
        <span style={{ width: 42, height: 42, borderRadius: 'var(--radius-sm)', background: 'var(--brand-soft)', border: '1px solid var(--red-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
          <Icon name={b.icon} size={22} color="var(--brand)" />
        </span>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-md)', color: 'var(--text-strong)', lineHeight: 1.2 }}>{b.branch}</h3>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-sm)', letterSpacing: '0.02em', textTransform: 'uppercase', color: 'var(--brand)' }}>
          <span style={{ transform: h ? 'translateX(3px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)', display: 'inline-flex' }}><Icon name="arrow-right" size={16} color="var(--brand)" /></span>
          {b.model}
        </span>
        <p style={{ margin: 0, fontSize: 'var(--fs-sm)', lineHeight: 1.55, color: 'var(--text-muted)' }}>{b.reason}</p>
      </div>
    );
  }

  function EinsatzCard({ e }) {
    const [h, setH] = React.useState(false);
    return (
      <article onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: h ? 'var(--shadow-lg)' : 'var(--shadow-sm)', transform: h ? 'translateY(-4px)' : 'none', transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)', border: '1px solid var(--border-subtle)' }}>
        <image-slot
          id={'arbeitsschirm-einsatz-' + e.id}
          shape="rect"
          placeholder={'Baustellenfoto: ' + e.title}
          alt={e.title}
          style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '4 / 5' }}
        ></image-slot>
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'var(--scrim-bottom)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 'var(--space-6)', pointerEvents: 'none' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, borderRadius: 'var(--radius-sm)', background: 'var(--brand)', marginBottom: 'var(--space-3)' }}>
            <Icon name={e.icon} size={22} color="#fff" />
          </div>
          <h3 style={{ margin: '0 0 6px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-lg)', color: '#fff', letterSpacing: '-0.015em' }}>{e.title}</h3>
          <p style={{ margin: 0, fontSize: 'var(--fs-sm)', lineHeight: 1.55, color: 'rgba(255,255,255,0.86)', maxWidth: '34ch' }}>{e.body}</p>
        </div>
      </article>
    );
  }

  function Einsatz() {
    return (
      <section id="einsatz" style={{ background: 'var(--surface-page)', paddingBlock: 'var(--section-y)' }}>
        <div className="ab-container">
          <SectionHeading
            eyebrow="Einsatz"
            title="Vom Rohrgraben bis zur Straße — für jeden Einsatz der passende Schirm."
            lead="Worker, Pipeliner, Heavy, Verstärkt oder Rechteck — welcher Schirm zu Ihrer Branche passt, sehen Sie hier auf einen Blick."
            style={{ marginBottom: 'var(--space-8)', maxWidth: '62ch' }}
          />

          <div className="ab-branch-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
            {BRANCHES.map((b) => <BranchCard key={b.id} b={b} />)}
          </div>

          <div style={{ marginTop: 'var(--space-10)', marginBottom: 'var(--space-6)', paddingTop: 'var(--space-7)', borderTop: '1px solid var(--border-subtle)' }}>
            <span style={{ display: 'inline-block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-xs)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--brand)' }}>Auf der Baustelle</span>
            <h3 style={{ margin: '10px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.3rem, 2.4vw, 1.7rem)', letterSpacing: '-0.01em', color: 'var(--text-strong)', lineHeight: 1.2, maxWidth: '32ch' }}>Typische Punkte, an denen sonst das Wetter den Takt vorgibt.</h3>
          </div>
          <div className="ab-einsatz-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
            {USECASES.map((e) => <EinsatzCard key={e.id} e={e} />)}
          </div>
        </div>
      </section>
    );
  }

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