/* ARBEITSSCHIRM — Angebot anfordern (Formular, nur E-Mail-Kontakt) */
(function () {
  const { Button, Input } = window.ABIndustrieServiceDesignSystem_89df89;
  const { Icon } = window.ABIcons;

  function Angebot({ formRef }) {
    const [sent, setSent] = React.useState(false);
    const [email, setEmail] = React.useState('');
    const [firma, setFirma] = React.useState('');
    const [beschreibung, setBeschreibung] = React.useState('');
    const [error, setError] = React.useState('');
    const submit = (e) => {
      e.preventDefault();
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        setError('Bitte eine gültige E-Mail-Adresse angeben.');
        return;
      }
      setError('');
      const subject = 'Anfrage Arbeitsschirm' + (firma ? ' — ' + firma : '');
      const body = [
        'Anfrage über die Arbeitsschirm-Seite', '',
        'Firma: ' + (firma || '—'),
        'E-Mail: ' + email, '',
        'Was soll überdacht werden:',
        (beschreibung || '—'),
      ].join('\r\n');
      window.location.href = 'mailto:info@ab-industrie.de?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
      setSent(true);
    };
    return (
      <section id="angebot" ref={formRef} style={{ background: 'var(--grad-slash)', color: '#fff', paddingBlock: 'var(--section-y)' }}>
        <div className="ab-container ab-angebot-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-9)', alignItems: 'center' }}>
          <div>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', fontSize: 12, color: 'rgba(255,255,255,0.82)' }}>Kein Vertreterbesuch · keine Hotline</span>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '-0.02em', fontSize: 'clamp(2rem, 4vw, 3rem)', margin: '14px 0 0', color: '#fff', lineHeight: 1.04, textWrap: 'balance' }}>
              Sagen Sie uns die Baustelle — wir nennen den Schirm.
            </h2>
            <p style={{ marginTop: 16, fontSize: 'var(--fs-md)', lineHeight: 1.6, color: 'rgba(255,255,255,0.92)', maxWidth: '46ch' }}>
              Spannweite, Untergrund, Einsatzdauer — kurz schildern, Rest übernehmen wir. Antwort werktags binnen 24 Stunden, per E-Mail.
            </p>
            <ul style={{ listStyle: 'none', margin: '24px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {['Beratung vom Fach — wir kennen die Baustelle', 'Passendes Modell statt Katalog-Raten', 'Ab Lager lieferbar, Versand am selben Tag'].map((t) => (
                <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 600, fontSize: 'var(--fs-base)' }}>
                  <Icon name="check" size={18} color="#fff" /> {t}
                </li>
              ))}
            </ul>
            <a href="mailto:info@ab-industrie.de" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 'var(--space-6)', color: '#fff', textDecoration: 'none', fontWeight: 700, fontSize: 'var(--fs-md)' }}>
              <Icon name="mail" size={20} color="#fff" /> info@ab-industrie.de
            </a>
          </div>

          <div style={{ background: '#fff', borderRadius: 'var(--radius-lg)', padding: 'var(--space-7)', boxShadow: 'var(--shadow-xl)', color: 'var(--text-body)' }}>
            {!sent ? (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
                <h3 style={{ margin: '0 0 4px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-xl)', color: 'var(--text-strong)', letterSpacing: '-0.01em' }}>Angebot anfordern</h3>
                <Input label="Firma" placeholder="Musterbau GmbH" value={firma} onChange={(e) => setFirma(e.target.value)} iconLeft={<Icon name="building-2" size={18} color="var(--text-subtle)" />} />
                <Input label="E-Mail" type="email" placeholder="ihre@firma.de" value={email} onChange={(e) => { setEmail(e.target.value); if (error) setError(''); }} error={error} iconLeft={<Icon name="mail" size={18} color="var(--text-subtle)" />} />
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={{ fontSize: 'var(--fs-sm)', fontWeight: 600, color: 'var(--text-strong)' }}>Was soll überdacht werden?</span>
                  <textarea rows={3} placeholder="z. B. Schweißplatz DN 400, Schotteruntergrund, 3 Wochen Einsatz" value={beschreibung} onChange={(e) => setBeschreibung(e.target.value)}
                    style={{ resize: 'vertical', padding: '11px 14px', borderRadius: 'var(--radius-sm)', border: '1.5px solid var(--border-default)', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-base)', color: 'var(--text-strong)', outline: 'none', lineHeight: 1.5 }}
                    onFocus={(e) => { e.currentTarget.style.borderColor = 'var(--brand)'; e.currentTarget.style.boxShadow = 'var(--ring-focus)'; }}
                    onBlur={(e) => { e.currentTarget.style.borderColor = 'var(--border-default)'; e.currentTarget.style.boxShadow = 'none'; }} />
                </label>
                <Button type="submit" variant="primary" size="lg" fullWidth iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Anfrage senden</Button>
                <p style={{ margin: 0, fontSize: 'var(--fs-xs)', color: 'var(--text-subtle)', lineHeight: 1.5 }}>
                  Mit dem Absenden stimmen Sie unserer Datenschutzerklärung zu. Wir melden uns ausschließlich per E-Mail.
                </p>
              </form>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-3)', paddingBlock: 'var(--space-5)' }}>
                <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--brand-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name="check" size={30} color="var(--brand)" />
                </div>
                <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-xl)', color: 'var(--text-strong)' }}>Fast geschafft.</h3>
                <p style={{ margin: 0, color: 'var(--text-muted)', lineHeight: 1.55 }}>Ihr E-Mail-Programm öffnet sich mit der fertigen Anfrage an <strong style={{ color: 'var(--text-strong)' }}>info@ab-industrie.de</strong> — bitte dort nur noch auf <strong style={{ color: 'var(--text-strong)' }}>Senden</strong> klicken. Öffnet sich nichts, schreiben Sie direkt an <a href="mailto:info@ab-industrie.de" style={{ color: 'var(--text-link)' }}>info@ab-industrie.de</a>.</p>
              </div>
            )}
          </div>
        </div>
      </section>
    );
  }

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