function EquipmentSection({ compact = false }) {
  return (
    <section id="diagnostics" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: compact ? '72px 24px' : '96px 24px' }}>
      <div className="overline" style={{ marginBottom: 14 }}>Advanced Diagnostics</div>
      <h2 style={{ font: 'var(--t-h1)', color: 'var(--violet-700)', margin: '0 0 12px', maxWidth: 720 }}>
        Equipment usually found at tertiary centres — under one roof.
      </h2>
      <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 0 56px' }}>
        Investments made over the past two decades to bring tertiary-grade diagnostics and treatment to an outpatient setting.
      </p>
      <FeatureRow
        image="assets/rtms-device.png"
        eyebrow="rTMS · Sagrampura clinic"
        title="Repetitive Transcranial Magnetic Stimulation"
        body="A non-invasive, FDA-approved treatment for treatment-resistant depression. Sessions are typically 30–40 minutes; a course runs 20–30 sessions over four to six weeks."
        bullets={['No anaesthesia required', 'Outpatient — drive home same day', 'Course of 20–30 sessions']}
      />
      <FeatureRow
        reverse
        image="assets/sleep-lab.png"
        eyebrow="Sleep Lab · Sagrampura clinic"
        title="In-house polysomnography"
        body="Overnight sleep studies for diagnosing apnoea, insomnia and parasomnias — interpreted by our neurology team. Private sleep room with attendant."
        bullets={['SOMNOscreen-plus device', 'Private sleep room', 'CPAP titration available']}
      />
    </section>
  );
}

function FeatureRow({ image, eyebrow, title, body, bullets, reverse }) {
  return (
    <div className="feat-row" style={{
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 56,
      alignItems: 'center',
      marginBottom: 64,
      direction: reverse ? 'rtl' : 'ltr',
    }}>
      <div style={{
        aspectRatio: '4/3',
        borderRadius: 'var(--radius-xl)',
        overflow: 'hidden',
        background: 'linear-gradient(135deg, #F2EEF7 0%, #E8E2DA 100%)',
        boxShadow: 'var(--shadow-md)',
        position: 'relative',
        display: 'grid',
        placeItems: 'center',
      }}>
        {image ? (
          <img src={image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        ) : (
          <div style={{ direction: 'ltr', textAlign: 'center', padding: 32, color: 'var(--lavender-600)', font: 'var(--t-caption)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(123,94,167,0.12)', margin: '0 auto 14px', display: 'grid', placeItems: 'center' }}>
              <ConditionIcon name="eye" family="teal" size={28}/>
            </div>
            Equipment photo placeholder
          </div>
        )}
      </div>
      <div style={{ direction: 'ltr' }}>
        <div className="overline" style={{ marginBottom: 10 }}>{eyebrow}</div>
        <h3 style={{ font: 'var(--t-h2)', color: 'var(--violet-700)', margin: '0 0 16px', textWrap: 'balance' }}>{title}</h3>
        <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', margin: '0 0 22px' }}>{body}</p>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {bullets.map(b => (
            <li key={b} style={{ display: 'flex', gap: 12, alignItems: 'center', font: 'var(--t-body)', color: 'var(--ink-900)' }}>
              <img src="assets/icons/checkmark.svg" style={{ width: 20, height: 20 }} alt="" />
              {b}
            </li>
          ))}
        </ul>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .feat-row { grid-template-columns: 1fr !important; gap: 28px !important; direction: ltr !important; }
        }
      `}</style>
    </div>
  );
}

window.EquipmentSection = EquipmentSection;