function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#E3F2FD]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-[#0277BD] mb-8", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Hawaii Fishing Times")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:justify-between items-center", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 mb-6 md:mb-0", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-auto rounded-lg shadow-lg", src: "/ocean-fishing.jpg", alt: "Ocean fishing in Hawaii", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "md:w-1/2 bg-white rounded-lg p-8 shadow-lg", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#01579B] mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, "Find the Best Time"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "moonPhase", className: "block text-[#01579B] font-roboto mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 19 }, __self: this }, "Moon Phase"), /*#__PURE__*/ React.createElement("select", { name: "moonPhase", className: "w-full p-2 border rounded-md bg-white text-[#01579B]", __source: { fileName: "", lineNumber: 24, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "new", __source: { fileName: "", lineNumber: 25, columnNumber: 21 }, __self: this }, "New Moon"), /*#__PURE__*/ React.createElement("option", { value: "waxing", __source: { fileName: "", lineNumber: 26, columnNumber: 21 }, __self: this }, "Waxing Crescent"), /*#__PURE__*/ React.createElement("option", { value: "full", __source: { fileName: "", lineNumber: 27, columnNumber: 21 }, __self: this }, "Full Moon"), /*#__PURE__*/ React.createElement("option", { value: "waning", __source: { fileName: "", lineNumber: 28, columnNumber: 21 }, __self: this }, "Waning Crescent"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "tide", className: "block text-[#01579B] font-roboto mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 19 }, __self: this }, "Tide"), /*#__PURE__*/ React.createElement("select", { name: "tide", className: "w-full p-2 border rounded-md bg-white text-[#01579B]", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "high", __source: { fileName: "", lineNumber: 36, columnNumber: 21 }, __self: this }, "High Tide"), /*#__PURE__*/ React.createElement("option", { value: "low", __source: { fileName: "", lineNumber: 37, columnNumber: 21 }, __self: this }, "Low Tide"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "current", className: "block text-[#01579B] font-roboto mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, "Ocean Current"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "current", className: "w-full p-2 border rounded-md bg-white text-[#01579B]", placeholder: "Enter current direction e.g. North", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-[#0288D1] text-white rounded-md hover:bg-[#0277BD] transition duration-300", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "Check Times")))))), /*#__PURE__*/ React.createElement("footer", { className: "text-center p-4 text-white bg-[#0277BD]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Powered by lunar and oceanographic data.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } main { animation: fadeIn 1s ease-in-out; } `)); }