// ContactOptions: two-card layout — funnel vs. personal contact
const ContactOptions = ({ onCTA }) => (
  <section style={{ padding: '64px 24px 96px', background: '#fff' }}>
    <div style={{
      maxWidth: 1200, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
      alignItems: 'stretch',
    }}>
      {/* Variante 1 */}
      <div style={{
        background: '#FAFAFA', border: '1px solid #E5E5E5', borderRadius: 16,
        padding: 40, display: 'flex', flexDirection: 'column', gap: 20,
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          font: '500 12px Roboto, sans-serif',
          letterSpacing: '0.08em', textTransform: 'uppercase', color: '#737373',
        }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 22, height: 22, borderRadius: '50%', background: '#FFD500',
            font: '700 11px Roboto, sans-serif', color: '#0A0A0A',
          }}>1</span>
          Variante 1
        </div>
        <h2 style={{
          font: '700 32px/1.15 Roboto, sans-serif', letterSpacing: '-0.02em',
          color: '#0A0A0A', margin: 0,
        }}>
          Die 60-Sekunden-Potenzialanalyse
        </h2>
        <p style={{
          font: '400 16px/1.6 Roboto, sans-serif', color: '#525252', margin: 0,
        }}>
          Sparen Sie sich lange Erklärungen. Unser smarter Funnel stellt die richtigen Fragen zu
          Ihrem Betrieb. Ergebnis: Eine fundierte Einschätzung Ihrer Einsparpotenziale.
        </p>
        <div style={{ marginTop: 'auto', paddingTop: 16 }}>
          <button onClick={onCTA} style={{
            height: 52, padding: '0 24px', border: 'none', borderRadius: 8,
            background: '#FFD500', color: '#0A0A0A',
            font: '600 14px Roboto, sans-serif',
            letterSpacing: '0.02em', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 10,
            transition: 'background 200ms cubic-bezier(0.2,0.7,0.2,1)',
          }}
          onMouseEnter={(e)=>e.currentTarget.style.background='#F5C400'}
          onMouseLeave={(e)=>e.currentTarget.style.background='#FFD500'}>
            Jetzt Analyse starten &amp; Termin sichern
            <Icon name="arrowRight" size={16} stroke={2}/>
          </button>
        </div>
      </div>

      {/* Variante 2 */}
      <div style={{
        background: '#0A0A0A', color: '#fff', borderRadius: 16,
        padding: 40, display: 'flex', flexDirection: 'column', gap: 20,
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          font: '500 12px Roboto, sans-serif',
          letterSpacing: '0.08em', textTransform: 'uppercase', color: '#FFD500',
        }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 22, height: 22, borderRadius: '50%', background: '#FFD500',
            font: '700 11px Roboto, sans-serif', color: '#0A0A0A',
          }}>2</span>
          Variante 2
        </div>
        <h2 style={{
          font: '700 32px/1.15 Roboto, sans-serif', letterSpacing: '-0.02em',
          color: '#fff', margin: 0,
        }}>
          Persönlicher Austausch
        </h2>
        <p style={{
          font: '400 16px/1.6 Roboto, sans-serif', color: '#A3A3A3', margin: 0,
        }}>
          Sie haben ein komplexes Projekt oder möchten direkt mit jemandem von Goma-it sprechen?
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 8 }}>
          <ContactRow icon="chat" label="E-Mail" value="info@goma-it.at" href="mailto:info@goma-it.at"/>
          <ContactRow icon="phone" label="Telefon" value="+43 (5552) 22770" href="tel:+43555222770"/>
          <ContactRow icon="target" label="Standort" value={`„Verwurzelt in Bludenz, im Einsatz für ganz Vorarlberg."`}/>
        </div>
      </div>
    </div>
  </section>
);

const ContactRow = ({ icon, label, value, href }) => {
  const inner = (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '12px 14px', borderRadius: 8,
      background: '#1A1A1A', border: '1px solid #2E2E2E',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8, background: '#FFD500',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Icon name={icon} size={18} stroke={1.8} color="#0A0A0A"/>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <div style={{
          font: '500 11px Roboto, sans-serif', letterSpacing: '0.08em',
          textTransform: 'uppercase', color: '#737373',
        }}>{label}</div>
        <div style={{
          font: '500 15px Roboto, sans-serif', color: '#fff',
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{value}</div>
      </div>
    </div>
  );
  return href
    ? <a href={href} style={{ textDecoration: 'none' }}>{inner}</a>
    : inner;
};

window.ContactOptions = ContactOptions;