import { render, screen, act } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach, afterEach } 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', '');
  });

  describe('auto-advancing step highlight', () => {
    beforeEach(() => { vi.useFakeTimers(); });
    afterEach(() => { vi.useRealTimers(); });

    it('highlights the first step by default, then advances on its own', () => {
      render(<ComoEmpezar />);
      const first = screen.getByText('Escríbeme').closest('button');
      const second = screen.getByText('Sesión de diagnóstico').closest('button');
      expect(first).toHaveAttribute('aria-pressed', 'true');
      act(() => { vi.advanceTimersByTime(3300); });
      expect(second).toHaveAttribute('aria-pressed', 'true');
    });
  });
});