import React, { useState } from "react"; import { motion } from "framer-motion"; // BUSINESS TILE VISUALIZER – PWA READY // Drop into a Vite / Next / CRA React project with Tailwind installed const TILE_LIBRARY = [ { id: 1, name: "White Marble", url: "https://images.unsplash.com/photo-1588854337118-1c74b6b8e3bb" }, { id: 2, name: "Concrete Grey", url: "https://images.unsplash.com/photo-1523413651479-597eb2da0ad6" }, { id: 3, name: "Terracotta", url: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c" }, { id: 4, name: "Patterned Blue", url: "https://images.unsplash.com/photo-1600121848594-d8644e57abab" }, { id: 5, name: "Black Slate", url: "https://images.unsplash.com/photo-1615874959474-d609969a20ed" } ]; export default function TileVisualizerBusinessApp() { const [roomImage, setRoomImage] = useState(null); const [tile, setTile] = useState(TILE_LIBRARY[0]); const [opacity, setOpacity] = useState(0.6); const [surface, setSurface] = useState("floor"); const handleUpload = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setRoomImage(reader.result); reader.readAsDataURL(file); }; return (

{/* HEADER */}