feat(component): EraComparison — Side-by-Side Era Analysis

[bntvllnt]

Summary

Side-by-side comparison of historical eras showing parallel developments across domains (art, science, politics, technology). Structured comparison for educational analysis.

Proposed API

<EraComparison>
  <EraColumn
    name="Renaissance"
    period="1400-1600"
    region="Europe"
    color="amber"
  >
    <EraDomain name="Art">
      <EraHighlight>Perspective painting, humanism</EraHighlight>
      <EraFigure name="Leonardo da Vinci" />
      <EraFigure name="Michelangelo" />
    </EraDomain>
    <EraDomain name="Science">
      <EraHighlight>Heliocentrism, anatomy</EraHighlight>
      <EraFigure name="Copernicus" />
      <EraFigure name="Galileo" />
    </EraDomain>
    <EraDomain name="Technology">
      <EraHighlight>Printing press, navigation</EraHighlight>
    </EraDomain>
  </EraColumn>

  <EraColumn
    name="Islamic Golden Age"
    period="800-1400"
    region="Middle East"
    color="emerald"
  >
    <EraDomain name="Art">
      <EraHighlight>Geometric patterns, calligraphy</EraHighlight>
    </EraDomain>
    <EraDomain name="Science">
      <EraHighlight>Algebra, optics, astronomy</EraHighlight>
      <EraFigure name="Al-Khwarizmi" />
      <EraFigure name="Ibn al-Haytham" />
    </EraDomain>
  </EraColumn>
</EraComparison>

Requirements

• 2-4 era columns side-by-side
• Domain rows aligned across columns (Art | Science | Tech | Politics)
• Key figures with links to HistoricalFigureCard (feat(component): HistoricalFigureCard #67)
• Highlight achievements per domain
• Timeline overlap visualization
• Color coding per era
• Responsive: tabs on mobile
• Printable layout
• Composes: Card, Badge, Comparison (existing)

Educational Use Cases

• Compare Renaissance vs Enlightenment
• East vs West parallel developments
• Ancient vs Medieval vs Modern domains
• Thematic comparison across cultures