export default function App() { const products = [ { name: "Nike Air Max", price: "$120", image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=1200&auto=format&fit=crop", }, { name: "Jordan Retro", price: "$180", image: "https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?q=80&w=1200&auto=format&fit=crop", }, ];

return ( <div style={{ background: "#000", color: "#fff", minHeight: "100vh", fontFamily: "Arial", }} > {/* Navbar */} <nav style={{ display: "flex", justifyContent: "space-between", padding: "20px", borderBottom: "1px solid #222", }} > <h1 style={{ color: "red" }}>KICKVURSE 👟

    <div style={{ display: "flex", gap: "20px" }}>
      <a href="#" style={{ color: "white" }}>
        Home
      </a>

      <a href="#products" style={{ color: "white" }}>
        Products
      </a>

      <a href="#contact" style={{ color: "white" }}>
        Contact
      </a>
    </div>
  </nav>

  {/* Hero */}
  <section style={{ padding: "50px 20px", textAlign: "center" }}>
    <h2 style={{ fontSize: "50px" }}>
      Premium Sneaker Store
    </h2>

    <p style={{ color: "#aaa" }}>
      Order your favorite sneakers now 🔥
    </p>

    <button
      style={{
        background: "red",
        color: "white",
        padding: "15px 30px",
        border: "none",
        borderRadius: "10px",
        marginTop: "20px",
      }}
    >
      Shop Now
    </button>
  </section>

  {/* Products */}
  <section id="products" style={{ padding: "20px" }}>
    <h2>Featured Products</h2>

    <div
      style={{
        display: "flex",
        gap: "20px",
        flexWrap: "wrap",
      }}
    >
      {products.map((product, index) => (
        <div
          key={index}
          style={{
            background: "#111",
            borderRadius: "20px",
            padding: "20px",
            width: "300px",
          }}
        >
          <img
            src={product.image}
            alt={product.name}
            style={{
              width: "100%",
              borderRadius: "20px",
            }}
          />

          <h3>{product.name}</h3>

          <p style={{ color: "red" }}>
            {product.price}
          </p>

          <button
            style={{
              background: "red",
              color: "white",
              width: "100%",
              padding: "12px",
              border: "none",
              borderRadius: "10px",
              marginTop: "10px",
            }}
          >
            Order Now
          </button>
        </div>
      ))}
    </div>
  </section>

  {/* Payment */}
  <section style={{ padding: "20px" }}>
    <h2>Payment Options 💳</h2>

    <ul>
      <li>bKash</li>
      <li>Nagad</li>
      <li>Rocket</li>
      <li>Cash On Delivery</li>
    </ul>
  </section>

  {/* Contact */}
  <section id="contact" style={{ padding: "20px" }}>
    <h2>Contact Us 📞</h2>

    <p>WhatsApp: +880123456789</p>

    <a
      href="https://wa.me/880123456789"
      target="_blank"
      style={{
        background: "green",
        color: "white",
        padding: "12px 20px",
        borderRadius: "10px",
        textDecoration: "none",
      }}
    >
      Chat on WhatsApp
    </a>
  </section>

  {/* Footer */}
  <footer
    style={{
      textAlign: "center",
      padding: "20px",
      borderTop: "1px solid #222",
      marginTop: "40px",
    }}
  >
    © 2026 KICKVURSE
  </footer>
</div>

); }