import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; // Main App component const App = () => {   const [selectedBike, setSelectedBike] = useState('');   const [shippingCost, setShippingCost] = useState(null);   const [error, setError] = useState('');   const [isProcessing, setIsProcessing] = useState(false);   const [isAdded, setIsAdded] = useState(false);   // A list of available e-bikes with their weights   const availableBikes = [     { name: 'Eco Commuter 2000', model: 'ECO-2000', weight: 48 },     { name: 'Mountain Trail 5000', model: 'MTN-5000', weight: 62 },     { name: 'Urban Cruiser', model: 'URBAN-CRUISE', weight: 55 },     { name: 'Folding Traveler', model: 'FOLD-TRAVEL', weight: 45 },     { name: 'Electric Fat Bike', model: 'FAT-BIKE', weight: 78 },   ];   // Define the shipping zones and their rates   const shippingRates = [     { zone: 'USA', rate: 150 },     { zone: 'Canada', rate: 250 },     { zone: 'International', rate: 400 },   ];   // Define the weight tiers and their associated surcharges   const weightSurcharges = [     { maxWeight: 50, surcharge: 0 },     { maxWeight: 75, surcharge: 50 },     { maxWeight: 100, surcharge: 100 },     { maxWeight: Infinity, surcharge: 200 },   ];   // A mock function to simulate adding the item to the cart and updating the total   const addShippingToCart = async (cost) => {     setIsProcessing(true);     setError('');          // In a real application, you would make an API call to your backend here.     // Example: fetch('/api/cart/add-shipping', { method: 'POST', body: JSON.stringify({ shippingCost: cost }) });          // Simulate a successful API call     return new Promise(resolve => setTimeout(() => {       console.log(`Shipping cost of $${cost} added to cart.`);       setIsProcessing(false);       setIsAdded(true);       resolve();     }, 1500));   };   // The core function to calculate the shipping cost and send it to the backend   const calculateAndAddToCart = async (event) => {     event.preventDefault();          // Find the selected bike from the list based on the model     const bike = availableBikes.find(b => b.model === selectedBike);          // Validation: check if a bike was selected     if (!bike) {       setError('Please select an e-bike model.');       return;     }          // The weight is now retrieved from the selected bike object, not user input     const weight = bike.weight;          const selectedZone = document.getElementById('shippingZone').value;     const baseRate = shippingRates.find(rate => rate.zone === selectedZone)?.rate;     // Validation: check if a shipping zone was selected     if (!baseRate) {       setError('Please select a valid shipping zone.');       return;     }     const surchargeTier = weightSurcharges.find(tier => weight <= tier.maxWeight);     const surcharge = surchargeTier ? surchargeTier.surcharge : 0;     const totalCost = baseRate + surcharge;          setShippingCost(totalCost);     setError('');          // Call the mock function to simulate adding the cost to the cart     await addShippingToCart(totalCost);   };   return (       ); }; export default App;