import './HelpCenter.css'

const helpCards = [
  {
    emoji: '🚗',
    title: 'Lectura global',
    steps: [
      'Mira la imagen grande y di la palabra en voz alta.',
      'Toca la palabra correcta entre las opciones para relacionar palabra-imagen.',
      'Activa “Modo ráfaga” para repasar rápidamente y agrega favoritas para repetirlas más tarde.',
    ],
  },
  {
    emoji: '🔤',
    title: 'Fonética Montessori',
    steps: [
      'Elige un fonema y haz el gesto Montessori con la boca/manos.',
      'Combínalo con vocales para crear sílabas y arrástralas al circuito (botón “Agregar al circuito”).',
      'Usa “Reto relámpago” para mezclar sonidos sorpresa y repetirlos con autos imaginarios.',
    ],
  },
  {
    emoji: '📚',
    title: 'Historias Reggio',
    steps: [
      'Selecciona un cuento, lee el escenario y genera prompts para Gemini (texto + imagen).',
      'Guarda notas de lo que dice el niño y formula preguntas Reggio (“¿Por qué...?”).',
      'Marca “Listo para Milo” cuando la historia esté aprobada y usa las preguntas para conversar.',
    ],
  },
]

export function HelpCenter() {
  return (
    <section className="help-center" aria-labelledby="ayuda-heading">
      <div className="help-header">
        <div>
          <p className="badge secondary">Centro de ayuda</p>
          <h2 id="ayuda-heading">¿Cómo jugamos?</h2>
          <p className="help-text">
            Breve guía para adultos y peques: cada módulo mezcla lectura global, fonética Montessori
            y conversación Reggio para que Milo aprenda jugando.
          </p>
        </div>
        <span className="helper-emoji" role="img" aria-label="Guía">
          🧠✨
        </span>
      </div>
      <div className="help-grid">
        {helpCards.map((card) => (
          <article key={card.title} className="help-card">
            <div className="help-card-head">
              <span className="help-icon" aria-hidden>
                {card.emoji}
              </span>
              <h3>{card.title}</h3>
            </div>
            <ul>
              {card.steps.map((step) => (
                <li key={step}>{step}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </section>
  )
}
