interface Screen1RulesProps {
  onPlay: () => void;
}

export function Screen1Rules({ onPlay }: Screen1RulesProps) {
  return (
    <div style={{ maxWidth: '400px', margin: '40px auto', padding: '16px', fontFamily: 'sans-serif' }}>
      <h1 style={{ textAlign: 'center', fontSize: '2rem', marginBottom: '24px' }}>Wordle</h1>

      <h2 style={{ fontSize: '1.2rem', marginBottom: '8px' }}>How to Play</h2>
      <ul style={{ lineHeight: '1.8', paddingLeft: '20px' }}>
        <li>Guess the <strong>5-letter word</strong> in <strong>6 attempts</strong>.</li>
        <li>After each guess, letters light up with colors:</li>
      </ul>

      <div style={{ display: 'flex', gap: '8px', margin: '12px 0' }}>
        <div style={{ width: '40px', height: '40px', backgroundColor: '#6aaa64', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', borderRadius: '4px' }}>G</div>
        <span style={{ lineHeight: '40px' }}>Green — correct letter, correct position</span>
      </div>
      <div style={{ display: 'flex', gap: '8px', margin: '12px 0' }}>
        <div style={{ width: '40px', height: '40px', backgroundColor: '#c9b458', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', borderRadius: '4px' }}>Y</div>
        <span style={{ lineHeight: '40px' }}>Yellow — letter in word, wrong position</span>
      </div>
      <div style={{ display: 'flex', gap: '8px', margin: '12px 0' }}>
        <div style={{ width: '40px', height: '40px', backgroundColor: '#787c7e', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', borderRadius: '4px' }}>X</div>
        <span style={{ lineHeight: '40px' }}>Gray — letter not in word</span>
      </div>

      <div style={{ textAlign: 'center', marginTop: '32px' }}>
        <button
          onClick={onPlay}
          style={{
            padding: '12px 48px',
            fontSize: '1.1rem',
            fontWeight: 'bold',
            backgroundColor: '#6aaa64',
            color: '#fff',
            border: 'none',
            borderRadius: '8px',
            cursor: 'pointer',
          }}
        >
          Play
        </button>
      </div>
    </div>
  );
}
