/** CRAiD UI kit — Philosophy feature grid */
function Philosophy() {
  const items = [
    {
      title: 'Agentic by Nature',
      body: 'Humans and AI agents work as one team here. Not as an experiment. Not as a demo. As everyday reality.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" /></svg>
      ),
    },
    {
      title: 'Outcome-obsessed',
      body: 'We sell outcomes, not hours. Every engagement is tied to a measurable business result — revenue, speed, or clarity.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" /></svg>
      ),
    },
    {
      title: 'Design-led, always',
      body: 'We arrive with craft, empathy, and a pencil. AI extends us — it does not replace the judgement that makes good products.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z" /><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" /><path d="M2 2l7.586 7.586" /><circle cx="11" cy="11" r="2" /></svg>
      ),
    },
  ];

  return (
    <section style={philoStyles.section}>
      <div style={philoStyles.inner}>
        <span className="overline" style={philoStyles.eyebrow}>01 — Philosophy</span>
        <h2 style={philoStyles.h2}>
          Wir arbeiten schon so,<br />
          <span style={{ color: 'var(--fg-muted)' }}>wie eure Organisation morgen arbeiten wird.</span>
        </h2>

        <div style={philoStyles.grid}>
          {items.map((it) => (
            <article key={it.title} style={philoStyles.card}
                     onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--craid-pink-ring)'; }}
                     onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
              <div style={philoStyles.icTile}>{React.cloneElement(it.icon, { width: 22, height: 22, style: { color: 'var(--primary)' } })}</div>
              <h3 style={philoStyles.cardTitle}>{it.title}</h3>
              <p style={philoStyles.cardBody}>{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const philoStyles = {
  section: { padding: '128px 48px', background: 'var(--bg)' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  eyebrow: { display: 'block', marginBottom: 24 },
  h2: {
    fontSize: 'clamp(2.5rem, 4vw, 3.5rem)', fontWeight: 700, lineHeight: 1.1,
    margin: '0 0 80px', maxWidth: 900, letterSpacing: '-0.01em',
  },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 },
  card: {
    background: 'var(--bg-card)', border: '1px solid var(--border)',
    borderRadius: 16, padding: 36,
    boxShadow: '0 1px 3px rgba(19,31,34,0.04)',
    transition: 'border-color 400ms var(--ease-out)',
  },
  icTile: {
    width: 52, height: 52, borderRadius: 14,
    background: 'rgba(236,22,245,0.10)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    marginBottom: 28,
  },
  cardTitle: { margin: '0 0 12px', fontSize: 22, fontWeight: 600, color: 'var(--fg)' },
  cardBody: { margin: 0, fontSize: 15, fontWeight: 300, lineHeight: 1.625, color: 'var(--fg-muted)' },
};

window.Philosophy = Philosophy;