/** Services grid — 6 service tiles with mouse-tilt 3D hover. */

const ServiceCard = ({ service, lang }) => {
  const onMove = (e) => {
    const card = e.currentTarget;
    const r = card.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width;
    const py = (e.clientY - r.top)  / r.height;
    card.style.transform = `perspective(900px) rotateX(${(py - 0.5) * -6}deg) rotateY(${(px - 0.5) * 6}deg) translateZ(0)`;
    card.style.setProperty('--mx', `${px * 100}%`);
    card.style.setProperty('--my', `${py * 100}%`);
  };
  const onLeave = (e) => {
    e.currentTarget.style.transform = 'perspective(900px) rotateX(0) rotateY(0)';
  };

  return (
    <div
      className="card-3d card-glass"
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{ minHeight: 300, padding: 28, display: 'flex', flexDirection: 'column' }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="font-mono" style={{
          fontSize: 11, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em',
        }}>
          {service.n}
        </span>
        <span className="badge"><span className="dot"></span>{pick(lang, service.meta)}</span>
      </div>

      <h3 className="font-display" style={{
        marginTop: 36, fontSize: 24, color: 'var(--color-ghost-white)',
        fontWeight: 400, letterSpacing: '-0.01em',
      }}>
        {pick(lang, service.title)}
      </h3>

      <p style={{
        marginTop: 12, fontSize: 14, color: 'var(--color-arctic-mist)',
        lineHeight: 1.55, flex: 1,
      }}>
        {pick(lang, service.description)}
      </p>

      <div style={{ marginTop: 20, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {service.tags.map((tag) => (
          <span
            key={tag}
            className="font-mono"
            style={{
              padding: '4px 8px', borderRadius: 4,
              fontSize: 10, color: 'var(--color-celestial-light)',
              background: 'rgba(11, 14, 26, 0.88)',
              boxShadow: 'rgba(186, 215, 247, 0.08) 0px 0px 0px 1px inset',
              letterSpacing: '0.04em',
            }}
          >
            {tag}
          </span>
        ))}
      </div>
    </div>
  );
};

const Services = ({ lang }) => (
  <section id="services" style={{ padding: '120px 0', position: 'relative' }}>
    <div className="container">
      <div style={{
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        marginBottom: 56, gap: 32, flexWrap: 'wrap',
      }}>
        <div>
          <span className="section-eyebrow">{T(lang, '01 / Услуги', '01 / Services')}</span>
          <h2 className="section-title" style={{ marginTop: 16, maxWidth: 620 }}>
            {T(lang, 'Шесть форматов работы.', 'Six ways to work with us.')}<br />
            <span style={{ color: 'var(--color-whisper-blue)' }}>
              {T(lang, 'Один прозрачный процесс.', 'One transparent process.')}
            </span>
          </h2>
        </div>
        <div className="font-mono" style={{
          fontSize: 11, color: 'var(--color-whisper-blue)',
          letterSpacing: '0.16em', maxWidth: 280,
        }}>
          {T(lang,
            'НА КАЖДЫЙ ФОРМАТ — ФИКСИРОВАННАЯ СМЕТА, СРОК И ИСХОДНИКИ В КОНЦЕ.',
            'EVERY FORMAT GETS A FIXED QUOTE, A FIXED DEADLINE, AND ALL SOURCES AT HANDOFF.')}
        </div>
      </div>

      <div data-grid="services" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {SERVICES.map((s) => (
          <ServiceCard key={s.id} service={s} lang={lang} />
        ))}
      </div>
    </div>
  </section>
);

window.Services = Services;