function UserNameInputField({ placeholder = "お名前", name, value, onChange }) { return /*#__PURE__*/ React.createElement("input", { className: "p-3 w-full border-2 border-[#CCC] rounded-md font-roboto", type: "text", placeholder: placeholder, name: name, value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function UserNameInputFieldStory() { const [formValues, setFormValues] = React.useState({ name: '' }); function handleChange(event) { setFormValues({ ...formValues, [event.target.name]: event.target.value }); } return /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserNameInputField, { name: "name", value: formValues.name, onChange: handleChange, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); } function MainComponent() { const [formValues, setFormValues] = React.useState({ name: '', email: '', message: '' }); const [submissionStatus, setSubmissionStatus] = React.useState(''); const handleSubmit = async (e)=>{ e.preventDefault(); setSubmissionStatus('送信中...'); try { const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `プロジェクト参加者名: ${formValues.name}, メール: ${formValues.email}, メッセージ: ${formValues.message}` } ] }) }); const data = await response.json(); const result = data.choices[0].message.content; setSubmissionStatus(`送信成功! ${result}`); } catch (error) { setSubmissionStatus('エラーが発生しました。もう一度お試しください。'); } }; const handleChange = (e)=>{ const { name, value } = e.target; setFormValues((prev)=>({ ...prev, [name]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f6f8fa] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-semibold text-center mb-6 font-roboto text-[#334155]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "🌱 家族向け市民農園プロジェクト 🌱"), /*#__PURE__*/ React.createElement("p", { className: "text-md md:text-lg text-[#64748b] font-roboto mb-8 text-center", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "あなたの支援で始まる、家族で楽しめる市民農園の実現。", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 41, columnNumber: 35 }, __self: this }), "一歩を踏み出して、私たちと一緒に支援しませんか？"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#15803d] mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, submissionStatus), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(UserNameInputField, { name: "name", value: formValues.name, onChange: handleChange, placeholder: "お名前", required: true, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "mb-3 p-2 w-full border-2 border-[#e2e8f0] rounded-lg font-roboto", type: "email", placeholder: "メールアドレス", name: "email", value: formValues.email, onChange: handleChange, required: true, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "mb-3 p-2 w-full border-2 border-[#e2e8f0] rounded-lg font-roboto", placeholder: "あなたのメッセージ（任意）", name: "message", rows: "5", value: formValues.message, onChange: handleChange, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#10b981] hover:bg-[#059669] text-white font-bold py-2 px-4 rounded-lg transition-colors font-roboto w-full", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "参加する"))); }