function SpecialtiesOverview({ density = 'balanced' }) {
  return (
    <section id="specialties-overview" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '96px 24px' }}>
      <div className="overline" style={{ marginBottom: 14 }}>Five Specialties</div>
      <h2 style={{ font: 'var(--t-h1)', color: 'var(--violet-700)', margin: '0 0 12px', maxWidth: 760 }}>
        A practice spanning the connected disciplines of mind, brain and vision.
      </h2>
      <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 0 40px' }}>
        Each specialty stands on its own and refers freely to the others — so a patient with overlapping concerns is treated by one team, not three.
      </p>

      <div className="spec-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 16,
      }}>
        {SPECIALTIES.map(s => (
          <SpecialtyCard key={s.id} s={s} density={density} />
        ))}
      </div>
      <style>{`
        @media (max-width: 980px) { .spec-grid { grid-template-columns: repeat(2,1fr) !important; } }
        @media (max-width: 600px) { .spec-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function SpecialtyCard({ s, density }) {
  const [hover, setHover] = React.useState(false);
  const isTeal = s.family === 'teal';
  return (
    <Link
      to={'specialty/' + s.id}
      style={{
        background: 'white',
        borderRadius: 'var(--radius-lg)',
        padding: density === 'dense' ? 22 : 28,
        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: 14,
        textDecoration: 'none',
        color: 'inherit',
        minHeight: density === 'dense' ? 220 : 280,
      }}
      onClick={() => {}}
    >
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ display: 'contents' }}
      />
      <div style={{
        width: 56, height: 56,
        borderRadius: 14,
        background: isTeal ? 'rgba(5,124,139,0.10)' : 'rgba(254,106,46,0.10)',
        display: 'grid', placeItems: 'center',
      }}>
        <ConditionIcon name={s.conditions[0]} family={s.family} size={30} />
      </div>
      <div>
        <div style={{
          font: 'var(--t-h3)',
          fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26,
          color: 'var(--violet-700)',
          marginBottom: 6,
        }}>{s.name}</div>
        <div style={{ font: 'var(--t-body-sm)', color: isTeal ? 'var(--teal-600)' : 'var(--lavender-600)', marginBottom: 10, fontStyle: 'italic' }}>{s.tagline}</div>
        <p style={{ font: 'var(--t-body-sm)', color: 'var(--fg-2)', margin: 0, lineHeight: 1.6 }}>{s.summary}</p>
      </div>
      <div style={{ marginTop: 'auto', paddingTop: 14, font: 'var(--t-button)', color: 'var(--violet-700)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        Learn more <ArrowRight size={14}/>
      </div>
    </Link>
  );
}

window.SpecialtiesOverview = SpecialtiesOverview;