import React, { useState, useEffect, useRef } from "react"; import { BrowserRouter, Routes, Route, NavLink, useNavigate, useLocation, Navigate } from "react-router-dom"; import { Sprout, Sparkles, ShoppingBag, Flower2, User, Coins, Lock, Share2, Plus, Trash2, Heart, Bell, Settings, Droplets, Check, ChevronRight, Info, Calendar, Award, Volume2, VolumeX } from "lucide-react"; import { AnimatePresence, motion } from "framer-motion"; import { Toaster, toast } from "sonner"; // ========================================== // TYPES & INTERFACES // ========================================== export interface Plant { id: string; name: string; type: string; // 'Lavender Dream', 'Mint Serenity', 'Rose Bliss', 'Golden Glow', 'Cosmic Orchid' status: "seed" | "sprout" | "bloom" | "wilted"; ritual: string; // e.g., "Drink Water", "8h Sleep" growthProgress: number; // 0 to 100 growthStreak: number; gradientTheme: string; // 'mint' | 'lavender' | 'rose' | 'gold' | 'indigo' datePlanted: string; } export interface Seed { id: string; name: string; description: string; cost: number; duration: string; gradientTheme: string; premiumOnly: boolean; owned: boolean; } export interface BouquetItem { id: string; name: string; type: string; gradientTheme: string; dateBloomed: string; ritual: string; streakAchieved: number; note: string; } // ========================================== // MEDIA CONSTANTS & ASSETS // ========================================== const THEMES = { mint: { bg: "from-emerald-50 to-teal-100/50", border: "border-emerald-200/60", text: "text-emerald-700", glow: "rgba(167, 243, 208, 0.4)", primaryColor: "#34D399", secondaryColor: "#059669", glassBg: "rgba(209, 250, 229, 0.4)", }, lavender: { bg: "from-purple-50 to-indigo-100/50", border: "border-purple-200/60", text: "text-purple-700", glow: "rgba(233, 213, 255, 0.4)", primaryColor: "#C084FC", secondaryColor: "#7C3AED", glassBg: "rgba(243, 232, 255, 0.4)", }, rose: { bg: "from-rose-50 to-pink-100/50", border: "border-rose-200/60", text: "text-rose-700", glow: "rgba(254, 226, 226, 0.4)", primaryColor: "#F87171", secondaryColor: "#DC2626", glassBg: "rgba(254, 226, 226, 0.4)", }, gold: { bg: "from-amber-50 to-yellow-100/50", border: "border-amber-200/60", text: "text-amber-700", glow: "rgba(254, 240, 138, 0.4)", primaryColor: "#FBBF24", secondaryColor: "#D97706", glassBg: "rgba(254, 240, 138, 0.4)", }, indigo: { bg: "from-indigo-50 to-blue-100/50", border: "border-indigo-200/60", text: "text-indigo-700", glow: "rgba(199, 210, 254, 0.4)", primaryColor: "#818CF8", secondaryColor: "#4F46E5", glassBg: "rgba(199, 210, 254, 0.4)", }, }; // ========================================== // SEEDED DATA // ========================================== const INITIAL_SEEDS: Seed[] = [ { id: "seed-mint", name: "Mint Serenity", description: "A calming herb that flourishes with gentle, steady care.", cost: 0, duration: "3 days", gradientTheme: "mint", premiumOnly: false, owned: true, }, { id: "seed-lavender", name: "Lavender Dream", description: "Known for promoting restful sleep and deep tranquility.", cost: 40, duration: "5 days", gradientTheme: "lavender", premiumOnly: false, owned: false, }, { id: "seed-rose", name: "Rose Bliss", description: "A delicate bloom that thrives on self-compassion and warmth.", cost: 80, duration: "7 days", gradientTheme: "rose", premiumOnly: false, owned: false, }, { id: "seed-gold", name: "Golden Glow", description: "A radiant solar flower that brings energy and focus.", cost: 120, duration: "6 days", gradientTheme: "gold", premiumOnly: true, owned: false, }, { id: "seed-orchid", name: "Cosmic Orchid", description: "A rare, mystical blossom that sparkles under the night sky.", cost: 200, duration: "9 days", gradientTheme: "indigo", premiumOnly: true, owned: false, }, ]; const INITIAL_PLANTS: Plant[] = [ { id: "plant-1", name: "Sienna", type: "Mint Serenity", status: "sprout", ritual: "Drink 8 glasses of water", growthProgress: 45, growthStreak: 4, gradientTheme: "mint", datePlanted: "2023-10-20", }, { id: "plant-2", name: "Luna", type: "Lavender Dream", status: "seed", ritual: "8 hours of restful sleep", growthProgress: 10, growthStreak: 1, gradientTheme: "lavender", datePlanted: "2023-10-23", }, { id: "plant-3", name: "Empty Plot", type: "", status: "seed", // used as empty state marker ritual: "", growthProgress: 0, growthStreak: 0, gradientTheme: "mint", datePlanted: "", }, ]; const INITIAL_BOUQUET: BouquetItem[] = [ { id: "b-1", name: "Aura", type: "Lavender Dream", gradientTheme: "lavender", dateBloomed: "Oct 12, 2023", ritual: "10 mins morning meditation", streakAchieved: 7, note: "Felt incredibly grounded this week. The lavender smell in my room helped so much.", }, { id: "b-2", name: "Verde", type: "Mint Serenity", gradientTheme: "mint", dateBloomed: "Oct 04, 2023", ritual: "Daily stretch & breathe", streakAchieved: 5, note: "Kept my body moving even when tired. A beautiful reminder to stay gentle.", }, ]; // ========================================== // HIGH-FIDELITY CSS/SVG FLORA COMPONENT // ========================================== interface CSSFloraProps { stage: "seed" | "sprout" | "bloom" | "wilted"; theme: string; isWatering?: boolean; } export function CSSFlora({ stage, theme, isWatering = false }: CSSFloraProps) { const activeTheme = THEMES[theme as keyof typeof THEMES] || THEMES.mint; // Animation variants for organic swaying const swayClass = "animate-sway origin-bottom"; if (stage === "seed") { return (

{/* Soil Mound */}

{/* Seed */}

{/* Tiny glow */}

); } if (stage === "sprout") { return (

{/* Soil */}

{/* Stem */} {/* Ambient Glow */}

); } if (stage === "bloom") { return (

{/* Soil */}

{/* Stem */} {/* Beautiful Layered Flower Bloom */} {/* Outer Petals */} {[0, 45, 90, 135, 180, 225, 270, 315].map((deg, idx) => (

))} {/* Inner Petals */} {[22.5, 67.5, 112.5, 157.5, 202.5, 247.5, 292.5, 337.5].map((deg, idx) => (

))} {/* Flower Center Core */}

{/* Floating Sparkle Nodes */} {/* Premium Soft Glow Backdrop */}

); } if (stage === "wilted") { return (

{/* Soil */}

{/* Drooping Stem */}

); } return null; } // ========================================== // TOAST & NOTIFICATION HELPER // ========================================== const showNotice = (message: string, type: "success" | "info" | "error" = "success") => { if (type === "success") { toast.success(message, { duration: 2000, className: "bg-emerald-50 border border-emerald-200 text-emerald-900 rounded-2xl font-body", }); } else if (type === "error") { toast.error(message, { duration: 2000, className: "bg-rose-50 border border-rose-200 text-rose-900 rounded-2xl font-body", }); } else { toast(message, { duration: 2000, className: "bg-indigo-50 border border-indigo-200 text-indigo-900 rounded-2xl font-body", }); } }; // ========================================== // MAIN APP ENTRY WITH PERSISTENCE // ========================================== export default function App() { // State Initialization with LocalStorage const [coins, setCoins] = useState(() => { const saved = localStorage.getItem("bloom_user_coins"); return saved ? parseInt(saved, 10) : 120; }); const [globalStreak, setGlobalStreak] = useState(() => { const saved = localStorage.getItem("bloom_user_streak"); return saved ? parseInt(saved, 10) : 12; }); const [isPremium, setIsPremium] = useState(() => { const saved = localStorage.getItem("bloom_user_is_premium"); return saved ? saved === "true" : false; }); const [activePlants, setActivePlants] = useState(() => { const saved = localStorage.getItem("bloom_active_plants"); return saved ? JSON.parse(saved) : INITIAL_PLANTS; }); const [seeds, setSeeds] = useState(() => { const saved = localStorage.getItem("bloom_owned_seeds"); return saved ? JSON.parse(saved) : INITIAL_SEEDS; }); const [bouquet, setBouquet] = useState(() => { const saved = localStorage.getItem("bloom_bouquet_archive"); return saved ? JSON.parse(saved) : INITIAL_BOUQUET; }); const [soundEnabled, setSoundEnabled] = useState(true); // Sync to LocalStorage on changes useEffect(() => { localStorage.setItem("bloom_user_coins", coins.toString()); }, [coins]); useEffect(() => { localStorage.setItem("bloom_user_streak", globalStreak.toString()); }, [globalStreak]); useEffect(() => { localStorage.setItem("bloom_user_is_premium", isPremium.toString()); }, [isPremium]); useEffect(() => { localStorage.setItem("bloom_active_plants", JSON.stringify(activePlants)); }, [activePlants]); useEffect(() => { localStorage.setItem("bloom_owned_seeds", JSON.stringify(seeds)); }, [seeds]); useEffect(() => { localStorage.setItem("bloom_bouquet_archive", JSON.stringify(bouquet)); }, [bouquet]); // Audio simulation trigger const playSound = (type: "water" | "bloom" | "click" | "buy") => { if (!soundEnabled) return; try { const ctx = new (window.AudioContext || (window as any).webkitAudioContext)(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); if (type === "water") { osc.type = "sine"; osc.frequency.setValueAtTime(300, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(800, ctx.currentTime + 0.4); gain.gain.setValueAtTime(0.15, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4); osc.start(); osc.stop(ctx.currentTime + 0.4); } else if (type === "bloom") { osc.type = "triangle"; osc.frequency.setValueAtTime(523.25, ctx.currentTime); // C5 osc.frequency.setValueAtTime(659.25, ctx.currentTime + 0.1); // E5 osc.frequency.setValueAtTime(783.99, ctx.currentTime + 0.2); // G5 osc.frequency.setValueAtTime(1046.50, ctx.currentTime + 0.3); // C6 gain.gain.setValueAtTime(0.2, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.6); osc.start(); osc.stop(ctx.currentTime + 0.6); } else if (type === "click") { osc.type = "sine"; osc.frequency.setValueAtTime(600, ctx.currentTime); gain.gain.setValueAtTime(0.1, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.08); osc.start(); osc.stop(ctx.currentTime + 0.08); } else if (type === "buy") { osc.type = "sine"; osc.frequency.setValueAtTime(880, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(1320, ctx.currentTime + 0.2); gain.gain.setValueAtTime(0.15, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.25); osc.start(); osc.stop(ctx.currentTime + 0.25); } } catch (e) { // AudioContext blocked or unsupported } }; return (

{/* 412px Mobile Viewport Container */}

{/* Top Status Bar Notch Simulator */}

9:41 AM

{/* Persistent App Header */} {/* Main Scrollable Content Area */}

} /> } /> } /> } /> {/* Catch-all Redirect */} } />

{/* Persistent Bottom Navigation */}

); } // ========================================== // SUB-COMPONENTS // ========================================== // --- App Header --- interface AppHeaderProps { coins: number; globalStreak: number; soundEnabled: boolean; setSoundEnabled: (val: boolean) => void; playSound: (type: "water" | "bloom" | "click" | "buy") => void; } function AppHeader({ coins, globalStreak, soundEnabled, setSoundEnabled, playSound, }: AppHeaderProps) { return (

Bloom

{/* Sound Toggle */} {/* Streak Badge */}

{globalStreak}d streak

{/* Coins Balance */}

{coins}

); } // --- Bottom Navigation Bar --- interface BottomNavProps { playSound: (type: "water" | "bloom" | "click" | "buy") => void; } function BottomNav({ playSound }: BottomNavProps) { const links = [ { to: "/", label: "Garden", icon: Sprout }, { to: "/shop", label: "Shop", icon: ShoppingBag }, { to: "/bouquet", label: "Bouquet", icon: Flower2 }, { to: "/profile", label: "Profile", icon: User }, ]; return ( ); } // ========================================== // ROUTE SCREEN: GARDEN (HOME) // ========================================== interface GardenScreenProps { activePlants: Plant[]; setActivePlants: React.Dispatch>; seeds: Seed[]; setSeeds: React.Dispatch>; coins: number; setCoins: React.Dispatch>; globalStreak: number; setGlobalStreak: React.Dispatch>; bouquet: BouquetItem[]; setBouquet: React.Dispatch>; playSound: (type: "water" | "bloom" | "click" | "buy") => void; } function GardenScreen({ activePlants, setActivePlants, seeds, setSeeds, coins, setCoins, globalStreak, setGlobalStreak, bouquet, setBouquet, playSound, }: GardenScreenProps) { const [selectedPlant, setSelectedPlant] = useState(null); const [isPlantingOpen, setIsPlantingOpen] = useState(false); const [plantingSlotIndex, setPlantingSlotIndex] = useState(null); const [isHarvesting, setIsHarvesting] = useState(false); // Watering hold mechanics const [wateringProgress, setWateringProgress] = useState(0); const [isWateringActive, setIsWateringActive] = useState(false); const wateringIntervalRef = useRef(null); // Auto-select first non-empty plant on mount if none selected useEffect(() => { if (!selectedPlant && activePlants.length > 0) { const firstActive = activePlants.find((p) => p.name !== "Empty Plot"); if (firstActive) { setSelectedPlant(firstActive); } else { setSelectedPlant(activePlants[0]); } } }, [activePlants, selectedPlant]); // Handle Plant Selection const handleSelectPlant = (plant: Plant) => { playSound("click"); setSelectedPlant(plant); }; // Trigger Sprout Planting Drawer const openPlantingDrawer = (idx: number) => { playSound("click"); setPlantingSlotIndex(idx); setIsPlantingOpen(true); }; // Perform Planting Action const plantSeed = (seed: Seed) => { if (plantingSlotIndex === null) return; const newPlant: Plant = { id: `plant-${Date.now()}`, name: `Baby ${seed.name.split(" ")[0]}`, type: seed.name, status: "seed", ritual: getRitualForSeed(seed.name), growthProgress: 10, growthStreak: 1, gradientTheme: seed.gradientTheme, datePlanted: new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }), }; const updated = [...activePlants]; updated[plantingSlotIndex] = newPlant; setActivePlants(updated); setSelectedPlant(newPlant); // Consume seed if not free if (seed.cost > 0) { const updatedSeeds = seeds.map((s) => s.id === seed.id ? { ...s, owned: false } : s ); setSeeds(updatedSeeds); } setIsPlantingOpen(false); setPlantingSlotIndex(null); playSound("click"); showNotice(`Planted ${seed.name}! Nourish it daily.`, "success"); }; const getRitualForSeed = (name: string) => { switch (name) { case "Mint Serenity": return "Drink 8 glasses of water"; case "Lavender Dream": return "8 hours of restful sleep"; case "Rose Bliss": return "Write 3 things I'm grateful for"; case "Golden Glow": return "20 minutes of physical movement"; case "Cosmic Orchid": return "Unplug from screens by 10 PM"; default: return "Daily mindful breathing"; } }; // Watering Long-Press Handlers const startWatering = () => { if (!selectedPlant || selectedPlant.name === "Empty Plot") return; if (selectedPlant.status === "bloom") { showNotice("Your plant is fully bloomed! Harvest it to collect rewards.", "info"); return; } setIsWateringActive(true); playSound("water"); wateringIntervalRef.current = setInterval(() => { setWateringProgress((prev) => { if (prev >= 100) { clearInterval(wateringIntervalRef.current!); completeWatering(); return 100; } return prev + 5; }); }, 80); }; const stopWatering = () => { setIsWateringActive(false); if (wateringIntervalRef.current) { clearInterval(wateringIntervalRef.current); } setWateringProgress(0); }; const completeWatering = () => { if (!selectedPlant) return; setIsWateringActive(false); setWateringProgress(0); const nextProgress = selectedPlant.growthProgress + 30; let nextStatus = selectedPlant.status; let bloomed = false; if (nextProgress >= 100) { nextStatus = "bloom"; bloomed = true; } else if (selectedPlant.status === "seed" && nextProgress >= 30) { nextStatus = "sprout"; } const updatedPlants = activePlants.map((p) => { if (p.id === selectedPlant.id) { return { ...p, growthProgress: Math.min(nextProgress, 100), status: nextStatus, growthStreak: p.growthStreak + 1, }; } return p; }); setActivePlants(updatedPlants); setSelectedPlant({ ...selectedPlant, growthProgress: Math.min(nextProgress, 100), status: nextStatus, growthStreak: selectedPlant.growthStreak + 1, }); // Update global wallet and streak setCoins((c) => c + 15); setGlobalStreak((s) => s + 1); if (bloomed) { playSound("bloom"); showNotice("Incredible! Your plant has fully bloomed! 🌸", "success"); } else { playSound("water"); showNotice("Watered! Nourishment complete for today. ✨", "success"); } }; // Harvest / Archive Plant const harvestPlant = (plant: Plant) => { playSound("bloom"); setIsHarvesting(true); // Add to bouquet const newBouquetItem: BouquetItem = { id: `b-${Date.now()}`, name: plant.name, type: plant.type, gradientTheme: plant.gradientTheme, dateBloomed: new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }), ritual: plant.ritual, streakAchieved: plant.growthStreak, note: `Grown with love. Nourished through consistent daily practice.`, }; setBouquet([newBouquetItem, ...bouquet]); // Reset pot to empty const updatedPlants = activePlants.map((p) => { if (p.id === plant.id) { return { id: `empty-${Date.now()}`, name: "Empty Plot", type: "", status: "seed" as const, ritual: "", growthProgress: 0, growthStreak: 0, gradientTheme: "mint", datePlanted: "", }; } return p; }); setTimeout(() => { setActivePlants(updatedPlants); setSelectedPlant(updatedPlants[0]); setIsHarvesting(false); setCoins((c) => c + 50); // Bonus for harvesting showNotice("Harvested! +50 coins awarded.", "success"); }, 500); }; const activeTheme = selectedPlant ? THEMES[selectedPlant.gradientTheme as keyof typeof THEMES] : THEMES.mint; return (

{/* Terrarium/Garden Hero Area */}

{/* Soft floating background lights */}

Nourishment Zone

{selectedPlant && selectedPlant.name !== "Empty Plot" ? selectedPlant.name : "Your Sanctuary"}

{selectedPlant && selectedPlant.name !== "Empty Plot" && (

Streak: {selectedPlant.growthStreak} days

)}

{/* CSS Flora Visual Anchor */}

{selectedPlant && selectedPlant.name !== "Empty Plot" ? ( ) : (

This soil is ready. Plant a seed to begin a beautiful ritual.

)}

{/* Progress & Ritual Info */} {selectedPlant && selectedPlant.name !== "Empty Plot" && (

{selectedPlant.ritual} {selectedPlant.growthProgress}%

)}

{/* Primary Interaction: Water Hold or Plant Seed */}

{selectedPlant && selectedPlant.name !== "Empty Plot" ? (

{selectedPlant.status === "bloom" ? ( ) : (

{/* Hold to Water Button with continuous sheen */}

Hold to complete your ritual: "{selectedPlant.ritual}"

)}

) : ( )}

{/* 3 Active Plant Pots Grid */}

Your Terrarium Plots

{activePlants.map((plant, idx) => { const isEmpty = plant.name === "Empty Plot"; const isSelected = selectedPlant?.id === plant.id; const themeDetails = THEMES[plant.gradientTheme as keyof typeof THEMES] || THEMES.mint; return ( ); })}

{/* PLANT SEED DRAWER */} {isPlantingOpen && ( <> {/* Backdrop */}

setIsPlantingOpen(false)} /> {/* Drawer */}

Select a Seed to Plant

Pot #{plantingSlotIndex !== null ? plantingSlotIndex + 1 : ""}

{seeds.filter((s) => s.owned).length === 0 ? (

You don't own any seeds right now. Visit the Seed Shop to buy some!

{ setIsPlantingOpen(false); playSound("click"); }} className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-emerald-50 border border-emerald-100 text-emerald-700 text-xs font-bold" > Go to Seed Shop

) : ( seeds .filter((s) => s.owned) .map((seed) => { const themeDetails = THEMES[seed.gradientTheme as keyof typeof THEMES]; return ( ); }) )}

)}

); } // ========================================== // ROUTE SCREEN: SEED SHOP // ========================================== interface ShopScreenProps { seeds: Seed[]; setSeeds: React.Dispatch>; coins: number; setCoins: React.Dispatch>; isPremium: boolean; setIsPremium: React.Dispatch>; playSound: (type: "water" | "bloom" | "click" | "buy") => void; } function ShopScreen({ seeds, setSeeds, coins, setCoins, isPremium, setIsPremium, playSound, }: ShopScreenProps) { const [purchaseSuccess, setPurchaseSuccess] = useState(null); const handleBuySeed = (seed: Seed) => { if (seed.premiumOnly && !isPremium) { showNotice("Unlock Bloom+ to purchase premium seeds!", "error"); return; } if (coins < seed.cost) { showNotice("Not enough coins! Complete more daily rituals.", "error"); return; } // Deduct coins & set seed to owned setCoins((c) => c - seed.cost); setSeeds((prevSeeds) => prevSeeds.map((s) => (s.id === seed.id ? { ...s, owned: true } : s)) ); playSound("buy"); showNotice(`Successfully bought ${seed.name}!`, "success"); }; const handleSubscribe = () => { setIsPremium(true); setCoins((c) => c + 500); // Premium sign up bonus! playSound("bloom"); showNotice("Welcome to Bloom+! 500 bonus coins added.", "success"); }; return (

{/* Bloom+ Premium Banner */} {!isPremium ? (

{/* Subtle light sheen sweep */}

Premium Membership

Unlock Rare Flora with Bloom+

Get exclusive seeds, customizable pots, unlimited plots, and a 500-coin bonus instantly.

) : (

Bloom+ Active

You have unlocked all premium benefits and exclusive seeds!

)} {/* Seed Catalog */}

Seed Catalog

{seeds.filter((s) => s.owned).length} owned

{seeds.map((seed) => { const themeDetails = THEMES[seed.gradientTheme as keyof typeof THEMES]; const isLocked = seed.premiumOnly && !isPremium; return (

{/* Locked Overlay for Premium */} {isLocked && (

Bloom+ Exclusive

)}

{/* Styled Seed Packet Visual */}

{seed.name}

{seed.description}

{seed.owned ? (

Owned

) : ( )}

); })}

); } // ========================================== // ROUTE SCREEN: BOUQUET (HISTORY) // ========================================== interface BouquetScreenProps { bouquet: BouquetItem[]; setBouquet: React.Dispatch>; playSound: (type: "water" | "bloom" | "click" | "buy") => void; } function BouquetScreen({ bouquet, setBouquet, playSound }: BouquetScreenProps) { const [activeShareItem, setActiveShareItem] = useState(null); const [shareNote, setShareNote] = useState(""); const triggerShare = (item: BouquetItem) => { playSound("click"); setActiveShareItem(item); setShareNote(item.note); }; const handleCopyShareLink = () => { const text = `🌸 I bloomed my "${activeShareItem?.name}" (${activeShareItem?.type}) after a ${activeShareItem?.streakAchieved}-day self-care streak in Bloom! Join my digital garden.`; navigator.clipboard.writeText(text); playSound("click"); showNotice("Share text copied to clipboard!", "success"); setActiveShareItem(null); }; const saveCustomNote = () => { if (!activeShareItem) return; const updated = bouquet.map((item) => item.id === activeShareItem.id ? { ...item, note: shareNote } : item ); setBouquet(updated); playSound("click"); showNotice("Note updated!", "success"); setActiveShareItem(null); }; return (

Your Legacy

The Bouquet Archive

{bouquet.length === 0 ? (

No Blooms Yet

Complete rituals to grow your sprouts into beautiful fully-grown flowers.

) : (

{bouquet.map((item) => { const themeDetails = THEMES[item.gradientTheme as keyof typeof THEMES]; return (

{/* Polaroid Frame Styling */}

{item.name}

{item.dateBloomed}

{item.type}

Streak: {item.streakAchieved} days

{/* Custom Reflection Note */}

"{item.note || "No reflection note written yet."}"

{/* Share Button */}

); })}

)} {/* SHARE / REFLECTION MODAL */} {activeShareItem && ( <> {/* Backdrop */}

setActiveShareItem(null)} /> {/* Modal */}

Share Reflection

Your Reflection Note

setShareNote(e.target.value)}
                  placeholder="How did this ritual make you feel?"
                  className="w-full h-24 p-3 rounded-2xl border border-stone-200 focus:border-emerald-400 focus:ring-1 focus:ring-emerald-400 text-xs text-stone-700 outline-none resize-none"
                />
              </div>

<div className="flex gap-2">
                <button
                  onClick={saveCustomNote}
                  className="flex-1 py-2.5 rounded-xl bg-stone-100 hover:bg-stone-200 text-stone-700 text-xs font-bold transition-all"
                >
                  Save Note
                </button>
                <button
                  onClick={handleCopyShareLink}
                  className="flex-1 py-2.5 rounded-xl bg-[#1F2022] hover:bg-stone-800 text-white text-xs font-bold transition-all flex items-center justify-center gap-1.5"
                >
                  <Share2 className="w-4 h-4" />
                  Copy Share
                </button>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}

// ==========================================
// ROUTE SCREEN: PROFILE & STATS
// ==========================================
interface ProfileScreenProps {
  globalStreak: number;
  coins: number;
  isPremium: boolean;
  setIsPremium: React.Dispatch<React.SetStateAction<boolean>>;
  activePlants: Plant[];
  setActivePlants: React.Dispatch<React.SetStateAction<Plant[]>>;
  setSeeds: React.Dispatch<React.SetStateAction<Seed[]>>;
  setBouquet: React.Dispatch<React.SetStateAction<BouquetItem[]>>;
  setCoins: React.Dispatch<React.SetStateAction<number>>;
  setGlobalStreak: React.Dispatch<React.SetStateAction<number>>;
  playSound: (type: "water" | "bloom" | "click" | "buy") => void;
}

function ProfileScreen({
  globalStreak,
  coins,
  isPremium,
  setIsPremium,
  activePlants,
  setActivePlants,
  setSeeds,
  setBouquet,
  setCoins,
  setGlobalStreak,
  playSound,
}: ProfileScreenProps) {
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);

const handleResetData = () => {
    if (confirm("Are you sure you want to reset your garden? This cannot be undone.")) {
      localStorage.clear();
      setActivePlants(INITIAL_PLANTS);
      setSeeds(INITIAL_SEEDS);
      setBouquet(INITIAL_BOUQUET);
      setCoins(120);
      setGlobalStreak(12);
      setIsPremium(false);
      playSound("click");
      showNotice("Garden data reset successfully.", "info");
    }
  };

return (
    <div className="space-y-6">
      {/* User Card */}
      <div className="flex items-center gap-4 p-4 rounded-3xl bg-stone-50 border border-stone-100">
        <div className="w-16 h-16 rounded-full bg-gradient-to-tr from-emerald-100 to-purple-100 flex items-center justify-center border border-stone-200/40">
          <User className="w-8 h-8 text-stone-600" />
        </div>
        <div>
          <h3 className="font-heading text-lg font-bold text-stone-800">
            Mindful Gardener
          </h3>
          <p className="text-xs text-stone-400 mt-0.5">
            Level 4 • Seed Collector
          </p>
          {isPremium && (
            <span className="inline-block mt-1.5 px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 text-[9px] font-bold">
              Bloom+ Member
            </span>
          )}
        </div>
      </div>

{/* Stats Grid */}
      <div>
        <h3 className="text-xs font-bold text-stone-400 uppercase tracking-widest mb-3">
          Growth Metrics
        </h3>
        <div className="grid grid-cols-2 gap-4">
          <div className="p-4 rounded-2xl bg-white border border-stone-100 space-y-1">
            <span className="text-[10px] font-bold text-stone-400 uppercase">
              Growth Streak
            </span>
            <p className="font-heading text-2xl font-extrabold text-stone-800">
              {globalStreak} Days
            </p>
            <p className="text-[10px] text-emerald-600 font-medium">
              Top 5% of gardeners
            </p>
          </div>

<div className="p-4 rounded-2xl bg-white border border-stone-100 space-y-1">
            <span className="text-[10px] font-bold text-stone-400 uppercase">
              Total Coins
            </span>
            <p className="font-heading text-2xl font-extrabold text-stone-800">
              {coins}
            </p>
            <p className="text-[10px] text-stone-400 font-medium">
              Earned from rituals
            </p>
          </div>
        </div>
      </div>

{/* Preferences & Settings */}
      <div>
        <h3 className="text-xs font-bold text-stone-400 uppercase tracking-widest mb-3">
          Nourishment Settings
        </h3>
        <div className="rounded-2xl bg-white border border-stone-100 divide-y divide-stone-100">
          {/* Notification Toggle */}
          <div className="p-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Bell className="w-4 h-4 text-stone-500" />
              <div>
                <h4 className="text-xs font-bold text-stone-800">
                  Daily Reminders
                </h4>
                <p className="text-[10px] text-stone-400">
                  Gentle nudges to water your plants
                </p>
              </div>
            </div>
            <button
              onClick={() => {
                setNotificationsEnabled(!notificationsEnabled);
                playSound("click");
                showNotice(
                  notificationsEnabled ? "Reminders muted" : "Reminders enabled",
                  "info"
                );
              }}
              className={`w-10 h-6 rounded-full transition-colors flex items-center p-0.5 ${
                notificationsEnabled ? "bg-emerald-500" : "bg-stone-200"
              }`}
            >
              <div
                className={`w-5 h-5 rounded-full bg-white shadow-sm transform transition-transform ${
                  notificationsEnabled ? "translate-x-4" : "translate-x-0"
                }`}
              />
            </button>
          </div>

{/* Reset Data */}
          <div className="p-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Settings className="w-4 h-4 text-stone-500" />
              <div>
                <h4 className="text-xs font-bold text-stone-800">
                  Reset Garden Data
                </h4>
                <p className="text-[10px] text-stone-400">
                  Clear all active plants and history
                </p>
              </div>
            </div>
            <button
              onClick={handleResetData}
              className="p-1.5 rounded-lg hover:bg-rose-50 text-rose-500 hover:text-rose-600 transition-colors"
            >
              <Trash2 className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

{/* Footer Info */}
      <div className="text-center space-y-1 py-4">
        <p className="text-[10px] text-stone-400">
          Bloom Version 1.2.0 (Vite + React)
        </p>
        <p className="text-[10px] text-stone-400">
          Designed for cozy self-care & mindful habits.
        </p>
      </div>
    </div>
  );
}</article></body></html>