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

describe('<PuntosInflexion />', () => {
  it('renders the section title', () => {
    render(<PuntosInflexion />);
    expect(screen.getByText(/llegan a un punto de inflexión/i)).toBeInTheDocument();
  });
  it('renders the six inflection points from the dueña deck', () => {
    render(<PuntosInflexion />);
    // Each point renders twice in the markup — once in the mobile carousel,
    // once in the desktop grid — with CSS `hidden`/`md:` toggling which one
    // is actually visible at a given breakpoint.
    for (const name of ['Crecer', 'Consolidarse', 'Recuperar rentabilidad', 'Simplificar', 'Expandirse', 'Replantear el portafolio']) {
      expect(screen.getAllByText(name).length).toBeGreaterThanOrEqual(1);
    }
    expect(screen.getAllByRole('listitem')).toHaveLength(6);
  });
  it('does NOT introduce scarcity', () => {
    const { container } = render(<PuntosInflexion />);
    expect(container.textContent).not.toMatch(/cupos|cohorte|generación fundadora/i);
  });
});