function MainComponent({ title, phoneNumber, address, treatments, newsItems, schedule }) { const bannerStyle = { backgroundImage: 'url(images/texture-banner.jpg)', backgroundSize: 'cover' }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4", style: bannerStyle, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#5d4037]", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#6d4c41]", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, phoneNumber), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#6d4c41]", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, address)), /*#__PURE__*/ React.createElement("section", { className: "py-6 bg-[#f5f5dc]", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center text-[#5d4037]", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "TREATMENT GUIDANCE"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-around mt-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, treatments.map((treatment, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full md:w-1/2 lg:w-1/3 p-3", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: treatment.image, alt: `Treatment option ${index + 1}`, className: "w-full h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl mt-2 text-[#5d4037]", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, treatment.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#6d4c41]", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, treatment.description))))), /*#__PURE__*/ React.createElement("section", { className: "p-6 bg-[#dcd0c0]", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#5d4037]", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "INFORMATION"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-8 mt-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, newsItems.map((news, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mt-2 text-[#6d4c41]", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, news.date), " ", news.content)))), /*#__PURE__*/ React.createElement("section", { className: "p-6 bg-[#efebe9]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center text-[#5d4037]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "CALENDAR"), /*#__PURE__*/ React.createElement("img", { src: schedule, alt: "Clinic schedule", className: "w-full h-[200px] object-contain mt-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#a1887f] p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-white", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-center text-white", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, phoneNumber), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mt-6", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/map.png", alt: "Clinic location map", className: "w-full h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-white", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "ACCESS"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, address))))); } function StoryComponent() { const clinicInfo = { title: "架空の歯科医院", phoneNumber: "TEL: 012-3456-7890", address: "サンプル市桜町1-2-3", treatments: [], newsItems: [], schedule: "images/schedule.jpg" }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { ...clinicInfo, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this })); }