function ConditionsIndex({ compact = false, limit }) {
  const [filter, setFilter] = React.useState('All');
  const tabs = ['All', 'Psychiatry', 'Neurology', 'Ophthalmology', 'Sleep Medicine', 'De-Addiction'];
  const all = Object.entries(CONDITIONS).map(([id, c]) => ({ id, ...c }));
  let items = filter === 'All' ? all : all.filter(c => c.specialty === filter);
  if (limit) items = items.slice(0, limit);

  return (
    <section id="conditions" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: compact ? '72px 24px' : '96px 24px' }}>
      <div className="overline" style={{ marginBottom: 14 }}>Conditions We Treat</div>
      <h2 style={{ font: 'var(--t-h1)', color: 'var(--violet-700)', margin: '0 0 12px', maxWidth: 760 }}>
        {compact ? 'A range of conditions, treated as connected disciplines.' : 'Conditions treated across our five specialties.'}
      </h2>
      <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 0 28px' }}>
        Below are the most common reasons patients come to Prashanti Clinic. Each links to a brief description and the specialists who treat it.
      </p>

      <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,
              transition: 'color var(--dur) var(--ease)',
            }}>{t}</button>
          );
        })}
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
        gap: 14,
      }}>
        {items.map(c => <ConditionTile key={c.id} c={c}/>)}
      </div>
    </section>
  );
}

function ConditionTile({ c }) {
  const [hover, setHover] = React.useState(false);
  const isTeal = c.family === 'teal';
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'white',
        borderRadius: 'var(--radius-lg)',
        padding: 22,
        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', flexDirection: 'column', gap: 12,
      }}
    >
      <div style={{
        width: 44, height: 44,
        borderRadius: 12,
        background: isTeal ? 'rgba(5,124,139,0.10)' : 'rgba(254,106,46,0.10)',
        display: 'grid', placeItems: 'center',
      }}>
        <ConditionIcon name={c.ico} family={c.family} size={24} />
      </div>
      <div>
        <div style={{ font: 'var(--t-h4)', color: 'var(--ink-900)', marginBottom: 4 }}>{c.name}</div>
        <div style={{ font: 'var(--t-caption)', color: isTeal ? 'var(--teal-600)' : 'var(--lavender-600)', marginBottom: 10, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{c.specialty}</div>
        <p style={{ font: 'var(--t-body-sm)', color: 'var(--fg-2)', margin: 0, lineHeight: 1.6 }}>{c.desc}</p>
      </div>
    </div>
  );
}

window.ConditionsIndex = ConditionsIndex;