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

describe('<ComoEmpezar />', () => {
  it('renders the on-ramp steps', () => {
    render(<ComoEmpezar />);
    expect(screen.getByText('Escríbeme')).toBeInTheDocument();
    expect(screen.getByText('Sesión de diagnóstico')).toBeInTheDocument();
  });
  it('links the CTA to WhatsApp with a prefilled message', () => {
    render(<ComoEmpezar />);
    const cta = screen.getByRole('link', { name: /Agenda tu sesión de diagnóstico/i });
    const href = cta.getAttribute('href') ?? '';
    expect(href).toMatch(/^https:\/\/wa\.me\//);
    expect(href).toContain('text=');
  });
  it('renders the sunrise photo panel as decorative, not real content', () => {
    const { container } = render(<ComoEmpezar />);
    const img = container.querySelector('img');
    // next/image rewrites `src` through its loader in this test environment;
    // the static export (images.unoptimized: true) serves the plain path.
    expect(img?.getAttribute('src')).toContain('comoempezar-bg.jpg');
    expect(img).toHaveAttribute('alt', '');
  });

  it('keeps all three steps readable without interaction', () => {
    const { container } = render(<ComoEmpezar />);
    // The steps used to sit at opacity-40 until the reader hovered or the
    // autoplay reached them, which made two of every three illegible.
    expect(container.innerHTML).not.toContain('opacity-40');
  });

  it('presents the steps as content, not as controls', () => {
    render(<ComoEmpezar />);
    // Without autoplay there is nothing to steer, so the steps stop being
    // buttons and go back to being a plain ordered list.
    expect(screen.queryAllByRole('button')).toHaveLength(0);
  });
});