// ServicesPage.jsx — Full services detail page

const ServicesPage = ({ setPage }) => (
  <div style={{ minHeight: '100vh', background: '#F4EDE2', paddingTop: '64px' }}>
    {/* Hero */}
    <div style={{ background: '#2D241A', padding: '80px 48px' }}>
      <div style={{ maxWidth: '1184px', margin: '0 auto' }}>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: '11px', fontWeight: 500, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#8A8478', marginBottom: '16px' }}>What we offer</div>
        <h1 style={{ fontFamily: "'Playfair Display', Georgia, serif", fontSize: '64px', fontWeight: 400, lineHeight: 1.0, letterSpacing: '-0.025em', color: '#F4EDE2', maxWidth: '700px' }}>
          Every service,<br />built for <span style={{ color: '#A87C3D', fontStyle: 'italic' }}>purpose.</span>
        </h1>
      </div>
    </div>

    {/* Services detail */}
    <div style={{ maxWidth: '1184px', margin: '0 auto', padding: '80px 48px' }}>
      {servicesList.map((s, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '64px',
          padding: '48px 0', borderBottom: '1px solid rgba(26,26,26,0.08)',
          alignItems: 'start',
        }}>
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: '11px', fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#A87C3D', marginBottom: '12px' }}>0{i + 1}</div>
            <h3 style={{ fontFamily: "'Playfair Display', Georgia, serif", fontSize: '28px', fontWeight: 400, color: '#1A1A1A', lineHeight: 1.2 }}>{s.title}</h3>
          </div>
          <div>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: '16px', color: '#5E5A54', lineHeight: 1.75, marginBottom: '20px' }}>{s.desc}</p>
            <button onClick={() => setPage('contact')} style={{
              background: 'none', color: '#A87C3D', border: 'none', padding: '0',
              fontFamily: "'DM Sans', sans-serif", fontSize: '13px', fontWeight: 500,
              cursor: 'pointer', borderBottom: '1px solid #A87C3D', paddingBottom: '2px',
            }}>Talk to us about {s.title} →</button>
          </div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { ServicesPage });