'use client';

const REASONS = [
  {
    title: 'UAE robotics portfolio',
    body: 'Selected Unitree and Pudu Robotics solutions available in the UAE through YS Lootah Robotics for hospitality, security, education, and industry.',
    accent: '#e7e7e7',
    icon: 'M3 3h7v7H3V3Zm0 11h7v7H3v-7Zm11-11h7v7h-7V3Zm0 11h7v7h-7v-7Z',
  },
  {
    title: 'Dubai sales and support',
    body: 'A local Dubai team manages your inquiry, demo, deployment, and on-the-ground support not just a website with a contact form.',
    accent: '#5e5e5e',
    icon: 'M12 2 2 7v6c0 5 4 9 10 11 6-2 10-6 10-11V7l-10-5Z',
  },
  {
    title: 'Custom configuration',
    body: 'Configure persona, attire, and accessories for humanoid robots visualize your deployment before you order with our 3D configurator.',
    accent: '#a8a8a8',
    icon: 'M12 4a4 4 0 0 1 4 4v1h5v6h-5v1a4 4 0 0 1-8 0v-1H3V9h5V8a4 4 0 0 1 4-4Z',
  },
  {
    title: 'End-to-end deployment',
    body: 'From procurement and configuration to delivery, installation, training, and ongoing support we handle the full lifecycle.',
    accent: '#e7e7e7',
    icon: 'M3 12h4l3-7 4 14 3-7h4',
  },
];

export function WhyUs() {
  return (
    <div
      style={{
        display: 'grid',
        gap: '1rem',
        gridTemplateColumns: 'repeat(auto-fit, minmax(min(260px, 100%), 1fr))',
      }}
    >
      {REASONS.map((r) => (
        <div key={r.title} className="card" style={{ padding: '1.75rem', display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
          <div
            style={{
              width: 48,
              height: 48,
              borderRadius: 14,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              background: `${r.accent}1A`,
              border: `1px solid ${r.accent}55`,
            }}
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={r.accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d={r.icon} />
            </svg>
          </div>
          <h3 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 600 }}>{r.title}</h3>
          <p style={{ margin: 0, color: '#e7e7e7', fontSize: '0.92rem', lineHeight: 1.6 }}>{r.body}</p>
        </div>
      ))}
    </div>
  );
}