function LocationsSection({ onBook, compact = false }) {
  return (
    <section id="locations" style={{ background: 'var(--ink-900)', color: 'var(--fg-on-dark)', padding: compact ? '72px 0' : '96px 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 24px' }}>
        <div className="overline" style={{ marginBottom: 14, color: 'var(--lavender-300)' }}>Visit a Clinic</div>
        <h2 style={{ font: 'var(--t-h1)', color: 'white', margin: '0 0 12px', maxWidth: 720 }}>
          Three clinics across South Gujarat.
        </h2>
        <p style={{ font: 'var(--t-body-lg)', color: 'rgba(245,240,250,0.75)', maxWidth: 640, margin: '0 0 36px' }}>
          Sagrampura is the flagship — full diagnostics and rTMS. New Citylight runs evening consultancy hours. Our Valsad super-speciality clinic extends the practice into Abrama Village.
        </p>
        <div className="loc-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {LOCATIONS.map(l => <LocationCard key={l.id} l={l} dark/>)}
        </div>
        <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <Button variant="onDark" onClick={onBook}>Book an Appointment</Button>
          <Link to="locations" style={{ font: 'var(--t-button)', color: 'var(--lavender-300)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '14px 18px' }}>
            See all locations <ArrowRight size={14}/>
          </Link>
        </div>
        <style>{`
          @media (max-width: 880px) { .loc-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function LocationCard({ l, dark, full }) {
  const surface = dark ? 'rgba(255,255,255,0.04)' : 'white';
  const border = dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--hairline-cool)';
  const labelColor = dark ? 'var(--lavender-300)' : 'var(--lavender-600)';
  const subColor = dark ? 'rgba(245,240,250,0.7)' : 'var(--fg-2)';
  const headColor = dark ? 'white' : 'var(--violet-700)';
  return (
    <div style={{
      background: surface, border, borderRadius: 'var(--radius-lg)', padding: l.photo ? 0 : 28,
      display: 'flex', flexDirection: 'column', gap: 0, overflow: 'hidden',
    }}>
      {l.photo && (
        <div style={{ height: 180, overflow: 'hidden', position: 'relative' }}>
          <img src={l.photo} alt={l.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
        </div>
      )}
      <div style={{ padding: l.photo ? 28 : 0, display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6, flexWrap: 'wrap' }}>
        <div style={{ font: '600 26px/1.2 var(--font-display)', color: headColor }}>{l.name}</div>
        {l.flagship && (
          <span style={{ font: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--saffron-500)', background: 'rgba(254,106,46,0.12)', padding: '3px 10px', borderRadius: 9999 }}>Flagship</span>
        )}
        {l.city && l.city !== 'Surat' && (
          <span style={{ font: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--teal-600)', background: 'rgba(5,124,139,0.12)', padding: '3px 10px', borderRadius: 9999 }}>{l.city}</span>
        )}
      </div>
      <div style={{ font: 'var(--t-body-sm)', fontStyle: 'italic', color: labelColor, marginBottom: 14 }}>{l.sub}</div>

      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 18, color: dark ? 'rgba(245,240,250,0.85)' : 'var(--ink-700)', font: 'var(--t-body-sm)', lineHeight: 1.55 }}>
        <span style={{ color: labelColor, marginTop: 2, flex: '0 0 auto' }}><PinIcon size={14}/></span>
        <div>
          {(l.addrLines || [l.addr]).map((line, i) => (
            <div key={i}>{line}</div>
          ))}
        </div>
      </div>

      <div style={{ font: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: labelColor, marginBottom: 6 }}>Hours</div>
      {l.hours.map(h => (
        <div key={h.d} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, font: 'var(--t-body-sm)', color: dark ? 'white' : 'var(--ink-900)', marginBottom: 4, fontFeatureSettings: '"tnum"' }}>
          <span style={{ color: subColor }}>{h.d}</span>
          <span style={{ textAlign: 'right' }}>{h.t}</span>
        </div>
      ))}

      <div style={{ marginTop: 16, paddingTop: 16, borderTop: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'var(--hairline-cool)'}` }}>
        <div style={{ font: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: labelColor, marginBottom: 8 }}>Contact</div>
        {(typeof CONTACT_NUMBERS !== 'undefined' ? CONTACT_NUMBERS : []).filter(c => l.id === 'sagrampura' ? true : c.label === 'Appointments').map(c => (
          <div key={c.label} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, font: 'var(--t-body-sm)', marginBottom: 4 }}>
            <span style={{ color: subColor }}>{c.label}</span>
            <a href={`tel:${c.number.replace(/\s/g, '')}`} style={{ color: dark ? 'white' : 'var(--ink-900)', fontFeatureSettings: '"tnum"', textDecoration: 'none' }}>{c.number}</a>
          </div>
        ))}
      </div>

      {full && (
        <React.Fragment>
          <div style={{ marginTop: 16 }}>
            <div style={{ font: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: labelColor, marginBottom: 8 }}>Services</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {l.services.map(s => (
                <span key={s} style={{
                  font: 'var(--t-caption)', padding: '4px 10px', borderRadius: 9999,
                  background: dark ? 'rgba(255,255,255,0.06)' : 'var(--bg-soft)',
                  color: dark ? 'white' : 'var(--ink-700)',
                  border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--hairline-cool)',
                }}>{s}</span>
              ))}
            </div>
          </div>
          {/* Google Maps embed */}
          <div style={{
            marginTop: 18, height: 200, borderRadius: 'var(--radius-md)',
            border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--hairline-cool)',
            overflow: 'hidden', position: 'relative',
            background: dark ? 'rgba(255,255,255,0.04)' : 'var(--bg-soft)',
          }}>
            <iframe
              title={`Map of ${l.name}`}
              src={`https://www.google.com/maps?q=${encodeURIComponent(l.mapQuery || (l.addrLines || []).join(', '))}&output=embed`}
              style={{ width: '100%', height: '100%', border: 0, display: 'block', filter: dark ? 'invert(0.9) hue-rotate(180deg) saturate(0.8)' : 'none' }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
            <a
              href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(l.mapQuery || (l.addrLines || []).join(', '))}`}
              target="_blank" rel="noreferrer"
              style={{
                position: 'absolute', bottom: 10, right: 10,
                font: 'var(--t-caption)', fontWeight: 600,
                background: dark ? 'rgba(20,16,30,0.85)' : 'white',
                color: dark ? 'white' : 'var(--violet-700)',
                padding: '6px 12px', borderRadius: 9999, textDecoration: 'none',
                border: dark ? '1px solid rgba(255,255,255,0.12)' : '1px solid var(--hairline-cool)',
                boxShadow: 'var(--shadow-sm)',
              }}
            >Open in Maps ↗</a>
          </div>
        </React.Fragment>
      )}
      </div>
    </div>
  );
}

window.LocationsSection = LocationsSection;
window.LocationCard = LocationCard;