function DoctorsSection({ compact = false }) {
  const [filter, setFilter] = React.useState('All');
  const tabs = ['All', 'Psychiatry', 'Neurology', 'Ophthalmology', 'Psychology'];
  const list = filter === 'All' ? DOCTORS : DOCTORS.filter(d => d.specialty === filter);
  return (
    <section id="doctors" style={{ background: 'var(--bg-soft)', padding: compact ? '72px 0' : '96px 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 24px' }}>
        <div className="overline" style={{ marginBottom: 14 }}>Our Specialists</div>
        <h2 style={{ font: 'var(--t-h1)', color: 'var(--violet-700)', margin: '0 0 12px', maxWidth: 760 }}>
          Two generations of the Desai family practice.
        </h2>
        <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 0 28px' }}>
          Practitioners listed below see patients across our three Surat clinics. Click any name for credentials and clinic days.
        </p>

        {!compact && (
          <div style={{ display: 'flex', gap: 4, marginBottom: 24, borderBottom: '1px solid var(--hairline)', flexWrap: 'wrap' }}>
            {tabs.map(t => {
              const active = t === filter;
              return (
                <button key={t} onClick={() => setFilter(t)} style={{
                  background: 'transparent', border: 'none',
                  padding: '14px 6px', marginRight: 18, cursor: 'pointer',
                  fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14,
                  color: active ? 'var(--violet-700)' : 'var(--fg-2)',
                  borderBottom: active ? '2px solid var(--violet-700)' : '2px solid transparent',
                  marginBottom: -1,
                }}>{t}</button>
              );
            })}
          </div>
        )}

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
          gap: 16,
        }}>
          {(compact ? DOCTORS : list).map(d => <DoctorCard key={d.id} d={d}/>)}
        </div>
      </div>
    </section>
  );
}

function DoctorCard({ d }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Link
      to={'doctor/' + d.id}
      style={{
        background: 'white',
        borderRadius: 'var(--radius-lg)',
        padding: 24,
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        transition: 'transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)',
        display: 'flex', gap: 18, alignItems: 'flex-start',
        textDecoration: 'none', color: 'inherit',
      }}
      onClick={() => {}}
    >
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'contents' }}/>
      <div style={{
        width: 72, height: 72, borderRadius: '50%', flex: '0 0 auto',
        background: d.g,
        boxShadow: 'inset 0 0 0 4px rgba(255,255,255,0.5)',
        overflow: 'hidden',
        position: 'relative',
      }}>
        {d.photo && (
          <img src={d.photo} alt={d.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}/>
        )}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: '600 20px/1.25 var(--font-display)', color: 'var(--violet-700)', marginBottom: 4 }}>{d.name}</div>
        <div style={{ font: 'var(--t-body-sm)', color: 'var(--fg-2)', marginBottom: 8 }}>{d.role}</div>
        <div style={{ font: 11, fontFamily: 'var(--font-body)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--lavender-600)', marginBottom: 12 }}>{d.degrees}</div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {d.locations.map(l => (
            <span key={l} style={{
              font: 'var(--t-caption)',
              padding: '4px 10px',
              borderRadius: 9999,
              background: 'var(--bg-soft)',
              color: 'var(--ink-700)',
              border: '1px solid var(--hairline-cool)',
            }}>{l}</span>
          ))}
        </div>
      </div>
    </Link>
  );
}

window.DoctorsSection = DoctorsSection;
window.DoctorCard = DoctorCard;