/* ARBEITSSCHIRM — Technik / Eigenschaften (Ink-Band, dezenter Wind) */
(function () {
  const { SectionHeading } = window.ABIndustrieServiceDesignSystem_89df89;
  const { Icon } = window.ABIcons;
  const { WeatherCanvas } = window.ABArbeit;

  const FEATURES = [
    { icon: 'umbrella', title: '36 Streben', body: '36 Streben in der Premiumklasse (Worker, Pipeliner, Heavy), mit Klammern in der Schirmhaut verankert — die verteilte Last macht den Schirm steif und windstabil.' },
    { icon: 'wind', title: 'Windstabil im Einsatz', body: 'Ø 2,5 m bis 100 km/h, Ø 3,0 m bis 65 km/h — Erfahrungswerte aus unserem eigenen Praxiseinsatz.' },
    { icon: 'wrench', title: 'Stahlmast, versiegelte Nähte', body: 'Stahlmast mit Verlängerungsrohr, jede Naht einzeln versiegelt. Gebaut für den täglichen Auf- und Abbau.' },
    { icon: 'mountain', title: 'Standsystem für jeden Grund', body: 'Erde, Schotter, Beton, Asphalt: SLAM RAM, Tripod Titan oder schwerer Klappständer — für jeden Untergrund die passende Standoption.' },
    { icon: 'droplets', title: 'UV-stabile, dichte Bespannung', body: 'Reißfest, wasserdicht, UV-stabil. Schwer entflammbar bei Pipeliner, Verstärkter Ausführung und Rechteckschirm.' },
    { icon: 'package', title: 'Transportabel & langlebig', body: 'Premiummodelle kommen zerlegt im Transportrohr — 14 kg (Ø 2,5 m) bzw. 18 kg (Ø 3,0 m). Nach Regen trocknen, dann hält er viele Jahre.' },
  ];

  // Standsystem — die passende Standoption je Untergrund.
  const STANDS = [
    {
      id: 'erdspiess', name: 'Erdspieß (einfach)', icon: 'arrow-down-to-line', ground: 'Weicher Boden',
      benefit: 'Der wirtschaftliche Einschlaghalter mit Schraubhalterung — für Erde, Lehm, Sand und Rasen. Ideal als Einstiegs- oder Reservegerät. Nicht für Beton/Asphalt.',
      specs: [['Aufnahme', 'Ø 45,5 mm'], ['Halterung', 'Schraube'], ['Setzen', 'mit Fäustel']],
      url: 'https://www.ab-industrie.de/Erdspiess-fuer-Baustellenschirm',
    },
    {
      id: 'slam-ram', name: 'Erdspieß', sub: 'SLAM RAM', icon: 'hammer', ground: 'Weicher Boden',
      benefit: 'Einschlaghalter aus AB-Eigenproduktion: voll verschweißt, ohne Werkzeug gesetzt, sturmfest in Erde, Lehm und Sand. Nicht für Beton/Asphalt.',
      specs: [['Gewicht', 'ca. 8 kg'], ['Höhe', 'ca. 1,70 m'], ['Aufnahme', 'Ø 42 mm']],
      url: 'https://www.ab-industrie.de/SLAM-RAM-Erdspiess-Stabiler-Einschlaghalter-fuer-Baustellenschirme',
    },
    {
      id: 'tripod-titan', name: 'Klappständer TRIPOD TITAN', icon: 'triangle', ground: 'Harte Flächen',
      benefit: 'Breiter Dreibein-Ständer für Beton, Asphalt und verdichteten Schotter — werkzeuglos aufgestellt, mit Edelstahl-Schrauben. Passt nur zur Premiumklasse: Worker, Pipeliner, Heavy.',
      specs: [['Gewicht', '8,2 kg'], ['Standfläche', 'Ø 1,21 m'], ['Aufnahme', 'Ø 38 mm']],
      url: 'https://www.ab-industrie.de/Klappstaender-TRIPOD-TITAN-Breit-schwer-standfest',
    },
    {
      id: 'klappstaender', name: 'Klappständer', sub: '15 kg', icon: 'anchor', ground: 'Harte Flächen',
      benefit: 'Der schwerste Ständer im Sortiment: verzinkter Stahl, Neigungsausgleich, Wasserableitung. Standfest auch für die großen 3,0-m-Schirme.',
      specs: [['Gewicht', '15 kg'], ['Standfläche', 'ca. 1,20 m'], ['Aufnahme', 'bis Ø 55 mm']],
      url: 'https://www.ab-industrie.de/Klappstaender-fuer-25-und-30-m-Arbeitsschirme',
    },
  ];

  function StandCard({ s }) {
    const [h, setH] = React.useState(false);
    return (
      <a href={s.url} target="_blank" rel="noopener noreferrer"
        onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ textDecoration: 'none', color: 'inherit', display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: h ? 'var(--shadow-xl)' : 'var(--shadow-lg)', transform: h ? 'translateY(-4px)' : 'none', transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)' }}>
        <div style={{ position: 'relative' }}>
          <image-slot
            id={'arbeitsschirm-stand-' + s.id}
            shape="rect"
            placeholder={'Foto ' + s.name + (s.sub ? ' ' + s.sub : '')}
            alt={s.name}
            style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '16 / 10', borderBottom: '1px solid var(--border-subtle)' }}
          ></image-slot>
          <span style={{ position: 'absolute', top: 'var(--space-3)', left: 'var(--space-3)', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 11px', borderRadius: 'var(--radius-pill)', background: 'rgba(17,16,11,0.82)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-2xs)', letterSpacing: '0.05em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
            <Icon name={s.icon} size={13} color="var(--red-400)" /> {s.ground}
          </span>
        </div>
        <div style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', flex: 1 }}>
          <strong style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-lg)', color: 'var(--text-strong)', letterSpacing: '-0.01em', lineHeight: 1.15 }}>{s.name}{s.sub && <span style={{ display: 'block' }}>{s.sub}</span>}</strong>
          <p style={{ margin: '8px 0 0', fontSize: 'var(--fs-sm)', lineHeight: 1.55, color: 'var(--text-muted)' }}>{s.benefit}</p>
          <dl style={{ margin: 'var(--space-4) 0 0', padding: 0, display: 'grid', gridTemplateColumns: 'auto 1fr' }}>
            {s.specs.map(([k, v], i) => {
              const line = i ? '1px solid var(--border-subtle)' : 'none';
              return (
                <React.Fragment key={k}>
                  <dt style={{ padding: '7px 0', borderTop: line, fontSize: 'var(--fs-2xs)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k}</dt>
                  <dd style={{ margin: 0, padding: '7px 0', borderTop: line, textAlign: 'right', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-sm)', color: 'var(--text-strong)', whiteSpace: 'nowrap' }}>{v}</dd>
                </React.Fragment>
              );
            })}
          </dl>
          <span style={{ marginTop: 'auto', paddingTop: 'var(--space-5)', display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-display)', fontSize: 'var(--fs-sm)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--brand)' }}>
            Im Shop ansehen <span style={{ transform: h ? 'translateX(3px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }}>→</span>
          </span>
        </div>
      </a>
    );
  }

  function Technik() {
    return (
      <section id="technik" style={{ position: 'relative', background: 'var(--grad-ink)', color: '#fff', paddingBlock: 'var(--section-y)', overflow: 'hidden', isolation: 'isolate' }}>
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(17,16,11,0.6), rgba(17,16,11,0.78))', zIndex: 1 }} />
        <div className="ab-container" style={{ position: 'relative', zIndex: 2 }}>
          <SectionHeading
            dark
            eyebrow="Technik"
            title="Gebaut für die Baustelle — nicht fürs Schaufenster."
            lead="So ist unsere Premiumklasse gebaut — Worker, Pipeliner und Heavy: Stahlmast, 36 Streben, einzeln versiegelte Nähte, zerlegbar im Transportrohr. Hier zählt, was hält."
            style={{ maxWidth: '46ch' }}
          />

          <div className="ab-tech-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-7)', marginTop: 'var(--space-9)' }}>
            {FEATURES.map((f) => (
              <div key={f.title}>
                <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'rgba(194,31,51,0.16)', border: '1px solid rgba(217,56,75,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 'var(--space-4)' }}>
                  <Icon name={f.icon} size={26} color="var(--red-400)" />
                </div>
                <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-md)', color: '#fff' }}>{f.title}</h3>
                <p style={{ margin: 0, fontSize: 'var(--fs-sm)', lineHeight: 1.6, color: 'var(--steel-400)' }}>{f.body}</p>
              </div>
            ))}
          </div>

          {/* Standsystem — die drei Standoptionen */}
          <div style={{ marginTop: 'var(--space-9)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--space-2)', fontFamily: 'var(--font-display)', fontSize: 'var(--fs-xs)', fontWeight: 700, letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--red-400)' }}>Standsystem</span>
            <h3 style={{ margin: '10px 0 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.4rem, 2.6vw, 1.9rem)', color: '#fff', letterSpacing: '-0.01em', maxWidth: '26ch' }}>Für jeden Untergrund die passende Standoption.</h3>
            <p style={{ margin: '10px 0 0', fontSize: 'var(--fs-base)', lineHeight: 1.6, color: 'var(--text-on-dark-muted)', maxWidth: '56ch' }}>
              Vom Erdspieß aus eigener Produktion bis zum schweren Klappständer — die passende Standoption je nach Untergrund und Modell.
            </p>

            <div className="ab-stand-grid" style={{ marginTop: 'var(--space-6)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 'var(--space-6)' }}>
              {STANDS.map((s) => <StandCard key={s.id} s={s} />)}
            </div>
          </div>
        </div>
      </section>
    );
  }

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