import React, { useState, useEffect } from 'react'; import { ChevronLeft, ChevronRight, RotateCcw } from 'lucide-react'; const FlashcardApp = () => { const [currentIndex, setCurrentIndex] = useState(0); const [flipped, setFlipped] = useState(false); const [animating, setAnimating] = useState(false); // Embed the logos directly const greenLogo = `data:image/svg+xml;base64,${btoa('')}`; const whiteLogo = `data:image/svg+xml;base64,${btoa('')}`; const flashcards = [ { front: "When to use the 2-Minute Reset", back: ["Before important calls or meetings", "After rejection or difficult conversations", "When you notice stress signals", "Between back-to-back sales calls"], isBullets: true }, { front: "Step 1: BREATHE\n(60 seconds)", back: ["Place hand on belly", "Breathe: In-4, Hold-6, Out-8", "Repeat 3 times", "This activates your parasympathetic nervous system"], isBullets: true, icon: "💨" }, { front: "Step 2: GROUND\n(30 seconds)", back: ["Place feet flat on floor", "Press down gently", "Soften knees slightly", "This connects you to the present moment"], isBullets: true, icon: "⚡" }, { front: "Step 3: RELEASE\n(30 seconds)", back: ["Roll shoulders back 3 times", "Massage jaw in circles", "Gentle head roll side to side", "This releases physical tension"], isBullets: true, icon: "✨" }, { front: "Why the Reset Works", back: ["Activates parasympathetic nervous system", "Reduces cortisol (stress hormone)", "Increases prefrontal cortex activity", "Creates clear thinking & confident presence"], isBullets: true, checkmarks: true }, { front: "The Complete Protocol", back: "Total Time: 2 minutes\n\n1. BREATHE (60 sec)\n2. GROUND (30 sec)\n3. RELEASE (30 sec)\n\nUse anytime you need to reset your nervous system and show up powerfully", isBullets: false }, { front: "Daily Practice Schedule", back: ["Morning before work", "Before first client call", "After lunch (reset for afternoon)", "End of day (release)"], isBullets: true, icon: "📅" }, { front: "Situational Use", back: ["Received a 'no' or rejection", "About to enter high-stakes meeting", "Feeling triggered or reactive", "Notice your stress signature"], isBullets: true, icon: "🎯" }, { front: "Track Your Progress", back: "Week 1: Count your uses\nWeek 2: Count your uses\nWeek 3: Count your uses\nWeek 4: Count your uses\n\nNotice what shifts in your body, mind, and sales results", isBullets: false, icon: "📊" }, { front: "Remember", back: "2 minutes now prevents 20 minutes of recovery later.\n\nYour regulated nervous system is your competitive advantage.", isBullets: false, icon: "💡" } ]; const handleFlip = () => { setFlipped(!flipped); }; const handleNext = () => { if (currentIndex < flashcards.length - 1 && !animating) { setAnimating(true); setTimeout(() => { setFlipped(false); setCurrentIndex(currentIndex + 1); setTimeout(() => setAnimating(false), 50); }, 150); } }; const handlePrevious = () => { if (currentIndex > 0 && !animating) { setAnimating(true); setTimeout(() => { setFlipped(false); setCurrentIndex(currentIndex - 1); setTimeout(() => setAnimating(false), 50); }, 150); } }; const handleReset = () => { setAnimating(true); setTimeout(() => { setFlipped(false); setCurrentIndex(0); setTimeout(() => setAnimating(false), 50); }, 150); }; const handleKeyPress = (e) => { if (e.key === 'ArrowLeft') handlePrevious(); if (e.key === 'ArrowRight') handleNext(); if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { e.preventDefault(); handleFlip(); } }; useEffect(() => { window.addEventListener('keydown', handleKeyPress); return () => window.removeEventListener('keydown', handleKeyPress); }, [currentIndex, flashcards.length, flipped, animating]); const currentCard = flashcards[currentIndex]; return ( <> ); }; export default FlashcardApp;