/* Locations & hours — neighbourhood image + hours, contact, getting here */
function Locations() {
  const hours = [
    ['Monday \u2013 Friday', '8:00 am \u2013 8:00 pm'],
    ['Saturday & Sunday', '9:00 am \u2013 5:00 pm'],
    ['Statutory holidays', 'Reduced hours, posted online'],
  ];
  const getting = [
    ['train-front', 'Transit', 'Steps from the Main Street to Broadway corridor'],
    ['circle-parking', 'Parking', 'Street and nearby lot parking available'],
    ['accessibility', 'Accessibility', 'Step-free entrance and accessible washroom'],
  ];
  return (
    <Section bg="var(--teal-50)" id="locations">
      <Container>
        <SectionHead overline="Locations & hours" title="Find us in the heart of Vancouver" />
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'stretch' }}>
          <div style={{ position: 'relative', borderRadius: 'var(--r-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', minHeight: 420 }}>
            <img src="assets/images/locations.png" alt="Tidewell neighbourhood" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', left: 24, bottom: 24, right: 24, background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(8px)', borderRadius: 'var(--r-md)', padding: '18px 20px', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ flex: 'none', width: 44, height: 44, borderRadius: 'var(--r-sm)', background: 'var(--teal-700)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="map-pin" size={22} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 15.5, color: 'var(--ink-900)' }}>Tidewell Family Health</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--ink-500)' }}>1234 Example Street, Mount Pleasant, Vancouver, BC</div>
              </div>
              <Button size="sm" iconRight="arrow-up-right">Directions</Button>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ marginBottom: 2 }}><Pill status="go">Open now · ~12 min wait</Pill></div>
            <div style={{ background: 'var(--surface)', borderRadius: 'var(--r-lg)', border: '1px solid var(--line)', boxShadow: 'var(--shadow-sm)', overflow: 'hidden' }}>
              {hours.map(([d, t], i) => (
                <div key={d} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '15px 22px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, color: 'var(--ink-900)' }}>{d}</span>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--ink-500)' }}>{t}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <a href="tel:+16045550123" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 15.5, fontWeight: 600, color: 'var(--ink-900)', textDecoration: 'none' }}><Icon name="phone" size={18} color="var(--teal-700)" /> (604) 555-0123</a>
              <a href="mailto:hello@tidewellhealth.example" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 15.5, fontWeight: 600, color: 'var(--ink-900)', textDecoration: 'none' }}><Icon name="mail" size={18} color="var(--teal-700)" /> hello@tidewellhealth.example</a>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 6 }}>
              {getting.map(([icon, h, sub]) => (
                <div key={h} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <Icon name={icon} size={19} color="var(--teal-700)" style={{ flex: 'none', marginTop: 2 }} />
                  <div>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 700, color: 'var(--ink-900)' }}>{h}. </span>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'var(--ink-500)' }}>{sub}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}
window.Locations = Locations;