/* Why Tidewell — environment image alongside the 5 differentiator pillars */
function WhyTidewell() {
  const pillars = [
    { icon: 'clock', title: 'Access without the wait', body: 'Open 7 days, walk-ins welcome, online booking, and a live wait estimate. No more standing in a doorway hoping.' },
    { icon: 'users', title: 'A team that knows you', body: 'Walk in today, and if you like, keep the same care team going forward. You are not starting from scratch every visit.' },
    { icon: 'heart-pulse', title: 'Care for every age and stage', body: 'Kids, parents, grandparents: one trusted clinic for the whole family.' },
    { icon: 'message-circle', title: 'Listening comes first', body: 'We protect appointment time so you can finish your sentence and leave with a plan, not just a prescription.' },
    { icon: 'monitor-smartphone', title: 'Modern tools, human care', body: 'Booking, intake, and records are quick and digital, which frees up the part that matters most: time with a real person.' },
  ];
  return (
    <Section bg="var(--teal-50)" id="why">
      <Container style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 60, alignItems: 'center' }}>
        <div style={{ position: 'sticky', top: 100, alignSelf: 'start' }}>
          <Overline style={{ marginBottom: 14 }}>Why Tidewell</Overline>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 38, lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--ink-900)', margin: '0 0 18px', textWrap: 'pretty' }}>Care that respects your time and your trust.</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--ink-500)', margin: '0 0 28px', maxWidth: 440 }}>Plenty of clinics can see you. Tidewell is built so that being seen feels easy, and so the visit is actually worth your while.</p>
          <img src="assets/images/why-tidewell.png" alt="Inside Tidewell"
               style={{ width: '100%', borderRadius: 'var(--r-xl)', boxShadow: 'var(--shadow-lg)', display: 'block' }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {pillars.map((p) => (
            <div key={p.title} style={{ display: 'flex', gap: 18, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: '22px 24px', boxShadow: 'var(--shadow-xs)' }}>
              <div style={{ flex: 'none', width: 48, height: 48, borderRadius: 'var(--r-md)', background: 'var(--teal-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--teal-700)' }}>
                <Icon name={p.icon} size={24} />
              </div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 17.5, color: 'var(--ink-900)', margin: '4px 0 6px' }}>{p.title}</h3>
                <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-500)', margin: 0 }}>{p.body}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}
window.WhyTidewell = WhyTidewell;