function MainComponent() { const [painRelief, setPainRelief] = React.useState(false); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f2ee] p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-4xl text-[#345920] mb-12", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "Ideal Cannabis Strain Finder"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-2xl", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3 mb-4 md:mb-0", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#345920] text-xs font-bold mb-2", htmlFor: "effect", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Desired Effect"), /*#__PURE__*/ React.createElement("select", { className: "block w-full bg-white border border-[#a5d6a7] rounded py-2 px-3 mb-3 leading-tight font-roboto focus:outline-none focus:bg-white focus:border-[#66bb6a]", id: "effect", name: "effect", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "Relaxation"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, "Energy"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, "Creativity"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, "Sleep"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "Euphoria"))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#345920] text-xs font-bold mb-2", htmlFor: "flavor", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Flavor Preference"), /*#__PURE__*/ React.createElement("select", { className: "block w-full bg-white border border-[#a5d6a7] rounded py-2 px-3 leading-tight font-roboto focus:outline-none focus:bg-white focus:border-[#66bb6a]", id: "flavor", name: "flavor", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Earthy"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Sweet"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Pungent"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Citrus"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Berry")))), /*#__PURE__*/ React.createElement("div", { className: "w-full px-3 mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "form-checkbox h-5 w-5 text-[#66bb6a] rounded focus:ring-[#a5d6a7]", checked: painRelief, onChange: ()=>setPainRelief(!painRelief), __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-[#345920] font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Pain Relief"))), /*#__PURE__*/ React.createElement("div", { className: "flex w-full px-3", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#345920] hover:bg-[#1b5e20] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full transition-colors duration-300", type: "submit", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "🔍"), " Find Strains"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .form-enter { animation: fadeIn 0.5s ease-out forwards; } `)); }