import React, { useState, useEffect, useRef } from "react"; import { BrowserRouter, Routes, Route, Link, useLocation, Navigate } from "react-router-dom"; import { Sprout, Sparkles, Compass, Award, Share2, CheckCircle2, Circle, Lock, Zap, Check, Info, Droplet, Plus, Trash2, Heart, ChevronRight, ChevronLeft } from "lucide-react"; import { AnimatePresence, motion } from "framer-motion"; import { Toaster, toast } from "sonner"; // --- MEDIA ASSETS --- const MEDIA_ASSETS = { blushTulipFallback: "https://images.unsplash.com/photo-1520763185298-1b434c919102?auto=format&fit=crop&w=600&q=80", prismOrchidFallback: "https://images.unsplash.com/photo-1525310072745-f49212b5ac6d?auto=format&fit=crop&w=600&q=80", plantSeedUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/%D0%A0%D0%B0%D0%B7%D0%BD%D0%BE%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D0%B8%D0%B5_%D1%81%D0%B5%D0%BC%D1%8F%D0%BD.jpg/3840px-%D0%A0%D0%B0%D0%B7%D0%BD%D0%BE%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D0%B8%D0%B5_%D1%81%D0%B5%D0%BC%D1%8F%D0%BD.jpg" }; // --- TYPES --- interface Ritual { id: string; title: string; completed: boolean; category: "Mind" | "Body" | "Soul"; } interface FlowerSeed { id: string; name: string; rarity: "Common" | "Rare" | "Premium"; colorPalette: string[]; // CSS gradient colors cost: number; // in Dew Points description: string; } interface ActiveFlower { seedId: string; growthStage: number; // 1 to 5 waterMeter: number; // 0 to 100 } interface UserStats { currentStreak: number; totalBlooms: number; dewPoints: number; premiumUnlocked: boolean; } // --- INITIAL DATA --- const SEEDS: FlowerSeed[] = [ { id: "blush-tulip", name: "Blush Tulip", rarity: "Common", colorPalette: ["#FFB5B5", "#FFD3B6", "#FFAAA6"], cost: 0, description: "A soft, pastel tulip that thrives on gentle morning routines." }, { id: "prism-orchid", name: "Prism Orchid", rarity: "Rare", colorPalette: ["#D8B4F8", "#A7EDE7", "#8ECAE6"], cost: 150, description: "Reflects light in beautiful prismatic hues as you build focus." }, { id: "ethereal-rose", name: "Ethereal Glass Rose", rarity: "Premium", colorPalette: ["#E2F1AF", "#B5FFFC", "#FFDEE9"], cost: 300, description: "A crystalline masterpiece that captures pure mindfulness." }, { id: "peach-peony", name: "Peach Peony", rarity: "Common", colorPalette: ["#FFCAD4", "#F4ACB7", "#FFE5D9"], cost: 80, description: "Plump, warm-toned petals that bloom with self-compassion." } ]; const DEFAULT_RITUALS: Ritual[] = [ { id: "1", title: "5 Minutes of Deep Breathing", completed: false, category: "Mind" }, { id: "2", title: "Hydrate with 500ml Water", completed: false, category: "Body" }, { id: "3", title: "Write Down 3 Gratitudes", completed: false, category: "Soul" } ]; // --- SAFE LOCAL STORAGE HELPER --- const safeGetLocalStorage = (key: string, fallback: T): T => { try { const saved = localStorage.getItem(key); return saved ? JSON.parse(saved) : fallback; } catch (e) { console.error(`Error parsing localStorage key "${key}":`, e); return fallback; } }; // --- HELPER FOR NOTIFICATIONS --- const showNotice = (message: string, type: "success" | "info" | "error" = "success") => { const styles = { success: { background: "#F2F9F6", border: "1px solid #D1E7DD", color: "#0F5132" }, error: { background: "#FDF2F2", border: "1px solid #F8D7DA", color: "#842029" }, info: { background: "#F6F5FA", border: "1px solid #E2E0F4", color: "#4B447D" } }; toast(message, { duration: 2000, style: { ...styles[type], fontFamily: "var(--font-body)", borderRadius: "12px", fontSize: "13px", fontWeight: "500" } }); }; export default function App() { // --- PERSISTED STATE --- const [stats, setStats] = useState(() => safeGetLocalStorage("bloom:stats", { currentStreak: 3, totalBlooms: 2, dewPoints: 120, premiumUnlocked: false }) ); const [rituals, setRituals] = useState(() => safeGetLocalStorage("bloom:rituals", DEFAULT_RITUALS) ); const [activeFlower, setActiveFlower] = useState(() => safeGetLocalStorage("bloom:activeFlower", { seedId: "blush-tulip", growthStage: 2, waterMeter: 33 }) ); const [unlockedSeeds, setUnlockedSeeds] = useState(() => safeGetLocalStorage("bloom:unlockedSeeds", ["blush-tulip", "peach-peony"]) ); const [customRitualText, setCustomRitualText] = useState(""); const [customRitualCategory, setCustomRitualCategory] = useState<"Mind" | "Body" | "Soul">("Mind"); const [showShareModal, setShowShareModal] = useState(false); const [isWatering, setIsWatering] = useState(false); // Save to localStorage useEffect(() => { localStorage.setItem("bloom:stats", JSON.stringify(stats)); }, [stats]); useEffect(() => { localStorage.setItem("bloom:rituals", JSON.stringify(rituals)); }, [rituals]); useEffect(() => { localStorage.setItem("bloom:activeFlower", JSON.stringify(activeFlower)); }, [activeFlower]); useEffect(() => { localStorage.setItem("bloom:unlockedSeeds", JSON.stringify(unlockedSeeds)); }, [unlockedSeeds]); // --- ACTIONS --- const handleToggleRitual = (id: string) => { const updated = rituals.map(r => r.id === id ? { ...r, completed: !r.completed } : r); setRituals(updated); const completedCount = updated.filter(r => r.completed).length; const totalCount = updated.length; const newWaterMeter = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0; let newStage = activeFlower.growthStage; const wasCompleted = rituals.find(r => r.id === id)?.completed; const isNowCompleted = updated.find(r => r.id === id)?.completed; if (totalCount > 0 && completedCount === totalCount && activeFlower.growthStage < 5) { newStage = Math.min(5, activeFlower.growthStage + 1); setStats(prev => ({ ...prev, dewPoints: prev.dewPoints + 30, currentStreak: prev.currentStreak + 1, totalBlooms: newStage === 5 ? prev.totalBlooms + 1 : prev.totalBlooms })); showNotice("✨ Daily rituals complete! Your flower grew and you earned +30 Dew Points!", "success"); } else if (isNowCompleted && !wasCompleted) { setStats(prev => ({ ...prev, dewPoints: prev.dewPoints + 10 })); showNotice("💧 Ritual completed! Nourishing your garden (+10 Dew Points)", "success"); } setActiveFlower(prev => ({ ...prev, waterMeter: newWaterMeter, growthStage: newStage })); }; const handleAddRitual = (e: React.FormEvent) => { e.preventDefault(); if (!customRitualText.trim()) return; const newRitual: Ritual = { id: Date.now().toString(), title: customRitualText, completed: false, category: customRitualCategory }; setRituals([...rituals, newRitual]); setCustomRitualText(""); showNotice("🌱 New ritual added to your daily list!"); }; const handleDeleteRitual = (id: string) => { setRituals(rituals.filter(r => r.id !== id)); showNotice("Ritual removed", "info"); }; const handleSelectSeed = (seedId: string) => { const seed = SEEDS.find(s => s.id === seedId); if (!seed) return; if (!unlockedSeeds.includes(seedId)) { if (seed.rarity === "Premium" && !stats.premiumUnlocked) { showNotice("This seed requires Bloom Premium!", "error"); return; } if (stats.dewPoints >= seed.cost) { setStats(prev => ({ ...prev, dewPoints: prev.dewPoints - seed.cost })); setUnlockedSeeds([...unlockedSeeds, seedId]); setActiveFlower({ seedId, growthStage: 1, waterMeter: 0 }); showNotice(`🎉 You planted a new ${seed.name}!`, "success"); } else { showNotice(`Need ${seed.cost} Dew Points to unlock this seed.`, "error"); } } else { setActiveFlower({ seedId, growthStage: 2, waterMeter: 0 }); showNotice(`Switched active garden to ${seed.name}`); } }; const handleUnlockPremium = () => { setStats(prev => ({ ...prev, premiumUnlocked: true })); setUnlockedSeeds(prev => [...prev, "ethereal-rose"]); showNotice("✨ Welcome to Bloom Premium! All seeds & pot skins unlocked.", "success"); }; const handleResetGarden = () => { setActiveFlower(prev => ({ ...prev, growthStage: 1, waterMeter: 0 })); setRituals(rituals.map(r => ({ ...r, completed: false }))); showNotice("Garden reset! Ready for a new bloom cycle.", "info"); }; const handleSprinkleDew = () => { if (stats.dewPoints < 5) { showNotice("Not enough Dew Points! Complete rituals to earn more.", "error"); return; } setIsWatering(true); setStats(prev => ({ ...prev, dewPoints: prev.dewPoints - 5 })); setActiveFlower(prev => { const nextWater = Math.min(100, prev.waterMeter + 10); let nextStage = prev.growthStage; if (nextWater === 100 && prev.growthStage < 5) { nextStage = Math.min(5, prev.growthStage + 1); showNotice("✨ Your flower absorbed the dew and grew to the next stage!", "success"); } else { showNotice("💧 Sprinkled magical dew! (+10% Water)", "success"); } return { ...prev, waterMeter: nextWater, growthStage: nextStage }; }); setTimeout(() => setIsWatering(false), 1200); }; const currentSeed = SEEDS.find(s => s.id === activeFlower.seedId) || SEEDS[0]; return (

{/* App Header */}

Bloom

{/* Dew Points Badge */}

{stats.dewPoints} DP

{/* Streak Badge */}

{stats.currentStreak}d

{/* Main Content Area */}

} /> } /> } /> } />

{/* Bottom Navigation */} {/* Share Modal */} {showShareModal && ( setShowShareModal(false)} /> )}

); } function NavLinkItem({ to, icon, label }: { to: string; icon: React.ReactNode; label: string }) { const location = useLocation(); const isActive = location.pathname === to; return (

{icon}

{label} ); } // --- HOME VIEW --- interface HomeViewProps { stats: UserStats; rituals: Ritual[]; activeFlower: ActiveFlower; currentSeed: FlowerSeed; customRitualText: string; customRitualCategory: "Mind" | "Body" | "Soul"; setCustomRitualText: (val: string) => void; setCustomRitualCategory: (val: "Mind" | "Body" | "Soul") => void; handleToggleRitual: (id: string) => void; handleAddRitual: (e: React.FormEvent) => void; handleDeleteRitual: (id: string) => void; handleResetGarden: () => void; setShowShareModal: (val: boolean) => void; handleSprinkleDew: () => void; isWatering: boolean; unlockedSeeds: string[]; handleSelectSeed: (seedId: string) => void; } function HomeView({ stats, rituals, activeFlower, currentSeed, customRitualText, customRitualCategory, setCustomRitualText, setCustomRitualCategory, handleToggleRitual, handleAddRitual, handleDeleteRitual, handleResetGarden, setShowShareModal, handleSprinkleDew, isWatering, unlockedSeeds, handleSelectSeed }: HomeViewProps) { const [isHovered, setIsHovered] = useState(false); const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); const containerRef = useRef(null); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top }); }; const completedCount = rituals.filter(r => r.completed).length; const isFullyWatered = completedCount === rituals.length && rituals.length > 0; return (

{/* Hero Header with Premium Typography */}

Today's Ritual

Nourish Your {currentSeed.name}

Complete your daily self-care rituals to help your digital botanic collection bloom.

{/* THE GLASSMORPHIC GLOW-SHEEN FLOWER CONTAINER */}

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="relative overflow-hidden rounded-3xl border border-[#F0F0F0] bg-white p-6 shadow-sm transition-all duration-300 hover:shadow-md flex flex-col items-center justify-center min-h-[340px]" > {/* Soft Aura Glow behind the container */}

{/* Glossy Reflective Glass Shine overlay following cursor */} {isHovered && (

)} {/* Growth Stage Badge */}

Stage {activeFlower.growthStage} / 5

{/* Share Action */} {/* Interactive SVG Flower Visualizer */}

{/* Watering Meter / Progress Bar */}

Watering Level {activeFlower.waterMeter}%

{/* Sprinkle Dew Signature Interaction Button */}

{/* Seed Selector Carousel */}

Active Seed Selector

{SEEDS.map((seed) => { const isUnlocked = unlockedSeeds.includes(seed.id); const isActive = activeFlower.seedId === seed.id; return ( ); })}

{/* Daily Ritual Checklist */}

Daily Rituals

{completedCount} of {rituals.length} complete

{rituals.map((ritual) => (

{ritual.title} {ritual.category}

))} {rituals.length === 0 && (

No rituals set for today. Add one below!

)}

{/* Add Custom Ritual Form */} {/* Danger Zone / Reset */}

); } // --- CONSERVATORY VIEW --- interface ConservatoryViewProps { stats: UserStats; unlockedSeeds: string[]; activeFlower: ActiveFlower; handleSelectSeed: (seedId: string) => void; } function ConservatoryView({ stats, unlockedSeeds, activeFlower, handleSelectSeed }: ConservatoryViewProps) { return (

Your Collection

The Conservatory

Unlock rare seeds using your accumulated Dew Points or upgrade to premium.

{/* Seed Shop / Collection Grid */}

{SEEDS.map((seed) => { const isUnlocked = unlockedSeeds.includes(seed.id); const isActive = activeFlower.seedId === seed.id; const isPremiumLocked = seed.rarity === "Premium" && !stats.premiumUnlocked; return (

{/* Seed preview icon */}

{seed.name}

{seed.rarity}

{seed.description}

{isActive ? ( Active ) : isUnlocked ? ( ) : isPremiumLocked ? ( Unlock ) : ( )}

); })}

{/* Botanic Wiki / Tip */}

How to Grow Flowers

Every daily ritual you complete adds water to your active flower. Completing all 3 rituals triggers a growth stage upgrade. Once a flower reaches Stage 5, it is fully bloomed and permanently recorded in your collection history!

); } // --- PREMIUM VIEW --- interface PremiumViewProps { stats: UserStats; handleUnlockPremium: () => void; } function PremiumView({ stats, handleUnlockPremium }: PremiumViewProps) { return (

Bloom Premium

Unlock Premium Seeds

Elevate your self-care ritual with exclusive seeds, pot skins, and unlimited tracking.

{/* Premium Card */}

{/* Decorative subtle background glow */}

Collector's Edition

Ethereal Glass Rose

Unlock the ultimate digital collectible. The Ethereal Glass Rose features a stunning, iridescent color palette that shifts beautifully under different light conditions.

{/* Premium Features List */}

What's Included:

{/* Pricing & CTA */}

$4.99 / lifetime access

{stats.premiumUnlocked ? ( Unlocked ) : ( )}

{/* Testimonial / Aesthetic Quote */}

"Bloom turned my boring daily habits into a beautiful aesthetic ritual. I love watching my flowers grow every week!"

— Sarah M., Notion Designer

); } function PremiumFeatureItem({ text }: { text: string }) { return (

{text}

); } // --- SVG FLOWER RENDERER --- interface SVGFlowerRendererProps { stage: number; colors: string[]; isWatered: boolean; } function SVGFlowerRenderer({ stage, colors, isWatered }: SVGFlowerRendererProps) { const primaryColor = colors[0] || "#FFB5B5"; const secondaryColor = colors[1] || "#FFD3B6"; const tertiaryColor = colors[2] || "#FFAAA6"; return ( ); } // --- SHARE BOUQUET MODAL --- interface ShareModalProps { currentSeed: FlowerSeed; activeFlower: ActiveFlower; stats: UserStats; onClose: () => void; } function ShareModal({ currentSeed, activeFlower, stats, onClose }: ShareModalProps) { const handleCopyLink = async () => { try { if (navigator.clipboard) { await navigator.clipboard.writeText("https://bloom.ritual.app/share/my-garden"); showNotice("Garden share link copied to clipboard!", "success"); } else { showNotice("Sharing is not supported in this browser.", "error"); } } catch (e) { showNotice("Failed to copy link. Please try again.", "error"); } }; return (

Share Your Bouquet

Show off your self-care progress with friends.

{/* Shareable Card Preview */}

{/* Soft background glow */}

My Botanic Garden

{currentSeed.name}

🔥 {stats.currentStreak} Day Streak • 🌸 Stage {activeFlower.growthStage} Bloom

{/* Action Buttons */}

); }