/* Services overview — 4 clusters + compact additional-services list */
function ServiceCard({ img, tag, title, body }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)',
        overflow: 'hidden', boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-3px)' : 'none', transition: 'all var(--dur) var(--ease-out)',
        display: 'flex', flexDirection: 'column',
      }}>
      <div style={{ height: 168, background: `url(${img}) center/cover` }}></div>
      <div style={{ padding: '20px 22px 24px' }}>
        <Chip variant="tint">{tag}</Chip>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 22, color: 'var(--ink-900)', margin: '12px 0 7px', letterSpacing: '-0.01em' }}>{title}</h3>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-500)', margin: 0 }}>{body}</p>
      </div>
    </div>
  );
}

function Services() {
  const items = [
    { img: 'assets/images/services-1.png', tag: 'Same-day & walk-in', title: 'Walk-in & urgent care', body: 'Colds, flu, infections, minor injuries, rashes, and the urgent-but-not-emergency things that cannot wait for next week.' },
    { img: 'assets/images/services-2.png', tag: 'Ongoing care', title: 'Family medicine', body: 'Become a patient of a regular provider and care team who get to know you over time. Continuity for everyone under your roof.' },
    { img: 'assets/images/services-3.png', tag: 'Preventive', title: 'Checkups & screening', body: 'Annual visits, screening, physicals, and wellness reviews. The quiet appointments that keep small things small.' },
    { img: 'assets/images/services-4.png', tag: 'Continuity', title: 'Chronic condition care', body: 'Steady, coordinated support for diabetes, blood pressure, asthma, thyroid concerns, and more. Time to be heard.' },
  ];
  const more = [
    ['venus', "Women's & sexual health", 'Contraception, screening, STI testing, family planning'],
    ['baby', 'Children & senior care', 'Every age, every stage'],
    ['brain', 'Mental health support', 'Assessment, short-term support, coordinated referrals'],
    ['plane', 'Travel health & vaccinations', 'Pre-travel advice and immunisations'],
    ['scissors', 'Minor in-office procedures', 'Skin checks and removals, wound care'],
    ['video', 'Virtual care', 'Phone and video visits for suitable concerns'],
    ['clipboard-list', 'Care coordination', 'Lab and imaging requisitions, referrals, renewals'],
  ];
  return (
    <Section bg="var(--paper)" id="services">
      <Container>
        <SectionHead
          overline="Services"
          title="One clinic for everything that comes up"
          intro="From a sudden sore throat to the checkup you keep meaning to book, Tidewell handles the everyday health needs of the whole family in one place. Here is what we look after."
        />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {items.map((it) => <ServiceCard key={it.title} {...it} />)}
        </div>

        {/* additional services, compact */}
        <div style={{ marginTop: 48, background: 'var(--teal-50)', borderRadius: 'var(--r-xl)', padding: '36px 40px' }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--teal-600)', marginBottom: 24 }}>Also at Tidewell</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '22px 36px' }}>
            {more.map(([icon, title, sub]) => (
              <div key={title} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ flex: 'none', width: 40, height: 40, borderRadius: 'var(--r-md)', background: 'var(--surface)', boxShadow: 'var(--shadow-xs)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--teal-700)' }}>
                  <Icon name={icon} size={20} />
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 15.5, color: 'var(--ink-900)' }}>{title}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.45, color: 'var(--ink-500)', marginTop: 2 }}>{sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 36, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16.5, color: 'var(--ink-700)', margin: 0 }}>Not sure where you fit? Just book a same-day visit and we will point you the right way.</p>
        </div>
      </Container>
    </Section>
  );
}
window.Services = Services;