/* eslint-disable */
const TheaterVsHandwerk = () => {
  const theater = [
  'Workshops, die in der PowerPoint enden',
  'Pilot-Projekte, die als Pilot enden',
  'Tools einkaufen, ohne Prozesse zu verstehen',
  'Berater, die das Wissen mitnehmen, wenn sie gehen',
  'Einmal-Projekte in einer Welt, die sich monatlich neu erfindet'];

  const handwerk = [
  'Systematischer Aufbau der Fähigkeit im eigenen Team',
  'Echte Use Cases mit messbarem ROI in unter sechs Monaten',
  'Champions, die das Wissen im Haus halten',
  'Eine Partnerschaft, die mit der Technologie mitwächst — nicht endet, wenn sie weiterzieht'];


  const Column = ({ kicker, title, items, accent, mark }) =>
  <div style={{ padding: 'var(--s-7) var(--s-6)' }}>
      <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
      textTransform: 'uppercase', color: accent, marginBottom: 'var(--s-5)'
    }}>
        <span style={{ width: 24, height: 2, background: accent }} />
        <span>{kicker}</span>
      </div>
      <h3 style={{
      fontSize: 32, lineHeight: 1.08, letterSpacing: '-0.02em',
      fontWeight: 600, margin: '0 0 var(--s-6) 0',
      color: accent === 'var(--ink-4)' ? 'var(--ink-3)' : 'var(--ink)'
    }}>{title}</h3>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 0 }}>
        {items.map((it, i) =>
      <li key={i} style={{
        display: 'grid', gridTemplateColumns: '24px 1fr', gap: 16,
        padding: 'var(--s-4) 0',
        borderTop: '1px solid var(--rule)',
        fontSize: 16, lineHeight: 1.45,
        color: accent === 'var(--ink-4)' ? 'var(--ink-3)' : 'var(--ink-2)'
      }}>
            <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 500,
          color: accent, lineHeight: 1.4, paddingTop: 1
        }}>{mark}</span>
            <span style={{
          textDecoration: accent === 'var(--ink-4)' ? 'line-through' : 'none',
          textDecorationColor: 'var(--rule-strong)',
          textDecorationThickness: '1px'
        }}>{it}</span>
          </li>
      )}
      </ul>
    </div>;


  return (
    <section style={{
      maxWidth: 'var(--container)', margin: '0 auto',
      padding: 'var(--s-9) var(--gutter)'
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 'var(--s-6)'
      }}>
        <span style={{ width: 24, height: 2, background: 'var(--ink)' }} />
        <span>Was funktioniert · Was nicht</span>
      </div>

      <h2 style={{
        fontSize: 'clamp(32px, 3.6vw, 56px)', lineHeight: 1.05,
        letterSpacing: '-0.02em', fontWeight: 600,
        maxWidth: '20ch', margin: '0 0 var(--s-8) 0', textWrap: 'balance'
      }}>
        Der Unterschied zwischen <span style={{
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontWeight: 400, color: 'var(--ocher)'
        }}>Ausprobieren</span> und <span style={{
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontWeight: 400, color: 'var(--ocher)'
        }}>Transformieren</span>.
      </h2>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        border: '1px solid var(--rule)',
        background: 'var(--bone)'
      }}>
        <div style={{ borderRight: '1px solid var(--rule)', background: 'var(--bone-2)' }}>
          <Column
            kicker="KI-Theater"
            title="Was nicht funktioniert."
            items={theater}
            accent="var(--ink-4)"
            mark="—" />
          
        </div>
        <Column
          kicker="KI-Handwerk"
          title="Was funktioniert."
          items={handwerk}
          accent="var(--ocher)"
          mark="+" />
        
      </div>
    </section>);

};
window.TheaterVsHandwerk = TheaterVsHandwerk;