/* package whatever; // don't place package name! */
 
import java.util.*;
import java.lang.*;
import java.io.*;
 
/* Name of the class has to be "Main" only if the class is public. */
class Ideone
{
	public static void main (String[] args) throws java.lang.Exception
	{
		// your code goes here
	}
}

LyogcGFja2FnZSB3aGF0ZXZlcjsgLy8gZG9uJ3QgcGxhY2UgcGFja2FnZSBuYW1lISAqLwoKaW1wb3J0IGphdmEudXRpbC4qOwppbXBvcnQgamF2YS5sYW5nLio7CmltcG9ydCBqYXZhLmlvLio7CgovKiBOYW1lIG9mIHRoZSBjbGFzcyBoYXMgdG8gYmUgIk1haW4iIG9ubHkgaWYgdGhlIGNsYXNzIGlzIHB1YmxpYy4gKi8KY2xhc3MgSWRlb25lCnsKCXB1YmxpYyBzdGF0aWMgdm9pZCBtYWluIChTdHJpbmdbXSBhcmdzKSB0aHJvd3MgamF2YS5sYW5nLkV4Y2VwdGlvbgoJewoJCS8vIHlvdXIgY29kZSBnb2VzIGhlcmUKCX0KfQ==

aW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICZxdW90O3JlYWN0JnF1b3Q7OwoKY29uc3QgZmxhc2hjYXJkcyA9IFsKICB7IGZyb250OiAmcXVvdDtHcnVwbyAxICZuZGFzaDsgQWxjYWxpbm9zJnF1b3Q7LCBiYWNrOiAmcXVvdDtMaSwgTmEsIEssIFJiLCBDcywgRnIgJm1kYXNoOyAnTGlOYSBLaWVyZSBSb2JhciBDZXNpbyBhIEZyYW5jaW8nJnF1b3Q7IH0sCiAgeyBmcm9udDogJnF1b3Q7R3J1cG8gMiAmbmRhc2g7IEFsY2FsaW5vdCZlYWN1dGU7cnJlb3MmcXVvdDssIGJhY2s6ICZxdW90O0JlLCBNZywgQ2EsIFNyLCBCYSwgUmEgJm1kYXNoOyAnQmVNaSBDYVNhIEJhUlJhJyZxdW90OyB9LAogIHsgZnJvbnQ6ICZxdW90O0dydXBvIDEzICZuZGFzaDsgVCZlYWN1dGU7cnJlb3MmcXVvdDssIGJhY2s6ICZxdW90O0IsIEFsLCBHYSwgSW4sIFRsICZtZGFzaDsgJ0JBbEdhIEluVGEnJnF1b3Q7IH0sCiAgeyBmcm9udDogJnF1b3Q7R3J1cG8gMTQgJm5kYXNoOyBDYXJib25vaWRlcyZxdW90OywgYmFjazogJnF1b3Q7QywgU2ksIEdlLCBTbiwgUGIgJm1kYXNoOyAnQ2FzaSBHZVNlTmEgUGVCZScmcXVvdDsgfSwKICB7IGZyb250OiAmcXVvdDtHcnVwbyAxNSAmbmRhc2g7IE5pdHJvZ2Vub2lkZXMmcXVvdDssIGJhY2s6ICZxdW90O04sIFAsIEFzLCBTYiwgQmkgJm1kYXNoOyAnTm8gUGFzZXMgQSBlU3RlIEJhUicmcXVvdDsgfSwKICB7IGZyb250OiAmcXVvdDtHcnVwbyAxNiAmbmRhc2g7IEFuZiZpYWN1dGU7Z2Vub3MmcXVvdDssIGJhY2s6ICZxdW90O08sIFMsIFNlLCBUZSwgUG8gJm1kYXNoOyAnT1NlVGUgUG8nJnF1b3Q7IH0sCiAgeyBmcm9udDogJnF1b3Q7R3J1cG8gMTcgJm5kYXNoOyBIYWwmb2FjdXRlO2dlbm9zJnF1b3Q7LCBiYWNrOiAmcXVvdDtGLCBDbCwgQnIsIEksIEF0ICZtZGFzaDsgJ0ZlbGlDaWRhZCBCUklsbEFUbycmcXVvdDsgfSwKICB7IGZyb250OiAmcXVvdDtHcnVwbyAxOCAmbmRhc2g7IEdhc2VzIG5vYmxlcyZxdW90OywgYmFjazogJnF1b3Q7SGUsIE5lLCBBciwgS3IsIFhlLCBSbiwgT2cgJm1kYXNoOyAnSGVOQXIgS3JlWGVSbycmcXVvdDsgfQpdOwoKZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gRmxhc2hjYXJkQXBwKCkgewogIGNvbnN0IFtpbmRleCwgc2V0SW5kZXhdID0gdXNlU3RhdGUoMCk7CiAgY29uc3QgW3Nob3dCYWNrLCBzZXRTaG93QmFja10gPSB1c2VTdGF0ZShmYWxzZSk7CgogIGNvbnN0IG5leHQgPSAoKSA9Jmd0OyB7CiAgICBzZXRTaG93QmFjayhmYWxzZSk7CiAgICBzZXRJbmRleCgoaW5kZXggKyAxKSAlIGZsYXNoY2FyZHMubGVuZ3RoKTsKICB9OwoKICByZXR1cm4gKAogICAgJmx0O2RpdiBjbGFzc05hbWU9JnF1b3Q7bWluLWgtc2NyZWVuIGZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIHAtNiBiZy1ncmF5LTEwMCZxdW90OyZndDsKICAgICAgJmx0O2gxIGNsYXNzTmFtZT0mcXVvdDt0ZXh0LTN4bCBmb250LWJvbGQgbWItNiZxdW90OyZndDtGbGFzaGNhcmRzICZuZGFzaDsgVGFibGEgUGVyaSZvYWN1dGU7ZGljYSZsdDsvaDEmZ3Q7CgogICAgICAmbHQ7ZGl2CiAgICAgICAgY2xhc3NOYW1lPSZxdW90O3ctODAgaC00OCBiZy13aGl0ZSBzaGFkb3cteGwgcm91bmRlZC0yeGwgZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgdGV4dC1jZW50ZXIgcC00IGN1cnNvci1wb2ludGVyIHRyYW5zaXRpb24tdHJhbnNmb3JtIGhvdmVyOnNjYWxlLTEwNSZxdW90OwogICAgICAgIG9uQ2xpY2s9eygpID0mZ3Q7IHNldFNob3dCYWNrKCFzaG93QmFjayl9CiAgICAgICZndDsKICAgICAgICAmbHQ7cCBjbGFzc05hbWU9JnF1b3Q7dGV4dC1sZyBmb250LXNlbWlib2xkJnF1b3Q7Jmd0OwogICAgICAgICAge3Nob3dCYWNrID8gZmxhc2hjYXJkc1tpbmRleF0uYmFjayA6IGZsYXNoY2FyZHNbaW5kZXhdLmZyb250fQogICAgICAgICZsdDsvcCZndDsKICAgICAgJmx0Oy9kaXYmZ3Q7CgogICAgICAmbHQ7YnV0dG9uCiAgICAgICAgY2xhc3NOYW1lPSZxdW90O210LTYgcHgtNiBweS0yIGJnLWJsdWUtNTAwIHRleHQtd2hpdGUgcm91bmRlZC14bCBzaGFkb3cgaG92ZXI6YmctYmx1ZS02MDAmcXVvdDsKICAgICAgICBvbkNsaWNrPXtuZXh0fQogICAgICAmZ3Q7CiAgICAgICAgU2lndWllbnRlCiAgICAgICZsdDsvYnV0dG9uJmd0OwogICAgJmx0Oy9kaXYmZ3Q7CiAgKTsKfQo=

import { useState } from "react";

const flashcards = [
  { front: "Grupo 1 – Alcalinos", back: "Li, Na, K, Rb, Cs, Fr — 'LiNa Kiere Robar Cesio a Francio'" },
  { front: "Grupo 2 – Alcalinotérreos", back: "Be, Mg, Ca, Sr, Ba, Ra — 'BeMi CaSa BaRRa'" },
  { front: "Grupo 13 – Térreos", back: "B, Al, Ga, In, Tl — 'BAlGa InTa'" },
  { front: "Grupo 14 – Carbonoides", back: "C, Si, Ge, Sn, Pb — 'Casi GeSeNa PeBe'" },
  { front: "Grupo 15 – Nitrogenoides", back: "N, P, As, Sb, Bi — 'No Pases A eSte BaR'" },
  { front: "Grupo 16 – Anfígenos", back: "O, S, Se, Te, Po — 'OSeTe Po'" },
  { front: "Grupo 17 – Halógenos", back: "F, Cl, Br, I, At — 'FeliCidad BRIllATo'" },
  { front: "Grupo 18 – Gases nobles", back: "He, Ne, Ar, Kr, Xe, Rn, Og — 'HeNAr KreXeRo'" }
];

export default function FlashcardApp() {
  const [index, setIndex] = useState(0);
  const [showBack, setShowBack] = useState(false);

  const next = () => {
    setShowBack(false);
    setIndex((index + 1) % flashcards.length);
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-6 bg-gray-100">
      <h1 className="text-3xl font-bold mb-6">Flashcards – Tabla Periódica</h1>

      <div
        className="w-80 h-48 bg-white shadow-xl rounded-2xl flex items-center justify-center text-center p-4 cursor-pointer transition-transform hover:scale-105"
        onClick={() => setShowBack(!showBack)}
      >
        <p className="text-lg font-semibold">
          {showBack ? flashcards[index].back : flashcards[index].front}
        </p>
      </div>

      <button
        className="mt-6 px-6 py-2 bg-blue-500 text-white rounded-xl shadow hover:bg-blue-600"
        onClick={next}
      >
        Siguiente
      </button>
    </div>
  );
}