import React, { useState, useRef, useEffect } from 'react'; import { Play, Pause, RotateCcw, Volume2, Download, Loader2, Wallet, TrendingUp, Brain, Clock, ShieldCheck, Sparkles, Send, PiggyBank, Target, AlertCircle } from 'lucide-react'; const App = () => { const [isPlaying, setIsPlaying] = useState(false); const [isLoading, setIsLoading] = useState(false); const [progress, setProgress] = useState(0); const [audioUrl, setAudioUrl] = useState(null); const [activeTab, setActiveTab] = useState('podcast'); // 'podcast' or 'ai' const [generationStatus, setGenerationStatus] = useState(''); const audioRef = useRef(null); // AI State const [aiInput, setAiInput] = useState(''); const [aiResponse, setAiResponse] = useState(''); const [isAiLoading, setIsAiLoading] = useState(false); const apiKey = ""; // Runtime provides this const podcastScript = `வணக்கம் மக்களே! நம்ம ஊர்ல நாம சம்பாதிக்க ஆரம்பிச்ச போது சில நம்ம வீட்டு பெரியவங்க, பணம் கைக்கு வந்த உடனே தாம் தூம்னு செலவு பண்ணாத, கொஞ்சம் சேமித்து வை என சொல்லிருப்பாங்க. ஆனா இன்னைக்கு எதார்த்தம் என்ன தெரியுமா? நம்மல 70% இந்தியர்களால மாசமானா தங்களது வருமானத்தில் ஒரு பகுதியை கூட நிலையாக சேமிக்க முடியலன்னு ஒரு ஆய்வு சொல்லுது. மாச கடைசில சம்பளம் எங்க போச்சுன்னே தெரியலையேன்னு புலம்புற ஆளா நீங்க? அப்போ இந்த ஆடியோ உங்களுக்குதான். இதுக்கு முதல் காரணம் லைஃப்ஸ்டைல் இன்ஃப்ளேஷன் (Lifestyle Inflation). அதாவது வாழ்க்கை முறை பணவீக்கம். சம்பளம் ஏற ஏற நம்ம செலவும் அதை விட வேகமா ஏறதுதான் நம்ம சேமிப்பை முடக்குது. ரெண்டாவது முக்கியமான பிரச்சனை, நம்ம தொண்ணூறுகள் மற்றும் 2k கிட்ஸை தாக்குற 'Money Dysmorphia' என்ற புதிய நிதி சார்ந்த மனநோய். இன்ஸ்டாகிராம், பேஸ்புக்-ல மத்தவங்க போடுற ஆடம்பரமான ட்ரிப், பிராண்டட் பொருட்கள் வீடியோக்களை பார்த்துட்டு, நாமும் அப்படி செலவு பண்ணாதான் சமூகத்துல ஒரு அந்தஸ்து கிடைக்கும்னு நம்பி தப்பான முடிவுகளை எடுக்கிறோம். இதனால நிலையான வருமானம் இருந்தாலும் தங்களை ஏழையாவே நெனச்சிக்கிட்டு நிறைய இளைஞர்கள் மன அழுத்தத்துக்கு ஆளாகுறாங்க. சரி, இந்த சிக்கல்ல இருந்து எப்படி வெளிய வர்றது? பழைய 50-30-20 பட்ஜெட் முறை இப்போ இருக்கிற ஃப்ரீலான்சிங் மற்றும் ஒழுங்கற்ற வருமானம் உள்ள வேலைகளுக்கு செட் ஆகுறதில்ல. அதுக்கு பதிலா காலத்திற்கு ஏற்ற 60-20-20 முறையை ஃபாலோ பண்ணுங்க. உங்க வருமானத்துல 60 சதவீதத்தை அத்தியாவசிய தேவைக்கும், 20 சதவீதத்தை முதலீடு அல்லது கடனுக்கும், மீதி 20 சதவீதத்தை உங்க விருப்ப செலவுகளுக்கும் ஒதுக்குங்க. அடுத்ததா, 'Loud Budgeting' ட்ரை பண்ணுங்க. அதாவது சமூக வலைத்தளங்களுக்காக ஆடம்பர செலவு பண்ணாம, உங்க நிதி நிலைமை என்ன, உங்க சேமிப்பு இலக்குகள் என்னங்கறதை வெளிப்படையா சொல்லி செலவுகளை குறைப்பது. மேலும், சம்பளம் வந்த உடனே சேமிப்புக்கான பணத்தை எடுத்து வேற அக்கவுண்ட்ல போட்டுட்டு, மீதியை மட்டும் செலவுக்கு வச்சிக்கிற 'குறைக்கப்பட்ட சம்பள முறை' (Reduced Salary Method)-ஐ ஃபாலோ பண்ணுங்க. அதேபோல ஆன்லைன்ல ஆஃபர் பார்த்துட்டு ஒரு பொருளை உடனே வாங்காம, 24 மணி நேரம் கழிச்சு அது நிஜமாவே தேவையான்னு யோசிச்சு வாங்குங்க. இதனால உங்க 90% வீண் செலவுகள் குறையும். இந்த சின்ன சின்ன மாற்றங்கள் உங்க எதிர்காலத்தையே மாற்றி அமைக்கும். பணத்தை சரியா நிர்வகித்து நிம்மதியா வாழுங்க. தொடர்ந்து இதுபோல பல பயனுள்ள தகவல்களை தெரிந்துகொள்ள கீப் வாட்சிங் ரைஸ் தமிழ் யூடியூப் சேனல் அண்ட் சப்ஸ்கிரைப்.`; const keyPoints = [ { icon: , title: "Lifestyle Inflation", desc: "சம்பளம் உயரும்போது அதற்கேற்ப ஆடம்பரச் செலவுகளையும் அதிகரிக்கும் ஆபத்தான பழக்கம்." }, { icon: , title: "Money Dysmorphia", desc: "சமூக வலைத்தளங்களைப் பார்த்து, நம்மிடம் பணம் இருந்தாலும் ஏழையாக உணரும் உளவியல் சிக்கல்." }, { icon: , title: "60-20-20 Budget", desc: "60% அத்தியாவசியம், 20% சேமிப்பு/முதலீடு, 20% விருப்பச் செலவுகள் எனப் பிரிக்கும் புதிய முறை." }, { icon: , title: "Reduced Salary Method", desc: "சம்பளம் வந்தவுடன் சேமிப்பைத் தனியே எடுத்துவிட்டு, மீதமுள்ள தொகையை மட்டும் செலவு செய்வது." }, { icon: , title: "24-Hour Rule", desc: "ஒரு பொருளை வாங்கும் முன் 24 மணி நேரம் சிந்தித்து, அது அவசியமா என முடிவு செய்வது." } ]; // Gemini API with Exponential Backoff for AI Chat const callGeminiLLM = async (prompt) => { setIsAiLoading(true); let retries = 5; let delay = 1000; const systemInstruction = `You are an expert Tamil Financial Advisor based on the "Rice Tamil" podcast. You deeply understand concepts like "Lifestyle Inflation", "Money Dysmorphia", "60-20-20 Budget Rule", "Loud Budgeting", "Reduced Salary Method", and the "24-Hour Rule". Answer the user's financial queries in friendly, motivational Tamil. If they ask about saving, advise them using the 60-20-20 rule or 24-hour rule. Keep responses concise, practical, and highly relevant to personal finance.`; while (retries > 0) { try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }], systemInstruction: { parts: [{ text: systemInstruction }] } }) }); if (!response.ok) throw new Error('API Error'); const result = await response.json(); const text = result.candidates?.[0]?.content?.parts?.[0]?.text; setAiResponse(text); setIsAiLoading(false); return; } catch (error) { retries--; if (retries === 0) { setAiResponse("மன்னிக்கவும், AI தொடர்பில் சிக்கல் உள்ளது. சற்று நேரம் கழித்து முயற்சிக்கவும்."); setIsAiLoading(false); } else { await new Promise(r => setTimeout(r, delay)); delay *= 2; } } } }; const handleAskAI = () => { if (aiInput.trim()) { callGeminiLLM(`எனது கேள்வி/நிலைமை: ${aiInput}. இதற்கு சிறந்த நிதி ஆலோசனையை தமிழில் வழங்கவும்.`); } }; const pcmToWav = (pcmData, sampleRate) => { const buffer = new ArrayBuffer(44 + pcmData.length * 2); const view = new DataView(buffer); const writeString = (offset, string) => { for (let i = 0; i < string.length; i++) { view.setUint8(offset + i, string.charCodeAt(i)); } }; writeString(0, 'RIFF'); view.setUint32(4, 32 + pcmData.length * 2, true); writeString(8, 'WAVE'); writeString(12, 'fmt '); view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true); view.setUint32(24, sampleRate, true); view.setUint32(28, sampleRate * 2, true); view.setUint16(32, 2, true); view.setUint16(34, 16, true); writeString(36, 'data'); view.setUint32(40, pcmData.length * 2, true); for (let i = 0; i < pcmData.length; i++) { view.setInt16(44 + i * 2, pcmData[i], true); } return new Blob([buffer], { type: 'audio/wav' }); }; const generateTTSAudio = async () => { setIsLoading(true); setGenerationStatus('ஆடியோ தயாராகிறது...'); let retries = 5; let delay = 1000; const payload = { contents: [{ parts: [{ text: podcastScript }] }], generationConfig: { responseModalities: ["AUDIO"], speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: "Kore" } // Using a clear standard voice for solo podcast } } }, model: "gemini-2.5-flash-preview-tts" }; while (retries > 0) { try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) throw new Error(`API Error: ${response.status}`); const result = await response.json(); if (!result.candidates || !result.candidates[0].content) { throw new Error('Invalid API response format'); } const base64Audio = result.candidates[0].content.parts[0].inlineData.data; const mimeType = result.candidates[0].content.parts[0].inlineData.mimeType; const sampleRate = parseInt(mimeType.match(/rate=(\d+)/)?.[1] || "24000"); const binaryString = atob(base64Audio); const pcmData = new Int16Array(binaryString.length / 2); for (let i = 0; i < pcmData.length; i++) { pcmData[i] = (binaryString.charCodeAt(i * 2) & 0xFF) | (binaryString.charCodeAt(i * 2 + 1) << 8); } const wavBlob = pcmToWav(pcmData, sampleRate); const url = URL.createObjectURL(wavBlob); setAudioUrl(url); setIsLoading(false); setGenerationStatus(''); if (audioRef.current) { audioRef.current.src = url; audioRef.current.play(); setIsPlaying(true); } break; } catch (error) { retries--; if (retries === 0) { setGenerationStatus('மன்னிக்கவும், ஆடியோ உருவாக்குவதில் பிழை. மீண்டும் முயற்சிக்கவும்.'); setIsLoading(false); } else { setGenerationStatus(`இணைப்பு பிழை. மீண்டும் முயற்சிக்கப்படுகிறது...`); await new Promise(resolve => setTimeout(resolve, delay)); delay *= 2; } } } }; const togglePlay = () => { if (isPlaying) { audioRef.current?.pause(); } else { if (!audioUrl) { generateTTSAudio(); } else { audioRef.current?.play(); } } setIsPlaying(!isPlaying); }; const handleReset = () => { if (audioRef.current) { audioRef.current.currentTime = 0; if (!isPlaying) setProgress(0); } }; const handleDownload = () => { if (!audioUrl) return; const link = document.createElement('a'); link.href = audioUrl; link.download = 'Rice_Tamil_Finance_Podcast.wav'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return (
{/* Header */}

நிதி மேலாண்மை 2.0

Rice Tamil • Podcast & AI

{/* Navigation Tabs */}
{activeTab === 'podcast' ? (
{/* Master Audio Player */}
{/* Ambient Glow */}
Full Episode

சேமிப்பை முடக்கும் 3 தவறுகள்!

{/* Main Visualizer */}
{isPlaying ? (
{[1,2,3,4,5,6].map(i => (
))}
) : ( )}

70% இந்தியர்களால் ஏன்
சேமிக்க முடிவதில்லை?

{/* Progress Bar */}
{/* Controls */}
{isPlaying &&
}
{isLoading && (

{generationStatus}

)}
{/* Right: Key Takeaways */}

ஆடியோவின் முக்கிய குறிப்புகள்

{keyPoints.map((kp, idx) => (
{kp.icon}

{kp.title}

{kp.desc}

))}
) : ( /* ✨ FINANCE AI TAB */

AI நிதி ஆலோசகர்

சேமிப்பு, பட்ஜெட், மற்றும் வீண் செலவுகள் குறித்த உங்கள் கேள்விகளைக் கேளுங்கள்.