import { useState } from "react"; const DesignPlanBuilder = () => { // State const [hours, setHours] = useState(20); const [revisions, setRevisions] = useState(3); const supportOptions = [ { label: "Basic", multiplier: 1 }, { label: "Standard", multiplier: 1.5 }, { label: "Premium", multiplier: 2 }, ]; const [selectedSupport, setSelectedSupport] = useState("Standard"); const deliveryOptions = [ { label: "Standard", extra: 0 }, { label: "Express", extra: 50 }, ]; const [selectedDelivery, setSelectedDelivery] = useState("Standard"); // Price calculation const basePrice = hours * 20 + revisions * 15; const supportMultiplier = supportOptions.find(s => s.label === selectedSupport)?.multiplier ?? 1; const deliveryExtra = deliveryOptions.find(d => d.label === selectedDelivery)?.extra ?? 0; const totalPrice = basePrice * supportMultiplier + deliveryExtra; return (

Build Your Design Plan

{/* Total Price */}

${totalPrice.toFixed(2)} /month

{/* Design Hours */} Design Hours per Month

setHours(Number(e.target.value))} /> {hours}h

{/* Revisions */} Number of Revisions

setRevisions(Number(e.target.value))} /> {revisions}

{/* Support Level */} Support Level

{supportOptions.map((option) => ( ))}

{/* Delivery Speed */} Delivery Speed

{deliveryOptions.map((option) => ( ))}

); }; export default DesignPlanBuilder;