function Header({ companyName = "会社名", logo = "/logo.png" }) { const [isMenuOpen, setIsMenuOpen] = useState(false); const regions = [ { name: "東京", link: "/tokyo" }, { name: "大阪", link: "/osaka" }, { name: "名古屋", link: "/nagoya" }, { name: "福岡", link: "/fukuoka" } ]; return /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md w-full", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-3", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logo, alt: "会社ロゴ", className: "h-10 w-auto", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-noto-sans text-xl font-bold", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, companyName)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "md:hidden", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isMenuOpen ? "fa-times" : "fa-bars"} text-2xl`, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { className: `absolute md:relative top-16 md:top-0 left-0 w-full md:w-auto bg-white md:bg-transparent ${isMenuOpen ? "block" : "hidden"} md:block shadow-md md:shadow-none`, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 p-4 md:p-0", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, regions.map((region)=>/*#__PURE__*/ React.createElement("li", { key: region.link, __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: region.link, className: "font-noto-sans text-gray-700 hover:text-gray-900 block md:inline-block", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, region.name)))))))); } function HeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Header, { companyName: "テスト株式会社", logo: "/test-logo.png", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this })); } function OnsenCard({ image, name, location, description }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm rounded-lg overflow-hidden shadow-lg bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `${name}の写真`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-noto-sans text-xl mb-2 text-gray-800", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-gray-600 mr-2", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-noto-sans text-gray-600", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, location)), /*#__PURE__*/ React.createElement("p", { className: "font-noto-sans text-gray-700 text-base", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, description))); } function OnsenCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OnsenCard, { image: "/onsen1.jpg", name: "城崎温泉", location: "兵庫県豊岡市", description: "風情ある温泉街で有名な城崎温泉。7つの外湯めぐりが楽しめます。", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OnsenCard, { image: "/onsen2.jpg", name: "草津温泉", location: "群馬県草津町", description: "日本有数の湧出量を誇る温泉地。湯畑が象徴的な景観です。", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function MainComponent() { const [searchTerm, setSearchTerm] = useState(""); const onsenSpots = [ { name: "青い池温泉", region: "道北", description: "神秘的な青い湯色が特徴の秘湯", image: "/images/aoiike-onsen.jpg" }, { name: "天空の湯", region: "道東", description: "雄大な景色を一望できる露天風呂", image: "/images/tenku-onsen.jpg" }, { name: "森の湯処", region: "道央", description: "原生林に囲まれた静寂の温泉", image: "/images/mori-onsen.jpg" } ]; const regions = [ { name: "道央", image: "/images/doou.jpg" }, { name: "道南", image: "/images/donan.jpg" }, { name: "道北", image: "/images/dohoku.jpg" }, { name: "道東", image: "/images/dotou.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "font-noto-sans", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "relative h-[600px] w-full", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/hero-onsen.jpg", alt: "雪景色の中の露天風呂", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-4xl md:text-6xl font-bold", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "北海道秘湯の旅"))), /*#__PURE__*/ React.createElement("section", { className: "max-w-7xl mx-auto px-4 py-16", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "北海道の隠れた温泉の魅力"), /*#__PURE__*/ React.createElement("p", { className: "text-lg leading-relaxed", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "大自然に囲まれた北海道には、まだ知られていない素晴らしい温泉が数多く存在します。四季折々の景色と共に楽しむ温泉は、心身をリフレッシュする最高の癒しとなるでしょう。")), /*#__PURE__*/ React.createElement("section", { className: "bg-gray-50 py-16", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-8", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "おすすめの温泉"), /*#__PURE__*/ React.createElement("div", { className: "ml-auto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "温泉を検索", className: "px-4 py-2 border rounded-lg", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, onsenSpots.filter((spot)=>spot.name.includes(searchTerm) || spot.description.includes(searchTerm)).map((spot, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null))))), /*#__PURE__*/ React.createElement("section", { className: "max-w-7xl mx-auto px-4 py-16", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-8", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "エリアから探す"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, regions.map((region, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative cursor-pointer group", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: region.image, alt: `${region.name}の温泉地域`, className: "w-full h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-50 transition duration-300 rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white text-2xl font-bold", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, region.name))))))); }