import React, { useState, useEffect, useRef, useMemo } from ‘react’;
import {
Home,
MapPin,
Sparkles,
Send,
Volume2,
Loader2,
X,
Clock,
MessageSquare,
Languages,
Sun,
Moon,
Info,
ChevronRight,
RefreshCw,
Mail,
Instagram,
Youtube,
Twitter,
ArrowUpRight,
Globe,
Timer
} from ‘lucide-react’;
// — Gemini API Configuration —
const apiKey = “”;
const BASE_URL = “https://generativelanguage.googleapis.com/v1beta/models”;
const TEXT_MODEL = “gemini-2.5-flash-preview-09-2025”;
const TTS_MODEL = “gemini-2.5-flash-preview-tts”;
// — Constants —
const BRAND_NAME = “GO TEMPLES”;
const SEVA_TIMINGS = [
{ id: ‘suprabhatam’, time: “04:30 AM”, ritual: “Suprabhatam”, significance: “Waking the Deity”, hour: 4, minute: 30 },
{ id: ‘nivedyam’, time: “06:00 AM”, ritual: “Nivedyam”, significance: “Morning Offering”, hour: 6, minute: 0 },
{ id: ‘abhishekam’, time: “08:30 AM”, ritual: “Abhishekam”, significance: “Holy Bath”, hour: 8, minute: 30 },
{ id: ‘uchapooja’, time: “12:30 PM”, ritual: “Ucha Pooja”, significance: “Noon Prayer”, hour: 12, minute: 30 },
{ id: ‘deeparadhana’, time: “06:30 PM”, ritual: “Deeparadhana”, significance: “Lamp Offering”, hour: 18, minute: 30 },
{ id: ‘sayanapooja’, time: “08:30 PM”, ritual: “Sayana Pooja”, significance: “Rest”, hour: 20, minute: 30 },
];
const App = () => {
const [isChatOpen, setIsChatOpen] = useState(false);
const [isSpeaking, setIsSpeaking] = useState(false);
const [isChatLoading, setIsChatLoading] = useState(false);
const [isTranslating, setIsTranslating] = useState(false);
const [selectedLanguage, setSelectedLanguage] = useState(‘English’);
const [currentTime, setCurrentTime] = useState(new Date());
const [isDayMode, setIsDayMode] = useState(false);
const [templeData, setTempleData] = useState({
name: “Brihadisvara Temple”,
location: “Thanjavur, Tamil Nadu”,
description: “A magnificent example of Chola architecture. Dedicated to Lord Shiva, it is one of the largest South Indian temples and an exemplary example of fully realized Tamil architecture. The temple’s vimana tower is one of the tallest in South India.”,
imageUrl: “https://images.unsplash.com/photo-1581335022204-6242c1613432?auto=format&fit=crop&q=80&w=1600″,
});
const [chatMessages, setChatMessages] = useState([
{ role: ‘assistant’, text: ‘Namaste! I am your ✨ Divine Guide. Ask me anything about Hindu temples or spiritual history.’ }
]);
const [userInput, setUserInput] = useState(”);
useEffect(() => {
const timer = setInterval(() => setCurrentTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);
useEffect(() => {
const hour = new Date().getHours();
setIsDayMode(hour >= 6 && hour < 18);
}, []);
// Helper to calculate time left for each seva
const getTimeLeft = (targetHour, targetMin) => {
const now = currentTime;
let target = new Date(now);
target.setHours(targetHour, targetMin, 0, 0);
// If the time has already passed today, target the same time tomorrow
if (target < now) {
target.setDate(target.getDate() + 1);
}
const diff = target - now;
const hours = Math.floor(diff / (1000 * 60 * 60));
const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
if (hours === 0 && mins === 0) return "Starting now";
return `${hours}h ${mins}m left`;
};
useEffect(() => {
if (selectedLanguage === ‘English’) {
setTempleData({
name: “Brihadisvara Temple”,
location: “Thanjavur, Tamil Nadu”,
description: “A magnificent example of Chola architecture. Dedicated to Lord Shiva, it is one of the largest South Indian temples and an exemplary example of fully realized Tamil architecture. The temple’s vimana tower is one of the tallest in South India.”,
imageUrl: “https://images.unsplash.com/photo-1581335022204-6242c1613432?auto=format&fit=crop&q=80&w=1600”,
});
return;
}
const translateContent = async () => {
setIsTranslating(true);
const prompt = `Translate the following temple information into ${selectedLanguage}. Keep the tone respectful and divine.
Name: Brihadisvara Temple
Location: Thanjavur, Tamil Nadu
Description: A magnificent example of Chola architecture. Dedicated to Lord Shiva, it is one of the largest South Indian temples and an exemplary example of fully realized Tamil architecture. The temple’s vimana tower is one of the tallest in South India.
Return ONLY a JSON object with keys: name, location, description.`;
try {
const response = await fetch(`${BASE_URL}/${TEXT_MODEL}:generateContent?key=${apiKey}`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({
contents: [{ parts: [{ text: prompt }] }],
generationConfig: { responseMimeType: “application/json” }
})
});
const data = await response.json();
const translated = JSON.parse(data.candidates[0].content.parts[0].text);
setTempleData(prev => ({
…prev,
name: translated.name,
location: translated.location,
description: translated.description
}));
} catch (err) {
console.error(“Translation failed”, err);
} finally {
setIsTranslating(false);
}
};
translateContent();
}, [selectedLanguage]);
const navigateToStart = () => {
window.scrollTo({ top: 0, behavior: ‘smooth’ });
};
const theme = {
bg: isDayMode ? “bg-orange-50/95” : “bg-black”,
sectionBg: isDayMode ? “bg-white” : “bg-zinc-950”,
cardBg: isDayMode ? “bg-orange-100/50” : “bg-zinc-900/50”,
text: isDayMode ? “text-zinc-900” : “text-white”,
subtext: isDayMode ? “text-zinc-600” : “text-zinc-400”,
border: isDayMode ? “border-orange-200” : “border-white/10”,
nav: isDayMode ? “bg-white/80” : “bg-zinc-900/60”,
footerBg: isDayMode ? “bg-zinc-100” : “bg-zinc-950″,
};
const handleChatSubmit = async (e) => {
e.preventDefault();
if (!userInput.trim() || isChatLoading) return;
const userMsg = userInput;
setUserInput(”);
setChatMessages(prev => […prev, { role: ‘user’, text: userMsg }]);
setIsChatLoading(true);
const response = await callGemini(userMsg, `You are a respectful temple guide. Answer in ${selectedLanguage}.`);
setChatMessages(prev => […prev, { role: ‘assistant’, text: response }]);
setIsChatLoading(false);
};
const callGemini = async (prompt, systemInstruction = “”) => {
try {
const response = await fetch(`${BASE_URL}/${TEXT_MODEL}:generateContent?key=${apiKey}`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({
contents: [{ parts: [{ text: prompt }] }],
systemInstruction: systemInstruction ? { parts: [{ text: systemInstruction }] } : undefined
})
});
const data = await response.json();
return data.candidates?.[0]?.content?.parts?.[0]?.text;
} catch (err) {
return “The connection to the divine is temporarily interrupted.”;
}
};
const speakText = async (text) => {
if (isSpeaking) return;
setIsSpeaking(true);
try {
const response = await fetch(`${BASE_URL}/${TTS_MODEL}:generateContent?key=${apiKey}`, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({
contents: [{ parts: [{ text: `In ${selectedLanguage}, read this reverently: ${text}` }] }],
generationConfig: {
responseModalities: [“AUDIO”],
speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: “Kore” } } }
}
})
});
const data = await response.json();
const pcmBase64 = data.candidates?.[0]?.content?.parts?.[0]?.inlineData?.data;
if (pcmBase64) {
const binary = window.atob(pcmBase64);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
const wavHeader = new ArrayBuffer(44);
const view = new DataView(wavHeader);
view.setUint32(0, 0x52494646, false); view.setUint32(4, 36 + bytes.length, true); view.setUint32(8, 0x57415645, false);
view.setUint32(12, 0x666d7420, false); view.setUint32(16, 16, true); view.setUint16(20, 1, true);
view.setUint16(22, 1, true); view.setUint32(24, 24000, true); view.setUint32(40, bytes.length, true);
const url = URL.createObjectURL(new Blob([wavHeader, bytes], { type: 'audio/wav' }));
const player = new Audio(url);
player.play(); player.onended = () => setIsSpeaking(false);
}
} catch (e) { setIsSpeaking(false); }
};
return (
{/* Fixed Premium Nav Bar */}
{/* Main Experience */}
{isTranslating ? ‘Translating…’ : ‘Sacred Entrance Gateway’}
{templeData.name}
{templeData.location}
{templeData.description}
{/* Schedule Section with Countdowns */}
Divine Rituals
Sacred schedule for devotees
{SEVA_TIMINGS.map((seva, i) => {
const isSuprabhatam = seva.id === ‘suprabhatam’;
const timeLeft = getTimeLeft(seva.hour, seva.minute);
return (
{isSuprabhatam && (
)}
{seva.ritual}
{isSuprabhatam && Featured}
{seva.significance}
{isSuprabhatam && (
)}
);
})}
{/* AI Assistant FAB */}
{/* AI Chat Window */}
Divine Guide
{chatMessages.map((m, i) => (
))}
{isChatLoading &&
}
{/* Enhanced Premium Footer */}
);
};
export default App;