/* global React */
const { useState: _useStateSC } = React;

function ServiceCard({ num, title, paragraphs, glyph }) {
  const [hover, setHover] = _useStateSC(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        flex: '1 1 0', minWidth: 0,
        width: '100%', maxWidth: 440,
        minHeight: 360,
        padding: '20px 20px 28px',
        borderRadius: 12,
        background: hover
          ? 'linear-gradient(#fff 0%, #f7f7f7 50%, #fff 100%)'
          : '#fff',
        boxShadow: hover ? '0 0 35px 0 rgba(0,0,0,0.08)' : 'none',
        transition: 'background 0.25s ease, box-shadow 0.25s ease',
        display: 'flex', flexDirection: 'column',
      }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 'clamp(80px, 14vh, 130px)' }}>
        <div style={{
          width: 32, height: 32, borderRadius: '50%',
          background: '#283836', color: '#fff',
          font: '400 14px/20px var(--font-body)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>{num}</div>
        <div style={{
          width: 32, height: 32, borderRadius: '50%',
          border: '1px solid #283836',
          background: hover ? '#283836' : '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          transition: 'background 0.25s ease',
        }}>
          {glyph === 'customisation' ? (
            <svg width="16" height="14" viewBox="0 0 16 14" fill={hover ? '#fff' : '#283836'} style={{transition:'fill 0.25s ease'}}>
              <path d="M8 0L10 5H16L11 8L13 14L8 11L3 14L5 8L0 5H6L8 0Z"/>
            </svg>
          ) : (
            <svg width="18" height="14" viewBox="0 0 18 14" fill={hover ? '#fff' : '#283836'} style={{transition:'fill 0.25s ease'}}>
              <path d="M0 14V0H3V11H7V4H10V11H14V7H17V14H0Z"/>
            </svg>
          )}
        </div>
      </div>
      <div style={{
        font: '400 clamp(14px, 1.4vw, 16px)/1.4 var(--font-hero)',
        color: '#283836',
      }}>
        <div style={{ marginBottom: 6 }}>{title}</div>
        {paragraphs.map((p, i) => (
          <p key={i} style={{ margin: '0 0 8px 0' }}>{p}</p>
        ))}
      </div>
    </div>
  );
}

window.ServiceCard = ServiceCard;