Untitled

import React, { useState } from 'react';
import { ChevronLeft, ChevronRight, RotateCcw, CheckCircle, HelpCircle } from 'lucide-react';

const flashcards = [
  { term: "Tenochtitlán", definition: "The capital city of the Aztec Empire, built on an island in Lake Texcoco." },
  { term: "Pipiltin", definition: "The noble class in Aztec society, making up about 5% of the population." },
  { term: "Macehualtin", definition: "The commoner class, which included specialized workers (warriors/artisans) and farmers." },
  { term: "Huey Tlatoani", definition: "The supreme ruler or 'Emperor' of the Aztec Empire." },
  { term: "Nahuatl", definition: "The language spoken by the Aztecs, still influential in Mexico today." },
  { term: "Difrasismo", definition: "A literary device using two phrases to create one metaphor (e.g., 'the spit + the lie' = drool)." },
  { term: "Macuahuitl", definition: "A wooden club embedded with obsidian blades, the primary weapon of Aztec warriors." },
  { term: "Tonalli", definition: "The vital soul energy believed to be released through sacrifice to keep the world alive." },
  { term: "Flower Wars", definition: "Agreed-upon ritual battles intended to capture warriors for sacrifice rather than to kill them." },
  { term: "Discontinuous Empire", definition: "A map structure where territory wasn't one solid block, but separated by independent cities." },
  { term: "Tribute", definition: "Taxes paid by conquered city-states in the form of goods, food, or people." },
  { term: "Tlamani", definition: "The first military rank, earned by capturing one enemy; grants a basic shield and club." },
  { term: "Cuextlacatl", definition: "Military rank earned by 2 captures; grants a red/black suit and cone-shaped hat." },
  { term: "Papalotl", definition: "Military rank earned by 3 captures; grants the right to wear a 'butterfly' banner." },
  { term: "Cuauhoctelatl", definition: "The highest military rank (Eagle or Jaguar); grants noble status and special costumes." },
  { term: "Lake Texcoco", definition: "The body of water where the Aztecs settled after seeing an eagle on a cactus." },
  { term: "Chinampas", definition: "Floating gardens or 'artificial islands' used for highly productive farming." },
  { term: "Cacao Beans", definition: "Used as a form of currency for small transactions in Aztec marketplaces." },
  { term: "Logograms", definition: "The Aztec writing system where pictures represent sounds or syllables like a rebus puzzle." },
  { term: "Calmecac", definition: "The school for noble children (Pipiltin) to learn leadership, religion, and history." }
];

export default function App() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isFlipped, setIsFlipped] = useState(false);
  const [mastered, setMastered] = useState(new Set());

  const handleNext = () => {
    setIsFlipped(false);
    setCurrentIndex((prev) => (prev + 1) % flashcards.length);
  };

  const handlePrev = () => {
    setIsFlipped(false);
    setCurrentIndex((prev) => (prev - 1 + flashcards.length) % flashcards.length);
  };

  const toggleMastered = () => {
    const newMastered = new Set(mastered);
    if (newMastered.has(currentIndex)) {
      newMastered.delete(currentIndex);
    } else {
      newMastered.add(currentIndex);
    }
    setMastered(newMastered);
  };

  const card = flashcards[currentIndex];
  const progress = Math.round((mastered.size / flashcards.length) * 100);

  return (
    <div className="min-h-screen bg-slate-50 p-4 md:p-8 flex flex-col items-center font-sans">
      <div className="max-w-md w-full space-y-6">
        {/* Header */}
        <div className="text-center space-y-2">
          <h1 className="text-3xl font-bold text-slate-800">Aztec Mastery</h1>
          <p className="text-slate-500">Master the terms to reach the rank of Cuauhoctelatl!</p>
        </div>

        {/* Progress Bar */}
        <div className="space-y-2">
          <div className="flex justify-between text-sm font-medium text-slate-600">
            <span>Mastery Progress</span>
            <span>{progress}%</span>
          </div>
          <div className="w-full bg-slate-200 rounded-full h-2.5">
            <div 
              className="bg-orange-500 h-2.5 rounded-full transition-all duration-500" 
              style={{ width: `${progress}%` }}
            ></div>
          </div>
        </div>

        {/* Flashcard Area */}
        <div 
          className="relative h-64 w-full perspective-1000 cursor-pointer"
          onClick={() => setIsFlipped(!isFlipped)}
        >
          <div className={`relative w-full h-full transition-transform duration-500 transform-style-3d ${isFlipped ? 'rotate-y-180' : ''}`}>
            {/* Front */}
            <div className="absolute w-full h-full bg-white rounded-2xl shadow-xl border-2 border-slate-100 flex flex-col items-center justify-center p-8 backface-hidden">
              <span className="text-xs font-bold text-orange-500 uppercase tracking-widest mb-4">Term</span>
              <h2 className="text-3xl font-bold text-slate-800 text-center">{card.term}</h2>
              <div className="absolute bottom-4 text-slate-400 flex items-center text-sm">
                <RotateCcw className="w-4 h-4 mr-2" /> Click to flip
              </div>
            </div>

            {/* Back */}
            <div className="absolute w-full h-full bg-orange-50 rounded-2xl shadow-xl border-2 border-orange-200 flex flex-col items-center justify-center p-8 backface-hidden rotate-y-180">
              <span className="text-xs font-bold text-orange-500 uppercase tracking-widest mb-4">Definition</span>
              <p className="text-lg text-slate-700 text-center leading-relaxed">{card.definition}</p>
            </div>
          </div>
        </div>

        {/* Controls */}
        <div className="flex justify-between items-center bg-white p-4 rounded-xl shadow-sm">
          <button 
            onClick={(e) => { e.stopPropagation(); handlePrev(); }}
            className="p-2 hover:bg-slate-100 rounded-full text-slate-600 transition-colors"
          >
            <ChevronLeft className="w-8 h-8" />
          </button>

          <button 
            onClick={(e) => { e.stopPropagation(); toggleMastered(); }}
            className={`flex items-center px-6 py-2 rounded-full font-bold transition-all ${
              mastered.has(currentIndex) 
                ? 'bg-green-100 text-green-700 border-2 border-green-200' 
                : 'bg-slate-100 text-slate-600 border-2 border-transparent hover:bg-slate-200'
            }`}
          >
            {mastered.has(currentIndex) ? (
              <><CheckCircle className="w-5 h-5 mr-2" /> Mastered</>
            ) : (
              <><HelpCircle className="w-5 h-5 mr-2" /> Got it?</>
            )}
          </button>

          <button 
            onClick={(e) => { e.stopPropagation(); handleNext(); }}
            className="p-2 hover:bg-slate-100 rounded-full text-slate-600 transition-colors"
          >
            <ChevronRight className="w-8 h-8" />
          </button>
        </div>

        {/* Counter */}
        <p className="text-center text-slate-400 text-sm">
          Card {currentIndex + 1} of {flashcards.length}
        </p>
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
      `}} />
    </div>
  );
}
```eof
```