function MainComponent() { const [formData, setFormData] = useState({ name: "", email: "", company: "", phone: "", budget: "300", deadline: "1month", projectSummary: "", additionalRequests: "", privacy: false }); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); const [submitStatus, setSubmitStatus] = useState(null); const handleChange = (e)=>{ const { name, value, type, checked } = e.target; const newValue = type === "checkbox" ? checked : value; setFormData((prev)=>({ ...prev, [name]: newValue })); setErrors((prev)=>({ ...prev, [name]: "" })); setSubmitStatus(null); }; const validate = ()=>{ const newErrors = {}; if (!formData.name || formData.name.trim() === "") { newErrors.name = "会社名/個人名は必須項目です"; } if (!formData.email || formData.email.trim() === "") { newErrors.email = "メールアドレスは必須項目です"; } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(formData.email.trim())) { newErrors.email = "有効なメールアドレスを入力してください"; } if (!formData.privacy) { newErrors.privacy = "プライバシーポリシーへの同意が必要です"; } if (Object.keys(newErrors).length > 0) { const errorFields = Object.keys(newErrors).map((key)=>{ switch(key){ case "name": return "会社名/個人名"; case "email": return "メールアドレス"; case "privacy": return "プライバシーポリシーへの同意"; default: return key; } }).join("、"); setSubmitStatus({ type: "error", message: `以下の必須項目が入力されていません: ${errorFields}` }); } return newErrors; }; const handleSubmit = async (e)=>{ e.preventDefault(); const newErrors = validate(); if (Object.keys(newErrors).length > 0) { setErrors(newErrors); return; } setIsSubmitting(true); setSubmitStatus(null); try { const response = await fetch("/api/send-form", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: formData.name.trim(), email: formData.email.trim(), phone: formData.phone?.trim(), budget: formData.budget, deadline: formData.deadline, projectSummary: formData.projectSummary?.trim(), additionalRequests: formData.additionalRequests?.trim(), privacy: formData.privacy }) }); if (!response.ok) { throw new Error(`送信に失敗しました。ステータス: ${response.status}`); } const result = await response.json(); if (result.success) { setIsSubmitted(true); setSubmitStatus({ type: "success", message: "送信が完了しました。" }); } else { throw new Error(result.error || "送信中にエラーが発生しました"); } } catch (error) { console.error("Form submission error:", error); setSubmitStatus({ type: "error", message: error.message || "送信に失敗しました。しばらく経ってから再度お試しください。" }); } finally{ setIsSubmitting(false); } }; if (isSubmitted) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-900 via-gray-800 to-gray-900 text-white py-12 sm:py-20", __source: { fileName: "", lineNumber: 139, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white/5 backdrop-blur-xl p-6 sm:p-8 rounded-2xl border border-white/10", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl sm:text-5xl mb-6", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, "✨"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-[#00ff00] to-[#00ffff]", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "お問い合わせありがとうございます"), /*#__PURE__*/ React.createElement("p", { className: "text-white/80 mb-6 text-sm sm:text-base leading-relaxed", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, "フォームの送信が完了しました。", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }), "内容を確認次第、担当者よりご連絡させていただきます。"), /*#__PURE__*/ React.createElement("p", { className: "text-white/60 mb-8 text-xs sm:text-sm", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, "※ 通常3営業日以内にご返信いたします"), /*#__PURE__*/ React.createElement("a", { href: "/", className: "inline-block px-6 sm:px-8 py-3 sm:py-4 bg-gradient-to-r from-[#00ff00] to-[#00ffff] rounded-full text-black font-bold hover:from-[#00ff00]/90 hover:to-[#00ffff]/90 transition-all duration-300 transform hover:-translate-y-1", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, "トップページに戻る"))))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#0a0a2e] via-[#1a1a3a] to-[#0a0a2e] text-white", __source: { fileName: "", lineNumber: 169, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-6 left-6 z-50", __source: { fileName: "", lineNumber: 170, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "group flex items-center px-6 py-3 rounded-xl bg-[#00ff00]/10 hover:bg-[#00ff00]/20 backdrop-blur-lg border border-[#00ff00]/20 transition-all duration-300 hover:scale-105 text-[#00ff00]", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2 group-hover:-translate-x-1 transition-transform duration-300", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, "トップページに戻る"))), /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#0a0a2e]/95 backdrop-blur-md border-b border-[#00ff00]/20", __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-4xl font-bold text-center relative", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "absolute -inset-1 blur-sm bg-gradient-to-r from-[#00ff00] to-[#00ffff] opacity-50", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "relative bg-clip-text text-transparent bg-gradient-to-r from-[#00ff00] to-[#00ffff] font-mono", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, "プロジェクト依頼フォーム")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-[#00ff00]/10 h-2 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#00ff00] to-[#00ffff] w-0 progress-bar", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8 sm:py-12", __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 195, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 196, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#0a0a2e]/50 backdrop-blur-xl p-6 sm:p-8 rounded-2xl border border-[#00ff00]/20 shadow-[0_0_15px_rgba(0,255,0,0.1)]", __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 200, columnNumber: 19 }, __self: this }, "会社名/個人名 ", /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 201, columnNumber: 29 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: formData.name, onChange: handleChange, className: "w-full px-4 py-3 bg-[#0a0a2e] border border-[#00ff00]/30 rounded-lg focus:outline-none text-white", placeholder: "株式会社サイバーテック", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }), errors.name && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-red-400 text-sm", __source: { fileName: "", lineNumber: 212, columnNumber: 21 }, __self: this }, errors.name)), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this }, "メールアドレス ", /*#__PURE__*/ React.createElement("span", { className: "text-red-400", __source: { fileName: "", lineNumber: 217, columnNumber: 29 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: formData.email, onChange: handleChange, className: "w-full px-4 py-3 bg-[#0a0a2e] border border-[#00ff00]/30 rounded-lg focus:outline-none text-white", placeholder: "contact@cyber-tech.jp", __source: { fileName: "", lineNumber: 219, columnNumber: 19 }, __self: this }), errors.email && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-red-400 text-sm", __source: { fileName: "", lineNumber: 228, columnNumber: 21 }, __self: this }, errors.email)), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }, "電話番号"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: formData.phone, onChange: handleChange, className: "w-full px-4 py-3 bg-[#0a0a2e] border border-[#00ff00]/30 rounded-lg focus:outline-none text-white", placeholder: "03-1234-5678", __source: { fileName: "", lineNumber: 235, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 245, columnNumber: 19 }, __self: this }, "予算範囲"), /*#__PURE__*/ React.createElement("select", { name: "budget", value: formData.budget, onChange: handleChange, className: "w-full px-4 py-3 bg-[#0a0a2e] border border-[#00ff00]/30 rounded-lg focus:outline-none text-white appearance-none cursor-pointer", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "300", className: "bg-[#0a0a2e]", __source: { fileName: "", lineNumber: 254, columnNumber: 21 }, __self: this }, "〜300万円"), /*#__PURE__*/ React.createElement("option", { value: "500", className: "bg-[#0a0a2e]", __source: { fileName: "", lineNumber: 257, columnNumber: 21 }, __self: this }, "300万円〜500万円"), /*#__PURE__*/ React.createElement("option", { value: "1000", className: "bg-[#0a0a2e]", __source: { fileName: "", lineNumber: 260, columnNumber: 21 }, __self: this }, "500万円〜1000万円"), /*#__PURE__*/ React.createElement("option", { value: "over1000", className: "bg-[#0a0a2e]", __source: { fileName: "", lineNumber: 263, columnNumber: 21 }, __self: this }, "1000万円以上"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 268, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 269, columnNumber: 19 }, __self: this }, "希望納期"), /*#__PURE__*/ React.createElement("select", { name: "deadline", value: formData.deadline, onChange: handleChange, className: "w-full px-4 py-3 bg-[#0a0a2e] border border-[#00ff00]/30 rounded-lg focus:outline-none text-white appearance-none cursor-pointer", __source: { fileName: "", lineNumber: 272, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "1month", className: "bg-[#0a0a2e]", __source: { fileName: "", lineNumber: 278, columnNumber: 21 }, __self: this }, "1ヶ月以内"), /*#__PURE__*/ React.createElement("option", { value: "3months", className: "bg-[#0a0a2e]", __source: { fileName: "", lineNumber: 281, columnNumber: 21 }, __self: this }, "3ヶ月以内"), /*#__PURE__*/ React.createElement("option", { value: "6months", className: "bg-[#0a0a2e]", __source: { fileName: "", lineNumber: 284, columnNumber: 21 }, __self: this }, "6ヶ月以内"), /*#__PURE__*/ React.createElement("option", { value: "other", className: "bg-[#0a0a2e]", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }, "その他"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }, "プロジェクト概要"), /*#__PURE__*/ React.createElement("textarea", { name: "projectSummary", value: formData.projectSummary, onChange: handleChange, rows: "5", className: "w-full px-4 py-3 bg-[#0a0a2e] border border-[#00ff00]/30 rounded-lg focus:outline-none text-white", placeholder: "プロジェクトの目的、規模、要件などをご記入ください", __source: { fileName: "", lineNumber: 296, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 306, columnNumber: 19 }, __self: this }, "追加要望"), /*#__PURE__*/ React.createElement("textarea", { name: "additionalRequests", value: formData.additionalRequests, onChange: handleChange, rows: "3", className: "w-full px-4 py-3 bg-[#0a0a2e] border border-[#00ff00]/30 rounded-lg focus:outline-none text-white", placeholder: "その他ご要望がございましたらご記入ください", __source: { fileName: "", lineNumber: 309, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "privacy", checked: formData.privacy, onChange: handleChange, className: "w-4 h-4 rounded border-[#00ff00]/30 bg-[#0a0a2e] text-[#00ff00] focus:ring-[#00ff00] focus:ring-offset-0", __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 327, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/privacy-policy", className: "text-[#00ff00] hover:text-[#00ffff] underline", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 328, columnNumber: 23 }, __self: this }, "プライバシーポリシー"), "に同意する")), errors.privacy && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-red-400 text-sm", __source: { fileName: "", lineNumber: 340, columnNumber: 21 }, __self: this }, errors.privacy)), submitStatus && /*#__PURE__*/ React.createElement("div", { className: `mb-6 p-4 rounded-lg ${submitStatus.type === "success" ? "bg-green-500/10 border border-green-500/20 text-green-400" : "bg-red-500/10 border border-red-500/20 text-red-400"}`, __source: { fileName: "", lineNumber: 347, columnNumber: 19 }, __self: this }, submitStatus.message), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isSubmitting, className: ` w-full px-6 py-4 rounded-xl bg-gradient-to-r from-[#00ff00] to-[#00ffff] text-black font-bold text-lg hover:from-[#00ff00]/90 hover:to-[#00ffff]/90 transform transition-all duration-300 ${isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:-translate-y-1 hover:shadow-[0_0_20px_rgba(0,255,0,0.3)]"} `, __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, isSubmitting ? "送信中..." : "送信する"))))))); }