const preguntas = [
    {
      tipo: 'Escolla múltiple',
      texto: 'En que século comezou a Idade Media?',
      opcionA: 'Século V',
      opcionB: 'Século XV',
      opcionC: 'Século X'
    },
    {
      tipo: 'Completar',
      texto: 'Os reis e raíñas vivían nos __________.'
    },
    {
      tipo: 'Verdadeiro ou falso',
      texto: 'Os castelos servían para defender as cidades.'
    },
    {
      tipo: 'Relacionar',
      texto: 'Relaciona cada grupo social coa súa función.'
    },
    {
      tipo: 'Resposta curta',
      texto: 'Como se chamaba o camiño de peregrinación máis importante de España?'
    },
    {
      tipo: 'Observación',
      texto: 'Debuxa un elemento típico dunha catedral gótica.'
    },
    {
      tipo: 'Escolla múltiple',
      texto: 'Que pobo musulmán chegou á Península Ibérica no ano 711?',
      opcionA: 'Romanos',
      opcionB: 'Visigodos',
      opcionC: 'Árabes'
    },
    {
      tipo: 'Completar',
      texto: 'Os artesáns traballaban nos __________.'
    },
    {
      tipo: 'Resposta curta',
      texto: 'Escribe o nome dun rei ou raíña importante da Idade Media en España.'
    },
    {
      tipo: 'Creativa',
      texto: 'Imagina que vives nun castelo medieval. Que oficio terías?'
    }
  ];

  return (
    <div className="bg-gray-100 min-h-screen flex justify-center p-4">
      <div
        className="bg-white shadow-2xl rounded-3xl p-8 w-[210mm] min-h-[297mm] text-gray-800"
        style={{ fontFamily: 'Arial, sans-serif' }}
      >
        <header className="border-b-4 border-amber-600 pb-4 mb-6">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-4xl font-bold text-amber-700 mb-2">
                A IDADE MEDIA EN ESPAÑA
              </h1>
              <p className="text-lg">
                Ficha interactiva · 5º de Primaria
              </p>
            </div>

            <div className="bg-amber-100 rounded-2xl p-4 text-center border-2 border-amber-400 w-40">
              <div className="text-5xl">🏰</div>
              <p className="font-bold mt-2">Visual Thinking</p>
            </div>
          </div>

          <div className="mt-4 flex gap-6 text-sm">
            <div>
              <strong>Nome:</strong> ___________________
            </div>
            <div>
              <strong>Data:</strong> ___________________
            </div>
          </div>
        </header>

        <section className="grid grid-cols-3 gap-4 mb-8">
          <div className="bg-blue-50 border-2 border-blue-300 rounded-2xl p-4 text-center">
            <div className="text-5xl mb-2">⚔️</div>
            <h2 className="font-bold text-lg">Cabaleiros</h2>
            <p className="text-sm">Defendían os castelos e ao rei.</p>
          </div>

          <div className="bg-green-50 border-2 border-green-300 rounded-2xl p-4 text-center">
            <div className="text-5xl mb-2">⛪</div>
            <h2 className="font-bold text-lg">Catedrais</h2>
            <p className="text-sm">Grandes edificios relixiosos medievais.</p>
          </div>

          <div className="bg-red-50 border-2 border-red-300 rounded-2xl p-4 text-center">
            <div className="text-5xl mb-2">👑</div>
            <h2 className="font-bold text-lg">Reis e raíñas</h2>
            <p className="text-sm">Gobernaban os reinos medievais.</p>
          </div>
        </section>

        <section>
          <h2 className="text-2xl font-bold text-amber-700 mb-4">
            Responde ás preguntas
          </h2>

          <div className="space-y-5">
            {preguntas.map((pregunta, index) => (
              <div
                key={index}
                className="border-2 border-gray-300 rounded-2xl p-4 bg-gray-50"
              >
                <div className="flex items-center gap-3 mb-2">
                  <div className="bg-amber-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold">
                    {index + 1}
                  </div>
                  <div>
                    <span className="text-sm bg-amber-100 text-amber-800 px-2 py-1 rounded-full font-semibold">
                      {pregunta.tipo}
                    </span>
                  </div>
                </div>

                <p className="text-lg font-medium mb-3">{pregunta.texto}</p>

                {pregunta.opcionA && (
                  <div className="space-y-2 ml-3 text-base">
                    <div>⬜ {pregunta.opcionA}</div>
                    <div>⬜ {pregunta.opcionB}</div>
                    <div>⬜ {pregunta.opcionC}</div>
                  </div>
                )}

                {pregunta.tipo === 'Verdadeiro ou falso' && (
                  <div className="flex gap-8 ml-3 text-base">
                    <div>⬜ Verdadeiro</div>
                    <div>⬜ Falso</div>
                  </div>
                )}

                {pregunta.tipo === 'Relacionar' && (
                  <div className="grid grid-cols-2 gap-4 mt-3 text-base">
                    <div className="bg-white p-3 rounded-xl border">
                      <p>👑 Nobreza</p>
                      <p>🙏 Clero</p>
                      <p>🌾 Campesiños</p>
                    </div>
                    <div className="bg-white p-3 rounded-xl border">
                      <p>___ Traballaban no campo</p>
                      <p>___ Rezaban e ensinaban</p>
                      <p>___ Gobernaban e loitaban</p>
                    </div>
                  </div>
                )}

                {(pregunta.tipo === 'Resposta curta' ||
                  pregunta.tipo === 'Completar' ||
                  pregunta.tipo === 'Creativa') && (
                  <div className="mt-3 space-y-2">
                    <div className="border-b border-gray-500 h-6"></div>
                    <div className="border-b border-gray-300 h-6"></div>
                  </div>
                )}

                {pregunta.tipo === 'Observación' && (
                  <div className="mt-4 border-2 border-dashed border-gray-400 rounded-2xl h-32 flex items-center justify-center bg-white">
                    <div className="text-center text-gray-500">
                      <div className="text-4xl">✏️</div>
                      <p>Espazo para debuxar</p>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>

        <footer className="mt-8 border-t-4 border-amber-600 pt-4 flex justify-between items-center">
          <div>
            <h3 className="font-bold text-lg text-amber-700">
              Sabías que...?
            </h3>
            <p className="text-sm max-w-xl">
              Durante a Idade Media construíronse moitos castelos e catedrais
              que aínda podemos visitar hoxe en España.
            </p>
          </div>

          <div className="text-6xl">📜</div>
        </footer>
      </div>
    </div>
  );
}