const TECH = [
  { name: 'WordPress', slug: 'wordpress' },
  { name: 'WooCommerce', slug: 'woocommerce' },
  { name: 'OpenCart', slug: null, letter: 'O' },
  { name: 'Divi', slug: null, letter: 'D' },
  { name: 'Elementor', slug: 'elementor' },
  { name: 'Cloudflare', slug: 'cloudflare' },
  { name: 'Google', slug: 'google' },
  { name: 'Meta', slug: 'meta' }
];
const TECH_CDN = 'https://cdn.jsdelivr.net/npm/simple-icons@13.16.0/icons/';

function TechMark({ item, size = 20 }) {
  const [h, setH] = React.useState(false);
  const color = h ? 'var(--purple-light)' : 'var(--steel)';
  const mask = item.slug ? `url(${TECH_CDN}${item.slug}.svg)` : null;
  return (
    <span onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} title={item.name} aria-label={item.name} role="img"
      style={{ display: 'flex', alignItems: 'center', gap: 8, height: 24, color, transition: 'color var(--dur) var(--ease)', cursor: 'default' }}>
      {mask ? (
        <span style={{ width: size, height: size, flex: '0 0 auto', background: 'currentColor', maskImage: mask, WebkitMaskImage: mask, maskRepeat: 'no-repeat', WebkitMaskRepeat: 'no-repeat', maskPosition: 'center', WebkitMaskPosition: 'center', maskSize: 'contain', WebkitMaskSize: 'contain' }} />
      ) : (
        <span style={{ width: size, height: size, flex: '0 0 auto', display: 'grid', placeItems: 'center', borderRadius: '50%', border: '1.4px solid currentColor', fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, lineHeight: 1 }}>{item.letter || item.name[0]}</span>
      )}
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, letterSpacing: '-.01em', whiteSpace: 'nowrap' }}>{item.name}</span>
    </span>
  );
}

function TechLogosImg({ items = TECH, style }) {
  return (
    <div className="pm-tech" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '16px 24px', ...style }}>
      {items.map(t => <TechMark key={t.name} item={t} />)}
    </div>
  );
}

Object.assign(window, { TechLogosImg, TechMark });