function MainComponent() { const [estimate, setEstimate] = React.useState(null); const handleSubmit = (event)=>{ event.preventDefault(); const budget = event.target.budget.value; const duration = event.target.duration.value; const channels = event.target.channels.value; const estimatedCost = parseInt(budget) * parseInt(duration); setEstimate({ budget, duration, channels, estimatedCost }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center bg-gradient-to-r from-green-400 via-green-500 to-green-600 p-8", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-7xl font-crimson-text text-white mb-12 shadow-xl p-6 bg-green-700 rounded-xl border-4 border-green-300", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "広告配信の見積もり"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-10 rounded-xl shadow-2xl w-full max-w-xl border-4 border-green-300", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1a4731] font-bold text-xl mb-3", htmlFor: "budget", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "予算"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-4 border-3 border-green-400 rounded-lg focus:outline-none focus:ring-3 focus:ring-green-500 text-lg", type: "number", id: "budget", name: "budget", placeholder: "10000", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1a4731] font-bold text-xl mb-3", htmlFor: "duration", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "期間（日）"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-4 border-3 border-green-400 rounded-lg focus:outline-none focus:ring-3 focus:ring-green-500 text-lg", type: "number", id: "duration", name: "duration", placeholder: "30", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1a4731] font-bold text-xl mb-3", htmlFor: "channels", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "チャネル"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-4 border-3 border-green-400 rounded-lg focus:outline-none focus:ring-3 focus:ring-green-500 text-lg", id: "channels", name: "channels", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "social_media", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "ソーシャルメディア"), /*#__PURE__*/ React.createElement("option", { value: "search_engines", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "検索エンジン"), /*#__PURE__*/ React.createElement("option", { value: "email", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "メール"), /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "すべて"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-bold text-xl py-4 px-10 rounded-full hover:bg-green-600 hover:shadow-xl transform hover:scale-105 transition-all duration-300 submit-button", type: "submit", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "見積もりを生成"))), estimate && /*#__PURE__*/ React.createElement("div", { className: "bg-white mt-10 p-10 rounded-xl shadow-2xl w-full max-w-xl result-box border-4 border-green-300", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-crimson-text text-[#1a4731] mb-6", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "見積もり結果"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-3 text-green-700", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "予算: ¥", estimate.budget), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-3 text-green-700", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "期間（日）: ", estimate.duration), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-3 text-green-700", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "チャネル: ", estimate.channels), /*#__PURE__*/ React.createElement("p", { className: "text-2xl mb-3 font-bold text-green-800", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "推定費用: ¥", estimate.estimatedCost)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, ` .submit-button { transition: all 0.3s ease-in-out; } .result-box { transition: all 0.3s ease-in-out; } .result-box:hover { transform: scale(1.05); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } `)); }