function MainComponent() { const [selectedPlan, setSelectedPlan] = useState(null); const [showPayment, setShowPayment] = useState(false); const handlePlanSelect = (plan)=>{ setSelectedPlan(plan); setShowPayment(true); }; const prices = { basic: "¥1,000", pro: "¥2,500", enterprise: "¥5,000" }; const planNames = { basic: "ベーシック", pro: "プロ", enterprise: "エンタープライズ" }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-20 px-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-16", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold font-roboto text-gray-900 mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "シンプルな料金プラン"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "あなたのニーズに合わせた最適なプランをお選びください")), !showPayment ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative transform transition-all duration-300 hover:scale-105 hover:shadow-xl bg-white rounded-2xl p-8 shadow-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto text-gray-900 mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "ベーシック"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "¥1,000", /*#__PURE__*/ React.createElement("span", { className: "text-lg text-gray-600", __source: { fileName: "", lineNumber: 41, columnNumber: 23 }, __self: this }, "/月")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4 mb-8", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }), "基本機能"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }), "5GB ストレージ"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }), "メールサポート")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePlanSelect("basic"), className: "w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "選択する")), /*#__PURE__*/ React.createElement("div", { className: "relative transform transition-all duration-300 hover:scale-105 hover:shadow-xl bg-white rounded-2xl p-8 shadow-lg border-2 border-blue-500", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-blue-500 text-white px-4 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, "人気")), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto text-gray-900 mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "プロ"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "¥2,500", /*#__PURE__*/ React.createElement("span", { className: "text-lg text-gray-600", __source: { fileName: "", lineNumber: 74, columnNumber: 23 }, __self: this }, "/月")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4 mb-8", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }), "すべての基本機能"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }), "20GB ストレージ"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }), "優先サポート"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }), "高度な分析")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePlanSelect("pro"), className: "w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "選択する")), /*#__PURE__*/ React.createElement("div", { className: "relative transform transition-all duration-300 hover:scale-105 hover:shadow-xl bg-white rounded-2xl p-8 shadow-lg", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto text-gray-900 mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "エンタープライズ"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "¥5,000", /*#__PURE__*/ React.createElement("span", { className: "text-lg text-gray-600", __source: { fileName: "", lineNumber: 106, columnNumber: 23 }, __self: this }, "/月")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4 mb-8", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }), "すべてのプロ機能"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }), "無制限ストレージ"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }), "24/7サポート"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }), "カスタマイズ可能"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this }), "専任マネージャー")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePlanSelect("enterprise"), className: "w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, "選択する"))) : /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-2xl p-8 shadow-lg", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto text-gray-900 mb-6", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "お支払い方法を選択"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "選択したプラン: ", planNames[selectedPlan]), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, prices[selectedPlan], /*#__PURE__*/ React.createElement("span", { className: "text-lg text-gray-600", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, "/月"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-6 mb-8", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-cc-visa text-4xl text-blue-700", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-cc-mastercard text-4xl text-orange-500", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fab fa-cc-paypal text-4xl text-blue-800", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-gray-100 hover:bg-gray-200 py-4 rounded-lg mb-3 flex items-center justify-center font-roboto transition-colors", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-credit-card mr-2", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }), "クレジットカードで支払う"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-600 hover:bg-blue-700 text-white py-4 rounded-lg flex items-center justify-center font-roboto transition-colors", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-paypal mr-2", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }), "PayPalで支払う"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPayment(false), className: "w-full text-gray-600 hover:text-gray-800 py-2 font-roboto transition-colors mt-4", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, "プラン選択に戻る"))))); }