import { useState } from "react";
import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function App() {
  const [page, setPage] = useState("home");

  const pages = {
    home: <Home />, 
    about: <About />, 
    produk: <Produk />, 
    contact: <Contact />
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-black text-white p-4 flex justify-between items-center">
        <h1 className="text-xl font-bold">Toko Ban</h1>
        <nav className="space-x-4">
          <button onClick={() => setPage("home")} className="hover:text-yellow-400">Home</button>
          <button onClick={() => setPage("about")} className="hover:text-yellow-400">About</button>
          <button onClick={() => setPage("produk")} className="hover:text-yellow-400">Produk</button>
          <button onClick={() => setPage("contact")} className="hover:text-yellow-400">Contact</button>
        </nav>
      </header>
      <main className="p-6">
        {pages[page]}
      </main>
      <footer className="bg-black text-white text-center p-4 mt-10">© 2025 Toko Ban. All Rights Reserved.</footer>
    </div>
  );
}

function Home() {
  return (
    <motion.div initial={{opacity:0,y:20}} animate={{opacity:1,y:0}} className="text-center">
      <h2 className="text-3xl font-bold mb-4">Selamat Datang di Toko Ban</h2>
      <p className="mb-6">Solusi lengkap untuk kebutuhan ban mobil & motor Anda.</p>
      <Button>Belanja Sekarang</Button>
    </motion.div>
  );
}

function About() {
  return (
    <Card className="max-w-2xl mx-auto">
      <CardContent className="p-6">
        <h2 className="text-2xl font-bold mb-4">Tentang Kami</h2>
        <p>
          Kami adalah penyedia ban terpercaya dengan berbagai pilihan ban mobil dan motor.
          Dengan harga bersaing dan kualitas terbaik, kami siap memenuhi kebutuhan Anda.
        </p>
      </CardContent>
    </Card>
  );
}

function Produk() {
  const produkList = [
    { nama: "Ban Mobil Premium", harga: "Rp 1.200.000" },
    { nama: "Ban Motor Sport", harga: "Rp 450.000" },
    { nama: "Ban Offroad", harga: "Rp 2.000.000" }
  ];

  return (
    <div>
      <h2 className="text-2xl font-bold mb-6 text-center">Produk Kami</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {produkList.map((p, i) => (
          <Card key={i} className="shadow-lg">
            <CardContent className="p-4 text-center">
              <h3 className="font-semibold mb-2">{p.nama}</h3>
              <p className="text-gray-700 mb-4">{p.harga}</p>
              <Button>Beli</Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

function Contact() {
  return (
    <Card className="max-w-lg mx-auto">
      <CardContent className="p-6">
        <h2 className="text-2xl font-bold mb-4">Hubungi Kami</h2>
        <p>Email: support@tokoban.com</p>
        <p>Telepon: 0812-3456-7890</p>
        <p>Alamat: Jl. Raya Otomotif No. 123, Jakarta</p>
      </CardContent>
    </Card>
  );
}