function MainComponent() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [showLoginModal, setShowLoginModal] = React.useState(false); const [showSignupModal, setShowSignupModal] = React.useState(false); const [selectedCategory, setSelectedCategory] = React.useState(null); const [selectedCoach, setSelectedCoach] = React.useState(null); const [showBookingModal, setShowBookingModal] = React.useState(false); const [showMessageModal, setShowMessageModal] = React.useState(false); const [selectedDate, setSelectedDate] = React.useState(null); const [selectedTime, setSelectedTime] = React.useState(null); const [userProfile, setUserProfile] = React.useState(null); const [filteredCoaches, setFilteredCoaches] = React.useState([]); const [loading, setLoading] = React.useState(false); const [activeTab, setActiveTab] = React.useState("coach"); const [searchTerm, setSearchTerm] = React.useState(""); const categories = [ { icon: "fa-briefcase", name: "キャリア", description: "キャリアアップ・転職支援" }, { icon: "fa-lightbulb", name: "起業", description: "起業準備・事業計画" }, { icon: "fa-chart-line", name: "投資", description: "資産運用・投資戦略" }, { icon: "fa-heart", name: "人生", description: "ライフプラン・目標設定" }, { icon: "fa-coins", name: "副業", description: "副業開始・収入増加" }, { icon: "fa-users", name: "リーダーシップ", description: "チーム管理・組織運営" } ]; const coaches = [ { id: 1, name: "山田太郎", role: "キャリアコーチ", rating: 4.9, reviews: 156, price: 5000, image: "/coach1.jpg", badges: [ "認定コーチ", "人気" ], categories: [ "キャリア", "リーダーシップ" ], description: "10年以上のキャリアコンサルティング経験。Fortune 500企業での勤務経験あり。", availability: [ "月", "火", "水", "金" ], languages: [ "日本語", "英語" ], specialties: [ "キャリアチェンジ", "管理職育成", "グローバル人材育成" ] }, { id: 2, name: "佐藤美咲", role: "起業コーチ", rating: 4.8, reviews: 98, price: 6000, image: "/coach2.jpg", badges: [ "起業経験者" ], categories: [ "起業", "副業" ], description: "シリアルアントレプレナー。3社の起業経験と2回の成功EXIT実績あり。", availability: [ "火", "水", "木", "土" ], languages: [ "日本語" ], specialties: [ "スタートアップ支援", "資金調達", "事業計画策定" ] } ]; React.useEffect(()=>{ setFilteredCoaches(coaches.filter((coach)=>{ if (selectedCategory && !coach.categories.includes(selectedCategory)) { return false; } if (searchTerm) { const searchLower = searchTerm.toLowerCase(); return coach.name.toLowerCase().includes(searchLower) || coach.role.toLowerCase().includes(searchLower) || coach.categories.some((cat)=>cat.toLowerCase().includes(searchLower)); } return true; })); }, [ searchTerm, selectedCategory ]); const handleLogin = async ()=>{ setLoading(true); try { setIsLoggedIn(true); setShowLoginModal(false); } catch (error) { console.error(error); } finally{ setLoading(false); } }; const handleSignup = async ()=>{ setLoading(true); try { setIsLoggedIn(true); setShowSignupModal(false); } catch (error) { console.error(error); } finally{ setLoading(false); } }; const handleBooking = async (coachId)=>{ if (!isLoggedIn) { setShowLoginModal(true); return; } setLoading(true); try { alert("予約が完了しました！"); } catch (error) { console.error(error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8fafc]", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-sm border-b p-4 fixed w-full top-0 z-50", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto font-bold text-[#2563eb]", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "コーチングマッチング"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, isLoggedIn ? /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsLoggedIn(false), className: "text-gray-600 font-roboto hover:text-[#2563eb]", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "ログアウト") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLoginModal(true), className: "text-gray-600 font-roboto hover:text-[#2563eb]", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSignupModal(true), className: "bg-[#2563eb] text-white px-6 py-2 rounded-lg font-roboto hover:bg-[#1d4ed8] transition duration-200", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, "無料会員登録"))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 pt-24 pb-12", __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "あなたに最適なコーチが見つかる"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-8 font-roboto", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, "プロフェッショナルコーチがあなたの成長をサポート"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto relative", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "スキル、経験、得意分野などで検索", className: "w-full pl-12 pr-4 py-4 rounded-lg border focus:outline-none focus:ring-2 focus:ring-[#2563eb] font-roboto", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-12", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setSelectedCategory(selectedCategory === category.name ? null : category.name), className: `p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition duration-200 flex flex-col items-center ${selectedCategory === category.name ? "ring-2 ring-[#2563eb]" : ""}`, __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${category.icon} text-[#2563eb] text-2xl mb-2`, __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, category.name)))), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "col-span-3 text-center py-12", __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#2563eb] text-3xl", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this })) : filteredCoaches.length > 0 ? filteredCoaches.map((coach, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-sm hover:shadow-lg transition duration-200 p-6", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: coach.image, alt: `${coach.name}のプロフィール写真`, className: "w-20 h-20 rounded-full object-cover cursor-pointer", onClick: ()=>{ setSelectedCoach(coach); setShowBookingModal(true); }, __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-2", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }, coach.badges.map((badge, badgeIndex)=>/*#__PURE__*/ React.createElement("span", { key: badgeIndex, className: "px-2 py-1 bg-[#e6efff] text-[#2563eb] rounded-full text-xs font-roboto", __source: { fileName: "", lineNumber: 228, columnNumber: 25 }, __self: this }, badge))), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold text-lg", __source: { fileName: "", lineNumber: 236, columnNumber: 21 }, __self: this }, coach.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm font-roboto", __source: { fileName: "", lineNumber: 239, columnNumber: 21 }, __self: this }, coach.role), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 242, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-yellow-400", __source: { fileName: "", lineNumber: 243, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1 font-roboto", __source: { fileName: "", lineNumber: 244, columnNumber: 23 }, __self: this }, coach.rating), /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 text-sm ml-1 font-roboto", __source: { fileName: "", lineNumber: 245, columnNumber: 23 }, __self: this }, "(", coach.reviews, "件)")), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-roboto text-[#2563eb] font-bold", __source: { fileName: "", lineNumber: 249, columnNumber: 21 }, __self: this }, "¥", coach.price, "/30分"))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-4", __source: { fileName: "", lineNumber: 254, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedCoach(coach); setShowBookingModal(true); }, className: "flex-1 bg-[#2563eb] text-white py-2 rounded-lg font-roboto hover:bg-[#1d4ed8] transition duration-200", disabled: loading, __source: { fileName: "", lineNumber: 255, columnNumber: 19 }, __self: this }, loading ? "処理中..." : "予約する"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (!isLoggedIn) { setShowLoginModal(true); return; } setSelectedCoach(coach); setShowMessageModal(true); }, className: "px-4 py-2 bg-white border border-[#2563eb] text-[#2563eb] rounded-lg hover:bg-[#f0f7ff] transition duration-200", __source: { fileName: "", lineNumber: 265, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment-dots", __source: { fileName: "", lineNumber: 276, columnNumber: 21 }, __self: this }))))) : /*#__PURE__*/ React.createElement("div", { className: "col-span-3 text-center py-12 text-gray-500", __source: { fileName: "", lineNumber: 282, columnNumber: 13 }, __self: this }, "該当するコーチが見つかりませんでした"))), showLoginModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 290, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 291, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 292, columnNumber: 13 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogin, className: "w-full bg-[#2563eb] text-white py-2 rounded-lg", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowLoginModal(false), className: "w-full mt-2 text-gray-600", __source: { fileName: "", lineNumber: 299, columnNumber: 13 }, __self: this }, "キャンセル"))), showSignupModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 310, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 311, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 312, columnNumber: 13 }, __self: this }, "新規登録"), /*#__PURE__*/ React.createElement("button", { onClick: handleSignup, className: "w-full bg-[#2563eb] text-white py-2 rounded-lg", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, "登録"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSignupModal(false), className: "w-full mt-2 text-gray-600", __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }, "キャンセル"))), showBookingModal && selectedCoach && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 330, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 331, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, selectedCoach.name, "との予約"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, "日付を選択"), /*#__PURE__*/ React.createElement("input", { type: "date", className: "w-full p-2 border rounded", onChange: (e)=>setSelectedDate(e.target.value), __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 345, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 346, columnNumber: 15 }, __self: this }, "時間を選択"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", onChange: (e)=>setSelectedTime(e.target.value), __source: { fileName: "", lineNumber: 349, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "10:00", __source: { fileName: "", lineNumber: 354, columnNumber: 17 }, __self: this }, "10:00"), /*#__PURE__*/ React.createElement("option", { value: "11:00", __source: { fileName: "", lineNumber: 355, columnNumber: 17 }, __self: this }, "11:00"), /*#__PURE__*/ React.createElement("option", { value: "13:00", __source: { fileName: "", lineNumber: 356, columnNumber: 17 }, __self: this }, "13:00"), /*#__PURE__*/ React.createElement("option", { value: "14:00", __source: { fileName: "", lineNumber: 357, columnNumber: 17 }, __self: this }, "14:00"), /*#__PURE__*/ React.createElement("option", { value: "15:00", __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, "15:00"), /*#__PURE__*/ React.createElement("option", { value: "16:00", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, "16:00"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ handleBooking(selectedCoach.id); setShowBookingModal(false); }, className: "w-full bg-[#2563eb] text-white py-2 rounded-lg mb-2", __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, "予約を確定する"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowBookingModal(false), className: "w-full text-gray-600", __source: { fileName: "", lineNumber: 371, columnNumber: 13 }, __self: this }, "キャンセル"))), showMessageModal && selectedCoach && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 382, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg max-w-md w-full", __source: { fileName: "", lineNumber: 383, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 384, columnNumber: 13 }, __self: this }, selectedCoach.name, "にメッセージを送る"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded mb-4 h-32", placeholder: "メッセージを入力してください", __source: { fileName: "", lineNumber: 387, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ alert("メッセージを送信しました"); setShowMessageModal(false); }, className: "w-full bg-[#2563eb] text-white py-2 rounded-lg mb-2", __source: { fileName: "", lineNumber: 391, columnNumber: 13 }, __self: this }, "送信する"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMessageModal(false), className: "w-full text-gray-600", __source: { fileName: "", lineNumber: 400, columnNumber: 13 }, __self: this }, "キャンセル")))); }