/* ===== Services ===== */
function Services({ onBook }) {
  const items = [
    ['brain', 'var(--hs-sprout)', 'Mental Health Consultation', 'Talk through what you’re feeling with a caring clinician.', ['Online', 'In-Person']],
    ['messages-square', 'var(--hs-sky)', 'Counseling & Psychotherapy', 'One-on-one sessions in a calm, confidential space.', ['Online', 'In-Person']],
    ['stethoscope', 'var(--hs-coral)', 'Psychiatric Consultation', 'Medical assessment and management, delivered online.', ['Online']],
    ['clipboard-list', 'var(--hs-gold-deep)', 'Psychological Assessment', 'Clinical, pre-employment, neuropsychological & school.', ['In-Person']],
    ['briefcase', 'var(--hs-teal)', 'Pre-Employment Assessment', 'Psychological evaluation for hiring, OJT & school requirements.', ['In-Person']],
    ['users', 'var(--hs-sprout-deep)', 'Seminars & Workshops', 'Mental-health talks for schools, teams & communities.', ['Online', 'In-Person']],
  ];
  return (
    <Section id="services" style={{ padding: '40px 0 20px' }}>
      <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 44px' }}>
        <Eyebrow>What we offer</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3vw,40px)', color: 'var(--hs-teal)', margin: '12px 0 12px' }}>Care that meets you where you are</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--hs-ink-2)' }}>Every service is held in confidence, at your pace.</p>
      </div>
      <div className="hs-svc-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
        {items.map((it, i) => <ServiceCard key={i} it={it} />)}
      </div>
    </Section>
  );
}

function ServiceCard({ it }) {
  const [ic, color, title, desc, tags] = it;
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      background: '#fff', borderRadius: 'var(--r-lg)', padding: '26px 24px',
      boxShadow: h ? 'var(--shadow-lg)' : 'var(--shadow-md)',
      transform: h ? 'translateY(-4px)' : 'none', transition: 'all var(--dur) var(--ease-soft)',
    }}>
      <div style={{ width: 50, height: 50, borderRadius: 'var(--r-md)', background: color, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
        <Icon name={ic} size={26} color="#fff" />
      </div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--hs-teal)', margin: '0 0 8px' }}>{title}</h3>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--hs-ink-2)', margin: '0 0 16px' }}>{desc}</p>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {tags.map(t => (
          <span key={t} style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12,
            padding: '5px 12px', borderRadius: 'var(--r-pill)',
            background: t === 'Online' ? 'var(--hs-sky-soft)' : 'var(--hs-sprout-soft)',
            color: t === 'Online' ? 'var(--hs-sky-deep)' : 'var(--hs-sprout-deep)',
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}><Icon name={t === 'Online' ? 'video' : 'map-pin'} size={13} />{t}</span>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { Services });