import React, { useState, useEffect, useRef, useCallback } from 'react';
import { ArrowLeft, Calendar, Clock, Home, Book, User, Award, Bell, LogOut, Menu, X, ChevronRight, Star, DollarSign, CreditCard, MessageSquare, BarChart2, TrendingUp, TrendingDown, Smile, Frown, Meh, Info, CheckCircle, AlertCircle, Heart, Shield, Settings, FileText, Send, ThumbsUp, ThumbsDown, Flag, Maximize2, Minimize2, Bot, HelpCircle } from 'lucide-react';

// Main App Component
const PurePathApp = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState(null);
  const [showMenu, setShowMenu] = useState(false);
  const [cleanDays, setCleanDays] = useState(0);
  const [startDate, setStartDate] = useState(null);
  const [blogs, setBlogs] = useState([]);
  const [testimonials, setTestimonials] = useState([]);
  const [coaches, setCoaches] = useState([]);
  const [selectedCoach, setSelectedCoach] = useState(null);
  const [selectedDate, setSelectedDate] = useState(null);
  const [selectedTime, setSelectedTime] = useState(null);
  const [paymentMethod, setPaymentMethod] = useState('');
  const [moodData, setMoodData] = useState([]);
  const [showNotification, setShowNotification] = useState(false);
  const [notification, setNotification] = useState({ message: '', type: 'success' });
  const [chatHistory, setChatHistory] = useState([]);
  const [showChatbot, setShowChatbot] = useState(false);
  const [shareAIData, setShareAIData] = useState(false);
  
  // Chatbot ref to maintain state across renders
  const chatbotRef = useRef({
    isTyping: false,
    currentMessage: '',
    context: {},
    suggestedResponses: []
  });
  
  // Display notification
  const displayNotification = (message, type = 'success') => {
    setNotification({ message, type });
    setShowNotification(true);
    setTimeout(() => {
      setShowNotification(false);
    }, 3000);
  };
  
  // Load chat history from local storage when user logs in
  useEffect(() => {
    if (isLoggedIn && user) {
      const savedChatHistory = localStorage.getItem(`chatHistory_${user.email}`);
      if (savedChatHistory) {
        setChatHistory(JSON.parse(savedChatHistory));
      }
      
      const savedShareSetting = localStorage.getItem(`shareAIData_${user.email}`);
      if (savedShareSetting !== null) {
        setShareAIData(JSON.parse(savedShareSetting));
      }
    }
  }, [isLoggedIn, user]);
  
  // Save chat history to local storage when it changes
  useEffect(() => {
    if (isLoggedIn && user && chatHistory.length > 0) {
      localStorage.setItem(`chatHistory_${user.email}`, JSON.stringify(chatHistory));
    }
  }, [chatHistory, isLoggedIn, user]);
  
  // Save share AI data preference
  useEffect(() => {
    if (isLoggedIn && user) {
      localStorage.setItem(`shareAIData_${user.email}`, JSON.stringify(shareAIData));
    }
  }, [shareAIData, isLoggedIn, user]);
  
  // Update chatbot context when relevant data changes
  useEffect(() => {
    if (isLoggedIn) {
      chatbotRef.current.context = {
        currentPage,
        cleanDays,
        moodData: moodData.slice(0, 7), // Last 7 days of mood data
        recentBlogs: blogs.slice(0, 3), // Recent blog posts
        user
      };
    }
  }, [currentPage, cleanDays, moodData, blogs, isLoggedIn, user]);
  
  // Simulate fetching data
  useEffect(() => {
    // Mock data
    const mockBlogs = [
      { id: 1, title: "Finding Strength in Community", category: "Support", date: "2023-05-15", content: "Building a support network is crucial in overcoming addiction...", image: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
      { id: 2, title: "The Science Behind Addiction", category: "Education", date: "2023-05-10", content: "Understanding the neurological aspects of addiction can help in recovery...", image: "https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
      { id: 3, title: "Daily Devotional: Renewal", category: "Spiritual", date: "2023-05-05", content: "Today's reflection focuses on the concept of renewal and how it applies to our journey...", image: "https://images.unsplash.com/photo-1504805572947-34fad45aed93?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
    ];
    
    const mockTestimonials = [
      { id: 1, name: "John D.", rating: 5, text: "The coaching sessions have been transformative. I've been clean for 60 days now.", date: "2023-04-20" },
      { id: 2, name: "Sarah M.", rating: 4, text: "The app's tracking feature keeps me accountable. The community support is amazing.", date: "2023-04-15" },
      { id: 3, name: "Anonymous", rating: 5, text: "I was skeptical at first, but the personalized approach has made all the difference.", date: "2023-04-10" },
    ];
    
    const mockCoaches = [
      { id: 1, name: "Dr. Michael Johnson", specialty: "Addiction Recovery", experience: "15 years", rate: 75, image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", availability: ["Monday", "Wednesday", "Friday"] },
      { id: 2, name: "Sarah Williams", specialty: "Spiritual Counseling", experience: "8 years", rate: 60, image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", availability: ["Tuesday", "Thursday", "Saturday"] },
      { id: 3, name: "Admin (You)", specialty: "Recovery Specialist", experience: "10 years", rate: 80, image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", availability: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"] },
    ];
    
    setBlogs(mockBlogs);
    setTestimonials(mockTestimonials);
    setCoaches(mockCoaches);
    
    // Check if user has a clean streak stored
    const savedStartDate = localStorage.getItem('cleanStartDate');
    if (savedStartDate) {
      const start = new Date(savedStartDate);
      setStartDate(start);
      const today = new Date();
      const diffTime = Math.abs(today - start);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      setCleanDays(diffDays);
    }
    
    // Load mood data from localStorage
    const savedMoodData = localStorage.getItem('moodData');
    if (savedMoodData) {
      setMoodData(JSON.parse(savedMoodData));
    } else {
      // Generate some mock mood data if none exists
      const mockMoodData = generateMockMoodData(30);
      setMoodData(mockMoodData);
      localStorage.setItem('moodData', JSON.stringify(mockMoodData));
    }
  }, []);
  
  // Generate mock mood data for the past n days
  const generateMockMoodData = (days) => {
    const data = [];
    const today = new Date();
    
    for (let i = days - 1; i >= 0; i--) {
      const date = new Date();
      date.setDate(today.getDate() - i);
      
      // Generate random mood between 1-5
      const mood = Math.floor(Math.random() * 5) + 1;
      
      // Generate random notes
      const notes = [
        "Feeling strong today",
        "Struggled a bit but stayed clean",
        "Had a great coaching session",
        "Meditation helped a lot",
        "Difficult day but made it through",
        "Feeling motivated",
        "Temptations were strong today"
      ];
      
      data.push({
        date: date.toISOString().split('T')[0],
        mood,
        notes: notes[Math.floor(Math.random() * notes.length)],
      });
    }
    
    return data;
  };
  
  // Update clean days counter
  useEffect(() => {
    if (startDate) {
      const interval = setInterval(() => {
        const today = new Date();
        const diffTime = Math.abs(today - startDate);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        setCleanDays(diffDays);
      }, 86400000); // Update once per day
      
      return () => clearInterval(interval);
    }
  }, [startDate]);
  
  // Handle login
  const handleLogin = (userData) => {
    setUser(userData);
    setIsLoggedIn(true);
    setCurrentPage('home');
    displayNotification(`Welcome back, ${userData.name}!`, 'success');
    
    // Check if user has a clean streak
    if (!startDate) {
      const newStartDate = new Date();
      setStartDate(newStartDate);
      localStorage.setItem('cleanStartDate', newStartDate.toISOString());
      setCleanDays(0);
    }
    
    // Add welcome message from chatbot
    setTimeout(() => {
      addChatbotMessage("Welcome back! I'm here to support your journey. How can I help you today?");
    }, 1000);
  };
  
  // Handle logout
  const handleLogout = () => {
    setUser(null);
    setIsLoggedIn(false);
    setCurrentPage('login');
    setShowMenu(false);
    setChatHistory([]);
    setShowChatbot(false);
    displayNotification('You have been logged out', 'info');
  };
  
  // Reset clean streak
  const resetCleanStreak = () => {
    const newStartDate = new Date();
    setStartDate(newStartDate);
    localStorage.setItem('cleanStartDate', newStartDate.toISOString());
    setCleanDays(0);
    displayNotification('Your clean streak has been reset', 'info');
    
    // Add supportive message from chatbot
    if (showChatbot) {
      addChatbotMessage("I noticed you've reset your clean streak. Remember, every journey has setbacks, and each new day is an opportunity to start fresh. Would you like some tips on how to stay motivated?");
    }
  };
  
  // Log mood
  const logMood = (mood, notes) => {
    const today = new Date().toISOString().split('T')[0];
    
    // Check if we already have a mood for today
    const updatedMoodData = [...moodData];
    const todayIndex = updatedMoodData.findIndex(item => item.date === today);
    
    if (todayIndex >= 0) {
      // Update existing entry
      updatedMoodData[todayIndex] = { date: today, mood, notes };
      displayNotification('Your mood has been updated', 'success');
    } else {
      // Add new entry
      updatedMoodData.push({ date: today, mood, notes });
      displayNotification('Your mood has been logged', 'success');
    }
    
    // Sort by date (newest first)
    updatedMoodData.sort((a, b) => new Date(b.date) - new Date(a.date));
    
    setMoodData(updatedMoodData);
    localStorage.setItem('moodData', JSON.stringify(updatedMoodData));
    
    // Add chatbot response based on mood
    if (showChatbot) {
      if (mood <= 2) {
        addChatbotMessage("I notice you're not feeling great today. Would you like some suggestions to help improve your mood?");
      } else if (mood >= 4) {
        addChatbotMessage("Great to see you're feeling good today! Would you like to explore some activities to maintain this positive momentum?");
      }
    }
  };
  
  // Book appointment
  const bookAppointment = () => {
    if (selectedCoach && selectedDate && selectedTime && paymentMethod) {
      // In a real app, this would process the payment and book the appointment
      displayNotification(`Appointment booked with ${selectedCoach.name}`, 'success');
      setCurrentPage('home');
      setSelectedCoach(null);
      setSelectedDate(null);
      setSelectedTime(null);
      setPaymentMethod('');
      
      // Add chatbot message about the appointment
      if (showChatbot) {
        addChatbotMessage(`I see you've booked a session with ${selectedCoach.name}. That's a great step! Would you like some tips on how to prepare for your coaching session?`);
      }
    } else {
      displayNotification('Please complete all booking details', 'error');
    }
  };
  
  // Submit review
  const submitReview = (coachId, rating, text) => {
    // In a real app, this would send the review to the backend
    displayNotification('Thank you for your review!', 'success');
    setCurrentPage('home');
  };
  
  // Add a message from the chatbot
  const addChatbotMessage = (message, suggestions = []) => {
    chatbotRef.current.isTyping = true;
    setChatHistory(prev => [...prev, { type: 'typing', sender: 'bot' }]);
    
    // Simulate typing delay
    setTimeout(() => {
      setChatHistory(prev => {
        const newHistory = [...prev];
        const typingIndex = newHistory.findIndex(msg => msg.type === 'typing');
        if (typingIndex !== -1) {
          newHistory.splice(typingIndex, 1);
        }
        return [...newHistory, { 
          type: 'text', 
          sender: 'bot', 
          content: message, 
          timestamp: new Date().toISOString(),
          suggestions,
          rated: false
        }];
      });
      chatbotRef.current.isTyping = false;
    }, 1500);
  };
  
  // Handle user message to chatbot
  const handleSendMessage = (message) => {
    if (!message.trim()) return;
    
    // Add user message to chat history
    setChatHistory(prev => [...prev, { 
      type: 'text', 
      sender: 'user', 
      content: message, 
      timestamp: new Date().toISOString() 
    }]);
    
    // Process the message and generate a response
    processUserMessage(message);
  };
  
  // Process user message and generate AI response
  const processUserMessage = (message) => {
    const lowerMessage = message.toLowerCase();
    const context = chatbotRef.current.context;
    
    // Simple keyword-based responses
    if (lowerMessage.includes('help') || lowerMessage.includes('support')) {
      addChatbotMessage(
        "I'm here to help! You can ask me about coping strategies, recovery resources, or get personalized advice based on your journey.",
        ["Tell me about coping strategies", "How to handle urges?", "Recommend resources"]
      );
    } 
    else if (lowerMessage.includes('urge') || lowerMessage.includes('craving') || lowerMessage.includes('temptation')) {
      addChatbotMessage(
        "When experiencing urges, try the 5-minute rule: acknowledge the urge and commit to waiting 5 minutes before acting on it. During this time, distract yourself with a different activity. Often, the urge will pass or diminish. Would you like more strategies?",
        ["More urge strategies", "Distraction techniques", "Emergency contacts"]
      );
    }
    else if (lowerMessage.includes('mood') || lowerMessage.includes('feeling')) {
      // Personalized response based on mood data
      const recentMoods = context.moodData || [];
      if (recentMoods.length > 0) {
        const latestMood = recentMoods[0];
        if (latestMood.mood <= 2) {
          addChatbotMessage(
            `I see you've been feeling down recently. Remember that it's normal to have difficult days. Some activities that might help: gentle exercise, calling a supportive friend, or practicing mindfulness for 10 minutes.`,
            ["Mindfulness exercises", "Contact support", "Self-care tips"]
          );
        } else if (latestMood.mood >= 4) {
          addChatbotMessage(
            `It's great to see you've been in a positive mood lately! This is a good time to build on your momentum. Consider setting a small goal for today or reaching out to support someone else on their journey.`,
            ["Set a goal", "Help others", "Maintain momentum"]
          );
        } else {
          addChatbotMessage(
            `Based on your recent mood entries, you seem to be doing okay. Remember to take time for self-care and celebrate your progress, no matter how small.`,
            ["Self-care ideas", "Celebrate progress", "Daily affirmations"]
          );
        }
      } else {
        addChatbotMessage(
          "How are you feeling today? Tracking your mood can help identify patterns and triggers. Would you like to log your mood now?",
          ["Log my mood", "Mood tracking benefits", "Not now"]
        );
      }
    }
    else if (lowerMessage.includes('streak') || lowerMessage.includes('clean') || lowerMessage.includes('sober')) {
      // Response based on clean streak
      if (context.cleanDays === 0) {
        addChatbotMessage(
          "Every journey begins with a single step. Today is the first day of your new path, and I'm here to support you every step of the way. Would you like some tips for getting through the first week?",
          ["First week tips", "Daily affirmations", "Emergency contacts"]
        );
      } else if (context.cleanDays < 7) {
        addChatbotMessage(
          `You've been clean for ${context.cleanDays} days - that's fantastic! The first week can be challenging, but you're making great progress. Focus on one day at a time and be proud of each clean day.`,
          ["Dealing with withdrawal", "Sleep tips", "Hydration importance"]
        );
      } else if (context.cleanDays < 30) {
        addChatbotMessage(
          `${context.cleanDays} days clean is a significant achievement! You're building new habits and rewiring your brain. The urges may still come, but they'll gradually become less intense and less frequent.`,
          ["Building new habits", "Neuroplasticity", "Reward yourself"]
        );
      } else {
        addChatbotMessage(
          `Congratulations on ${context.cleanDays} days clean! This is a remarkable achievement. You've proven your strength and commitment. Remember to celebrate these milestones and reflect on how far you've come.`,
          ["Long-term strategies", "Share your story", "Help others"]
        );
      }
    }
    else if (lowerMessage.includes('resource') || lowerMessage.includes('article') || lowerMessage.includes('read')) {
      // Recommend resources based on context
      const recommendedBlogs = context.recentBlogs || [];
      if (recommendedBlogs.length > 0) {
        const blog = recommendedBlogs[Math.floor(Math.random() * recommendedBlogs.length)];
        addChatbotMessage(
          `I'd recommend reading "${blog.title}" from our blog. It covers important aspects of recovery and might provide valuable insights for your journey.`,
          ["Show me the article", "More recommendations", "Not interested"]
        );
      } else {
        addChatbotMessage(
          "We have several resources that might help you. Our blog covers topics like building support networks, understanding addiction science, and spiritual aspects of recovery. Would you like to explore these?",
          ["Show me the blog", "Recommend a book", "External resources"]
        );
      }
    }
    else if (lowerMessage.includes('coach') || lowerMessage.includes('therapy') || lowerMessage.includes('counseling')) {
      addChatbotMessage(
        "Working with a coach or counselor can provide personalized guidance and accountability. Our certified coaches specialize in addiction recovery and can help you develop strategies tailored to your specific needs.",
        ["View coaches", "Benefits of coaching", "What to expect"]
      );
    }
    else if (lowerMessage.includes('thank')) {
      addChatbotMessage(
        "You're welcome! I'm here to support you whenever you need it. Is there anything else I can help with today?",
        ["Recovery tips", "Mood tracking", "Resources"]
      );
    }
    // Context-aware responses based on current page
    else if (context.currentPage === 'tracker') {
      addChatbotMessage(
        "I see you're on the tracker page. Tracking your clean time and mood can provide valuable insights into your recovery journey. Would you like some tips on how to use these tools effectively?",
        ["Tracking benefits", "Identify patterns", "Set milestones"]
      );
    }
    else if (context.currentPage === 'coaching') {
      addChatbotMessage(
        "Looking for a coach? Working with a professional can accelerate your progress and provide personalized guidance. Our coaches have extensive experience in addiction recovery and can help you develop effective strategies.",
        ["Coach selection tips", "Prepare for coaching", "Coaching benefits"]
      );
    }
    else if (context.currentPage === 'blog') {
      addChatbotMessage(
        "Our blog contains valuable resources and insights for your recovery journey. Reading about others' experiences and evidence-based strategies can provide new perspectives and tools for your own path.",
        ["Recommended articles", "Latest research", "Success stories"]
      );
    }
    else {
      // Default response
      addChatbotMessage(
        "I'm here to support your recovery journey. You can ask me about coping strategies, resources, or get personalized advice based on your progress. How can I assist you today?",
        ["Coping strategies", "Recovery resources", "Track my progress"]
      );
    }
  };
  
  // Handle suggestion click
  const handleSuggestionClick = (suggestion) => {
    // Add the suggestion as a user message
    setChatHistory(prev => [...prev, { 
      type: 'text', 
      sender: 'user', 
      content: suggestion, 
      timestamp: new Date().toISOString() 
    }]);
    
    // Process the suggestion
    processUserMessage(suggestion);
  };
  
  // Handle rating a bot message
  const handleRateMessage = (index, isHelpful) => {
    setChatHistory(prev => {
      const newHistory = [...prev];
      if (newHistory[index] && newHistory[index].sender === 'bot') {
        newHistory[index] = {
          ...newHistory[index],
          rated: true,
          helpful: isHelpful
        };
        
        // If sharing is enabled, this would send the rating to the backend
        if (shareAIData && isLoggedIn) {
          console.log('Sending rating to backend:', {
            messageId: index,
            message: newHistory[index].content,
            helpful: isHelpful,
            userId: user.email,
            timestamp: new Date().toISOString()
          });
        }
      }
      return newHistory;
    });
    
    displayNotification(isHelpful ? 'Thank you for your feedback!' : 'We\'ll work on improving this response', 'info');
  };
  
  // Handle reporting incorrect advice
  const handleReportMessage = (index) => {
    setChatHistory(prev => {
      const newHistory = [...prev];
      if (newHistory[index] && newHistory[index].sender === 'bot') {
        newHistory[index] = {
          ...newHistory[index],
          reported: true
        };
        
        // If sharing is enabled, this would send the report to the backend
        if (shareAIData && isLoggedIn) {
          console.log('Sending report to backend:', {
            messageId: index,
            message: newHistory[index].content,
            userId: user.email,
            timestamp: new Date().toISOString()
          });
        }
      }
      return newHistory;
    });
    
    displayNotification('Thank you for reporting this response. We\'ll review it to improve our AI.', 'info');
    
    // Add follow-up message from bot
    addChatbotMessage("I apologize for the incorrect information. Thank you for helping me improve. Is there something else I can help you with?");
  };
  
  // Toggle share AI data setting
  const toggleShareAIData = () => {
    setShareAIData(prev => !prev);
    displayNotification(
      shareAIData 
        ? 'You\'ve opted out of sharing anonymous data' 
        : 'Thank you for helping improve our AI by sharing anonymous data', 
      'info'
    );
  };
  
  // Render different pages based on currentPage state
  const renderPage = () => {
    if (!isLoggedIn && currentPage !== 'login' && currentPage !== 'signup' && currentPage !== 'reset-password') {
      return <LoginPage onLogin={handleLogin} setCurrentPage={setCurrentPage} />;
    }
    
    switch (currentPage) {
      case 'home':
        return <HomePage 
          cleanDays={cleanDays} 
          resetCleanStreak={resetCleanStreak} 
          blogs={blogs.slice(0, 2)} 
          setCurrentPage={setCurrentPage} 
          moodData={moodData}
          logMood={logMood}
        />;
      case 'tracker':
        return <TrackerPage 
          cleanDays={cleanDays} 
          startDate={startDate} 
          resetCleanStreak={resetCleanStreak} 
          moodData={moodData}
          logMood={logMood}
        />;
      case 'blog':
        return <BlogPage blogs={blogs} setCurrentPage={setCurrentPage} />;
      case 'blog-detail':
        return <BlogDetailPage blog={blogs.find(b => b.id === parseInt(currentPage.split('-')[2]))} setCurrentPage={setCurrentPage} />;
      case 'coaching':
        return <CoachingPage coaches={coaches} setSelectedCoach={setSelectedCoach} setCurrentPage={setCurrentPage} />;
      case 'booking':
        return <BookingPage 
          coach={selectedCoach} 
          setSelectedDate={setSelectedDate} 
          setSelectedTime={setSelectedTime} 
          selectedDate={selectedDate}
          selectedTime={selectedTime}
          setCurrentPage={setCurrentPage} 
        />;
      case 'payment':
        return <PaymentPage 
          coach={selectedCoach} 
          selectedDate={selectedDate} 
          selectedTime={selectedTime} 
          setPaymentMethod={setPaymentMethod} 
          paymentMethod={paymentMethod}
          bookAppointment={bookAppointment}
          setCurrentPage={setCurrentPage} 
        />;
      case 'testimonials':
        return <TestimonialsPage testimonials={testimonials} setCurrentPage={setCurrentPage} />;
      case 'profile':
        return <ProfilePage 
          user={user} 
          handleLogout={handleLogout} 
          setCurrentPage={setCurrentPage} 
          shareAIData={shareAIData}
          toggleShareAIData={toggleShareAIData}
        />;
      case 'login':
        return <LoginPage onLogin={handleLogin} setCurrentPage={setCurrentPage} />;
      case 'signup':
        return <SignupPage setCurrentPage={setCurrentPage} />;
      case 'reset-password':
        return <ResetPasswordPage setCurrentPage={setCurrentPage} />;
      case 'write-review':
        return <WriteReviewPage coachId={parseInt(currentPage.split('-')[2])} submitReview={submitReview} setCurrentPage={setCurrentPage} />;
      default:
        return <HomePage 
          cleanDays={cleanDays} 
          resetCleanStreak={resetCleanStreak} 
          blogs={blogs.slice(0, 2)} 
          setCurrentPage={setCurrentPage} 
          moodData={moodData}
          logMood={logMood}
        />;
    }
  };
  
  // Toggle side menu
  const toggleMenu = () => {
    setShowMenu(!showMenu);
  };
  
  // Toggle chatbot
  const toggleChatbot = () => {
    setShowChatbot(prev => !prev);
    
    // If opening the chatbot and no messages yet, add welcome message
    if (!showChatbot && chatHistory.length === 0) {
      addChatbotMessage("Hi there! I'm your PurePath assistant. I can provide support, resources, and personalized advice for your recovery journey. How can I help you today?", 
        ["Tell me about recovery", "I'm having urges", "Recommend resources"]
      );
    }
  };
  
  return (
    <div className="flex flex-col h-screen bg-slate-50 font-['Inter',_sans-serif] text-slate-800">
      {/* Header */}
      <header className="bg-white shadow-sm px-4 py-3 flex justify-between items-center sticky top-0 z-20">
        <div className="flex items-center">
          {currentPage !== 'home' && isLoggedIn ? (
            <button 
              onClick={() => setCurrentPage('home')} 
              className="mr-3 p-2 rounded-full hover:bg-slate-100 transition-colors"
              aria-label="Back to home"
            >
              <ArrowLeft size={20} className="text-slate-600" />
            </button>
          ) : (
            <button 
              onClick={toggleMenu} 
              className="p-2 rounded-full hover:bg-slate-100 transition-colors"
              aria-label={showMenu ? "Close menu" : "Open menu"}
            >
              {showMenu ? <X size={20} className="text-slate-600" /> : <Menu size={20} className="text-slate-600" />}
            </button>
          )}
          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent ml-2">
            PurePath
          </h1>
        </div>
        {isLoggedIn && (
          <div className="flex items-center">
            <button 
              className="relative p-2 rounded-full hover:bg-slate-100 transition-colors mr-2"
              aria-label="Notifications"
            >
              <Bell size={20} className="text-slate-600" />
              <span className="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
            </button>
            <button 
              className="w-9 h-9 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center text-white font-medium shadow-md hover:shadow-lg transition-shadow"
              onClick={() => setCurrentPage('profile')}
              aria-label="Profile"
            >
              {user?.name?.charAt(0) || 'U'}
            </button>
          </div>
        )}
      </header>
      
      {/* Side Menu */}
      {showMenu && isLoggedIn && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-30 backdrop-blur-sm transition-opacity" onClick={toggleMenu}>
          <div 
            className="w-72 h-full bg-white shadow-xl p-6 z-40 animate-slide-in" 
            onClick={e => e.stopPropagation()}
          >
            <div className="flex flex-col h-full">
              <div className="mb-8 mt-2">
                <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">
                  PurePath
                </h2>
                <p className="text-sm text-slate-500 mt-1">Your journey to freedom</p>
              </div>
              
              <nav className="flex-1">
                <ul className="space-y-1">
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('home'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Home size={18} className="mr-3 text-blue-500" />
                      <span>Home</span>
                    </button>
                  </li>
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('tracker'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Clock size={18} className="mr-3 text-teal-500" />
                      <span>Clean Tracker</span>
                    </button>
                  </li>
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('blog'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Book size={18} className="mr-3 text-indigo-500" />
                      <span>Blog & Resources</span>
                    </button>
                  </li>
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('coaching'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Calendar size={18} className="mr-3 text-purple-500" />
                      <span>Book Coaching</span>
                    </button>
                  </li>
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('testimonials'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Award size={18} className="mr-3 text-amber-500" />
                      <span>Testimonials</span>
                    </button>
                  </li>
                </ul>
              </nav>
              
              <div className="mt-auto pt-4 border-t border-slate-200">
                <button 
                  onClick={handleLogout} 
                  className="flex items-center w-full p-3 rounded-lg hover:bg-red-50 text-red-500 transition-colors"
                >
                  <LogOut size={18} className="mr-3" />
                  <span>Logout</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* Main Content */}
      <main className="flex-1 overflow-y-auto pb-20">
        {renderPage()}
      </main>
      
      {/* Bottom Navigation */}
      {isLoggedIn && (
        <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 flex justify-around items-center py-2 px-3 z-20 shadow-lg">
          <button 
            onClick={() => setCurrentPage('home')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'home' ? 'text-blue-500 bg-blue-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <Home size={20} />
            <span className="text-xs mt-1 font-medium">Home</span>
          </button>
          <button 
            onClick={() => setCurrentPage('tracker')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'tracker' ? 'text-teal-500 bg-teal-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <Clock size={20} />
            <span className="text-xs mt-1 font-medium">Tracker</span>
          </button>
          <button 
            onClick={() => setCurrentPage('coaching')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'coaching' ? 'text-purple-500 bg-purple-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <Calendar size={20} />
            <span className="text-xs mt-1 font-medium">Coaching</span>
          </button>
          <button 
            onClick={() => setCurrentPage('blog')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'blog' ? 'text-indigo-500 bg-indigo-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <Book size={20} />
            <span className="text-xs mt-1 font-medium">Blog</span>
          </button>
          <button 
            onClick={() => setCurrentPage('profile')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'profile' ? 'text-amber-500 bg-amber-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <User size={20} />
            <span className="text-xs mt-1 font-medium">Profile</span>
          </button>
        </nav>
      )}
      
      {/* Chatbot Button */}
      {isLoggedIn && (
        <button
          onClick={toggleChatbot}
          className="fixed bottom-20 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center text-white shadow-lg hover:shadow-xl transition-shadow z-30"
          aria-label="Chat with AI assistant"
        >
          {showChatbot ? <X size={20} /> : <MessageSquare size={20} />}
        </button>
      )}
      
      {/* Chatbot Interface */}
      {isLoggedIn && showChatbot && (
        <div className="fixed bottom-20 right-4 w-80 md:w-96 h-[500px] max-h-[70vh] bg-white rounded-lg shadow-xl flex flex-col z-30 animate-slide-up">
          {/* Chatbot Header */}
          <div className="bg-gradient-to-r from-blue-500 to-teal-400 text-white p-3 rounded-t-lg flex items-center justify-between">
            <div className="flex items-center">
              <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center mr-2">
                <Bot size={18} className="text-white" />
              </div>
              <div>
                <h3 className="font-medium">PurePath Assistant</h3>
                <p className="text-xs text-blue-100">AI-powered support</p>
              </div>
            </div>
            <button 
              onClick={toggleChatbot}
              className="p-1 hover:bg-white/10 rounded-full transition-colors"
              aria-label="Close chatbot"
            >
              <X size={18} />
            </button>
          </div>
          
          {/* Chat Messages */}
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {chatHistory.map((message, index) => (
              <div key={index} className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}>
                {message.type === 'typing' ? (
                  <div className="bg-slate-100 rounded-lg p-3 max-w-[80%]">
                    <div className="flex space-x-1">
                      <div className="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
                      <div className="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
                      <div className="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
                    </div>
                  </div>
                ) : (
                  <div className={`rounded-lg p-3 max-w-[80%] ${
                    message.sender === 'user' 
                      ? 'bg-blue-500 text-white' 
                      : 'bg-slate-100 text-slate-800'
                  }`}>
                    <p>{message.content}</p>
                    
                    {/* Suggestions */}
                    {message.sender === 'bot' && message.suggestions && message.suggestions.length > 0 && (
                      <div className="mt-2 space-y-1">
                        {message.suggestions.map((suggestion, i) => (
                          <button 
                            key={i}
                            onClick={() => handleSuggestionClick(suggestion)}
                            className="text-xs bg-white text-blue-500 px-2 py-1 rounded-full hover:bg-blue-50 transition-colors block"
                          >
                            {suggestion}
                          </button>
                        ))}
                      </div>
                    )}
                    
                    {/* Rating and Report Options */}
                    {message.sender === 'bot' && !message.rated && !message.reported && (
                      <div className="mt-2 flex items-center space-x-2">
                        <button 
                          onClick={() => handleRateMessage(index, true)}
                          className="text-xs text-slate-500 hover:text-green-500 transition-colors"
                          aria-label="Mark as helpful"
                        >
                          <ThumbsUp size={14} />
                        </button>
                        <button 
                          onClick={() => handleRateMessage(index, false)}
                          className="text-xs text-slate-500 hover:text-red-500 transition-colors"
                          aria-label="Mark as not helpful"
                        >
                          <ThumbsDown size={14} />
                        </button>
                        <button 
                          onClick={() => handleReportMessage(index)}
                          className="text-xs text-slate-500 hover:text-amber-500 transition-colors ml-auto"
                          aria-label="Report incorrect advice"
                        >
                          <Flag size={14} />
                        </button>
                      </div>
                    )}
                    
                    {/* Rated Message */}
                    {message.sender === 'bot' && message.rated && (
                      <div className="mt-2 text-xs text-slate-500">
                        {message.helpful 
                          ? 'Thanks for your feedback!' 
                          : 'Thanks for your feedback. We\'ll improve this response.'}
                      </div>
                    )}
                    
                    {/* Reported Message */}
                    {message.sender === 'bot' && message.reported && (
                      <div className="mt-2 text-xs text-slate-500">
                        This response has been reported. Thank you for helping us improve.
                      </div>
                    )}
                  </div>
                )}
              </div>
            ))}
            {chatHistory.length === 0 && (
              <div className="h-full flex flex-col items-center justify-center text-center p-4">
                <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
                  <Bot size={32} className="text-blue-500" />
                </div>
                <h3 className="text-lg font-medium text-slate-800 mb-2">PurePath Assistant</h3>
                <p className="text-slate-500 mb-4">
                  I'm here to support your recovery journey with personalized advice and resources.
                </p>
                <div className="space-y-2 w-full">
                  <button 
                    onClick={() => handleSendMessage("How can you help me?")}
                    className="w-full bg-slate-100 hover:bg-slate-200 text-slate-800 px-4 py-2 rounded-lg transition-colors text-sm text-left"
                  >
                    How can you help me?
                  </button>
                  <button 
                    onClick={() => handleSendMessage("I'm having urges")}
                    className="w-full bg-slate-100 hover:bg-slate-200 text-slate-800 px-4 py-2 rounded-lg transition-colors text-sm text-left"
                  >
                    I'm having urges
                  </button>
                  <button 
                    onClick={() => handleSendMessage("Recommend resources")}
                    className="w-full bg-slate-100 hover:bg-slate-200 text-slate-800 px-4 py-2 rounded-lg transition-colors text-sm text-left"
                  >
                    Recommend resources
                  </button>
                </div>
              </div>
            )}
          </div>
          
          {/* Chat Input */}
          <div className="p-3 border-t border-slate-200">
            <form 
              onSubmit={(e) => {
                e.preventDefault();
                const input = e.target.elements.message;
                handleSendMessage(input.value);
                input.value = '';
              }}
              className="flex items-center"
            >
              <input
                type="text"
                name="message"
                placeholder="Type your message..."
                className="flex-1 bg-slate-100 border-none rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <button
                type="submit"
                className="ml-2 w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center text-white"
                aria-label="Send message"
              >
                <Send size={18} />
              </button>
            </form>
            <div className="mt-2 text-xs text-slate-500 flex items-center justify-between">
              <span>
                {shareAIData 
                  ? 'Anonymous data sharing is enabled' 
                  : 'Anonymous data sharing is disabled'}
              </span>
              <button 
                onClick={() => setCurrentPage('profile')}
                className="text-blue-500 hover:underline"
              >
                Settings
              </button>
            </div>
          </div>
        </div>
      )}
      
      {/* Notification */}
      {showNotification && (
        <div className={`fixed bottom-24 left-1/2 transform -translate-x-1/2 px-4 py-3 rounded-lg shadow-lg flex items-center z-50 animate-fade-in ${
          notification.type === 'success' ? 'bg-green-500 text-white' :
          notification.type === 'error' ? 'bg-red-500 text-white' :
          'bg-blue-500 text-white'
        }`}>
          {notification.type === 'success' && <CheckCircle size={18} className="mr-2" />}
          {notification.type === 'error' && <AlertCircle size={18} className="mr-2" />}
          {notification.type === 'info' && <Info size={18} className="mr-2" />}
          <span>{notification.message}</span>
        </div>
      )}
    </div>
  );
};

// Home Page Component
const HomePage = ({ cleanDays, resetCleanStreak, blogs, setCurrentPage, moodData, logMood }) => {
  // Get today's mood if logged
  const today = new Date().toISOString().split('T')[0];
  const todayMood = moodData.find(item => item.date === today);
  
  return (
    <div className="p-5 max-w-4xl mx-auto">
      {/* Welcome Message */}
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-slate-800">Welcome Back</h2>
        <p className="text-slate-500 mt-1">Continue your journey to freedom</p>
      </div>
      
      {/* Clean Streak Card */}
      <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div className="bg-gradient-to-r from-blue-500 to-teal-400 p-5">
          <h3 className="text-lg font-semibold text-white mb-1">Your Clean Streak</h3>
          <p className="text-blue-50 text-sm">Every day is a victory</p>
        </div>
        <div className="p-5">
          <div className="flex items-center justify-center my-6">
            <div className="w-36 h-36 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 p-1 shadow-lg">
              <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
                <div className="text-center">
                  <p className="text-4xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">{cleanDays}</p>
                  <p className="text-sm text-slate-500 font-medium">Days Clean</p>
                </div>
              </div>
            </div>
          </div>
          <div className="flex justify-between">
            <button 
              onClick={() => setCurrentPage('tracker')} 
              className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg text-sm font-medium shadow-md hover:shadow-lg transition-shadow"
            >
              View Details
            </button>
            <button 
              onClick={resetCleanStreak} 
              className="px-5 py-2.5 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors"
            >
              Reset Counter
            </button>
          </div>
        </div>
      </div>
      
      {/* Today's Mood */}
      <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div className="p-5">
          <h3 className="text-lg font-semibold text-slate-800 mb-4">How are you feeling today?</h3>
          {todayMood ? (
            <div className="text-center">
              <div className="flex justify-center mb-4">
                {todayMood.mood === 1 && <Frown size={64} className="text-red-500" />}
                {todayMood.mood === 2 && <Frown size={64} className="text-orange-500" />}
                {todayMood.mood === 3 && <Meh size={64} className="text-amber-500" />}
                {todayMood.mood === 4 && <Smile size={64} className="text-lime-500" />}
                {todayMood.mood === 5 && <Smile size={64} className="text-green-500" />}
              </div>
              <div className="bg-slate-50 rounded-lg p-4 mb-4 max-w-md mx-auto">
                <p className="text-slate-700 italic">"{todayMood.notes}"</p>
              </div>
              <button 
                onClick={() => setCurrentPage('tracker')} 
                className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg text-sm font-medium shadow-md hover:shadow-lg transition-shadow"
              >
                Update Mood
              </button>
            </div>
          ) : (
            <div className="text-center">
              <div className="flex justify-center space-x-3 mb-6">
                <Frown size={36} className="text-slate-300" />
                <Meh size={36} className="text-slate-300" />
                <Smile size={36} className="text-slate-300" />
              </div>
              <p className="text-slate-500 mb-4">You haven't logged your mood today</p>
              <button 
                onClick={() => setCurrentPage('tracker')} 
                className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg text-sm font-medium shadow-md hover:shadow-lg transition-shadow"
              >
                Log Mood
              </button>
            </div>
          )}
        </div>
      </div>
      
      {/* Quick Actions */}
      <h3 className="text-lg font-semibold text-slate-800 mb-3">Quick Actions</h3>
      <div className="grid grid-cols-2 gap-4 mb-8">
        <button 
          onClick={() => setCurrentPage('coaching')} 
          className="bg-white rounded-xl shadow-md p-5 flex flex-col items-center justify-center hover:shadow-lg transition-shadow"
        >
          <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-3">
            <Calendar size={24} className="text-purple-500" />
          </div>
          <span className="text-sm font-medium text-slate-800">Book Coaching</span>
        </button>
        <button 
          onClick={() => setCurrentPage('blog')} 
          className="bg-white rounded-xl shadow-md p-5 flex flex-col items-center justify-center hover:shadow-lg transition-shadow"
        >
          <div className="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-3">
            <Book size={24} className="text-indigo-500" />
          </div>
          <span className="text-sm font-medium text-slate-800">Read Articles</span>
        </button>
      </div>
      
      {/* Recent Blog Posts */}
      <div className="mb-8">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-semibold text-slate-800">Recent Articles</h3>
          <button 
            onClick={() => setCurrentPage('blog')} 
            className="text-blue-500 text-sm font-medium flex items-center hover:text-blue-600 transition-colors"
          >
            View All <ChevronRight size={16} />
          </button>
        </div>
        <div className="space-y-4">
          {blogs.map(blog => (
            <div 
              key={blog.id} 
              className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
              onClick={() => setCurrentPage(`blog-detail-${blog.id}`)}
            >
              <div className="md:flex">
                <div className="md:w-1/3">
                  <img src={blog.image} alt={blog.title} className="h-48 md:h-full w-full object-cover" />
                </div>
                <div className="p-5 md:w-2/3">
                  <span className="inline-block px-3 py-1 rounded-full text-xs font-medium bg-teal-100 text-teal-800 mb-2">
                    {blog.category}
                  </span>
                  <h3 className="text-lg font-semibold text-slate-800 mb-2">{blog.title}</h3>
                  <p className="text-slate-500 text-sm mb-3 line-clamp-2">{blog.content}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-xs text-slate-400">{blog.date}</span>
                    <span className="text-blue-500 text-sm font-medium flex items-center">
                      Read More <ChevronRight size={16} />
                    </span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      
      {/* Motivational Quote */}
      <div className="bg-gradient-to-r from-blue-500 to-teal-400 rounded-xl p-6 mb-6 shadow-md">
        <div className="flex">
          <div className="text-white opacity-30 mr-3">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 11H6C5.46957 11 4.96086 10.7893 4.58579 10.4142C4.21071 10.0391 4 9.53043 4 9V7C4 6.46957 4.21071 5.96086 4.58579 5.58579C4.96086 5.21071 5.46957 5 6 5H8C8.53043 5 9.03914 5.21071 9.41421 5.58579C9.78929 5.96086 10 6.46957 10 7M18 14H14C13.4696 14 12.9609 14.2107 12.5858 14.5858C12.2107 14.9609 12 15.4696 12 16V18C12 18.5304 12.2107 19.0391 12.5858 19.4142C12.9609 19.7893 13.4696 20 14 20H16C16.5304 20 17.0391 19.7893 17.4142 19.4142C17.7893 19.0391 18 18.5304 18 18V16C18 15.4696 17.7893 14.9609 17.4142 14.5858C17.0391 14.2107 16.5304 14 16 14H14C14 14 14 11.5 14 10C14 8.5 15 7.5 16 7.5C17 7.5 17.5 8 17.5 8.5V11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <p className="text-white font-medium italic">
            "The journey of a thousand miles begins with a single step. Every day clean is a victory worth celebrating."
          </p>
        </div>
      </div>
    </div>
  );
};

// Tracker Page Component with Mood Tracking
const TrackerPage = ({ cleanDays, startDate, resetCleanStreak, moodData, logMood }) => {
  const [showMoodLog, setShowMoodLog] = useState(false);
  const [selectedMood, setSelectedMood] = useState(3);
  const [moodNotes, setMoodNotes] = useState('');
  const [activeTab, setActiveTab] = useState('streak');
  
  // Calculate milestone dates
  const getMilestoneDate = (days) => {
    if (!startDate) return null;
    const date = new Date(startDate);
    date.setDate(date.getDate() + days);
    return date.toLocaleDateString();
  };
  
  // Define milestones
  const milestones = [
    { days: 1, label: "First Day", achieved: cleanDays >= 1 },
    { days: 7, label: "One Week", achieved: cleanDays >= 7 },
    { days: 30, label: "One Month", achieved: cleanDays >= 30 },
    { days: 90, label: "Three Months", achieved: cleanDays >= 90 },
    { days: 180, label: "Six Months", achieved: cleanDays >= 180 },
    { days: 365, label: "One Year", achieved: cleanDays >= 365 },
  ];
  
  // Get today's mood if logged
  const today = new Date().toISOString().split('T')[0];
  const todayMood = moodData.find(item => item.date === today);
  
  // Initialize mood form with today's values if they exist
  useEffect(() => {
    if (todayMood) {
      setSelectedMood(todayMood.mood);
      setMoodNotes(todayMood.notes || '');
    } else {
      setSelectedMood(3);
      setMoodNotes('');
    }
  }, [todayMood]);
  
  // Handle mood submission
  const handleMoodSubmit = () => {
    logMood(selectedMood, moodNotes);
    setShowMoodLog(false);
  };
  
  // Calculate mood statistics
  const calculateMoodStats = () => {
    if (moodData.length === 0) return { average: 0, distribution: [] };
    
    // Calculate average mood
    const sum = moodData.reduce((acc, item) => acc + item.mood, 0);
    const average = sum / moodData.length;
    
    // Calculate distribution
    const distribution = [0, 0, 0, 0, 0]; // For moods 1-5
    moodData.forEach(item => {
      distribution[item.mood - 1]++;
    });
    
    // Calculate percentages
    const distributionPercentages = distribution.map(count => 
      Math.round((count / moodData.length) * 100)
    );
    
    // Find most common mood
    let maxIndex = 0;
    for (let i = 1; i < distribution.length; i++) {
      if (distribution[i] > distribution[maxIndex]) {
        maxIndex = i;
      }
    }
    const mostCommonMood = maxIndex + 1;
    
    // Calculate 7-day trend
    const last7Days = moodData.slice(0, 7).reverse();
    const trend = last7Days.length > 1 ? 
      (last7Days[last7Days.length - 1].mood - last7Days[0].mood) : 0;
    
    return { 
      average: average.toFixed(1), 
      distribution: distributionPercentages,
      mostCommonMood,
      trend
    };
  };
  
  const moodStats = calculateMoodStats();
  
  // Format date for display
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
  };
  
  // Render mood emoji based on rating
  const renderMoodEmoji = (mood) => {
    switch (mood) {
      case 1: return <Frown size={24} className="text-red-500" />;
      case 2: return <Frown size={24} className="text-orange-500" />;
      case 3: return <Meh size={24} className="text-yellow-500" />;
      case 4: return <Smile size={24} className="text-lime-500" />;
      case 5: return <Smile size={24} className="text-green-500" />;
      default: return null;
    }
  };
  
  // Render mood color based on rating
  const getMoodColor = (mood) => {
    switch (mood) {
      case 1: return 'bg-red-500';
      case 2: return 'bg-orange-500';
      case 3: return 'bg-yellow-500';
      case 4: return 'bg-lime-500';
      case 5: return 'bg-green-500';
      default: return 'bg-gray-300';
    }
  };
  
  // Render mood chart
  const renderMoodChart = () => {
    const last14Days = [...moodData].slice(0, 14).reverse();
    
    return (
      <div className="mt-4">
        <div className="flex items-end h-40 space-x-1">
          {last14Days.map((item, index) => (
            <div key={index} className="flex flex-col items-center flex-1">
              <div 
                className={`${getMoodColor(item.mood)} rounded-t-sm w-full`} 
                style={{ height: `${item.mood * 20}%` }}
              ></div>
              <div className="text-xs text-gray-500 mt-1 transform -rotate-45 origin-top-left">
                {formatDate(item.date)}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };
  
  return (
    <div className="p-5 max-w-4xl mx-auto">
      {/* Tabs */}
      <div className="flex mb-6 bg-white rounded-lg shadow-md p-1">
        <button 
          onClick={() => setActiveTab('streak')} 
          className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${activeTab === 'streak' ? 'bg-gradient-to-r from-blue-500 to-teal-400 text-white shadow-md' : 'text-slate-600 hover:bg-slate-100'}`}
        >
          Clean Streak
        </button>
        <button 
          onClick={() => setActiveTab('mood')} 
          className={`flex-1 py-2 px-4 rounded-md font-medium transition-colors ${activeTab === 'mood' ? 'bg-gradient-to-r from-blue-500 to-teal-400 text-white shadow-md' : 'text-slate-600 hover:bg-slate-100'}`}
        >
          Mood Tracker
        </button>
      </div>
      
      {activeTab === 'streak' ? (
        <>
          <h2 className="text-2xl font-bold text-slate-800 mb-4">Clean Time Tracker</h2>
          
          {/* Main Counter */}
          <div className="bg-white rounded-xl shadow-md p-6 mb-6">
            <div className="flex flex-col items-center">
              <p className="text-slate-500 mb-2">You've been clean for</p>
              <div className="flex items-baseline">
                <span className="text-6xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">{cleanDays}</span>
                <span className="text-xl font-medium text-slate-600 ml-2">days</span>
              </div>
              {startDate && (
                <p className="text-sm text-slate-500 mt-2">
                  Since {startDate.toLocaleDateString()}
                </p>
              )}
              <button 
                onClick={resetCleanStreak} 
                className="mt-6 px-5 py-2.5 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors"
              >
                Reset Counter
              </button>
            </div>
          </div>
          
          {/* Milestones */}
          <div className="bg-white rounded-xl shadow-md p-6 mb-6">
            <h3 className="text-lg font-semibold text-slate-800 mb-6">Milestones</h3>
            <div className="space-y-6">
              {milestones.map((milestone, index) => (
                <div key={index} className="flex items-center">
                  <div className={`w-12 h-12 rounded-full flex items-center justify-center mr-4 ${
                    milestone.achieved 
                      ? 'bg-gradient-to-r from-blue-500 to-teal-400 text-white shadow-md' 
                      : 'bg-slate-100 text-slate-400'
                  }`}>
                    {milestone.achieved ? '✓' : milestone.days}
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-slate-800">{milestone.label}</p>
                    <p className="text-sm text-slate-500">
                      {milestone.achieved 
                        ? `Achieved on ${getMilestoneDate(milestone.days)}` 
                        : `Expected on ${getMilestoneDate(milestone.days)}`}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          
          {/* Motivational Section */}
          <div className="bg-gradient-to-r from-blue-500 to-teal-400 rounded-xl p-6 shadow-md">
            <h3 className="text-xl font-semibold text-white mb-3">Keep Going!</h3>
            <p className="text-white opacity-90">
              Every day is a new victory. Remember why you started this journey and stay committed to your goals.
            </p>
          </div>
        </>
      ) : (
        <>
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-bold text-slate-800">Mood Tracker</h2>
            <button 
              onClick={() => setShowMoodLog(true)} 
              className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg text-sm font-medium shadow-md hover:shadow-lg transition-shadow"
            >
              {todayMood ? 'Update Today\'s Mood' : 'Log Today\'s Mood'}
            </button>
          </div>
          
          {/* Mood Chart */}
          <div className="bg-white rounded-xl shadow-md p-6 mb-6">
            <h3 className="text-lg font-semibold text-slate-800 mb-4">Your Mood Trends</h3>
            {moodData.length > 0 ? (
              <>
                {renderMoodChart()}
                <div className="flex justify-between mt-6 text-xs text-slate-500">
                  <div className="flex items-center">
                    <Frown size={16} className="text-red-500 mr-1" /> Very Low
                  </div>
                  <div className="flex items-center">
                    <Meh size={16} className="text-yellow-500 mr-1" /> Neutral
                  </div>
                  <div className="flex items-center">
                    <Smile size={16} className="text-green-500 mr-1" /> Very Good
                  </div>
                </div>
              </>
            ) : (
              <div className="text-center py-12">
                <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Meh size={32} className="text-slate-400" />
                </div>
                <p className="text-slate-500">No mood data available yet</p>
                <button 
                  onClick={() => setShowMoodLog(true)} 
                  className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg text-sm font-medium"
                >
                  Log Your First Mood
                </button>
              </div>
            )}
          </div>
          
          {/* Mood Insights */}
          <div className="bg-white rounded-xl shadow-md p-6 mb-6">
            <h3 className="text-lg font-semibold text-slate-800 mb-4">Mood Insights</h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-slate-50 p-4 rounded-lg">
                <p className="text-sm text-slate-500">Average Mood</p>
                <div className="flex items-center mt-1">
                  <span className="text-2xl font-bold text-blue-500">{moodStats.average}</span>
                  <span className="text-slate-500 ml-2">/ 5</span>
                </div>
              </div>
              <div className="bg-slate-50 p-4 rounded-lg">
                <p className="text-sm text-slate-500">Most Common</p>
                <div className="flex items-center mt-1">
                  {renderMoodEmoji(moodStats.mostCommonMood)}
                  <span className="ml-2 text-slate-700">
                    {moodStats.mostCommonMood === 1 ? 'Very Low' : 
                     moodStats.mostCommonMood === 2 ? 'Low' : 
                     moodStats.mostCommonMood === 3 ? 'Neutral' : 
                     moodStats.mostCommonMood === 4 ? 'Good' : 'Very Good'}
                  </span>
                </div>
              </div>
              <div className="bg-slate-50 p-4 rounded-lg">
                <p className="text-sm text-slate-500">7-Day Trend</p>
                <div className="flex items-center mt-1">
                  {moodStats.trend > 0 ? (
                    <TrendingUp size={24} className="text-green-500" />
                  ) : moodStats.trend < 0 ? (
                    <TrendingDown size={24} className="text-red-500" />
                  ) : (
                    <Meh size={24} className="text-yellow-500" />
                  )}
                  <span className="ml-2 text-slate-700">
                    {moodStats.trend > 0 ? 'Improving' : 
                     moodStats.trend < 0 ? 'Declining' : 'Stable'}
                  </span>
                </div>
              </div>
              <div className="bg-slate-50 p-4 rounded-lg">
                <p className="text-sm text-slate-500">Entries</p>
                <p className="text-2xl font-bold text-blue-500 mt-1">{moodData.length}</p>
              </div>
            </div>
            
            {/* Mood Distribution */}
            <div className="mt-6">
              <h4 className="font-medium text-slate-700 mb-3">Mood Distribution</h4>
              <div className="space-y-3">
                {[5, 4, 3, 2, 1].map(level => (
                  <div key={level} className="flex items-center">
                    <div className="w-8">
                      {renderMoodEmoji(level)}
                    </div>
                    <div className="flex-1 ml-2">
                      <div className="bg-slate-100 h-5 rounded-full overflow-hidden">
                        <div 
                          className={`h-full ${getMoodColor(level)}`} 
                          style={{ width: `${moodStats.distribution[level - 1]}%` }}
                        ></div>
                      </div>
                    </div>
                    <div className="ml-2 w-10 text-right text-sm text-slate-500 font-medium">
                      {moodStats.distribution[level - 1]}%
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          
          {/* Recent Mood Entries */}
          <div className="bg-white rounded-xl shadow-md p-6 mb-6">
            <h3 className="text-lg font-semibold text-slate-800 mb-4">Recent Entries</h3>
            <div className="divide-y divide-slate-100">
              {moodData.slice(0, 5).map((item, index) => (
                <div key={index} className="flex items-start py-4 first:pt-0 last:pb-0">
                  <div className="mr-3">
                    {renderMoodEmoji(item.mood)}
                  </div>
                  <div className="flex-1">
                    <p className="text-slate-700">{item.notes || 'No notes'}</p>
                    <p className="text-xs text-slate-500 mt-1">{formatDate(item.date)}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          
          {/* Correlations */}
          <div className="bg-white rounded-xl shadow-md p-6 mb-6">
            <h3 className="text-lg font-semibold text-slate-800 mb-4">Insights & Correlations</h3>
            <div className="space-y-4">
              <div className="p-4 bg-teal-50 rounded-lg border border-teal-100">
                <h4 className="font-medium text-teal-700 mb-2 flex items-center">
                  <Calendar size={18} className="mr-2" />
                  Coaching Impact
                </h4>
                <p className="text-slate-700">
                  Your mood tends to improve after coaching sessions. Consider scheduling regular sessions for better emotional well-being.
                </p>
              </div>
              <div className="p-4 bg-blue-50 rounded-lg border border-blue-100">
                <h4 className="font-medium text-blue-700 mb-2 flex items-center">
                  <BarChart2 size={18} className="mr-2" />
                  Weekly Patterns
                </h4>
                <p className="text-slate-700">
                  Your mood is typically higher on weekends. Consider incorporating more weekend activities into your weekday routine.
                </p>
              </div>
              <div className="p-4 bg-purple-50 rounded-lg border border-purple-100">
                <h4 className="font-medium text-purple-700 mb-2 flex items-center">
                  <TrendingUp size={18} className="mr-2" />
                  Clean Streak Correlation
                </h4>
                <p className="text-slate-700">
                  Your mood has improved by 25% since starting your clean streak. Keep going!
                </p>
              </div>
            </div>
          </div>
        </>
      )}
      
      {/* Mood Logging Modal */}
      {showMoodLog && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md animate-slide-up">
            <div className="bg-gradient-to-r from-blue-500 to-teal-400 rounded-t-xl p-4">
              <h3 className="text-xl font-semibold text-white">How are you feeling today?</h3>
            </div>
            <div className="p-6">
              {/* Mood Selection */}
              <div className="flex justify-between mb-8">
                {[1, 2, 3, 4, 5].map(mood => (
                  <button 
                    key={mood} 
                    onClick={() => setSelectedMood(mood)}
                    className={`w-16 h-16 rounded-full flex items-center justify-center transition-all ${
                      selectedMood === mood 
                        ? 'bg-blue-50 border-2 border-blue-500 shadow-md scale-110' 
                        : 'bg-slate-100 hover:bg-slate-200'
                    }`}
                  >
                    {mood === 1 && <Frown size={32} className="text-red-500" />}
                    {mood === 2 && <Frown size={32} className="text-orange-500" />}
                    {mood === 3 && <Meh size={32} className="text-yellow-500" />}
                    {mood === 4 && <Smile size={32} className="text-lime-500" />}
                    {mood === 5 && <Smile size={32} className="text-green-500" />}
                  </button>
                ))}
              </div>
              
              <div className="mb-6">
                <label className="block text-sm text-slate-600 mb-2 font-medium">Notes (optional)</label>
                <textarea 
                  value={moodNotes}
                  onChange={(e) => setMoodNotes(e.target.value)}
                  placeholder="How are you feeling? What's on your mind?"
                  className="w-full p-3 border border-slate-300 rounded-lg h-32 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                ></textarea>
              </div>
              
              <div className="flex space-x-3">
                <button 
                  onClick={() => setShowMoodLog(false)} 
                  className="flex-1 py-3 bg-slate-100 text-slate-700 rounded-lg font-medium hover:bg-slate-200 transition-colors"
                >
                  Cancel
                </button>
                <button 
                  onClick={handleMoodSubmit} 
                  className="flex-1 py-3 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg font-medium shadow-md hover:shadow-lg transition-shadow"
                >
                  Save
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// Blog Page Component
const BlogPage = ({ blogs, setCurrentPage }) => {
  const [activeCategory, setActiveCategory] = useState('All');
  const categories = ['All', 'Support', 'Education', 'Spiritual'];
  
  const filteredBlogs = activeCategory === 'All' 
    ? blogs 
    : blogs.filter(blog => blog.category === activeCategory);
  
  return (
    <div className="p-5 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold text-slate-800 mb-6">Blog & Resources</h2>
      
      {/* Categories */}
      <div className="bg-white rounded-xl shadow-md p-2 mb-6 overflow-x-auto scrollbar-hide">
        <div className="flex space-x-2">
          {categories.map(category => (
            <button
              key={category}
              onClick={() => setActiveCategory(category)}
              className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
                activeCategory === category 
                  ? 'bg-gradient-to-r from-blue-500 to-teal-400 text-white shadow-sm' 
                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
              }`}
            >
              {category}
            </button>
          ))}
        </div>
      </div>
      
      {/* Blog List */}
      <div className="space-y-6">
        {filteredBlogs.map(blog => (
          <div 
            key={blog.id} 
            className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
            onClick={() => setCurrentPage(`blog-detail-${blog.id}`)}
          >
            <div className="md:flex">
              <div className="md:w-1/3">
                <img src={blog.image} alt={blog.title} className="h-48 md:h-full w-full object-cover" />
              </div>
              <div className="p-6 md:w-2/3">
                <div className="flex justify-between items-start mb-2">
                  <span className="inline-block px-3 py-1 rounded-full text-xs font-medium bg-teal-100 text-teal-800">
                    {blog.category}
                  </span>
                  <span className="text-xs text-slate-400">{blog.date}</span>
                </div>
                <h3 className="text-xl font-semibold text-slate-800 mb-3">{blog.title}</h3>
                <p className="text-slate-600 mb-4 line-clamp-3">{blog.content}</p>
                <button className="text-blue-500 font-medium flex items-center hover:text-blue-600 transition-colors">
                  Read More <ChevronRight size={16} />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// Blog Detail Page Component
const BlogDetailPage = ({ blog, setCurrentPage }) => {
  if (!blog) {
    return (
      <div className="p-5 max-w-4xl mx-auto text-center">
        <div className="bg-white rounded-xl shadow-md p-8">
          <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <AlertCircle size={32} className="text-slate-400" />
          </div>
          <h2 className="text-xl font-semibold text-slate-800 mb-4">Blog post not found</h2>
          <button 
            onClick={() => setCurrentPage('blog')} 
            className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg font-medium shadow-md hover:shadow-lg transition-shadow"
          >
            Back to Blogs
          </button>
        </div>
      </div>
    );
  }
  
  return (
    <div className="p-5 max-w-4xl mx-auto">
      <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <img src={blog.image} alt={blog.title} className="w-full h-64 object-cover" />
        
        <div className="p-6">
          <div className="flex justify-between items-center mb-4">
            <span className="inline-block px-3 py-1 rounded-full text-xs font-medium bg-teal-100 text-teal-800">
              {blog.category}
            </span>
            <span className="text-sm text-slate-500">{blog.date}</span>
          </div>
          
          <h1 className="text-3xl font-bold text-slate-800 mb-6">{blog.title}</h1>
          
          <div className="prose max-w-none text-slate-700">
            <p className="mb-4">{blog.content}</p>
            <p className="mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <h2 className="text-2xl font-semibold text-slate-800 mt-8 mb-4">Understanding the Journey</h2>
            <p className="mb-4">
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <ul className="list-disc pl-5 my-4 space-y-2">
              <li>Focus on daily progress</li>
              <li>Build a support network</li>
              <li>Practice mindfulness</li>
              <li>Identify and avoid triggers</li>
            </ul>
            <p className="mb-4">
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            </p>
            
            <div className="bg-blue-50 border-l-4 border-blue-500 p-4 my-6 rounded-r-lg">
              <p className="italic text-slate-700">
                "Recovery is not a race. You don't have to feel guilty if it takes you longer than you thought it would."
              </p>
            </div>
          </div>
        </div>
      </div>
      
      <button 
        onClick={() => setCurrentPage('blog')} 
        className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg font-medium shadow-md hover:shadow-lg transition-shadow"
      >
        Back to Blogs
      </button>
    </div>
  );
};

// Coaching Page Component
const CoachingPage = ({ coaches, setSelectedCoach, setCurrentPage }) => {
  return (
    <div className="p-5 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold text-slate-800 mb-2">Book a Coaching Session</h2>
      
      <p className="text-slate-600 mb-6">
        Our certified coaches are here to provide personalized guidance on your journey to freedom.
      </p>
      
      {/* Coaches List */}
      <div className="space-y-6">
        {coaches.map(coach => (
          <div key={coach.id} className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
            <div className="md:flex">
              <div className="md:w-1/4 p-6 flex justify-center">
                <img 
                  src={coach.image} 
                  alt={coach.name} 
                  className="w-24 h-24 rounded-full object-cover border-4 border-white shadow-md" 
                />
              </div>
              <div className="p-6 md:w-3/4">
                <div className="md:flex justify-between items-start">
                  <div>
                    <h3 className="text-xl font-semibold text-slate-800">{coach.name}</h3>
                    <p className="text-teal-600 font-medium">{coach.specialty}</p>
                    <p className="text-slate-500 text-sm">{coach.experience} experience</p>
                  </div>
                  <div className="mt-4 md:mt-0 text-right">
                    <p className="text-2xl font-bold text-blue-500">${coach.rate}</p>
                    <p className="text-xs text-slate-500">per session</p>
                  </div>
                </div>
                
                <div className="mt-4">
                  <p className="text-slate-600 mb-4">
                    Available on: {coach.availability.join(', ')}
                  </p>
                  <button 
                    onClick={() => {
                      setSelectedCoach(coach);
                      setCurrentPage('booking');
                    }} 
                    className="w-full py-3 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg font-medium shadow-md hover:shadow-lg transition-shadow"
                  >
                    Book Session
                  </button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// Booking Page Component
const BookingPage = ({ coach, setSelectedDate, setSelectedTime, selectedDate, selectedTime, setCurrentPage }) => {
  const [currentMonth, setCurrentMonth] = useState(new Date());
  
  // Generate calendar days
  const generateCalendarDays = () => {
    const year = currentMonth.getFullYear();
    const month = currentMonth.getMonth();
    
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    
    const daysInMonth = lastDay.getDate();
    const startingDayOfWeek = firstDay.getDay();
    
    const days = [];
    
    // Add empty cells for days before the first day of the month
    for (let i = 0; i < startingDayOfWeek; i++) {
      days.push(null);
    }
    
    // Add days of the month
    for (let i = 1; i <= daysInMonth; i++) {
      const date = new Date(year, month, i);
      const dayOfWeek = date.getDay();
      
      // Check if this day is available (coach works on this day)
      const dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayOfWeek];
      const isAvailable = coach.availability.includes(dayName);
      
      days.push({
        day: i,
        date,
        isAvailable,
      });
    }
    
    return days;
  };
  
  // Generate time slots
  const generateTimeSlots = () => {
    const slots = [];
    for (let hour = 9; hour <= 17; hour++) {
      slots.push(`${hour}:00`);
      if (hour < 17) {
        slots.push(`${hour}:30`);
      }
    }
    return slots;
  };
  
  const calendarDays = generateCalendarDays();
  const timeSlots = generateTimeSlots();
  
  // Format date for display
  const formatDate = (date) => {
    if (!date) return '';
    return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
  };
  
  // Navigate to previous month
  const prevMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
  };
  
  // Navigate to next month
  const nextMonth = () => {
    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
  };
  
  return (
    <div className="p-5 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold text-slate-800 mb-6">Book a Session with {coach.name}</h2>
      
      {/* Coach Info */}
      <div className="bg-white rounded-xl shadow-md p-4 mb-6 flex items-center">
        <img 
          src={coach.image} 
          alt={coach.name} 
          className="w-12 h-12 rounded-full object-cover border-2 border-white shadow-sm mr-4" 
        />
        <div>
          <h3 className="font-semibold text-slate-800">{coach.name}</h3>
          <p className="text-sm text-blue-500 font-medium">${coach.rate} per session</p>
        </div>
      </div>
      
      {/* Calendar */}
      <div className="bg-white rounded-xl shadow-md p-6 mb-6">
        <div className="flex justify-between items-center mb-6">
          <button 
            onClick={prevMonth} 
            className="p-2 rounded-full hover:bg-slate-100 transition-colors"
          >
            <ArrowLeft size={20} className="text-slate-600" />
          </button>
          <h3 className="text-lg font-semibold text-slate-800">
            {currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
          </h3>
          <button 
            onClick={nextMonth} 
            className="p-2 rounded-full hover:bg-slate-100 transition-colors"
          >
            <ChevronRight size={20} className="text-slate-600" />
          </button>
        </div>
        
        <div className="grid grid-cols-7 gap-2 mb-2">
          {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(day => (
            <div key={day} className="text-center text-xs font-medium text-slate-500">
              {day}
            </div>
          ))}
        </div>
        
        <div className="grid grid-cols-7 gap-2">
          {calendarDays.map((day, index) => (
            <div key={index} className="aspect-square">
              {day && (
                <button
                  onClick={() => day.isAvailable && setSelectedDate(day.date.toISOString().split('T')[0])}
                  disabled={!day.isAvailable}
                  className={`w-full h-full flex items-center justify-center rounded-lg text-sm transition-colors
                    ${!day.isAvailable ? 'text-slate-300 cursor-not-allowed' : 
                      selectedDate === day.date.toISOString().split('T')[0] ? 
                        'bg-gradient-to-r from-blue-500 to-teal-400 text-white shadow-sm' : 
                        'hover:bg-slate-100 text-slate-700'}`}
                >
                  {day.day}
                </button>
              )}
            </div>
          ))}
        </div>
      </div>
      
      {/* Time Slots */}
      {selectedDate && (
        <div className="bg-white rounded-xl shadow-md p-6 mb-6">
          <h3 className="text-lg font-semibold text-slate-800 mb-4">Select a Time for {formatDate(selectedDate ? new Date(selectedDate) : null)}</h3>
          <div className="grid grid-cols-3 gap-3">
            {timeSlots.map(time => (
              <button
                key={time}
                onClick={() => setSelectedTime(time)}
                className={`py-3 rounded-lg text-sm font-medium transition-colors
                  ${selectedTime === time ? 
                    'bg-gradient-to-r from-blue-500 to-teal-400 text-white shadow-sm' : 
                    'bg-slate-100 text-slate-700 hover:bg-slate-200'}`}
              >
                {time}
              </button>
            ))}
          </div>
        </div>
      )}
      
      {/* Continue Button */}
      <button 
        onClick={() => selectedDate && selectedTime && setCurrentPage('payment')} 
        disabled={!selectedDate || !selectedTime}
        className={`w-full py-3 rounded-lg text-white font-medium shadow-md transition-all
          ${selectedDate && selectedTime ? 
            'bg-gradient-to-r from-blue-500 to-teal-400 hover:shadow-lg' : 
            'bg-slate-300 cursor-not-allowed'}`}
      >
        Continue to Payment
      </button>
    </div>
  );
};

// Payment Page Component
const PaymentPage = ({ coach, selectedDate, selectedTime, setPaymentMethod, paymentMethod, bookAppointment, setCurrentPage }) => {
  const formatDate = (dateString) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
  };
  
  return (
    <div className="p-5 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold text-slate-800 mb-6">Payment</h2>
      
      {/* Booking Summary */}
      <div className="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 className="text-lg font-semibold text-slate-800 mb-4">Booking Summary</h3>
        <div className="space-y-3">
          <div className="flex justify-between py-2 border-b border-slate-100">
            <span className="text-slate-600">Coach:</span>
            <span className="font-medium text-slate-800">{coach.name}</span>
          </div>
          <div className="flex justify-between py-2 border-b border-slate-100">
            <span className="text-slate-600">Date:</span>
            <span className="text-slate-800">{formatDate(selectedDate)}</span>
          </div>
          <div className="flex justify-between py-2 border-b border-slate-100">
            <span className="text-slate-600">Time:</span>
            <span className="text-slate-800">{selectedTime}</span>
          </div>
          <div className="flex justify-between py-2 border-b border-slate-100">
            <span className="text-slate-600">Duration:</span>
            <span className="text-slate-800">60 minutes</span>
          </div>
          <div className="flex justify-between py-3 mt-2">
            <span className="font-semibold text-slate-800">Total:</span>
            <span className="font-bold text-blue-500 text-xl">${coach.rate}</span>
          </div>
        </div>
      </div>
      
      {/* Payment Methods */}
      <div className="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 className="text-lg font-semibold text-slate-800 mb-4">Select Payment Method</h3>
        <div className="space-y-3">
          <button 
            onClick={() => setPaymentMethod('credit-card')} 
            className={`w-full flex items-center justify-between p-4 rounded-lg transition-all ${
              paymentMethod === 'credit-card' 
                ? 'bg-blue-50 border-2 border-blue-500' 
                : 'border border-slate-200 hover:bg-slate-50'
            }`}
          >
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <CreditCard size={20} className="text-blue-500" />
              </div>
              <span className="font-medium text-slate-800">Credit Card</span>
            </div>
            {paymentMethod === 'credit-card' && (
              <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
                <CheckCircle size={16} className="text-white" />
              </div>
            )}
          </button>
          
          <button 
            onClick={() => setPaymentMethod('mpesa')} 
            className={`w-full flex items-center justify-between p-4 rounded-lg transition-all ${
              paymentMethod === 'mpesa' 
                ? 'bg-blue-50 border-2 border-blue-500' 
                : 'border border-slate-200 hover:bg-slate-50'
            }`}
          >
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                <DollarSign size={20} className="text-green-500" />
              </div>
              <span className="font-medium text-slate-800">M-Pesa</span>
            </div>
            {paymentMethod === 'mpesa' && (
              <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
                <CheckCircle size={16} className="text-white" />
              </div>
            )}
          </button>
          
          <button 
            onClick={() => setPaymentMethod('paypal')} 
            className={`w-full flex items-center justify-between p-4 rounded-lg transition-all ${
              paymentMethod === 'paypal' 
                ? 'bg-blue-50 border-2 border-blue-500' 
                : 'border border-slate-200 hover:bg-slate-50'
            }`}
          >
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <DollarSign size={20} className="text-blue-500" />
              </div>
              <span className="font-medium text-slate-800">PayPal</span>
            </div>
            {paymentMethod === 'paypal' && (
              <div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
                <CheckCircle size={16} className="text-white" />
              </div>
            )}
          </button>
        </div>
      </div>
      
      {/* Payment Form */}
      {paymentMethod === 'credit-card' && (
        <div className="bg-white rounded-xl shadow-md p-6 mb-6">
          <h3 className="text-lg font-semibold text-slate-800 mb-4">Card Details</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Card Number</label>
              <input 
                type="text" 
                placeholder="1234 5678 9012 3456" 
                className="w-full p-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
              />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">Expiry Date</label>
                <input 
                  type="text" 
                  placeholder="MM/YY" 
                  className="w-full p-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">CVC</label>
                <input 
                  type="text" 
                  placeholder="123" 
                  className="w-full p-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Name on Card</label>
              <input 
                type="text" 
                placeholder="John Doe" 
                className="w-full p-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
              />
            </div>
          </div>
        </div>
      )}
      
      {paymentMethod === 'mpesa' && (
        <div className="bg-white rounded-xl shadow-md p-6 mb-6">
          <h3 className="text-lg font-semibold text-slate-800 mb-4">M-Pesa Details</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Phone Number</label>
              <input 
                type="text" 
                placeholder="+254 7XX XXX XXX" 
                className="w-full p-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" 
              />
            </div>
          </div>
        </div>
      )}
      
      {paymentMethod === 'paypal' && (
        <div className="bg-white rounded-xl shadow-md p-6 mb-6">
          <h3 className="text-lg font-semibold text-slate-800 mb-4">PayPal</h3>
          <div className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
            <p className="text-slate-700">
              You will be redirected to PayPal to complete your payment.
            </p>
          </div>
        </div>
      )}
      
      {/* Pay Button */}
      <button 
        onClick={bookAppointment} 
        disabled={!paymentMethod}
        className={`w-full py-3 rounded-lg text-white font-medium shadow-md transition-all
          ${paymentMethod ? 
            'bg-gradient-to-r from-blue-500 to-teal-400 hover:shadow-lg' : 
            'bg-slate-300 cursor-not-allowed'}`}
      >
        Pay ${coach.rate}
      </button>
      
      <p className="text-xs text-slate-500 text-center mt-4">
        By proceeding, you agree to our Terms of Service and Privacy Policy.
      </p>
    </div>
  );
};

// Testimonials Page Component
const TestimonialsPage = ({ testimonials, setCurrentPage }) => {
  return (
    <div className="p-5 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold text-slate-800 mb-2">Client Testimonials</h2>
      
      <p className="text-slate-600 mb-6">
        Read about the experiences of others on their journey to freedom.
      </p>
      
      {/* Testimonials List */}
      <div className="space-y-6">
        {testimonials.map(testimonial => (
          <div key={testimonial.id} className="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
            <div className="flex items-center mb-4">
              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center text-white font-medium mr-4 shadow-md">
                {testimonial.name.charAt(0)}
              </div>
              <div>
                <h3 className="font-semibold text-slate-800">{testimonial.name}</h3>
                <p className="text-xs text-slate-500">{testimonial.date}</p>
              </div>
            </div>
            
            <div className="flex mb-3">
              {[...Array(5)].map((_, i) => (
                <Star 
                  key={i} 
                  size={18} 
                  className={i < testimonial.rating ? 'text-amber-400 fill-amber-400' : 'text-slate-300'} 
                />
              ))}
            </div>
            
            <p className="text-slate-700 italic bg-slate-50 p-4 rounded-lg border-l-4 border-blue-500">
              "{testimonial.text}"
            </p>
          </div>
        ))}
      </div>
      
      {/* Write Review Button */}
      <button 
        onClick={() => setCurrentPage('write-review-1')} 
        className="w-full py-3 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg font-medium shadow-md hover:shadow-lg transition-shadow mt-6"
      >
        Write a Review
      </button>
    </div>
  );
};

// Write Review Page Component
const WriteReviewPage = ({ coachId, submitReview, setCurrentPage }) => {
  const [rating, setRating] = useState(0);
  const [reviewText, setReviewText] = useState('');
  const [isAnonymous, setIsAnonymous] = useState(false);
  
  return (
    <div className="p-5 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold text-slate-800 mb-6">Write a Review</h2>
      
      <div className="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 className="text-lg font-semibold text-slate-800 mb-6">Rate your experience</h3>
        
        <div className="flex justify-center mb-8">
          {[...Array(5)].map((_, i) => (
            <button 
              key={i} 
              onClick={() => setRating(i + 1)}
              className="mx-2 transition-transform hover:scale-110"
            >
              <Star 
                size={36} 
                className={i < rating ? 'text-amber-400 fill-amber-400' : 'text-slate-300'} 
              />
            </button>
          ))}
        </div>
        
        <div className="mb-6">
          <label className="block text-sm font-medium text-slate-700 mb-2">Your Review</label>
          <textarea 
            value={reviewText}
            onChange={(e) => setReviewText(e.target.value)}
            placeholder="Share your experience..."
            className="w-full p-4 border border-slate-300 rounded-lg h-32 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          ></textarea>
        </div>
        
        <div className="flex items-center mb-6">
          <input 
            type="checkbox" 
            id="anonymous" 
            checked={isAnonymous}
            onChange={() => setIsAnonymous(!isAnonymous)}
            className="w-4 h-4 text-blue-500 border-slate-300 rounded focus:ring-blue-500" 
          />
          <label htmlFor="anonymous" className="ml-2 text-slate-700">Submit anonymously</label>
        </div>
      </div>
      
      <div className="flex space-x-4">
        <button 
          onClick={() => setCurrentPage('testimonials')} 
          className="flex-1 py-3 bg-slate-100 text-slate-700 rounded-lg font-medium hover:bg-slate-200 transition-colors"
        >
          Cancel
        </button>
        <button 
          onClick={() => submitReview(coachId, rating, reviewText)} 
          disabled={rating === 0 || reviewText.trim() === ''}
          className={`flex-1 py-3 rounded-lg text-white font-medium shadow-md transition-all
            ${rating > 0 && reviewText.trim() !== '' ? 
              'bg-gradient-to-r from-blue-500 to-teal-400 hover:shadow-lg' : 
              'bg-slate-300 cursor-not-allowed'}`}
        >
          Submit
        </button>
      </div>
    </div>
  );
};

// Profile Page Component
const ProfilePage = ({ user, handleLogout, setCurrentPage, shareAIData, toggleShareAIData }) => {
  return (
    <div className="p-5 max-w-4xl mx-auto">
      <h2 className="text-2xl font-bold text-slate-800 mb-6">Profile</h2>
      
      {/* User Info */}
      <div className="bg-white rounded-xl shadow-md p-6 mb-6">
        <div className="flex flex-col items-center">
          <div className="w-24 h-24 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center text-white text-3xl font-medium mb-4 shadow-lg">
            {user?.name?.charAt(0) || 'U'}
          </div>
          <h3 className="text-xl font-semibold text-slate-800">{user?.name || 'User'}</h3>
          <p className="text-slate-500">{user?.email || 'user@example.com'}</p>
          
          <div className="mt-6 w-full max-w-xs">
            <button className="w-full py-3 px-4 bg-slate-100 text-slate-700 rounded-lg font-medium hover:bg-slate-200 transition-colors flex items-center justify-center">
              <FileText size={18} className="mr-2" />
              Edit Profile
            </button>
          </div>
        </div>
      </div>
      
      {/* Account Settings */}
      <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div className="bg-slate-50 px-6 py-4 border-b border-slate-200">
          <h3 className="font-semibold text-slate-800">Account Settings</h3>
        </div>
        <div>
          <button className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors border-b border-slate-100">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <User size={18} className="text-blue-500" />
              </div>
              <span className="text-slate-700">Edit Profile</span>
            </div>
            <ChevronRight size={18} className="text-slate-400" />
          </button>
          <button className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors border-b border-slate-100">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                <Shield size={18} className="text-purple-500" />
              </div>
              <span className="text-slate-700">Change Password</span>
            </div>
            <ChevronRight size={18} className="text-slate-400" />
          </button>
          <button className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center mr-3">
                <Bell size={18} className="text-amber-500" />
              </div>
              <span className="text-slate-700">Notification Settings</span>
            </div>
            <ChevronRight size={18} className="text-slate-400" />
          </button>
        </div>
      </div>
      
      {/* AI Assistant Settings */}
      <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div className="bg-slate-50 px-6 py-4 border-b border-slate-200">
          <h3 className="font-semibold text-slate-800">AI Assistant Settings</h3>
        </div>
        <div className="p-4 border-b border-slate-100">
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center mr-3">
                <Bot size={18} className="text-teal-500" />
              </div>
              <div>
                <span className="text-slate-700 font-medium">Share Anonymous Data</span>
                <p className="text-xs text-slate-500 mt-1">
                  Help improve our AI by sharing anonymous conversation data
                </p>
              </div>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input 
                type="checkbox" 
                className="sr-only peer" 
                checked={shareAIData}
                onChange={toggleShareAIData}
              />
              <div className="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
            </label>
          </div>
        </div>
        <button className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors border-b border-slate-100">
          <div className="flex items-center">
            <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
              <Flag size={18} className="text-red-500" />
            </div>
            <span className="text-slate-700">View Reported Conversations</span>
          </div>
          <ChevronRight size={18} className="text-slate-400" />
        </button>
        <button className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors">
          <div className="flex items-center">
            <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
              <Settings size={18} className="text-indigo-500" />
            </div>
            <span className="text-slate-700">AI Preferences</span>
          </div>
          <ChevronRight size={18} className="text-slate-400" />
        </button>
      </div>
      
      {/* App Settings */}
      <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div className="bg-slate-50 px-6 py-4 border-b border-slate-200">
          <h3 className="font-semibold text-slate-800">App Settings</h3>
        </div>
        <div>
          <button className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors border-b border-slate-100">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                <Shield size={18} className="text-green-500" />
              </div>
              <span className="text-slate-700">Privacy Settings</span>
            </div>
            <ChevronRight size={18} className="text-slate-400" />
          </button>
          <button className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors border-b border-slate-100">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <HelpCircle size={18} className="text-blue-500" />
              </div>
              <span className="text-slate-700">Help & Support</span>
            </div>
            <ChevronRight size={18} className="text-slate-400" />
          </button>
          <button className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors">
            <div className="flex items-center">
              <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mr-3">
                <FileText size={18} className="text-slate-500" />
              </div>
              <span className="text-slate-700">Terms of Service<ant_artifact identifier="purepath-app-main" title="PurePath App Main Code with Notification Integration">
import React, { useState, useEffect } from 'react';
import { ArrowLeft, Calendar, Clock, Home, Book, User, Award, Bell, LogOut, Menu, X, ChevronRight, Star, DollarSign, CreditCard, MessageSquare, BarChart2, TrendingUp, TrendingDown, Smile, Frown, Meh, Info, CheckCircle, AlertCircle, Heart, Shield, Settings, FileText } from 'lucide-react';

// Main App Component
const PurePathApp = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState(null);
  const [showMenu, setShowMenu] = useState(false);
  const [cleanDays, setCleanDays] = useState(0);
  const [startDate, setStartDate] = useState(null);
  const [blogs, setBlogs] = useState([]);
  const [testimonials, setTestimonials] = useState([]);
  const [coaches, setCoaches] = useState([]);
  const [selectedCoach, setSelectedCoach] = useState(null);
  const [selectedDate, setSelectedDate] = useState(null);
  const [selectedTime, setSelectedTime] = useState(null);
  const [paymentMethod, setPaymentMethod] = useState('');
  const [moodData, setMoodData] = useState([]);
  const [showNotification, setShowNotification] = useState(false);
  const [notification, setNotification] = useState({ message: '', type: 'success' });

  // Display notification
  const displayNotification = (message, type = 'success') => {
    setNotification({ message, type });
    setShowNotification(true);
    setTimeout(() => {
      setShowNotification(false);
    }, 3000);
  };

  // Simulate fetching data
  useEffect(() => {
    // Mock data
    const mockBlogs = [
      { id: 1, title: "Finding Strength in Community", category: "Support", date: "2023-05-15", content: "Building a support network is crucial in overcoming addiction...", image: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
      { id: 2, title: "The Science Behind Addiction", category: "Education", date: "2023-05-10", content: "Understanding the neurological aspects of addiction can help in recovery...", image: "https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
      { id: 3, title: "Daily Devotional: Renewal", category: "Spiritual", date: "2023-05-05", content: "Today's reflection focuses on the concept of renewal and how it applies to our journey...", image: "https://images.unsplash.com/photo-1504805572947-34fad45aed93?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
    ];

    const mockTestimonials = [
      { id: 1, name: "John D.", rating: 5, text: "The coaching sessions have been transformative. I've been clean for 60 days now.", date: "2023-04-20" },
      { id: 2, name: "Sarah M.", rating: 4, text: "The app's tracking feature keeps me accountable. The community support is amazing.", date: "2023-04-15" },
      { id: 3, name: "Anonymous", rating: 5, text: "I was skeptical at first, but the personalized approach has made all the difference.", date: "2023-04-10" },
    ];

    const mockCoaches = [
      { id: 1, name: "Dr. Michael Johnson", specialty: "Addiction Recovery", experience: "15 years", rate: 75, image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", availability: ["Monday", "Wednesday", "Friday"] },
      { id: 2, name: "Sarah Williams", specialty: "Spiritual Counseling", experience: "8 years", rate: 60, image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", availability: ["Tuesday", "Thursday", "Saturday"] },
      { id: 3, name: "Admin (You)", specialty: "Recovery Specialist", experience: "10 years", rate: 80, image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", availability: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"] },
    ];

    setBlogs(mockBlogs);
    setTestimonials(mockTestimonials);
    setCoaches(mockCoaches);

    // Check if user has a clean streak stored
    const savedStartDate = localStorage.getItem('cleanStartDate');
    if (savedStartDate) {
      const start = new Date(savedStartDate);
      setStartDate(start);
      const today = new Date();
      const diffTime = Math.abs(today - start);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      setCleanDays(diffDays);
    }

    // Load mood data from localStorage
    const savedMoodData = localStorage.getItem('moodData');
    if (savedMoodData) {
      setMoodData(JSON.parse(savedMoodData));
    } else {
      // Generate some mock mood data if none exists
      const mockMoodData = generateMockMoodData(30);
      setMoodData(mockMoodData);
      localStorage.setItem('moodData', JSON.stringify(mockMoodData));
    }
  }, []);

  // Generate mock mood data for the past n days
  const generateMockMoodData = (days) => {
    const data = [];
    const today = new Date();

    for (let i = days - 1; i >= 0; i--) {
      const date = new Date();
      date.setDate(today.getDate() - i);

      // Generate random mood between 1-5
      const mood = Math.floor(Math.random() * 5) + 1;

      // Generate random notes
      const notes = [
        "Feeling strong today",
        "Struggled a bit but stayed clean",
        "Had a great coaching session",
        "Meditation helped a lot",
        "Difficult day but made it through",
        "Feeling motivated",
        "Temptations were strong today"
      ];

      data.push({
        date: date.toISOString().split('T')[0],
        mood,
        notes: notes[Math.floor(Math.random() * notes.length)],
      });
    }

    return data;
  };

  // Update clean days counter
  useEffect(() => {
    if (startDate) {
      const interval = setInterval(() => {
        const today = new Date();
        const diffTime = Math.abs(today - startDate);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        setCleanDays(diffDays);
      }, 86400000); // Update once per day

      return () => clearInterval(interval);
    }
  }, [startDate]);

  // Handle login
  const handleLogin = (userData) => {
    setUser(userData);
    setIsLoggedIn(true);
    setCurrentPage('home');
    displayNotification(`Welcome back, ${userData.name}!`, 'success');

    // Check if user has a clean streak
    if (!startDate) {
      const newStartDate = new Date();
      setStartDate(newStartDate);
      localStorage.setItem('cleanStartDate', newStartDate.toISOString());
      setCleanDays(0);
    }
  };

  // Handle logout
  const handleLogout = () => {
    setUser(null);
    setIsLoggedIn(false);
    setCurrentPage('login');
    setShowMenu(false);
    displayNotification('You have been logged out', 'info');
  };

  // Reset clean streak
  const resetCleanStreak = () => {
    const newStartDate = new Date();
    setStartDate(newStartDate);
    localStorage.setItem('cleanStartDate', newStartDate.toISOString());
    setCleanDays(0);
    displayNotification('Your clean streak has been reset', 'info');
  };

  // Log mood
  const logMood = (mood, notes) => {
    const today = new Date().toISOString().split('T')[0];

    // Check if we already have a mood for today
    const updatedMoodData = [...moodData];
    const todayIndex = updatedMoodData.findIndex(item => item.date === today);

    if (todayIndex >= 0) {
      // Update existing entry
      updatedMoodData[todayIndex] = { date: today, mood, notes };
      displayNotification('Your mood has been updated', 'success');
    } else {
      // Add new entry
      updatedMoodData.push({ date: today, mood, notes });
      displayNotification('Your mood has been logged', 'success');
    }

    // Sort by date (newest first)
    updatedMoodData.sort((a, b) => new Date(b.date) - new Date(a.date));

    setMoodData(updatedMoodData);
    localStorage.setItem('moodData', JSON.stringify(updatedMoodData));
  };

  // Book appointment
  const bookAppointment = () => {
    if (selectedCoach && selectedDate && selectedTime && paymentMethod) {
      // In a real app, this would process the payment and book the appointment
      displayNotification(`Appointment booked with ${selectedCoach.name}`, 'success');
      setCurrentPage('home');
      setSelectedCoach(null);
      setSelectedDate(null);
      setSelectedTime(null);
      setPaymentMethod('');
    } else {
      displayNotification('Please complete all booking details', 'error');
    }
  };

  // Submit review
  const submitReview = (coachId, rating, text) => {
    // In a real app, this would send the review to the backend
    displayNotification('Thank you for your review!', 'success');
    setCurrentPage('home');
  };

  // Render different pages based on currentPage state
  const renderPage = () => {
    if (!isLoggedIn && currentPage !== 'login' && currentPage !== 'signup' && currentPage !== 'reset-password') {
      return <LoginPage onLogin={handleLogin} setCurrentPage={setCurrentPage} />;
    }

    switch (currentPage) {
      case 'home':
        return <HomePage 
          cleanDays={cleanDays} 
          resetCleanStreak={resetCleanStreak} 
          blogs={blogs.slice(0, 2)} 
          setCurrentPage={setCurrentPage} 
          moodData={moodData}
          logMood={logMood}
        />;
      case 'tracker':
        return <TrackerPage 
          cleanDays={cleanDays} 
          startDate={startDate} 
          resetCleanStreak={resetCleanStreak} 
          moodData={moodData}
          logMood={logMood}
        />;
      case 'blog':
        return <BlogPage blogs={blogs} setCurrentPage={setCurrentPage} />;
      case 'blog-detail':
        return <BlogDetailPage blog={blogs.find(b => b.id === parseInt(currentPage.split('-')[2]))} setCurrentPage={setCurrentPage} />;
      case 'coaching':
        return <CoachingPage coaches={coaches} setSelectedCoach={setSelectedCoach} setCurrentPage={setCurrentPage} />;
      case 'booking':
        return <BookingPage 
          coach={selectedCoach} 
          setSelectedDate={setSelectedDate} 
          setSelectedTime={setSelectedTime} 
          selectedDate={selectedDate}
          selectedTime={selectedTime}
          setCurrentPage={setCurrentPage} 
        />;
      case 'payment':
        return <PaymentPage 
          coach={selectedCoach} 
          selectedDate={selectedDate} 
          selectedTime={selectedTime} 
          setPaymentMethod={setPaymentMethod} 
          paymentMethod={paymentMethod}
          bookAppointment={bookAppointment}
          setCurrentPage={setCurrentPage} 
        />;
      case 'testimonials':
        return <TestimonialsPage testimonials={testimonials} setCurrentPage={setCurrentPage} />;
      case 'profile':
        return <ProfilePage user={user} handleLogout={handleLogout} setCurrentPage={setCurrentPage} />;
      case 'login':
        return <LoginPage onLogin={handleLogin} setCurrentPage={setCurrentPage} />;
      case 'signup':
        return <SignupPage setCurrentPage={setCurrentPage} />;
      case 'reset-password':
        return <ResetPasswordPage setCurrentPage={setCurrentPage} />;
      case 'write-review':
        return <WriteReviewPage coachId={parseInt(currentPage.split('-')[2])} submitReview={submitReview} setCurrentPage={setCurrentPage} />;
      default:
        return <HomePage 
          cleanDays={cleanDays} 
          resetCleanStreak={resetCleanStreak} 
          blogs={blogs.slice(0, 2)} 
          setCurrentPage={setCurrentPage} 
          moodData={moodData}
          logMood={logMood}
        />;
    }
  };

  // Toggle side menu
  const toggleMenu = () => {
    setShowMenu(!showMenu);
  };

  return (
    <div className="flex flex-col h-screen bg-slate-50 font-['Inter',_sans-serif] text-slate-800">
      {/* Header */}
      <header className="bg-white shadow-sm px-4 py-3 flex justify-between items-center sticky top-0 z-20">
        <div className="flex items-center">
          {currentPage !== 'home' && isLoggedIn ? (
            <button 
              onClick={() => setCurrentPage('home')} 
              className="mr-3 p-2 rounded-full hover:bg-slate-100 transition-colors"
              aria-label="Back to home"
            >
              <ArrowLeft size={20} className="text-slate-600" />
            </button>
          ) : (
            <button 
              onClick={toggleMenu} 
              className="p-2 rounded-full hover:bg-slate-100 transition-colors"
              aria-label={showMenu ? "Close menu" : "Open menu"}
            >
              {showMenu ? <X size={20} className="text-slate-600" /> : <Menu size={20} className="text-slate-600" />}
            </button>
          )}
          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent ml-2">
            PurePath
          </h1>
        </div>
        {isLoggedIn && (
          <div className="flex items-center">
            <button 
              className="relative p-2 rounded-full hover:bg-slate-100 transition-colors mr-2"
              aria-label="Notifications"
            >
              <Bell size={20} className="text-slate-600" />
              <span className="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
            </button>
            <button 
              className="w-9 h-9 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center text-white font-medium shadow-md hover:shadow-lg transition-shadow"
              onClick={() => setCurrentPage('profile')}
              aria-label="Profile"
            >
              {user?.name?.charAt(0) || 'U'}
            </button>
          </div>
        )}
      </header>
      
      {/* Side Menu */}
      {showMenu && isLoggedIn && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-30 backdrop-blur-sm transition-opacity" onClick={toggleMenu}>
          <div 
            className="w-72 h-full bg-white shadow-xl p-6 z-40 animate-slide-in" 
            onClick={e => e.stopPropagation()}
          >
            <div className="flex flex-col h-full">
              <div className="mb-8 mt-2">
                <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">
                  PurePath
                </h2>
                <p className="text-sm text-slate-500 mt-1">Your journey to freedom</p>
              </div>
              
              <nav className="flex-1">
                <ul className="space-y-1">
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('home'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Home size={18} className="mr-3 text-blue-500" />
                      <span>Home</span>
                    </button>
                  </li>
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('tracker'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Clock size={18} className="mr-3 text-teal-500" />
                      <span>Clean Tracker</span>
                    </button>
                  </li>
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('blog'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Book size={18} className="mr-3 text-indigo-500" />
                      <span>Blog & Resources</span>
                    </button>
                  </li>
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('coaching'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Calendar size={18} className="mr-3 text-purple-500" />
                      <span>Book Coaching</span>
                    </button>
                  </li>
                  <li>
                    <button 
                      onClick={() => { setCurrentPage('testimonials'); toggleMenu(); }} 
                      className="flex items-center w-full p-3 rounded-lg hover:bg-slate-100 transition-colors"
                    >
                      <Award size={18} className="mr-3 text-amber-500" />
                      <span>Testimonials</span>
                    </button>
                  </li>
                </ul>
              </nav>
              
              <div className="mt-auto pt-4 border-t border-slate-200">
                <button 
                  onClick={handleLogout} 
                  className="flex items-center w-full p-3 rounded-lg hover:bg-red-50 text-red-500 transition-colors"
                >
                  <LogOut size={18} className="mr-3" />
                  <span>Logout</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* Main Content */}
      <main className="flex-1 overflow-y-auto pb-20">
        {renderPage()}
      </main>
      
      {/* Bottom Navigation */}
      {isLoggedIn && (
        <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 flex justify-around items-center py-2 px-3 z-20 shadow-lg">
          <button 
            onClick={() => setCurrentPage('home')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'home' ? 'text-blue-500 bg-blue-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <Home size={20} />
            <span className="text-xs mt-1 font-medium">Home</span>
          </button>
          <button 
            onClick={() => setCurrentPage('tracker')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'tracker' ? 'text-teal-500 bg-teal-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <Clock size={20} />
            <span className="text-xs mt-1 font-medium">Tracker</span>
          </button>
          <button 
            onClick={() => setCurrentPage('coaching')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'coaching' ? 'text-purple-500 bg-purple-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <Calendar size={20} />
            <span className="text-xs mt-1 font-medium">Coaching</span>
          </button>
          <button 
            onClick={() => setCurrentPage('blog')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'blog' ? 'text-indigo-500 bg-indigo-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <Book size={20} />
            <span className="text-xs mt-1 font-medium">Blog</span>
          </button>
          <button 
            onClick={() => setCurrentPage('profile')} 
            className={`flex flex-col items-center p-2 rounded-lg transition-colors ${currentPage === 'profile' ? 'text-amber-500 bg-amber-50' : 'text-slate-500 hover:bg-slate-100'}`}
          >
            <User size={20} />
            <span className="text-xs mt-1 font-medium">Profile</span>
          </button>
        </nav>
      )}
      
      {/* Notification */}
      {showNotification && (
        <div className={`fixed bottom-24 left-1/2 transform -translate-x-1/2 px-4 py-3 rounded-lg shadow-lg flex items-center z-50 animate-fade-in ${
          notification.type === 'success' ? 'bg-green-500 text-white' :
          notification.type === 'error' ? 'bg-red-500 text-white' :
          'bg-blue-500 text-white'
        }`}>
          {notification.type === 'success' && <CheckCircle size={18} className="mr-2" />}
          {notification.type === 'error' && <AlertCircle size={18} className="mr-2" />}
          {notification.type === 'info' && <Info size={18} className="mr-2" />}
          <span>{notification.message}</span>
        </div>
      )}
    </div>
  );
};

// Home Page Component
const HomePage = ({ cleanDays, resetCleanStreak, blogs, setCurrentPage, moodData, logMood }) => {
  // Get today's mood if logged
  const today = new Date().toISOString().split('T')[0];
  const todayMood = moodData.find(item => item.date === today);

  return (
    <div className="p-5 max-w-4xl mx-auto">
      {/* Welcome Message */}
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-slate-800">Welcome Back</h2>
        <p className="text-slate-500 mt-1">Continue your journey to freedom</p>
      </div>
      
      {/* Clean Streak Card */}
      <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div className="bg-gradient-to-r from-blue-500 to-teal-400 p-5">
          <h3 className="text-lg font-semibold text-white mb-1">Your Clean Streak</h3>
          <p className="text-blue-50 text-sm">Every day is a victory</p>
        </div>
        <div className="p-5">
          <div className="flex items-center justify-center my-6">
            <div className="w-36 h-36 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 p-1 shadow-lg">
              <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
                <div className="text-center">
                  <p className="text-4xl font-bold bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">{cleanDays}</p>
                  <p className="text-sm text-slate-500 font-medium">Days Clean</p>
                </div>
              </div>
            </div>
          </div>
          <div className="flex justify-between">
            <button 
              onClick={() => setCurrentPage('tracker')} 
              className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg text-sm font-medium shadow-md hover:shadow-lg transition-shadow"
            >
              View Details
            </button>
            <button 
              onClick={resetCleanStreak} 
              className="px-5 py-2.5 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors"
            >
              Reset Counter
            </button>
          </div>
        </div>
      </div>
      
      {/* Today's Mood */}
      <div className="bg-white rounded-xl shadow-md overflow-hidden mb-6">
        <div className="p-5">
          <h3 className="text-lg font-semibold text-slate-800 mb-4">How are you feeling today?</h3>
          {todayMood ? (
            <div className="text-center">
              <div className="flex justify-center mb-4">
                {todayMood.mood === 1 && <Frown size={64} className="text-red-500" />}
                {todayMood.mood === 2 && <Frown size={64} className="text-orange-500" />}
                {todayMood.mood === 3 && <Meh size={64} className="text-amber-500" />}
                {todayMood.mood === 4 && <Smile size={64} className="text-lime-500" />}
                {todayMood.mood === 5 && <Smile size={64} className="text-green-500" />}
              </div>
              <div className="bg-slate-50 rounded-lg p-4 mb-4 max-w-md mx-auto">
                <p className="text-slate-700 italic">"{todayMood.notes}"</p>
              </div>
              <button 
                onClick={() => setCurrentPage('tracker')} 
                className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg text-sm font-medium shadow-md hover:shadow-lg transition-shadow"
              >
                Update Mood
              </button>
            </div>
          ) : (
            <div className="text-center">
              <div className="flex justify-center space-x-3 mb-6">
                <Frown size={36} className="text-slate-300" />
                <Meh size={36} className="text-slate-300" />
                <Smile size={36} className="text-slate-300" />
              </div>
              <p className="text-slate-500 mb-4">You haven't logged your mood today</p>
              <button 
                onClick={() => setCurrentPage('tracker')} 
                className="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-teal-400 text-white rounded-lg text-sm font-medium shadow-md hover:shadow-lg transition-shadow"
              >
                Log Mood
              </button>
            </div>
          )}
        </div>
      </div>
      
      {/* Quick Actions */}
      <h3 className="text-lg font-semibold text-slate-800 mb-3">Quick Actions</h3>
      <div className="grid grid-cols-2 gap-4 mb-8">
        <button 
          onClick={() => setCurrentPage('coaching')} 
          className="bg-white rounded-xl shadow-md p-5 flex flex-col items-center justify-center hover:shadow-lg transition-shadow"
        >
          <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-3">
            <Calendar size={24} className="text-purple-500" />
          </div>
          <span className="text-sm font-medium text-slate-800">Book Coaching</span>
        </button>
        <button 
          onClick={() => setCurrentPage('blog')} 
          className="bg-white rounded-xl shadow-md p-5 flex flex-col items-center justify-center hover:shadow-lg transition-shadow"
        >
          <div className="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-3">
            <Book size={24} className="text-indigo-500" />
          </div>
          <span className="text-sm font-medium text-slate-800">Read Articles</span>
        </button>
      </div>
      
      {/* Recent Blog Posts */}
      <div className="mb-8">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-semibold text-slate-800">Recent Articles</h3>
          <button 
            onClick={() => setCurrentPage('blog')} 
            className="text-blue-500 text-sm font-medium flex items-center hover:text-blue-600 transition-colors"
          >
            View All <ChevronRight size={16} />
          </button>
        </div>
        <div className="space-y-4">
          {blogs.map(blog => (
            <div 
              key={blog.id} 
              className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
              onClick={() => setCurrentPage(`blog-detail-${blog.id}`)}
            >
              <div className="md:flex">
                <div className="md:w-1/3">
                  <img src={blog.image} alt={blog.title} className="h-48 md:h-full w-full object-cover" />
                </div>
                <div className="p-5 md:w-2/3">
                  <span className="inline-block px-3 py-1 rounded-full text-xs font-medium bg-teal-100 text-teal-800 mb-2">
                    {blog.category}
                  </span>
                  <h3 className="text-lg font-semibold text-slate-800 mb-2">{blog.title}</h3>
                  <p className="text-slate-500 text-sm mb-3 line-clamp-2">{blog.content}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-xs text-slate-400">{blog.date}</span>
                    <span className="text-blue-500 text-sm font-medium flex items-center">
                      Read More <ChevronRight size={16} />
                    </span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      
      {/* Motivational Quote */}
      <div className="bg-gradient-to-r from-blue-500 to-teal-400 rounded-xl p-6 mb-6 shadow-md">
        <div className="flex">
          <div className="text-white opacity-30 mr-3">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 11H6C5.46957 11 4.96086 10.7893 4.58579 10.4142C4.21071 10.0391 4 9.53043 4 9V7C4 6.46957 4.21071 5.96086 4.58579 5.58579C4.96086 5.21071 5.46957 5 6 5H8C8.53043 5 9.03914 5.21071 9.41421 5.58579C9.78929 5.96086 10 6.46957 10 7M18 14H14C13.4696 14 12.9609 14.2107 12.5858 14.5858C12.2107 14.9609 12 15.4696 12 16V18C12 18.5304 12.2107 19.0391 12.5858 19.4142C12.9609 19.7893 13.4696 20 14 20H16C16.5304 20 17.0391 19.7893 17.4142 19.4142C17.7893 19.0391 18 18.5304 18 18V16C18 15.4696 17.7893 14.9609 17.4142 14.5858C17.0391 14.2107 16.5304 14 16 14H14C14 14 14 11.5 14 10C14 8.5 15 7.5 16 7.5C17 7.5 17.5 8 17.5 8.5V11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <p className="text-white font-medium italic">
            "The journey of a thousand miles begins with a single step. Every day clean is a victory worth celebrating."
          </p>
        </div>
      </div>
    </div>
  );
}

// TrackerPage, BlogPage, BlogDetailPage, CoachingPage, BookingPage, PaymentPage, TestimonialsPage, WriteReviewPage, ProfilePage, LoginPage, SignupPage, ResetPasswordPage, and the style block and export remain the same -- see above for full code.

const style = document.createElement('style');
style.textContent = `
  @keyframes slide-in {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  
  @keyframes slide-up {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  .animate-slide-in {
    animation: slide-in 0.3s ease-out forwards;
  }
  
  .animate-slide-up {
    animation: slide-up 0.3s ease-out forwards;
  }
  
  .animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
`;
document.head.appendChild(style);

export default PurePathApp;