import React, { useState } from "react";
import { askGroq } from "./groqClient";
import "./index.css"; // Add Tailwind directives here

const products = [
  { id: 1, name: "Wireless Headphones", price: "$99" },
  { id: 2, name: "Smart Watch", price: "$199" },
  { id: 3, name: "AI Laptop", price: "$1299" },
];

function App() {
  const [msg, setMsg] = useState("");
  const [reply, setReply] = useState("");

  const handleAsk = async (e) => {
    e.preventDefault();
    const res = await askGroq(msg);
    setReply(res);
    setMsg("");
  };

  return (
    <div className="min-h-screen bg-gray-100">
      {/* Navbar */}
      <nav className="bg-blue-600 text-white p-4">
        <h1 className="text-2xl font-bold">AI‑Powered eCommerce</h1>
      </nav>

      {/* Products */}
      <section className="p-6">
        <h2 className="text-xl font-semibold mb-4">Top Products</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {products.map((p) => (
            <div key={p.id} className="bg-white p-4 rounded shadow">
              <h3 className="font-bold">{p.name}</h3>
              <p className="text-gray-600">{p.price}</p>
              <button className="mt-2 bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">
                Buy Now
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* AI Chat */}
      <section className="p-6 bg-white m-4 rounded shadow">
        <h2 className="text-lg font-bold mb-2">Ask AI Assistant</h2>
        <form onSubmit={handleAsk} className="flex flex-col md:flex-row gap-2">
          <input
            type="text"
            className="flex-1 border rounded p-2"
            placeholder="e.g. product recommendation, purchase behavior, revenue forecasting"
            value={msg}
            onChange={(e) => setMsg(e.target.value)}
            required
          />
          <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
            Ask
          </button>
        </form>
        {reply && (
          <div className="mt-4 bg-gray-100 p-3 rounded">
            <strong>AI:</strong> {reply}
          </div>
        )}
      </section>
    </div>
  );
}

export default App;