function Services({ t }) {
  const services = t.services;

  return (
    <section style={{ padding: 'clamp(80px, 10vw, 140px) 0', background:'var(--white)' }}>
      <div className="wrap">
        <div className="section-head" style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 60, flexWrap:'wrap', gap: 24 }}>
          <div>
            <div className="mono-tiny" style={{ color:'var(--gray-400)', marginBottom: 16 }}>
              {t.servicesKicker}
            </div>
            <h2 className="display" style={{ fontSize:'clamp(48px, 7vw, 96px)' }}>
              {t.servicesTitle1}<br/>
              <span className="display-italic">{t.servicesTitle2}</span>
            </h2>
          </div>
          <a href="#contact" className="ghost-btn">
            {t.allServices} <span>→</span>
          </a>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 1,
          background:'var(--gray-200)',
          border: '1px solid var(--gray-200)',
          borderRadius: 18,
          overflow:'hidden',
        }}>
          {services.map((s, i) => (
            <ServiceTile key={s.name} s={s} idx={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceTile({ s, idx }) {
  const [hover, setHover] = React.useState(false);
  const tints = ['pink','silver','rose'];
  return (
    <div
      className="service-tile"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'var(--pink-50)' : 'var(--white)',
        padding: '32px 28px 28px',
        display:'flex', flexDirection:'column',
        gap: 14, minHeight: 240,
        transition: 'background .25s, transform .35s cubic-bezier(.2,.7,.2,1)',
        position: 'relative',
        cursor: 'pointer',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
      }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
        <span className="mono-tiny" style={{ color:'var(--pink-500)' }}>0{idx+1}</span>
        <div style={{
          width: 70, height: 70,
          opacity: hover ? 1 : 0.85,
          transform: hover ? 'rotate(20deg) scale(1.15)' : 'rotate(0) scale(1)',
          transition: 'opacity .25s, transform .5s cubic-bezier(.2,.7,.2,1)',
        }}>
          <ChromeBlob tint={tints[idx % 3]} seed={idx} style={{ width:'100%', height:'100%' }} />
        </div>
      </div>
      <h3 style={{ fontSize: 24, fontWeight: 600, letterSpacing:'-0.02em', marginTop: 'auto' }}>
        {s.name}
      </h3>
      <p style={{ fontSize: 13, color:'var(--gray-400)', lineHeight: 1.5 }}>
        {s.desc}
      </p>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'center',
        paddingTop: 12, borderTop: '1px dashed var(--gray-200)', marginTop: 4,
      }}>
        <span style={{ fontFamily:'Instrument Serif', fontStyle:'italic', fontSize: 20, color:'var(--pink-500)' }}>
          {s.price}
        </span>
        <span style={{ fontSize: 12, color:'var(--gray-400)' }}>{s.duration}</span>
      </div>
    </div>
  );
}

window.Services = Services;