import { useState } from ‘react’;

export default function OrvoAIChatbot() {
const [messages, setMessages] = useState([
{
sender: ‘bot’,
text: ‘Hi 👋 Welcome to Orvo Marketing. We help businesses with SEO, Google Ads, AI Automation and Website Development. How can we help you today?’
}
]);

const [input, setInput] = useState(”);

const handleSend = () => {
if (!input.trim()) return;

const userMessage = {
  sender: 'user',
  text: input
};

let botReply = 'Thank you for contacting Orvo Marketing 🚀 Our team will help you shortly.';

const lowerInput = input.toLowerCase();

if (lowerInput.includes('seo')) {
  botReply = 'We provide complete SEO services including Google ranking, keyword research and lead generation 🔥';
} else if (lowerInput.includes('google ads')) {
  botReply = 'Our Google Ads service helps businesses generate high-quality leads and sales 🚀';
} else if (lowerInput.includes('automation')) {
  botReply = 'We create AI Automation systems like WhatsApp bots, AI chatbots and CRM automation 🤖';
} else if (lowerInput.includes('website')) {
  botReply = 'We build modern high-converting websites for businesses 🔥';
}

const botMessage = {
  sender: 'bot',
  text: botReply
};

setMessages((prev) => [...prev, userMessage, botMessage]);
setInput('');

};

const handleQuickReply = (text) => {
setInput(text);
};

return (

Orvo Marketing AI Bot 🤖

AI Sales Assistant

    <div className="p-6 space-y-4 h-[500px] overflow-y-auto">
      {messages.map((msg, index) => (
        <div
          key={index}
          className={`p-4 rounded-2xl max-w-[80%] ${
            msg.sender === 'user'
              ? 'bg-blue-600 ml-auto'
              : 'bg-zinc-800'
          }`}
        >
          <p className="text-sm mb-1 text-zinc-300">
            {msg.sender === 'user' ? 'Customer' : 'AI Bot'}
          </p>
          <p>{msg.text}</p>
        </div>
      ))}
    </div>

    <div className="p-4 border-t border-zinc-800 flex gap-3">
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            handleSend();
          }
        }}
        placeholder="Type your message..."
        className="flex-1 bg-zinc-800 border border-zinc-700 rounded-2xl px-4 py-3 outline-none"
      />

      <button
        onClick={handleSend}
        className="bg-white text-black px-6 py-3 rounded-2xl font-semibold hover:scale-105 transition"
      >
        Send
      </button>
    </div>

    <div className="p-4 border-t border-zinc-800 bg-zinc-950 grid grid-cols-2 md:grid-cols-4 gap-3">
      <button
        onClick={() => handleQuickReply('SEO Services')}
        className="bg-zinc-800 rounded-xl py-3 hover:bg-zinc-700 transition"
      >
        SEO Services
      </button>

      <button
        onClick={() => handleQuickReply('Google Ads')}
        className="bg-zinc-800 rounded-xl py-3 hover:bg-zinc-700 transition"
      >
        Google Ads
      </button>

      <button
        onClick={() => handleQuickReply('AI Automation')}
        className="bg-zinc-800 rounded-xl py-3 hover:bg-zinc-700 transition"
      >
        AI Automation
      </button>

      <button
        onClick={() => handleQuickReply('Website Development')}
        className="bg-zinc-800 rounded-xl py-3 hover:bg-zinc-700 transition"
      >
        Website Development
      </button>
    </div>
  </div>
</div>

);
}