function LetterPreview({ previewData = {} }) { return /*#__PURE__*/ React.createElement("div", { className: "relative max-w-[800px] p-8 bg-[#f8f1e9] rounded-lg min-h-[600px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-10", style: { backgroundImage: "url('/christmas-pattern.png')", backgroundSize: "200px", backgroundRepeat: "repeat" }, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/santa-illustration.png", alt: "サンタクロースのイラスト", className: "w-[120px] h-auto absolute top-4 right-4", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-6 font-dancing-script text-[#2C3E50]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Dear ", previewData.recipientName || "___________", ","), /*#__PURE__*/ React.createElement("div", { className: "text-xl leading-relaxed min-h-[300px]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, previewData.letterContent || "あなたの手紙の内容がここに表示されます..."), /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-right", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "With Love,"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, previewData.senderName || "___________"))))); } function LetterPreviewStory() { const sampleData = { recipientName: "小林さん", letterContent: "メリークリスマス！今年も素晴らしい1年をありがとうございました。来年もよろしくお願いします。", senderName: "田中" }; const emptyData = {}; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8 p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-pt-serif", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "プレビューの例"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-lato mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "データあり"), /*#__PURE__*/ React.createElement(LetterPreview, { previewData: sampleData, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-lato mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "データなし"), /*#__PURE__*/ React.createElement(LetterPreview, { previewData: emptyData, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }))); } function LanguageSelector({ selectedLanguage, onLanguageChange }) { return /*#__PURE__*/ React.createElement("div", { className: "inline-flex items-center gap-4 p-4 rounded-lg border border-[#9B9B9B]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: "jp", name: "language", value: "ja", checked: selectedLanguage === "ja", onChange: (e)=>onLanguageChange(e.target.value), className: "w-4 h-4 text-[#3D5ADC]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "jp", className: "font-lato text-[#242424]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, "日本語")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: "en", name: "language", value: "en", checked: selectedLanguage === "en", onChange: (e)=>onLanguageChange(e.target.value), className: "w-4 h-4 text-[#3D5ADC]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "en", className: "font-lato text-[#242424]", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "English"))); } function LanguageSelectorStory() { const [language, setLanguage] = useState("ja"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LanguageSelector, { selectedLanguage: language, onLanguageChange: setLanguage, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function FramerMotion(props) { const [mounted, setMounted] = useState(false); const ref = useRef(null); useEffect(()=>{ const checkRef = setInterval(()=>{ if (window.Motion) { clearInterval(checkRef); } if (ref.current) { clearInterval(checkRef); window.React = React; const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/framer-motion@11.11.17/dist/framer-motion.min.js"; script.type = "module"; script.onload = ()=>{ setMounted(true); }; ref.current.appendChild(script); } }, 100); return ()=>{ clearInterval(checkRef); if (ref.current) { const script = ref.current.querySelector("script"); if (script) { ref.current.removeChild(script); } } delete window.motion; }; }, []); const mountElm = /*#__PURE__*/ React.createElement("div", { className: "hidden", ref: ref, __source: { fileName: "", lineNumber: 35, columnNumber: 20 }, __self: this }); return mounted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(window.Motion.motion.div, { ...props, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), mountElm) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { ...props, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), mountElm); } function FramerMotionStory() { return /*#__PURE__*/ React.createElement(FramerMotion, { __source: { fileName: "", lineNumber: 50, columnNumber: 10 }, __self: this }); } function LetterForm({ onSubmit = ()=>{}, loading = false, error = null }) { const [formData, setFormData] = useState({ childName: "", age: "", gender: "", characteristics: "", messageType: "praise", customMessage: "", giftDescription: "" }); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleSubmit = (e)=>{ e.preventDefault(); onSubmit(formData); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl mx-auto p-6", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#242424] font-lato mb-2", htmlFor: "childName", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "お子様のお名前 *"), /*#__PURE__*/ React.createElement("input", { required: true, type: "text", name: "childName", id: "childName", value: formData.childName, onChange: handleChange, className: "w-full rounded border border-[#9B9B9B] p-2 font-lato", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#242424] font-lato mb-2", htmlFor: "age", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "年齢 *"), /*#__PURE__*/ React.createElement("input", { required: true, type: "number", name: "age", id: "age", value: formData.age, onChange: handleChange, className: "w-full rounded border border-[#9B9B9B] p-2 font-lato", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#242424] font-lato mb-2", htmlFor: "gender", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("select", { name: "gender", id: "gender", value: formData.gender, onChange: handleChange, className: "w-full rounded border border-[#9B9B9B] p-2 font-lato", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "男の子"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "女の子"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "その他"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#242424] font-lato mb-2", htmlFor: "characteristics", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "特徴"), /*#__PURE__*/ React.createElement("textarea", { name: "characteristics", id: "characteristics", value: formData.characteristics, onChange: handleChange, className: "w-full rounded border border-[#9B9B9B] p-2 font-lato h-24", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "block text-[#242424] font-lato mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "メッセージタイプ *"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, [ { value: "praise", label: "ほめる" }, { value: "gentle-encouragement", label: "優しく励ます" }, { value: "support-challenges", label: "新しいチャレンジを応援" }, { value: "family-happiness", label: "家族の幸せを願う" } ].map((option)=>/*#__PURE__*/ React.createElement("div", { key: option.value, className: "flex items-center", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: option.value, name: "messageType", value: option.value, checked: formData.messageType === option.value, onChange: handleChange, className: "mr-2", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "text-[#242424] font-lato", htmlFor: option.value, __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, option.label))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#242424] font-lato mb-2", htmlFor: "customMessage", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "カスタムメッセージ"), /*#__PURE__*/ React.createElement("textarea", { name: "customMessage", id: "customMessage", value: formData.customMessage, onChange: handleChange, className: "w-full rounded border border-[#9B9B9B] p-2 font-lato h-24", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#242424] font-lato mb-2", htmlFor: "giftDescription", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "プレゼントの説明"), /*#__PURE__*/ React.createElement("textarea", { name: "giftDescription", id: "giftDescription", value: formData.giftDescription, onChange: handleChange, className: "w-full rounded border border-[#9B9B9B] p-2 font-lato h-24", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-[#3D5ADC] text-white font-lato rounded-full px-6 py-2 hover:bg-[#324AB0] transition-colors", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, loading ? "送信中..." : "送信する"), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 font-lato", __source: { fileName: "", lineNumber: 170, columnNumber: 19 }, __self: this }, error))); } function LetterFormStory() { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleSubmit = async (data)=>{ setLoading(true); setError(null); try { await new Promise((resolve)=>setTimeout(resolve, 1000)); console.log("Form submitted:", data); } catch (err) { setError("エラーが発生しました。もう一度お試しください。"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 194, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LetterForm, { onSubmit: handleSubmit, loading: loading, error: error, __source: { fileName: "", lineNumber: 195, columnNumber: 7 }, __self: this })); } function MainComponent() { const [language, setLanguage] = useState("ja"); const [showPreview, setShowPreview] = useState(false); const [loading, setLoading] = useState(false); const [letterContent, setLetterContent] = useState(null); const [error, setError] = useState(null); const generateLetter = async (formData)=>{ setLoading(true); setError(null); try { const prompt = ` あなたはサンタクロースです。${formData.childName}という${formData.age}歳の子供に向けて手紙を書いてください。性別: ${formData.gender} 特徴: ${formData.characteristics} メッセージタイプ: ${formData.messageType} カスタムメッセージ: ${formData.customMessage} プレゼント: ${formData.giftDescription} 手紙は温かく、励ましになるような内容にしてください。 `; const response = await fetch("/integrations/gpt-vision/", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: prompt } ] } ] }) }); const data = await response.json(); const generatedLetter = data.choices[0].message.content; setLetterContent({ recipientName: formData.childName, letterContent: generatedLetter, senderName: "Santa Claus" }); setShowPreview(true); } catch (err) { setError("手紙の生成中にエラーが発生しました。もう一度お試しください。"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFE4E4] p-4 md:p-8", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-8", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(LanguageSelector, { selectedLanguage: language, onLanguageChange: setLanguage, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-pt-serif text-[#F34747] text-center mb-12", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "サンタからの手紙ジェネレーター"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6 md:p-8", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(FramerMotion, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(LetterForm, { onSubmit: generateLetter, loading: loading, error: error, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }))), showPreview && letterContent && /*#__PURE__*/ React.createElement(FramerMotion, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, className: "mt-8", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(LetterPreview, { previewData: letterContent, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this })))); }