import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { Button } from "@/components/ui/button";

const Home = () => (
  <div className="text-center text-white p-10">
    <h1 className="text-4xl font-bold mb-4">Welcome to Build-O-Tronics</h1>
    <p className="text-lg mb-6">Your one-stop shop for Arduino parts and electronics.</p>
    <Button className="bg-purple-600 hover:bg-purple-800">Shop Now</Button>
  </div>
);

const Shop = () => (
  <div className="p-10 text-white">
    <h2 className="text-3xl font-bold mb-4">Shop Arduino Parts</h2>
    <div className="grid grid-cols-2 gap-6">
      <div className="bg-gray-800 p-4 rounded-xl shadow-lg">
        <h3 className="text-xl font-semibold">Arduino Uno R3</h3>
        <p>Estimated Price: PHP 500</p>
      </div>
      <div className="bg-gray-800 p-4 rounded-xl shadow-lg">
        <h3 className="text-xl font-semibold">SG90 Servo Motor</h3>
        <p>Estimated Price: PHP 150</p>
      </div>
    </div>
  </div>
);

const Contact = () => (
  <div className="p-10 text-white">
    <h2 className="text-3xl font-bold mb-4">Contact Us</h2>
    <p>Email: support@build-o-tronics.com</p>
  </div>
);

const App = () => {
  return (
    <Router>
      <div className="min-h-screen bg-black text-white">
        <nav className="p-4 flex justify-between bg-purple-900 shadow-lg">
          <Link to="/" className="text-xl font-bold">Build-O-Tronics</Link>
          <div>
            <Link to="/shop" className="mx-4">Shop</Link>
            <Link to="/contact" className="mx-4">Contact</Link>
          </div>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/shop" element={<Shop />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;