// services.jsx — 4 service cards with 3D morph shapes
const { useRef: __sr, useState: __ss, useEffect: __se } = React;

function Services({ t }) {
  const mouse = useMouse();
  return (
    <section id="services" style={{ paddingTop: 120, paddingBottom: 120, position: 'relative' }}>
      <div className="wrap">
        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
          alignItems: 'end', marginBottom: 80
        }}>
          <div>
            <div className="kicker reveal" style={{ marginBottom: 28 }}>
              <span className="dot"></span>{t.svc_eye}
            </div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(56px, 8vw, 128px)' }}>
              <div>{t.svc_title_1}</div>
              <div style={{ fontStyle: 'italic' }}>{t.svc_title_2}</div>
              <div className="irid-text" style={{ fontVariationSettings: '"wdth" 75', fontWeight: 800 }}>
                {t.svc_title_3}
              </div>
            </h2>
          </div>
          <p className="reveal" style={{
            fontSize: 20, color: 'var(--ink)', lineHeight: 1.5, maxWidth: 460, alignSelf: 'end'
          }}>{t.svc_sub}</p>
        </div>

        {/* 4 service cards in 2x2 grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28,
        }}>
          {t.services.map((s, i) => (
            <ServiceCard key={s.n} svc={s} index={i} mouse={mouse} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ svc, index, mouse }) {
  const ref = __sr(null);
  const [hover, setHover] = __ss(false);

  return (
    <article ref={ref} className="reveal chrome-card clickable"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      data-hover style={{
      padding: 40, position: 'relative', overflow: 'hidden',
      minHeight: 480, display: 'grid', gridTemplateRows: 'auto 1fr auto',
      background: hover ? 'var(--paper)' : 'var(--paper)',
      transition: 'transform 0.5s var(--ease-snap), box-shadow 0.5s, background 0.5s'
    }}>
      {/* Top — number + label */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div className="kicker" style={{ color: `var(--${svc.color})`, fontSize: 13, fontWeight: 700 }}>
          {svc.n} / {svc.label}
        </div>
        <Star size={28} color={`var(--${svc.color})`}
          style={{ transform: hover ? 'rotate(180deg) scale(1.2)' : 'rotate(0)', transition: 'transform 0.6s var(--ease-snap)' }} />
      </div>

      {/* Middle — title + 3D shape */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24,
        alignItems: 'center', minHeight: 280, marginTop: 32
      }}>
        <div>
          <h3 className="display" style={{
            fontSize: 'clamp(28px, 3.2vw, 48px)',
            marginBottom: 20,
            color: 'var(--ink)'
          }}>{svc.title}</h3>
          <p style={{
            fontSize: 15.5, color: 'var(--ink-dim)', lineHeight: 1.55, maxWidth: 380
          }}>{svc.body}</p>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          height: '100%', transform: hover ? 'scale(1.1)' : 'scale(1)',
          transition: 'transform 0.6s var(--ease-snap)'
        }}>
          <MorphShape kind={svc.kind} size={200} mouse={mouse} hue={index * 90} />
        </div>
      </div>

      {/* Bottom — tags */}
      <div style={{
        display: 'flex', flexWrap: 'wrap', gap: 6,
        marginTop: 32, paddingTop: 24, borderTop: '1.5px solid var(--line)'
      }}>
        {svc.tags.map(tag => (
          <span key={tag} className="chip" style={{ fontSize: 9.5, padding: '5px 10px' }}>{tag}</span>
        ))}
      </div>

      {/* Hover acid stripe */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 6,
        background: `var(--${svc.color})`,
        transform: hover ? 'scaleX(1)' : 'scaleX(0)',
        transformOrigin: 'left center',
        transition: 'transform 0.5s var(--ease-snap)'
      }} />
    </article>
  );
}

Object.assign(window, { Services, ServiceCard });