Chroma the Green Screen Bot

import React, { useState, useEffect } from 'react';
import { Send, Bot, User, Lightbulb, Camera, Palette, Eye } from 'lucide-react';

const GreenScreenChatbot = () => {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  const [currentTopic, setCurrentTopic] = useState('intro');

  const botResponses = {
    intro: [
      "Hi there! I'm Chroma, your green screen science buddy! 🤖✨",
      "Did you know that green screens are like magic tricks that use SCIENCE? I can teach you all about it!",
      "What would you like to learn about? You can ask me about:",
      "• How green screens work",
      "• Why we use green color",
      "• What chroma key means",
      "• Fun facts about movie magic",
      "Just type your question!"
    ],
    
    how_it_works: [
      "Great question! Green screens work using something called 'chroma key' technology! 🎬",
      "Here's the cool science: Computers can identify specific colors and make them transparent!",
      "It's like having invisible paint - when the computer sees that exact green color, it says 'Replace this with something else!'",
      "The green part becomes see-through, and we can put ANY background there - space, underwater, or even dinosaur land! 🦕",
      "Want to know why we picked green specifically?"
    ],
    
    why_green: [
      "Awesome question! We use green for super smart scientific reasons! 💚",
      "1. GREEN is the farthest color from human skin tones - so it won't accidentally erase people!",
      "2. Our eyes can see green REALLY well because we have lots of green-detecting cells!",
      "3. Green is bright and easy for cameras to spot and separate from other colors!",
      "4. Fun fact: Sometimes we use BLUE screens too, especially if someone's wearing green clothes!",
      "It's all about picking a color that stands out from everything else in the scene!"
    ],
    
    chroma_key: [
      "Chroma key is the fancy science name for green screen magic! 🔑",
      "'Chroma' means COLOR in Greek - so chroma key means 'color key'!",
      "The computer uses this 'key' to unlock and replace specific colors!",
      "It's like having a special password - when the computer sees that exact green, it knows to swap it out!",
      "The science behind it uses something called 'color space' - imagine all colors living in a 3D house, and green lives in its own special room!"
    ],
    
    fun_facts: [
      "Ready for some mind-blowing green screen facts? 🤯",
      "• The first 'green screen' was actually BLUE and invented in the 1930s!",
      "• Weather forecasters can't wear green or they'll disappear into the weather map!",
      "• Some movies use PINK screens for special effects with certain lighting!",
      "• Your smartphone probably has chroma key apps - you can make your own movie magic!",
      "• The green paint used costs about $300 per gallon because it's so perfectly green!",
      "Want to try a fun experiment at home?"
    ],
    
    experiment: [
      "Here's a cool experiment you can try! 🧪",
      "RAINBOW DISAPPEARING TRICK:",
      "1. Get colored paper (red, blue, yellow, green)",
      "2. Hold each color in front of a bright light",
      "3. Look through colored plastic or sunglasses",
      "4. Notice how some colors seem to 'disappear' with certain filters!",
      "This shows how our eyes and cameras see colors differently - the same principle behind green screens!",
      "Try it and see which colors vanish! It's like being a color detective! 🕵️‍♀️"
    ],
    
    default: [
      "That's a great question! Let me think about that... 🤔",
      "I love talking about green screen science! Here are some things I can help you with:",
      "• How do green screens work?",
      "• Why do we use green color?",
      "• What does chroma key mean?",
      "• Cool movie magic facts!",
      "• Fun experiments to try!",
      "What sounds most interesting to you?"
    ]
  };

  const getTopicFromMessage = (message) => {
    const lowerMessage = message.toLowerCase();
    if (lowerMessage.includes('how') && (lowerMessage.includes('work') || lowerMessage.includes('green screen'))) {
      return 'how_it_works';
    } else if (lowerMessage.includes('why') && lowerMessage.includes('green')) {
      return 'why_green';
    } else if (lowerMessage.includes('chroma') || lowerMessage.includes('key')) {
      return 'chroma_key';
    } else if (lowerMessage.includes('fact') || lowerMessage.includes('fun') || lowerMessage.includes('cool')) {
      return 'fun_facts';
    } else if (lowerMessage.includes('experiment') || lowerMessage.includes('try') || lowerMessage.includes('home')) {
      return 'experiment';
    } else {
      return 'default';
    }
  };

  const sendMessage = async () => {
    if (!inputValue.trim()) return;

    const userMessage = inputValue.trim();
    setMessages(prev => [...prev, { type: 'user', content: userMessage }]);
    setInputValue('');
    setIsTyping(true);

    // Determine topic and get appropriate response
    const topic = getTopicFromMessage(userMessage);
    const responses = botResponses[topic] || botResponses.default;

    // Simulate typing delay
    setTimeout(() => {
      setIsTyping(false);
      responses.forEach((response, index) => {
        setTimeout(() => {
          setMessages(prev => [...prev, { type: 'bot', content: response }]);
        }, index * 800);
      });
    }, 1000);
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      sendMessage();
    }
  };

  // Initialize with welcome message
  useEffect(() => {
    const welcomeMessages = botResponses.intro;
    welcomeMessages.forEach((message, index) => {
      setTimeout(() => {
        setMessages(prev => [...prev, { type: 'bot', content: message }]);
      }, index * 600);
    });
  }, []);

  const quickQuestions = [
    { text: "How do green screens work?", icon: <Camera className="w-4 h-4" /> },
    { text: "Why use green color?", icon: <Palette className="w-4 h-4" /> },
    { text: "What's chroma key?", icon: <Eye className="w-4 h-4" /> },
    { text: "Tell me fun facts!", icon: <Lightbulb className="w-4 h-4" /> }
  ];

  return (
    <div className="max-w-4xl mx-auto bg-gradient-to-br from-green-50 to-blue-50 min-h-screen flex flex-col">
      {/* Header */}
      <div className="bg-gradient-to-r from-green-500 to-blue-500 text-white p-6 shadow-lg">
        <div className="flex items-center gap-3">
          <div className="bg-white bg-opacity-20 p-3 rounded-full">
            <Bot className="w-8 h-8" />
          </div>
          <div>
            <h1 className="text-2xl font-bold">Chroma the Green Screen Bot</h1>
            <p className="text-green-100">Your friendly science companion! 🎬✨</p>
          </div>
        </div>
      </div>

      {/* Quick Questions */}
      <div className="p-4 bg-white bg-opacity-50">
        <p className="text-sm text-gray-600 mb-2">Quick questions to get started:</p>
        <div className="flex flex-wrap gap-2">
          {quickQuestions.map((question, index) => (
            <button
              key={index}
              onClick={() => setInputValue(question.text)}
              className="flex items-center gap-2 px-3 py-2 bg-white rounded-full text-sm border border-green-200 hover:bg-green-50 transition-colors"
            >
              {question.icon}
              {question.text}
            </button>
          ))}
        </div>
      </div>

      {/* Chat Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((message, index) => (
          <div
            key={index}
            className={`flex items-start gap-3 ${
              message.type === 'user' ? 'flex-row-reverse' : ''
            }`}
          >
            <div
              className={`p-2 rounded-full ${
                message.type === 'user'
                  ? 'bg-blue-500 text-white'
                  : 'bg-green-500 text-white'
              }`}
            >
              {message.type === 'user' ? (
                <User className="w-5 h-5" />
              ) : (
                <Bot className="w-5 h-5" />
              )}
            </div>
            <div
              className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                message.type === 'user'
                  ? 'bg-blue-500 text-white'
                  : 'bg-white text-gray-800 shadow-md'
              }`}
            >
              <p className="text-sm leading-relaxed">{message.content}</p>
            </div>
          </div>
        ))}
        
        {isTyping && (
          <div className="flex items-start gap-3">
            <div className="p-2 rounded-full bg-green-500 text-white">
              <Bot className="w-5 h-5" />
            </div>
            <div className="bg-white px-4 py-2 rounded-lg shadow-md">
              <div className="flex space-x-1">
                <div className="w-2 h-2 bg-green-500 rounded-full animate-bounce"></div>
                <div className="w-2 h-2 bg-green-500 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                <div className="w-2 h-2 bg-green-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Input Area */}
      <div className="p-4 bg-white border-t border-gray-200">
        <div className="flex gap-2 max-w-4xl mx-auto">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="Ask me about green screen science! 🧪"
            className="flex-1 px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
          />
          <button
            onClick={sendMessage}
            disabled={!inputValue.trim()}
            className="px-6 py-2 bg-green-500 text-white rounded-full hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
          >
            <Send className="w-4 h-4" />
            Send
          </button>
        </div>
      </div>
    </div>
  );
};

export default GreenScreenChatbot;