function MainComponent() { const [selectedAromas, setSelectedAromas] = React.useState([]); const [resultMessage, setResultMessage] = React.useState(''); const handleSelectChange = (e)=>{ const { value } = e.target; setSelectedAromas([ ...selectedAromas, value ]); }; const handleFormSubmit = (e)=>{ e.preventDefault(); const aromaBenefits = { relaxation: "Lavender, Chamomile, Sandalwood", energy: "Peppermint, Lemon, Rosemary", focus: "Basil, Juniper, Sage" }; const benefits = selectedAromas.map((aroma)=>aromaBenefits[aroma]).join(', '); setResultMessage(`Suggested scents for selected benefits: ${benefits}`); }; const uniqueBenefits = [ "relaxation", "energy", "focus" ].filter((benefit)=>!selectedAromas.includes(benefit)); const benefitsOptions = uniqueBenefits.map((benefit)=>/*#__PURE__*/ React.createElement("option", { key: benefit, value: benefit, __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, benefit.charAt(0).toUpperCase() + benefit.slice(1))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center min-h-screen bg-[#F3E9DD] p-4 font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white rounded-lg shadow-md p-6 my-8", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212] mb-5", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Aromatherapy Finder Tool"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "benefit", className: "block text-sm font-medium text-[#6b7280]", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Desire Benefit"), /*#__PURE__*/ React.createElement("select", { name: "benefit", id: "benefit", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50", onChange: handleSelectChange, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, benefitsOptions)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#6D6875] hover:bg-[#4A4458] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#6D6875]", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Find Scents 🌿"))), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-[#6b7280] mt-3", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, resultMessage))); }