// SolutionsGrid: 5-card grid of AI products - 3 oben, 2 unten zentriert
const SolutionsGrid = ({ onSelect }) => {
  const cards = [
    { id: 'voice', icon: 'phone', title: 'Voice AI & KI-Telefonservice',
      body: 'Ihr Unternehmen ist rund um die Uhr erreichbar - ohne zusätzliches Personal. Unsere KI-Telefonassistenten nehmen Anrufe entgegen, beantworten Fragen, vereinbaren Termine und qualifizieren Leads. In natürlicher Sprache, auf Wunsch auch im Dialekt.',
      link: 'Mehr zu Voice AI' },
    { id: 'chatbot', icon: 'chat', title: 'Smarte Web-Chatbots',
      body: 'Verwandeln Sie Webseiten-Besucher in Kunden. Unsere Chatbots nutzen Ihr Firmenwissen, um Anfragen sofort und fachlich korrekt zu beantworten - 24 Stunden am Tag, ohne Wartezeit.',
      link: 'Mehr zu Chatbots' },
    { id: 'workflow', icon: 'workflow', title: 'Prozess-Automatisierung',
      body: 'Schluss mit Software-Inseln. Wir verbinden Ihre bestehenden Systeme - E-Mail, CRM, Buchhaltung, Kalender - zu automatisierten Workflows. Was bisher manuell übertragen wurde, läuft jetzt von allein.',
      link: 'Mehr zu Automation' },
    { id: 'content', icon: 'sparkle', title: 'KI-Content-Produktion',
      body: 'Fachartikel, Produktbeschreibungen, Video-Skripte - unsere Content-Systeme generieren hochwertige Inhalte auf Knopfdruck. Qualitätsgesichert, markenkonform und direkt veröffentlicht in Ihrem CMS.',
      link: 'Zur Content Automation' },
    { id: 'rag', icon: 'book', title: 'Interne Wissens-KI',
      body: 'Ihr gesamtes Firmenwissen - Handbücher, Protokolle, Richtlinien - zugänglich in Sekunden. Unsere RAG-Systeme durchsuchen Ihre Dokumente und liefern präzise Antworten, statt Ihre Mitarbeiter suchen zu lassen.',
      link: 'Mehr zur Wissens-KI' },
  ];

  return (
    <section style={{ padding: '96px 24px', background: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <h2 style={{
            font: '700 48px/1.05 Roboto, sans-serif', letterSpacing: '-0.02em',
            color: '#0A0A0A', margin: '0 0 16px',
          }}>
            Unsere KI-Lösungen für den Mittelstand.
          </h2>
          <p style={{ font: '400 18px/1.6 Roboto, sans-serif', color: '#525252', margin: 0 }}>
            Keine theoretische Beratung. Fertig installierte Systeme, die ab Tag 1 Arbeit abnehmen.
          </p>
        </div>
        <style>{`
          .goma-solutions-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
          .goma-solutions-grid > button{
            grid-column:span 2;
            min-width:0;
            box-sizing:border-box;
            overflow:hidden;
            white-space:normal;
            word-wrap:break-word;
            overflow-wrap:break-word;
          }
          .goma-solutions-grid > button > *{
            min-width:0;
            max-width:100%;
            white-space:normal;
            word-wrap:break-word;
            overflow-wrap:break-word;
          }
          .goma-solutions-grid > button:nth-child(4),
          .goma-solutions-grid > button:nth-child(5){grid-column:span 3;}
          @media (max-width:1024px){
            .goma-solutions-grid{grid-template-columns:repeat(2,1fr);}
            .goma-solutions-grid > button,
            .goma-solutions-grid > button:nth-child(4),
            .goma-solutions-grid > button:nth-child(5){grid-column:span 1;}
            .goma-solutions-grid > button:nth-child(5){grid-column:1 / -1;}
          }
          @media (max-width:640px){
            .goma-solutions-grid{grid-template-columns:1fr;}
            .goma-solutions-grid > button:nth-child(5){grid-column:auto;}
          }
        `}</style>
        <div className="goma-solutions-grid">
          {cards.map((c, i) => (
            <button key={c.id} onClick={() => onSelect && onSelect(c.id)}
              style={{
                textAlign: 'left', cursor: 'pointer', background: '#fff',
                border: '1px solid #E5E5E5', borderRadius: 8,
                padding: 28, display: 'flex', flexDirection: 'column', gap: 16,
                transition: 'border-color 200ms',
                font: 'inherit',
              }}
              onMouseEnter={(e)=>e.currentTarget.style.borderColor='#0A0A0A'}
              onMouseLeave={(e)=>e.currentTarget.style.borderColor='#E5E5E5'}>
              <div style={{
                width: 48, height: 48, borderRadius: 8, background: '#FFD500',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <Icon name={c.icon} size={24} stroke={1.6} color="#0A0A0A"/>
              </div>
              <div style={{ font: '600 20px/1.25 Roboto, sans-serif', color: '#0A0A0A' }}>
                {c.title}
              </div>
              <div style={{ font: '400 14px/1.6 Roboto, sans-serif', color: '#525252' }}>
                {c.body}
              </div>
              <div style={{
                marginTop: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6,
                font: '500 14px Roboto, sans-serif', color: '#0A0A0A',
              }}>
                {c.link} <Icon name="arrowRight" size={14} stroke={2}/>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

window.SolutionsGrid = SolutionsGrid;