function MainComponent() { const [selectedArea, setSelectedArea] = React.useState(""); const [selectedStation, setSelectedStation] = React.useState(""); const [selectedMonth, setSelectedMonth] = React.useState(""); const [selectedTools, setSelectedTools] = React.useState([]); const [stations, setStations] = React.useState([]); const [stationDetails, setStationDetails] = React.useState({}); const [totalBudget, setTotalBudget] = React.useState(0); const areaToStations = { "渋谷区": [ "渋谷駅", "原宿駅", "恵比寿駅" ], "新宿区": [ "新宿駅", "西武新宿駅", "高田馬場駅" ], "台東区": [ "上野駅", "浅草駅", "秋葉原駅" ] }; const stationToDetails = { "渋谷駅": { "乗降客数": "1,000,000人/日", "平均年収": "700万円" }, "原宿駅": { "乗降客数": "800,000人/日", "平均年収": "650万円" }, "恵比寿駅": { "乗降客数": "500,000人/日", "平均年収": "800万円" } }; const promotionTools = [ { name: "インバウンド", budget: 200000 }, { name: "検索エンジン", budget: 150000 } ]; const months = Array.from({ length: 12 }, (_, i)=>`${i + 1}月`); const handleAreaChange = (e)=>{ setSelectedArea(e.target.value); setStations(areaToStations[e.target.value] || []); setSelectedStation(""); setStationDetails({}); }; const handleStationChange = (e)=>{ setSelectedStation(e.target.value); setStationDetails(stationToDetails[e.target.value] || {}); }; const handleMonthChange = (e)=>{ setSelectedMonth(e.target.value); }; const handleToolSelection = (tool)=>{ const isToolSelected = selectedTools.some((selectedTool)=>selectedTool.name === tool.name); if (isToolSelected) { const newSelectedTools = selectedTools.filter((selectedTool)=>selectedTool.name !== tool.name); setSelectedTools(newSelectedTools); setTotalBudget(totalBudget - tool.budget); } else { setSelectedTools([ ...selectedTools, tool ]); setTotalBudget(totalBudget + tool.budget); } }; const isSelected = (toolName)=>selectedTools.some((tool)=>tool.name === toolName); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-4 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl w-full bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "area", className: "border border-gray-300 p-2 rounded-md font-roboto", onChange: handleAreaChange, value: selectedArea, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "地域を選択"), Object.keys(areaToStations).map((area)=>/*#__PURE__*/ React.createElement("option", { key: area, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, area))), /*#__PURE__*/ React.createElement("select", { name: "station", className: "border border-gray-300 p-2 rounded-md font-roboto", onChange: handleStationChange, value: selectedStation, disabled: !selectedArea, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "駅名を選択"), stations.map((station)=>/*#__PURE__*/ React.createElement("option", { key: station, __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, station))), /*#__PURE__*/ React.createElement("select", { name: "promotionMonth", className: "border border-gray-300 p-2 rounded-md font-roboto", onChange: handleMonthChange, value: selectedMonth, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "販促を行いたい月"), months.map((month, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: month, __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, month)))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, selectedStation && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold font-roboto text-[#333]", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "駅情報"), /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, Object.entries(stationDetails).map(([key, value])=>/*#__PURE__*/ React.createElement("li", { key: key, className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this }, `${key}: ${value}`)))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto text-[#333]", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "販促ツール提案"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, promotionTools.map((tool, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleToolSelection(tool), className: `border ${isSelected(tool.name) ? 'border-blue-500' : 'border-gray-200'} p-4 rounded-lg font-roboto text-sm cursor-pointer`, __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, tool.name, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "予算: ¥", tool.budget)))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 font-roboto text-sm", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "選択したツール数: ", selectedTools.length), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "合計予算: ¥", totalBudget.toLocaleString()))))); }