/* global React */
// Three core value props.
function Features() {
  const DS = window.ReconcileAIDesignSystem_c7572b;
  const { Card } = DS;
  React.useEffect(() => { requestAnimationFrame(() => window.lucide && window.lucide.createIcons()); });

  const feats = [
    { icon: 'brain-circuit', title: 'Every exception, explained',
      body: 'No guesswork. Every reconciliation exception tells you exactly why a transaction didn\u2019t match \u2014 so you can review, correct, and move on.' },    { icon: 'mouse-pointer-click', title: 'One-tap resolution',
      body: 'ReconcileAI proposes the fix and the account. You glance, you confirm. The awkward 5% clears in seconds.' },
    { icon: 'wand-sparkles', title: 'Zero-touch categorisation',
      body: 'Transactions are routed to the right account automatically, learning the way you keep your books.' },
  ];

  return (
    <section id="why-reconcileai" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--section-y) var(--container-pad)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', maxWidth: '40ch', marginBottom: '48px' }}>
        <span className="ds-eyebrow">Why ReconcileAI</span>
        <h2 style={{ fontSize: 'clamp(1.9rem,3.4vw,2.6rem)', fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink-900)' }}>
          The part of reconciliation everyone dreads — handled.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }} className="rai-feat-grid">
        {feats.map((f) => (
          <Card key={f.title} padding="lg" elevation="sm" interactive>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <span style={{
                width: 48, height: 48, borderRadius: 'var(--radius-lg)',
                background: 'var(--cyan-50)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--cyan-700)',
              }}>
                <i data-lucide={f.icon} style={{ width: 24, height: 24 }}></i>
              </span>
              <h3 style={{ fontSize: '20px', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink-900)' }}>{f.title}</h3>
              <p style={{ fontSize: '15px', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 }}>{f.body}</p>
            </div>
          </Card>
        ))}
      </div>
    </section>
  );
}
window.Features = Features;