'use client';

import { INDUSTRIES, type Industry } from '@/data/industries';

const ICONS: Record<Industry['icon'], string> = {
  building: 'M3 21V8l9-5 9 5v13h-6v-6h-6v6H3Z',
  utensils: 'M4 2h2v9a2 2 0 1 1-4 0V2h2Zm9 0h2v7l2 2v11h-2v-9h-2Zm-3 0h2v9a2 2 0 1 1-4 0V2h2Z',
  hotel: 'M2 21V7h20v14h-2v-3H4v3H2Zm5-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm5 0V8h8v6h-8Z',
  'shopping-bag': 'M6 6V5a6 6 0 0 1 12 0v1h3v15H3V6h3Zm2 0h8V5a4 4 0 0 0-8 0v1Z',
  'heart-pulse': 'M12 21s-7-4.5-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.5-9 9-9 9Zm-2-8 2-3 2 5 2-3h3',
  'graduation-cap': 'M12 3 2 8l10 5 10-5-10-5Zm-7 7v4l7 3 7-3v-4l-7 3-7-3Z',
  shield: 'M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z',
  warehouse: 'M3 21V9l9-5 9 5v12H3Zm5-9h8v8H8v-8Z',
  sparkles: 'M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6Zm7 12l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3Z',
  landmark: 'M2 21v-2h20v2H2Zm2-4v-8h2v8H4Zm4 0v-8h2v8H8Zm4 0v-8h2v8h-2Zm4 0v-8h2v8h-2ZM12 2l10 5H2l10-5Z',
};

export function IndustryUseCases({ limit }: { limit?: number }) {
  const list = limit ? INDUSTRIES.slice(0, limit) : INDUSTRIES;
  return (
    <div
      style={{
        display: 'grid',
        gap: '1rem',
        gridTemplateColumns: 'repeat(auto-fit, minmax(min(280px, 100%), 1fr))',
      }}
    >
      {list.map((i) => (
        <div key={i.id} className="card" style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '0.875rem',
            }}
          >
            <div
              style={{
                width: 44,
                height: 44,
                borderRadius: 12,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                background: `${i.accent}1A`,
                border: `1px solid ${i.accent}55`,
              }}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill={i.accent} aria-hidden="true">
                <path d={ICONS[i.icon]} />
              </svg>
            </div>
            <h3 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 600 }}>{i.name}</h3>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            <div>
              <div style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#6a73a5', marginBottom: 4 }}>Problem</div>
              <p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.55 }}>{i.problem}</p>
            </div>
            <div>
              <div style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#6a73a5', marginBottom: 4 }}>Solution</div>
              <p style={{ margin: 0, color: '#e8e0cf', fontSize: '0.92rem', lineHeight: 1.55 }}>{i.solution}</p>
            </div>
            <div>
              <div style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: i.accent, marginBottom: 4 }}>Benefit</div>
              <p style={{ margin: 0, color: '#ffffff', fontSize: '0.92rem', lineHeight: 1.55 }}>{i.benefit}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}