import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { IlustracionInflexion } from '../IlustracionInflexion';

describe('<IlustracionInflexion />', () => {
  it('is decorative: hidden from assistive tech', () => {
    const { container } = render(<IlustracionInflexion />);
    const svg = container.querySelector('svg');
    expect(svg).toHaveAttribute('aria-hidden', 'true');
    expect(svg).toHaveAttribute('focusable', 'false');
  });

  it('shares the unified canvas with the other scene illustrations', () => {
    const { container } = render(<IlustracionInflexion />);
    expect(container.querySelector('svg')).toHaveAttribute('viewBox', '0 0 220 120');
  });

  it('is a single bend at the inflection point, not a fork', () => {
    const { container } = render(<IlustracionInflexion />);
    // The previous version drew three diverging paths (growth / drift /
    // strategy) — the same fork as ParaQuien. The rework is one continuous
    // line that bends at the point: two segments, pre- and post-inflection.
    expect(container.querySelectorAll('path')).toHaveLength(2);
  });

  it('marks the inflection point itself', () => {
    const { container } = render(<IlustracionInflexion />);
    expect(container.querySelectorAll('circle').length).toBeGreaterThanOrEqual(1);
  });

  it('bends from the present (azul) into clarity (dorado)', () => {
    const { container } = render(<IlustracionInflexion />);
    const clases = Array.from(container.querySelectorAll('path')).map((p) => p.getAttribute('class') ?? '');
    expect(clases.some((c) => c.includes('text-azul-profundo'))).toBe(true);
    expect(clases.some((c) => c.includes('text-dorado'))).toBe(true);
  });
});