import { render, screen } from '@testing-library/react';

import { HeroDashboardMockup } from './HeroDashboardMockup';

describe('HeroDashboardMockup', () => {
  it('renders with accessible role and label', () => {
    render(<HeroDashboardMockup />);
    expect(screen.getByRole('img')).toBeInTheDocument();
    expect(screen.getByRole('img')).toHaveAttribute(
      'aria-label',
      expect.stringContaining('RankWiz dashboard preview'),
    );
  });

  it('shows the traffic chart label', () => {
    render(<HeroDashboardMockup />);
    expect(screen.getByText('Weekly Clicks')).toBeInTheDocument();
  });

  it('shows the positive traffic delta', () => {
    // In test env, matchMedia returns matches:false (not reduced motion)
    // and IntersectionObserver mock never fires, so counter starts at 0
    // We verify the element renders with the percentage format
    render(<HeroDashboardMockup />);
    expect(screen.getByText(/\+\d+% ↑/)).toBeInTheDocument();
  });

  it('shows the recommendations panel', () => {
    render(<HeroDashboardMockup />);
    expect(screen.getByText('AI Recommendations')).toBeInTheDocument();
    expect(screen.getByText('Content Rewrite')).toBeInTheDocument();
    expect(screen.getByText('Meta Tag Update')).toBeInTheDocument();
  });

  it('shows priority badges', () => {
    render(<HeroDashboardMockup />);
    expect(screen.getByText('High')).toBeInTheDocument();
    expect(screen.getByText('Medium')).toBeInTheDocument();
  });

  it('accepts a custom className', () => {
    const { container } = render(<HeroDashboardMockup className="test-class" />);
    expect(container.firstChild).toHaveClass('test-class');
  });
});