// HowWeWork: four principles, each with icon + heading + body
const HowWeWork = () => {
  const principles = [
    {
      icon: 'user',
      title: 'Feste Ansprechpartner statt Ticket-System.',
      body: 'Jeder Kunde hat bei uns einen dedizierten Projektverantwortlichen. Keine wechselnden Ansprechpartner, kein Agentur-Pingpong. Wenn etwas klemmt, wissen Sie, wen Sie anrufen.',
    },
    {
      icon: 'workflow',
      title: 'Technik, die das Problem löst — nicht die, die beeindruckt.',
      body: 'Unser Stack: n8n für Workflow-Automatisierung, Vapi und Deepgram für Voice-AI, eigene Server-Infrastruktur in Europa, OpenAI und Anthropic Claude als KI-Backbone. Wir wählen Technologien danach aus, ob sie Ihr konkretes Problem lösen — nicht danach, ob sie gerade im Trend liegen.',
    },
    {
      icon: 'target',
      title: 'Langfristige Partnerschaft statt Einmal-Projekt.',
      body: 'Unser Geschäftsmodell basiert auf monatlichen Wartungs- und Betreuungsvereinbarungen. Das bedeutet: Wir verdienen nur dann langfristig, wenn unsere Systeme auch langfristig funktionieren. Das ist der stärkste Qualitätsanreiz, den es gibt — und der ehrlichste.',
    },
    {
      icon: 'shield',
      title: 'DSGVO und Datenschutz sind bei uns kein Nachgedanke.',
      body: 'Unsere KI-Infrastruktur läuft auf europäischen Servern. Wir wissen, wie sensibel Kunden-, Mandanten- und Mitarbeiterdaten sind — und behandeln sie entsprechend. Private-Cloud-Lösungen und verschlüsselte Datenverarbeitung sind bei uns Standard, nicht Aufpreis.',
    },
  ];

  return (
    <section style={{ padding: '96px 24px', background: '#FAFAFA' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <div style={{
            font: '500 12px Roboto, sans-serif', letterSpacing: '0.08em',
            textTransform: 'uppercase', color: '#737373', marginBottom: 16,
          }}>
            Unsere Prinzipien
          </div>
          <h2 style={{
            font: '700 56px/1.05 Roboto, sans-serif', letterSpacing: '-0.02em',
            color: '#0A0A0A', margin: 0,
          }}>
            So arbeiten wir.
          </h2>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16,
        }}>
          {principles.map((p, i) => (
            <div key={i} style={{
              background: '#fff', border: '1px solid #E5E5E5', borderRadius: 8,
              padding: 32, display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <div style={{
                width: 48, height: 48, borderRadius: 8, background: '#FFD500',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={p.icon} size={24} stroke={1.6} color="#0A0A0A"/>
              </div>
              <div style={{
                font: '600 22px/1.3 Roboto, sans-serif', letterSpacing: '-0.01em',
                color: '#0A0A0A',
              }}>
                {p.title}
              </div>
              <div style={{ font: '400 15px/1.65 Roboto, sans-serif', color: '#525252' }}>
                {p.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.HowWeWork = HowWeWork;