/* ARBEITSSCHIRM — Modelle (5 echte Modelle, gestaffelt nach Klasse) */
(function () {
  const { Badge, SectionHeading } = window.ABIndustrieServiceDesignSystem_89df89;
  const { Icon } = window.ABIcons;

  const FLYER = 'https://www.ab-industrie.de/mediafiles/Sonstiges/Flyer%202025%20NEU.pdf';

  // Premiumklasse — die Oberklasse (bis zu 36 Streben).
  const PREMIUM = [
    {
      id: 'worker', name: 'WORKER', badge: 'Bestseller', tone: 'accent', flamm: false, flyer: FLYER,
      benefit: 'Der meistverkaufte Arbeitsschirm: leicht, schnell gesetzt, baustellenrobust — der Allrounder für Monteur- und Serviceteams am Arbeitspunkt.',
      variants: { label: '5 Ausführungen', swatches: [{ n: 'Rot', c: '#B11E2A' }, { n: 'Olive', c: '#6E7042' }, { n: 'Teal', c: '#1C6E6E' }, { n: 'Fußball', design: 'football' }, { n: 'Baseball', design: 'baseball' }] },
      specs: [
        ['Durchmesser', 'Ø 2,5 m'],
        ['Gestänge', 'Stahl-Grundstange'],
        ['Streben', '36 Streben'],
        ['Windstabil', 'bis 100 km/h'],
      ],
    },
    {
      id: 'pipeliner', name: 'PIPELINER', badge: 'Für die Naht', tone: 'ink', flamm: true, flyer: FLYER,
      benefit: 'Schweißen, Trennen, Schleifen: die schwer entflammbare Bespannung steckt Funkenflug weg — beide Größen flammhemmend.',
      variants: { label: '2 Ausführungen', swatches: [{ n: 'Schwarz · Ø 2,5 m', c: '#1a1a1a' }, { n: 'Blau · Pipeliner Heavy Ø 3,0 m', c: '#1F4E8C' }] },
      specs: [
        ['Durchmesser', 'Ø 2,5 · 3,0 m'],
        ['Gestänge', 'Stahl-Grundstange'],
        ['Streben', '36 Streben'],
        ['Windstabil', 'bis 100 km/h'],
      ],
    },
    {
      id: 'heavy', name: 'HEAVY', badge: 'Maximale Fläche', tone: 'ink', flamm: false, flyer: FLYER,
      benefit: 'Ø 3,0 m über Mehrpersonen-Teams und große Werkstücke. Stahl-Grundstange mit Verlängerungsrohr — schwer entflammbar als Pipeliner Heavy.',
      variants: { label: '3 Farben', swatches: [{ n: 'Grau', c: '#6B6B6B' }, { n: 'Khaki', c: '#9A8B5E' }, { n: 'Orange', c: '#E8702A' }] },
      specs: [
        ['Durchmesser', 'Ø 3,0 m'],
        ['Gestänge', 'Stahl-Grundstange'],
        ['Streben', '36 Streben'],
        ['Windstabil', 'bis 65 km/h'],
      ],
    },
  ];

  // Verstärkt & Sonderform — darunter angesiedelt.
  const WEITERE = [
    {
      id: 'verstaerkt', name: 'Verstärkte Ausführung', badge: 'Deutsche Fertigung', tone: 'steel', flamm: true,
      benefit: 'Aluminium-Vierkantprofile mit belastbaren Glasfiber-Strebenenden — spürbar robuster, schwer entflammbar, deutsche Fertigung. Rund in Ø 2,5 und 3,0 m.',
      endhuelsen: true,
      specs: [
        ['Form', 'Rund · Ø 2,5 · 3,0 m'],
        ['Profile', 'Aluminium-Vierkant'],
        ['Strebenenden', 'Glasfiber, belastbar'],
        ['Fertigung', 'Deutschland'],
      ],
    },
    {
      id: 'rechteck', name: 'Rechteckschirm', badge: 'Eckig & lang', tone: 'steel', flamm: true,
      benefit: 'Rechteckige Fläche für lange Werkstücke und eckige Aufstellpunkte. Einstiegsausführung mit Paragonstreben, schwer entflammbar — auf Wunsch mit Firmenlogo.',
      endhuelsen: true,
      endhuelsenTip: 'Bei der Rechteckform besonders sinnvoll: Die Last auf die Strebenenden ist ungleichmäßiger als beim runden Schirm — die Hülsen entlasten genau die kritischen Stellen.',
      specs: [
        ['Maße', '3,0×2,0 · 2,5×2,5 m'],
        ['Form', 'Rechteckig'],
        ['Streben', 'Paragonstreben'],
        ['Extra', 'Logo auf Wunsch'],
      ],
    },
  ];

  function BespannungChip({ on }) {
    const base = { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 11px', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' };
    if (on) {
      return (
        <span style={{ ...base, background: 'var(--brand-soft)', border: '1px solid var(--red-100)', color: 'var(--brand)' }}>
          <Icon name="flame" size={13} color="var(--brand)" /> Schwer entflammbar
        </span>
      );
    }
    return (
      <span style={{ ...base, background: 'var(--steel-100)', border: '1px solid var(--border-subtle)', color: 'var(--text-strong)' }}>
        <Icon name="umbrella" size={13} color="var(--text-strong)" /> Wetterfest · UV-stabil
      </span>
    );
  }

  // Design-Ausführungen als kleine SVG-Symbole (Lucide hat keine passenden).
  const DESIGNS = {
    football: (
      <svg viewBox="0 0 20 20" width="100%" height="100%" aria-hidden="true">
        <circle cx="10" cy="10" r="10" fill="#fff" />
        <polygon points="10,6.8 13.04,9 11.88,12.55 8.12,12.55 6.96,9" fill="#15140f" />
        <g stroke="#15140f" strokeWidth="0.9">
          <line x1="10" y1="6.8" x2="10" y2="1" />
          <line x1="13.04" y1="9" x2="18" y2="7" />
          <line x1="11.88" y1="12.55" x2="15" y2="17.5" />
          <line x1="8.12" y1="12.55" x2="5" y2="17.5" />
          <line x1="6.96" y1="9" x2="2" y2="7" />
        </g>
      </svg>
    ),
    baseball: (
      <svg viewBox="0 0 20 20" width="100%" height="100%" aria-hidden="true">
        <circle cx="10" cy="10" r="10" fill="#fff" />
        <path d="M3.5,3 Q8,10 3.5,17" fill="none" stroke="#C8243A" strokeWidth="1.3" />
        <path d="M16.5,3 Q12,10 16.5,17" fill="none" stroke="#C8243A" strokeWidth="1.3" />
      </svg>
    ),
  };

  function Variants({ v }) {
    return (
      <div className="ab-mcard-variants" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-2xs)', letterSpacing: '0.07em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{v.label}</span>
        {v.swatches && (
          <span role="img" aria-label={'Ausführungen: ' + v.swatches.map((s) => s.n).join(', ')} style={{ display: 'inline-flex', gap: 5 }}>
            {v.swatches.map((s) => (
              <span key={s.n} title={s.n} style={{ width: 16, height: 16, borderRadius: '50%', overflow: 'hidden', display: 'inline-flex', background: s.design ? '#fff' : s.c, border: '1px solid var(--border-strong)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.45)' }}>
                {s.design ? DESIGNS[s.design] : null}
              </span>
            ))}
          </span>
        )}
        {v.extra && <span style={{ fontSize: 'var(--fs-xs)', color: 'var(--text-muted)' }}>+ {v.extra.join(' · ')}</span>}
        {v.sizes && <span style={{ fontSize: 'var(--fs-xs)', fontWeight: 600, color: 'var(--text-strong)' }}>{v.sizes.join(' · ')}</span>}
      </div>
    );
  }

  function Endhuelsen({ tip }) {
    const OPTS = [
      { name: 'Ohne Endhülsen', tag: 'Standard', brand: false, note: 'Strebenenden direkt in den Gewebelaschen — wirtschaftlich für gelegentlichen Einsatz oder als Reservegerät.' },
      { name: 'Mit Endhülsen', tag: 'Premium', brand: true, note: 'Metallhülse an jeder Strebe verstärkt die Kraftübertragung — die Bespannung hält länger, der Schirm bleibt in Form.' },
    ];
    return (
      <div style={{ marginTop: 6, paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-subtle)' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-2xs)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Mit oder ohne Endhülsen</span>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 10 }}>
          {OPTS.map((o) => (
            <div key={o.tag}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-sm)', color: 'var(--text-strong)' }}>{o.name}</span>
                <span style={{ padding: '2px 8px', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 10, letterSpacing: '0.07em', textTransform: 'uppercase', background: o.brand ? 'var(--brand)' : 'var(--steel-200)', color: o.brand ? '#fff' : 'var(--text-strong)' }}>{o.tag}</span>
              </div>
              <p style={{ margin: 0, fontSize: 'var(--fs-xs)', lineHeight: 1.5, color: 'var(--text-muted)' }}>{o.note}</p>
            </div>
          ))}
        </div>
        {tip && (
          <p style={{ margin: '12px 0 0', display: 'flex', gap: 7, fontSize: 'var(--fs-xs)', lineHeight: 1.5, color: 'var(--text-muted)' }}>
            <Icon name="info" size={14} color="var(--brand)" style={{ flex: 'none', marginTop: 1 }} />
            <span>{tip}</span>
          </p>
        )}
      </div>
    );
  }

  function ModellCard({ m, rail }) {
    const [h, setH] = React.useState(false);
    const scrollAngebot = (e) => {
      e.preventDefault();
      const el = document.querySelector('#angebot');
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: 'smooth' });
    };
    const ctaStyle = { marginTop: 'auto', paddingTop: 'var(--space-4)', display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontSize: 'var(--fs-sm)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--brand)', textDecoration: 'none' };
    const arrow = <span style={{ transform: h ? 'translateX(3px)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }}>→</span>;
    return (
      <article onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderTop: rail ? '4px solid ' + rail : '1px solid var(--border-subtle)', 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)' }}>
        <div style={{ position: 'relative' }}>
          <image-slot
            id={'arbeitsschirm-modell-' + m.id}
            shape="rect"
            placeholder={'Foto ' + m.name}
            alt={m.name}
            style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '16 / 11', borderBottom: '1px solid var(--border-subtle)' }}
          ></image-slot>
          <div style={{ position: 'absolute', top: 'var(--space-3)', left: 'var(--space-3)' }}>
            <Badge tone={m.tone}>{m.badge}</Badge>
          </div>
        </div>
        <div style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', flex: 1 }}>
          <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.15rem, 1.6vw, var(--fs-lg))', letterSpacing: '0.005em', color: 'var(--text-strong)', lineHeight: 1.1 }}>{m.name}</h3>
          <div className="ab-mcard-chip"><BespannungChip on={m.flamm} /></div>
          <p className="ab-mcard-benefit" style={{ margin: 0, fontSize: 'var(--fs-sm)', lineHeight: 1.6, color: 'var(--text-muted)' }}>{m.benefit}</p>

          {m.variants && <Variants v={m.variants} />}

          <dl style={{ margin: '4px 0 0', padding: 0, display: 'grid', gridTemplateColumns: 'auto 1fr' }}>
            {m.specs.map(([k, v], i) => {
              const line = i ? '1px solid var(--border-subtle)' : 'none';
              return (
                <React.Fragment key={k}>
                  <dt style={{ padding: '8px 0', borderTop: line, fontSize: 'var(--fs-xs)', fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{k}</dt>
                  <dd style={{ margin: 0, padding: '8px 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>

          {m.endhuelsen && <Endhuelsen tip={m.endhuelsenTip} />}

          {m.flyer ? (
            <a href={m.flyer} target="_blank" rel="noopener noreferrer" style={ctaStyle}>
              <Icon name="file-text" size={16} color="currentColor" /> Flyer ansehen (PDF) {arrow}
            </a>
          ) : (
            <a href="#angebot" onClick={scrollAngebot} style={ctaStyle}>
              <Icon name="mail" size={16} color="currentColor" /> Anfragen {arrow}
            </a>
          )}
        </div>
      </article>
    );
  }

  function TierLabel({ icon, title, note, mt }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: (mt || 'var(--space-9)') + ' 0 var(--space-5)' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: 'var(--radius-sm)', background: 'var(--brand)', flex: 'none' }}>
          <Icon name={icon} size={19} color="#fff" />
        </span>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-md)', color: 'var(--text-strong)', letterSpacing: '-0.01em', lineHeight: 1.1 }}>{title}</div>
          <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', marginTop: 2 }}>{note}</div>
        </div>
      </div>
    );
  }

  // Foto-Mosaik rechts neben der Überschrift — 3 Kacheln, je versetzt
  // crossfadend. Die Bilder werden aus images/mosaik/ entdeckt (01.jpg,
  // 02.jpg, …) — du kannst jederzeit beliebig viele hinzufügen.
  function MosaicTile({ srcs, delay, interval }) {
    const [i, setI] = React.useState(0);
    const [hovered, setHovered] = React.useState(false);
    const hoverRef = React.useRef(false);
    React.useEffect(() => {
      setI(0);
      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (reduce || srcs.length <= 1) return;
      let id;
      const start = setTimeout(() => {
        id = setInterval(() => { if (!hoverRef.current) setI((n) => (n + 1) % srcs.length); }, interval);
      }, delay);
      return () => { clearTimeout(start); if (id) clearInterval(id); };
    }, [srcs.length, delay, interval]);
    const advance = () => setI((n) => (n + 1) % srcs.length);
    return (
      <div onMouseEnter={() => { hoverRef.current = true; setHovered(true); }} onMouseLeave={() => { hoverRef.current = false; setHovered(false); }}
        style={{ position: 'relative', borderRadius: 'var(--radius-md)', overflow: 'hidden', boxShadow: 'var(--shadow-md)', background: 'var(--ink-900)' }}>
        {srcs.length === 0 && (
          <span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 10, textAlign: 'center', fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xs)', letterSpacing: '0.06em', color: 'rgba(255,255,255,0.4)' }}>images/mosaik/</span>
        )}
        {srcs.map((src, idx) => (
          <img key={src} src={src} alt="Baustellenschirm im Einsatz" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: idx === i ? 1 : 0, transition: 'opacity 800ms var(--ease-out)' }} />
        ))}
        {srcs.length > 1 && (
          <button type="button" aria-label="Nächstes Bild" onClick={advance}
            style={{ position: 'absolute', bottom: 6, right: 6, zIndex: 2, width: 26, height: 26, borderRadius: 999, border: '1px solid rgba(255,255,255,0.3)', background: 'rgba(17,16,11,0.6)', backdropFilter: 'blur(3px)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', opacity: hovered ? 1 : 0, transition: 'opacity 150ms var(--ease-out)' }}>
            <Icon name="chevron-right" size={15} color="#fff" />
          </button>
        )}
      </div>
    );
  }

  function PhotoMosaic() {
    // Entdeckt fortlaufend nummerierte Bilder in images/mosaik/ (01.jpg, 02.jpg …),
    // akzeptiert auch unpadded (1.jpg). Stoppt bei der ersten Lücke.
    const [imgs, setImgs] = React.useState(null);
    React.useEffect(() => {
      let cancelled = false;
      const pad = (n) => String(n).padStart(2, '0');
      const probeOne = (n) => new Promise((res) => {
        const cands = ['images/mosaik/' + pad(n) + '.jpg', 'images/mosaik/' + n + '.jpg'];
        const tryC = (k) => {
          if (k >= cands.length) return res(null);
          const im = new Image();
          im.onload = () => res(cands[k]);
          im.onerror = () => tryC(k + 1);
          im.src = cands[k];
        };
        tryC(0);
      });
      const found = [];
      const step = (n) => {
        if (n > 60) { if (!cancelled) setImgs(found); return; }
        probeOne(n).then((path) => {
          if (path) { found.push(path); step(n + 1); }
          else if (!cancelled) setImgs(found);
        });
      };
      step(1);
      return () => { cancelled = true; };
    }, []);

    const list = imgs || [];
    const tiles = [[], [], []];
    list.forEach((src, idx) => { tiles[idx % 3].push(src); });

    return (
      <div className="ab-mosaic" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-3)', height: 'clamp(200px, 18vw, 280px)' }}>
        {tiles.map((srcs, ti) => <MosaicTile key={ti} srcs={srcs} delay={ti * 1300} interval={4200} />)}
      </div>
    );
  }

  function Modelle() {
    const ref = React.useRef(null);
    // Höhenausgleich der Beschreibungs-Blöcke je Raster — hält Name/Beschreibung/
    // Farben/Tabelle bei JEDER Breite auf gleicher Höhe (responsiv).
    React.useLayoutEffect(() => {
      const root = ref.current;
      if (!root) return;
      const ROWS = ['.ab-mcard-chip', '.ab-mcard-benefit', '.ab-mcard-variants'];
      const equalize = () => {
        root.querySelectorAll('.ab-modell-grid, .ab-modell-grid2').forEach((grid) => {
          ROWS.forEach((sel) => {
            const els = grid.querySelectorAll(sel);
            els.forEach((el) => { el.style.minHeight = ''; });
            let max = 0;
            els.forEach((el) => { if (el.offsetHeight > max) max = el.offsetHeight; });
            els.forEach((el) => { el.style.minHeight = max + 'px'; });
          });
        });
      };
      equalize();
      let ro = null;
      if (window.ResizeObserver) { ro = new ResizeObserver(equalize); ro.observe(root); }
      window.addEventListener('resize', equalize);
      return () => { if (ro) ro.disconnect(); window.removeEventListener('resize', equalize); };
    }, []);
    return (
      <section id="modelle" style={{ background: 'var(--surface-sunken)', paddingBlock: 'var(--section-y)' }}>
        <div className="ab-container" ref={ref}>
          <div className="ab-modell-head" style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 'var(--space-8)', alignItems: 'center', marginBottom: 'var(--space-7)' }}>
            <SectionHeading
              eyebrow="Modelle"
              title="Wir wissen, was unsere Schirme aushalten. Fünf Modelle, eine Premiumklasse."
              lead={<React.Fragment><strong style={{ color: 'var(--text-strong)' }}>Die Premiumklasse — Worker, Heavy und die beiden Pipeliner.</strong> Schwere Bauart für die härtesten Einsätze: 36 Streben gibt's nur hier, das macht sie windstabil — rund 12 kg in Ø 2,5 m, 15,5 kg in Ø 3,0 m. Wo Funken fliegen, hält die <strong style={{ color: 'var(--text-strong)' }}>schwer entflammbare Bespannung</strong> dagegen. Gebaut, um zu bleiben.</React.Fragment>}
            />
            <PhotoMosaic />
          </div>

          <TierLabel icon="award" title="Premiumklasse" note="Worker · Pipeliner · Heavy — alle mit 36 Streben auf Stahl-Grundstange. Das macht sie windstabil." mt="var(--space-7)" />
          <div className="ab-modell-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
            {PREMIUM.map((m) => <ModellCard key={m.id} m={m} rail="var(--brand)" />)}
          </div>

          <TierLabel icon="shield-check" title="Oberklasse & Rechteckschirm" note="Verstärkte Rund-Ausführung und der eckige Rechteckschirm." />
          <div className="ab-modell-grid2" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(330px, 1fr))', gap: 'var(--space-5)' }}>
            {WEITERE.map((m) => <ModellCard key={m.id} m={m} rail="var(--steel-400)" />)}
          </div>
        </div>
      </section>
    );
  }

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