import React, { useState, useEffect, useRef } from "react" import { useFireproof } from "use-fireproof" import { ImgGen } from "use-vibes" export default function BloomForGood() { const { database, useLiveQuery } = useFireproof("bloom-for-good") const [activeTab, setActiveTab] = useState("garden") const [selectedCause, setSelectedCause] = useState("textbooks") const [purchaseAmount, setPurchaseAmount] = useState("") const [audioEnabled, setAudioEnabled] = useState(true) const [season, setSeason] = useState("spring") const [showButterfly, setShowButterfly] = useState(false) const audioCtxRef = useRef(null) const ambienceSourceRef = useRef(null) const ambienceGainRef = useRef(null) const sparkleBufferRef = useRef(null) const { docs: donations } = useLiveQuery("type", { key: "donation", descending: true }) const { docs: stories } = useLiveQuery("type", { key: "story", descending: true }) const { docs: gardenImages } = useLiveQuery("type", { key: "image", descending: true }) const totalDonated = donations.reduce((sum, d) => sum + (d.amount || 0), 0) const userDonations = donations.filter(d => d.userId === "current-user") const userTotal = userDonations.reduce((sum, d) => sum + (d.amount || 0), 0) const causes = [ { id: "textbooks", name: "Textbooks Fund", emoji: "🌸", color: "#F9D5E5" }, { id: "meals", name: "Campus Meals", emoji: "🍎", color: "#F9A89A" }, { id: "wellness", name: "Mental Wellness Support", emoji: "🌱", color: "#BFE3C0" } ] const flowers = { spring: ["🌷", "🌸", "🌺", "🌼", "💐"], summer: ["🌻", "🌼", "🌺", "🏵️", "🌹"], autumn: ["🍂", "🍁", "🌰", "🍄", "🌾"], winter: ["🌲", "❄️", "⛄", "🌟", "✨"] } useEffect(() => { const month = new Date().getMonth() if (month >= 2 && month <= 4) setSeason("spring") else if (month >= 5 && month <= 7) setSeason("summer") else if (month >= 8 && month <= 10) setSeason("autumn") else setSeason("winter") }, []) useEffect(() => { if (!audioEnabled) return const initAudio = async () => { if (!audioCtxRef.current) { audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)() } const audioCtx = audioCtxRef.current if (audioCtx.state === 'suspended') { await audioCtx.resume() } if (!ambienceGainRef.current) { ambienceGainRef.current = audioCtx.createGain() ambienceGainRef.current.gain.value = 0.12 ambienceGainRef.current.connect(audioCtx.destination) const osc1 = audioCtx.createOscillator() const osc2 = audioCtx.createOscillator() const gainOsc1 = audioCtx.createGain() const gainOsc2 = audioCtx.createGain() const filter = audioCtx.createBiquadFilter() osc1.type = 'sine' osc1.frequency.value = 200 osc2.type = 'sine' osc2.frequency.value = 300 gainOsc1.gain.value = 0.03 gainOsc2.gain.value = 0.02 filter.type = 'lowpass' filter.frequency.value = 800 osc1.connect(gainOsc1).connect(filter) osc2.connect(gainOsc2).connect(filter) filter.connect(ambienceGainRef.current) osc1.start() osc2.start() ambienceSourceRef.current = { osc1, osc2 } } } initAudio().catch(console.error) return () => { if (ambienceSourceRef.current) { try { ambienceSourceRef.current.osc1.stop() ambienceSourceRef.current.osc2.stop() } catch (e) {} ambienceSourceRef.current = null } } }, [audioEnabled]) const playSparkle = () => { if (!audioEnabled || !audioCtxRef.current) return const audioCtx = audioCtxRef.current const osc = audioCtx.createOscillator() const gain = audioCtx.createGain() osc.type = 'sine' osc.frequency.setValueAtTime(800, audioCtx.currentTime) osc.frequency.exponentialRampToValueAtTime(1200, audioCtx.currentTime + 0.1) gain.gain.setValueAtTime(0.35, audioCtx.currentTime) gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.3) osc.connect(gain).connect(audioCtx.destination) osc.start(audioCtx.currentTime) osc.stop(audioCtx.currentTime + 0.3) osc.onended = () => { try { osc.disconnect() } catch {} try { gain.disconnect() } catch {} } } const handleRoundUp = async () => { const amount = parseFloat(purchaseAmount) if (!amount || amount <= 0) return const roundedUp = Math.ceil(amount) const donation = roundedUp - amount if (donation > 0) { await database.put({ type: "donation", userId: "current-user", amount: donation, cause: selectedCause, timestamp: Date.now(), flower: flowers[season][Math.floor(Math.random() * flowers[season].length)] }) playSparkle() setPurchaseAmount("") if (userTotal + donation >= 5 && userTotal < 5) { setTimeout(() => { setShowButterfly(true) playSparkle() setTimeout(() => setShowButterfly(false), 3000) }, 500) } if (userTotal + donation >= 10 && userTotal < 10) { setTimeout(() => { setShowButterfly(true) playSparkle() setTimeout(() => setShowButterfly(false), 5000) }, 500) } } } const generateGardenImage = async () => { const prompt = `A beautiful ${season} garden filled with blooming flowers in soft pastel colors, peaceful and nurturing atmosphere, digital art, warm lighting` await database.put({ type: "image", prompt, season, timestamp: Date.now() }) } return (

{[...Array(20)].map((_, i) => (

{flowers[season][Math.floor(Math.random() * flowers[season].length)]}

))}

{showButterfly && (

{userTotal >= 10 ? "🦋✨" : "🦋"}

)}

🌸 Bloom for Good

{[ { id: "garden", label: "My Garden", emoji: "🌻" }, { id: "community", label: "Community Meadow", emoji: "🌾" }, { id: "stories", label: "Impact Stories", emoji: "💌" } ].map(tab => ( ))}

{activeTab === "garden" && (

${userTotal.toFixed(2)} donated

Round Up & Plant a Bloom 🌼

Purchase Amount setPurchaseAmount(e.target.value)} placeholder="$0.00" className="w-full border-4 border-[#0f172a] px-4 py-3 text-lg font-bold focus:outline-none focus:border-[#F9A89A]" />

Choose Your Cause

{causes.map(cause => ( ))}

{purchaseAmount && parseFloat(purchaseAmount) > 0 && (

Donation: ${(Math.ceil(parseFloat(purchaseAmount)) - parseFloat(purchaseAmount)).toFixed(2)}

)}

Your Garden ({season})

{userDonations.slice(0, 24).map((donation, i) => (

{donation.flower}

))}

{gardenImages.length === 0 && ( )} {gardenImages.slice(0, 1).map(img => (

))} {userTotal >= 5 && (

✨ Unlocked: Rare Flower! You've donated over $5! 🌺

)} {userTotal >= 10 && (

🦋 Unlocked: Golden Butterfly! You've donated over $10! ✨

)}

Donation History

{userDonations.map(donation => { const cause = causes.find(c => c.id === donation.cause) return (

{donation.flower}

{cause?.emoji} {cause?.name}

{new Date(donation.timestamp).toLocaleDateString()}

${donation.amount.toFixed(2)}

) })}

)} {activeTab === "community" && (

Community Meadow 🌾

Together we've donated ${totalDonated.toFixed(2)}

Collective Garden

{donations.slice(0, 80).map((donation, i) => (

{donation.flower}

))}

{causes.map(cause => { const causeTotal = donations .filter(d => d.cause === cause.id) .reduce((sum, d) => sum + d.amount, 0) return (

{cause.emoji}

{cause.name}

${causeTotal.toFixed(2)}

) })}

)} {activeTab === "stories" && (

Impact Stories 💌

Heartfelt messages from students your generosity has helped

{stories.length === 0 && (

No stories yet — check back soon!

)}

{stories.map(story => { const cause = causes.find(c => c.id === story.cause) return (

{cause?.emoji}

{story.title}

"{story.message}"

— {story.student}

) })}

)}

) }

Round Up & Plant a Bloom 🌼

Your Garden (spring)

Donation History