// ContactPromises: three-up bullet band — kostenfrei, technisch fundiert, regional
const ContactPromises = () => {
  const items = [
    {
      icon: 'check',
      title: 'Kostenfrei.',
      body: 'Das Erstgespräch verpflichtet Sie zu nichts.',
    },
    {
      icon: 'sparkle',
      title: 'Technisch fundiert.',
      body: 'Kein Verkaufsgeschwätz, sondern eine Machbarkeits-Analyse.',
    },
    {
      icon: 'target',
      title: 'Regional.',
      body: 'Ihr Partner direkt aus dem Ländle.',
    },
  ];
  return (
    <section style={{ padding: '64px 24px 96px', background: '#FAFAFA' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            background: '#fff', border: '1px solid #E5E5E5', borderRadius: 8,
            padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 12,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 8, background: '#FFF6BF',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={it.icon} size={20} stroke={2} color="#0A0A0A"/>
            </div>
            <div style={{
              font: '600 20px/1.25 Roboto, sans-serif', letterSpacing: '-0.01em',
              color: '#0A0A0A',
            }}>{it.title}</div>
            <div style={{ font: '400 15px/1.6 Roboto, sans-serif', color: '#525252' }}>
              {it.body}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

window.ContactPromises = ContactPromises;