function FamilyHistory() {
  return (
    <section style={{ background: 'var(--bg-soft)', padding: '96px 0' }}>
      <div className="hist-grid" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 24px',
        display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div className="overline" style={{ marginBottom: 14 }}>The Desai Family Practice</div>
          <h2 style={{ font: 'var(--t-h1)', color: 'var(--violet-700)', margin: '0 0 20px', textWrap: 'balance' }}>
            Six decades of medical practice in South Gujarat.
          </h2>
          <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', margin: '0 0 16px' }}>
            The Prashant family has been associated with the medical profession since 1962, with the launch of South Gujarat's first private mental hospital.
          </p>
          <p style={{ font: 'var(--t-body)', color: 'var(--fg-2)', margin: 0, lineHeight: 1.7 }}>
            Today, the third generation continues that practice across three Surat clinics, joined by neurology and ophthalmology under the same roof.
          </p>
          <div style={{ marginTop: 18, padding: '10px 14px', background: 'rgba(254,106,46,0.08)', borderRadius: 8, font: 'var(--t-caption)', color: 'var(--saffron-500)', display: 'inline-block', letterSpacing: '0.04em' }}>
            Placeholder timeline — please supply verified milestones.
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, position: 'relative', paddingLeft: 24 }}>
          <div style={{ position: 'absolute', left: 7, top: 8, bottom: 8, width: 2, background: 'var(--lavender-300)' }}/>
          {[
            ['1962', '[Founding milestone — to be confirmed.]'],
            ['19XX', '[Second-generation milestone — to be confirmed.]'],
            ['20XX', '[Ophthalmology added — date to be confirmed.]'],
            ['20XX', '[Neurology service launched — date to be confirmed.]'],
            ['20XX', '[rTMS introduced — date to be confirmed.]'],
          ].map(([y, t]) => (
            <div key={y + t} style={{ position: 'relative', padding: '14px 0' }}>
              <div style={{ position: 'absolute', left: -21, top: 18, width: 12, height: 12, borderRadius: '50%', background: 'var(--lavender-500)', border: '2px solid var(--bg-soft)' }}/>
              <div style={{ font: 'var(--t-h4)', fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--violet-700)', fontFeatureSettings: '"tnum"' }}>{y}</div>
              <div style={{ font: 'var(--t-body-sm)', color: 'var(--fg-2)', marginTop: 4, lineHeight: 1.55 }}>{t}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .hist-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
      `}</style>
    </section>
  );
}

window.FamilyHistory = FamilyHistory;