'use client';

type Stat = { label: string; value: string; sub?: string };

const STATS: Stat[] = [
  { label: 'Sales territory', value: 'UAE', sub: 'YS Lootah Robotics' },
  { label: 'Premier brands', value: '2', sub: 'Unitree · Pudu Robotics' },
  { label: 'Robot models', value: '11+', sub: 'Humanoid, quadruped, service, delivery' },
  { label: 'Based in', value: 'Dubai', sub: 'Showroom · demo · deployment' },
];

export function FloatingTechPanel() {
  return (
    <div
      style={{
        display: 'grid',
        gap: '1rem',
        gridTemplateColumns: 'repeat(auto-fit, minmax(min(180px, 100%), 1fr))',
      }}
    >
      {STATS.map((s, i) => (
        <div
          key={s.label}
          className="card"
          style={{
            padding: '1.5rem',
            display: 'flex',
            flexDirection: 'column',
            gap: '0.4rem',
            position: 'relative',
            overflow: 'hidden',
          }}
        >
          <span
            aria-hidden
            style={{
              position: 'absolute',
              top: '-1rem',
              right: '-1rem',
              width: 60,
              height: 60,
              borderRadius: '50%',
              background: `radial-gradient(circle, ${['#e7e7e7', '#5e5e5e', '#a8a8a8', '#e7e7e7'][i % 4]}33, transparent 70%)`,
              pointerEvents: 'none',
            }}
          />
          <span style={{ fontSize: '0.68rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#a8a8a8' }}>{s.label}</span>
          <span className="text-gradient-accent" style={{ fontSize: 'clamp(1.7rem, 3vw, 2.2rem)', fontWeight: 700, letterSpacing: '-0.02em' }}>
            {s.value}
          </span>
          {s.sub && <span style={{ color: '#e7e7e7', fontSize: '0.82rem', lineHeight: 1.5 }}>{s.sub}</span>}
        </div>
      ))}
    </div>
  );
}