import React, { useState, useEffect, useRef } from 'react'; import { Play, Pause, ShoppingBag, Sparkles, Calendar, Volume2, Instagram, Twitter, Mail, Menu, X, ChevronRight, Coffee, Heart, Music, Zap, Loader2, Mic2 } from 'lucide-react'; /** * BRAND ASSETS & CONFIGURATION */ // PASTE YOUR API KEY BETWEEN THE QUOTES BELOW const apiKey = "AIzaSyDwM1EUIC3jfPAilLmPCrRo6PQbHZloH6k"; const PODCAST_RSS_URL = "https://feeds.feedburner.com/ihearthatgirl/TDBC"; const HOST_IMAGE_URL = "https://ihearthatgirl.com/wp-content/uploads/2026/04/1769134612302.png"; const YOUTUBE_CHANNEL_ID = "UCppf_daOuILsJhTSaAYLVLg"; const YOUTUBE_CHANNEL_URL = `https://www.youtube.com/channel/${YOUTUBE_CHANNEL_ID}`; const App = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [episodes, setEpisodes] = useState([]); const [videos, setVideos] = useState([]); const [products, setProducts] = useState([]); const [isLoadingFeed, setIsLoadingFeed] = useState(true); const [isLoadingVideos, setIsLoadingVideos] = useState(true); const [isLoadingProducts, setIsLoadingProducts] = useState(true); const [affirmationInput, setAffirmationInput] = useState(""); const [affirmationResult, setAffirmationResult] = useState(""); const [isAffirming, setIsAffirming] = useState(false); const [restPlannerInput, setRestPlannerInput] = useState(""); const [restPlan, setRestPlan] = useState(""); const [isPlanning, setIsPlanning] = useState(false); const [currentEpisode, setCurrentEpisode] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const audioRef = useRef(null); useEffect(() => { // Fetch Podcast Feed const fetchFeed = async () => { try { const response = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(PODCAST_RSS_URL)}`); const data = await response.json(); if (data.status === 'ok') { setEpisodes(data.items.map((item, index) => ({ id: index, title: item.title, description: item.description.replace(/<[^>]*>?/gm, '').substring(0, 160) + '...', pubDate: new Date(item.pubDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }), audioUrl: item.enclosure?.link }))); } } catch (err) { console.error("Feed Error", err); } finally { setIsLoadingFeed(false); } }; // Fetch YouTube Feed const fetchVideos = async () => { try { const ytRss = `https://www.youtube.com/feeds/videos.xml?channel_id=${YOUTUBE_CHANNEL_ID}`; const response = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(ytRss)}`); const data = await response.json(); if (data.status === 'ok') { setVideos(data.items.slice(0, 4).map(item => ({ id: item.guid, title: item.title, link: item.link, thumbnail: item.thumbnail }))); } } catch (err) { console.error("YouTube Error", err); } finally { setIsLoadingVideos(false); } }; // Fetch Printful Products const fetchProducts = async () => { try { const isSandbox = window.location.hostname.includes('google') || window.location.protocol === 'blob:'; if (isSandbox) { setIsLoadingProducts(false); return; } const response = await fetch('products.php'); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); if (data && data.result) { setProducts(data.result.map(item => ({ id: item.id, name: item.name, price: "Official Merch", image: item.thumbnail_url || "https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=400", category: "The Dope Shop" }))); } } catch (err) { console.warn("Product Sync Error (This is expected in preview modes):", err.message); } finally { setIsLoadingProducts(false); } }; fetchFeed(); fetchVideos(); fetchProducts(); }, []); const callGemini = async (prompt, systemPrompt) => { const delays = [1000, 2000, 4000, 8000, 16000]; for (let i = 0; i <= 5; i++) { 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: systemPrompt }] } }) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(`API Error: ${response.status} - ${errorData.error?.message || 'Unknown error'}`); } const data = await response.json(); const text = data.candidates?.[0]?.content?.parts?.[0]?.text; if (text) return text; throw new Error("Empty candidate response"); } catch (error) { if (i === 5) { console.error("Gemini failed after 5 retries:", error); return "Stay dope, Queen. I'm having a hard time connecting right now, but your energy is still infinite."; } await new Promise(res => setTimeout(res, delays[i])); } } }; const handleGenerateAffirmation = async () => { if (!affirmationInput.trim()) return; setIsAffirming(true); setAffirmationResult(""); const result = await callGemini( `Challenge: ${affirmationInput}`, "You are Kimberly Isis Thomas. Tone: Urban-chic, luxury, empowering. Use 'unleash your dopeness'. Max 3 short sentences." ); setAffirmationResult(result); setIsAffirming(false); }; const handleRestPlan = async () => { if (!restPlannerInput.trim()) return; setIsPlanning(true); setRestPlan(""); const result = await callGemini( `Stress: ${restPlannerInput}`, "Luxury wellness coach for 'Radical Rest'. Provide a soulful 3-step ritual. Be elegant and brief." ); setRestPlan(result); setIsPlanning(false); }; const togglePlay = (ep) => { if (currentEpisode?.id === ep.id) { if (isPlaying) audioRef.current.pause(); else audioRef.current.play(); setIsPlaying(!isPlaying); } else { setCurrentEpisode(ep); setIsPlaying(true); if (audioRef.current) { audioRef.current.src = ep.audioUrl; audioRef.current.play(); } } }; return (