function MainComponent() { const [formData, setFormData] = React.useState({ birdType: "", location: "", date: "", time: "", notes: "" }); const handleSubmit = (e)=>{ e.preventDefault(); console.log("Bird sighting reported:", formData); }; const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#e0f2fe] to-[#bfdbfe] p-8", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto transform hover:scale-[1.01] transition-transform", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dove text-6xl text-[#2c5282] mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-roboto text-[#2c5282] font-bold tracking-tight", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Bird Sighting Reporter"), /*#__PURE__*/ React.createElement("p", { className: "text-[#4a5568] mt-2 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Record your feathered friend encounters")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white/90 backdrop-blur-sm rounded-xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] p-8 space-y-6", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-[#4a5568] text-sm font-medium", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Bird Species"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "birdType", value: formData.birdType, onChange: handleChange, className: "w-full p-3 border-2 border-[#e2e8f0] rounded-lg focus:ring-2 focus:ring-[#2c5282] focus:border-transparent transition-all duration-200 bg-white/50", placeholder: "e.g., American Robin", required: true, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-gray-700", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Location"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", value: formData.location, onChange: handleChange, className: "w-full p-2 border rounded focus:ring-2 focus:ring-[#2c5282]", placeholder: "e.g., Central Park, NYC", required: true, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-gray-700", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: formData.date, onChange: handleChange, className: "w-full p-2 border rounded focus:ring-2 focus:ring-[#2c5282]", required: true, __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-gray-700", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("input", { type: "time", name: "time", value: formData.time, onChange: handleChange, className: "w-full p-2 border rounded focus:ring-2 focus:ring-[#2c5282]", required: true, __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-gray-700", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Additional Notes"), /*#__PURE__*/ React.createElement("textarea", { name: "notes", value: formData.notes, onChange: handleChange, className: "w-full p-2 border rounded focus:ring-2 focus:ring-[#2c5282]", rows: "4", placeholder: "Describe the bird's behavior, markings, etc.", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-gradient-to-r from-[#2c5282] to-[#1a365d] text-white font-roboto py-3 px-6 rounded-lg hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 font-medium text-lg", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-feather-alt mr-2", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }), "Report Sighting"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } form > div { animation: fadeIn 0.5s ease-out forwards; } form > div:nth-child(1) { animation-delay: 0.1s; } form > div:nth-child(2) { animation-delay: 0.2s; } form > div:nth-child(3) { animation-delay: 0.3s; } form > div:nth-child(4) { animation-delay: 0.4s; } form > button { animation-delay: 0.5s; } `)); }