import { useState } from "react";
import { ShoppingCart, Phone, Send, Star } from "lucide-react";

export default function Website() {
  const [cart, setCart] = useState([]);
  
  const products = [
    {
      id: 1,
      name: "Liquid Soap",
      price: 150,
      image: "https://images.unsplash.com/photo-1584735935682-2f2b69dff9d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
      description: "Effective hand and surface cleaning"
    },
    {
      id: 2,
      name: "Dettol",
      price: 200,
      image: "https://images.unsplash.com/photo-1584735935682-2f2b69dff9d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
      description: "Antiseptic disinfectant"
    },
    {
      id: 3,
      name: "Cairo",
      price: 180,
      image: "https://images.unsplash.com/photo-1584735935682-2f2b69dff9d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
      description: "Multi-purpose cleaner"
    },
    {
      id: 4,
      name: "Fabric Softener",
      price: 250,
      image: "https://images.unsplash.com/photo-1584735935682-2f2b69dff9d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
      description: "Soft and fresh laundry"
    }
  ];

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const getTotalPrice = () => {
    return cart.reduce((total, item) => total + item.price, 0);
  };

  const handleWhatsAppOrder = () => {
    const message = `Hello Elijah! I would like to order:\n${cart.map(item => `- ${item.name} (KES ${item.price})`).join('\n')}\nTotal: KES ${getTotalPrice()}`;
    const encodedMessage = encodeURIComponent(message);
    window.open(`https://wa.me/+254741212481?text=${encodedMessage}`, '_blank');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <nav className="bg-white shadow-sm">
        <div className="max-w-6xl mx-auto px-4 py-4">
          <div className="flex justify-between items-center">
            <h1 className="text-2xl font-bold text-blue-600">Cleansy</h1>
            <div className="flex items-center space-x-4">
              <div className="relative">
                <ShoppingCart className="h-6 w-6 text-gray-600" />
                {cart.length > 0 && (
                  <span className="absolute -top-2 -right-2 bg-blue-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
                    {cart.length}
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      </nav>

      <div className="bg-blue-600 text-white py-16">
        <div className="max-w-6xl mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold mb-4">Quality Cleaning Products</h2>
          <p className="text-xl">Your trusted source for home cleaning solutions</p>
        </div>
      </div>

      <div className="max-w-6xl mx-auto px-4 py-16">
        <h3 className="text-2xl font-semibold mb-8">Our Products</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {products.map((product) => (
            <div key={product.id} className="bg-white rounded-lg shadow-sm p-6">
              <img 
                src={product.image} 
                alt={product.name} 
                className="w-full h-48 object-cover rounded-lg mb-4"
              />
              <h4 className="text-lg font-semibold mb-2">{product.name}</h4>
              <p className="text-gray-600 mb-4">{product.description}</p>
              <div className="flex justify-between items-center">
                <span className="text-lg font-semibold">KES {product.price}</span>
                <button 
                  onClick={() => addToCart(product)}
                  className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
                >
                  Add to Cart
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {cart.length > 0 && (
        <div className="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4">
          <div className="max-w-6xl mx-auto flex justify-between items-center">
            <div>
              <p className="text-lg font-semibold">Total: KES {getTotalPrice()}</p>
              <p className="text-sm text-gray-600">{cart.length} items in cart</p>
            </div>
            <button 
              onClick={handleWhatsAppOrder}
              className="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors flex items-center"
            >
              Order via WhatsApp <Send className="ml-2 h-4 w-4" />
            </button>
          </div>
        </div>
      )}

      <div className="bg-gray-100 py-16">
        <div className="max-w-6xl mx-auto px-4">
          <div className="bg-white rounded-lg shadow-sm p-8">
            <h3 className="text-2xl font-semibold mb-4">About Cleansy</h3>
            <p className="text-gray-600 mb-4">
              Founded by Elijah James, a 21-year-old student entrepreneur from Freesing Campus, 
              Cleansy has been providing quality cleaning products for over 1.5 years. Our commitment 
              to quality and customer satisfaction has made us a trusted name in home cleaning solutions.
            </p>
            <div className="flex items-center space-x-2 text-yellow-400">
              <Star className="fill-current" />
              <Star className="fill-current" />
              <Star className="fill-current" />
              <Star className="fill-current" />
              <Star className="fill-current" />
            </div>
          </div>
        </div>
      </div>

      <footer className="bg-white py-8">
        <div className="max-w-6xl mx-auto px-4 text-center">
          <p className="text-gray-600 mb-4">© 2024 Cleansy. All rights reserved.</p>
          <a 
            href="https://wa.me/+254741212481"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center text-green-500 hover:text-green-600"
          >
            <Phone className="mr-2 h-5 w-5" />
            Chat with us on WhatsApp
          </a>
        </div>
      </footer>
    </div>
  );
}