import React, { useState } from 'react'; import { CreditCard, MessageCircle, Clock, Package, CheckCircle, Sparkles, Gem, Heart, Ruler, Send, Star, Menu, X, Loader2, Wand2 } from 'lucide-react'; const CrystalShop = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); // 新增：表單提交狀態 const [formData, setFormData] = useState({ name: '', contact: '', phone: '', storeName: '', wristSize: '', budget: '', intentions: [], note: '' }); // Oracle State const [oracleInput, setOracleInput] = useState(''); const [oracleResult, setOracleResult] = useState(null); const [isOracleLoading, setIsOracleLoading] = useState(false); const intentionsList = [ { id: 'love', label: '招桃花/人緣', color: 'bg-pink-100 text-pink-600 border-pink-200' }, { id: 'wealth', label: '招財/事業', color: 'bg-yellow-100 text-yellow-600 border-yellow-200' }, { id: 'health', label: '健康/平安', color: 'bg-green-100 text-green-600 border-green-200' }, { id: 'wisdom', label: '智慧/學業', color: 'bg-blue-100 text-blue-600 border-blue-200' }, { id: 'protection', label: '避邪/擋煞', color: 'bg-purple-100 text-purple-600 border-purple-200' }, ]; const handleInputChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const toggleIntention = (id) => { setFormData(prev => { const current = prev.intentions; if (current.includes(id)) { return { ...prev, intentions: current.filter(item => item !== id) }; } else { return { ...prev, intentions: [...current, id] }; } }); }; const handleSubmit = async (e) => { e.preventDefault(); setIsSubmitting(true); // Google Apps Script Web App URL // 步驟說明： // 1. 在 Google Sheet 點擊「擴充功能」>「Apps Script」 // 2. 貼上接收 POST 請求的腳本 (doPost) // 3. 點擊「部署」>「新增部署作業」> 類型選「網頁應用程式」 // 4. 設定為「執行身分：我」、「存取權：任何人」 // 5. 複製生成的網址 (Web App URL) 貼在下方引號中 const SCRIPT_URL = "YOUR_GOOGLE_SCRIPT_URL_HERE"; try { // 為了演示效果，這裡使用 setTimeout 模擬資料傳送過程 // 如果您已經有真實的 URL，請取消下方 fetch 區塊的註解並填入上面的 URL /* const formDataToSend = new FormData(); for (const key in formData) { formDataToSend.append(key, formData[key]); } await fetch(SCRIPT_URL, { method: 'POST', mode: 'no-cors', // 跨域傳送至 Google Script 通常需要 no-cors body: formDataToSend }); */ // 模擬網路傳輸延遲 1.5 秒 await new Promise(resolve => setTimeout(resolve, 1500)); alert('感謝您的填寫！訂單已成功傳送到雲端，小熊老師將盡快與您聯繫。'); // 成功後清空表單 setFormData({ name: '', contact: '', phone: '', storeName: '', wristSize: '', budget: '', intentions: [], note: '' }); } catch (error) { console.error("Submission Error:", error); alert('傳送發生問題，請稍後再試，或直接聯繫小熊老師。'); } finally { setIsSubmitting(false); } }; // Gemini API Integration const askOracle = async () => { if (!oracleInput.trim()) return; setIsOracleLoading(true); setOracleResult(null); try { const apiKey = ""; // The execution environment provides the key at runtime. const prompt = `你是一位溫暖療癒的水晶手作職人「小熊老師」。 使用者目前的狀態或煩惱是：「${oracleInput}」。 請根據這個情況： 1. 推薦 1-2 種適合的水晶。 2. 給予一段簡短、溫柔且充滿能量的祝福語（約 50-80 字）。 3. 語氣要像朋友一樣親切，多使用 emoji ✨。 請直接以繁體中文回答，不需要開頭問候。`; const response = await fetch( `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }], }), } ); const data = await response.json(); const text = data.candidates?.[0]?.content?.parts?.[0]?.text; setOracleResult(text); } catch (error) { console.error("Oracle error:", error); setOracleResult("抱歉，水晶球現在有點霧霧的，請稍後再試一次～ 🔮"); } finally { setIsOracleLoading(false); } }; const steps = [ { icon: , title: "1. 確定製作匯款", desc: "確認您的需求後進行付款", color: "from-blue-100 to-blue-200" }, { icon: , title: "2. 線上諮詢", desc: "半小時看盤 & 確認設計方向", color: "from-purple-100 to-purple-200" }, { icon: , title: "3. 客製化製作", desc: "精心製作時間約 7~10 天", color: "from-amber-100 to-amber-200" }, { icon: , title: "4. 交貨寄送", desc: "包裝精美並安全寄出", color: "from-cyan-100 to-cyan-200" }, { icon: , title: "5. 確認收到", desc: "收到充滿能量的水晶", color: "from-green-100 to-green-200" } ]; const galleryItems = [ { id: 1, image: '106893_0.jpg', title: '紫韻星辰手串', desc: '紫水晶與黑曜石的神秘結合，帶來智慧與保護。', tags: [ { name: '紫水晶', color: 'bg-purple-100 text-purple-600' }, { name: '黑曜石', color: 'bg-slate-100 text-slate-600' } ] }, { id: 2, image: '106890_0.jpg', title: '大地豐饒手串', desc: '融合大地色系水晶，象徵穩重與財富的積累。', tags: [ { name: '茶晶', color: 'bg-amber-100 text-amber-600' }, { name: '虎眼石', color: 'bg-yellow-100 text-yellow-600' } ] }, { id: 3, image: '106889_0.jpg', title: '五行平衡多寶串', desc: '匯聚多種能量水晶，調節身心靈的平衡。', tags: [ { name: '多寶水晶', color: 'bg-rose-100 text-rose-600' }, { name: '平衡能量', color: 'bg-teal-100 text-teal-600' } ] }, { id: 4, image: '106892_0.jpg', title: '森之精靈雙圈手鍊', desc: '綠色系與深色水晶的雙圈設計，充滿生機與層次感。', tags: [ { name: '綠幽靈', color: 'bg-green-100 text-green-600' }, { name: '設計款', color: 'bg-indigo-100 text-indigo-600' } ] } ]; return (

{/* Navigation */} {/* Hero Section */}

 

 

 

專屬於你的靈魂水晶

透過生命靈數與能量感應，小熊老師為您量身打造獨一無二的多寶水晶手串。 每一顆水晶，都是宇宙給您的溫柔祝福。

開啟您的水晶之旅

{/* Process Section */}

🐻 小熊老師 水晶製作流程

 

 

{steps.map((step, index) => (

{step.icon}

{step.title}

{step.desc}

{index < steps.length - 1 && (

▼

)}

))}

{/* Gallery Section */}

 

 

 

作品欣賞

每一串都是獨一無二的故事，等待與你相遇。

{galleryItems.map((item) => (

 

{ e.target.onerror = null; e.target.src = 'https://via.placeholder.com/400x400?text=水晶手串'; }} />

 

{item.title}

{item.desc}

{item.tags.map((tag, index) => ( {tag.name} ))}

))}

{/* NEW: Oracle Section (Gemini API Feature) */}

{/* Background Effects */}

 

 

✨ 小熊老師的靈感水晶球 ✨

心中有迷惘嗎？告訴小熊老師你最近的心情或煩惱， 讓 AI 魔法為您感應專屬於您的能量指引。

setOracleInput(e.target.value)} placeholder="例如：最近工作壓力很大，想要找回平靜..." rows="3" className="w-full px-6 py-4 rounded-2xl border-2 border-purple-100 focus:border-purple-400 focus:ring-4 focus:ring-purple-100 outline-none transition-all resize-none text-slate-700 bg-white shadow-inner text-lg" /> <div className="absolute bottom-3 right-3 text-slate-300"> <Wand2 size={20} /> </div> </div> <button onClick={askOracle} disabled={isOracleLoading || !oracleInput.trim()} className={`w-full py-4 rounded-xl font-bold text-lg text-white shadow-lg transition-all duration-300 flex items-center justify-center gap-2 ${isOracleLoading || !oracleInput.trim() ? 'bg-slate-300 cursor-not-allowed' : 'bg-gradient-to-r from-purple-500 to-pink-500 hover:shadow-purple-500/30 hover:-translate-y-1' }`} > {isOracleLoading ? ( <> <Loader2 className="animate-spin" /> 正在連結宇宙能量... </> ) : ( <> 🔮 感應水晶能量 ✨ </> )} </button> </div> {/* Result Display */} {oracleResult && ( <div className="mt-10 animate-in fade-in slide-in-from-bottom-4 duration-700"> <div className="relative inline-block"> <div className="absolute -inset-1 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 rounded-2xl blur opacity-30"></div> <div className="relative bg-white border border-purple-100 rounded-2xl p-8 shadow-xl text-left max-w-2xl"> <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-purple-600 text-white px-4 py-1 rounded-full text-sm font-bold shadow-lg flex items-center gap-2"> <Gem size={14} /> 小熊老師的祝福 </div> <div className="prose prose-purple text-slate-700 whitespace-pre-line leading-relaxed"> {oracleResult} </div> </div> </div> </div> )} </div> </div> </div> </div> </section> {/* Order Form Section */} <section id="order" className="py-20 px-4"> <div className="max-w-3xl mx-auto"> <div className="bg-white rounded-3xl shadow-xl overflow-hidden"> <div className="bg-gradient-to-r from-purple-500 to-pink-500 p-8 text-white text-center"> <h2 className="text-3xl font-bold mb-2">開始您的客製化旅程</h2> <p className="opacity-90">填寫下方表單，讓我們更了解您的需求</p> </div> <form onSubmit={handleSubmit} className="p-8 md:p-12 space-y-8"> {/* Basic Info */} <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="space-y-2"> <label className="text-sm font-semibold text-slate-700">您的稱呼</label> <input type="text" data-cke-saved-name="name" name="name" required value={formData.name} onChange={handleInputChange} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none transition" placeholder="請輸入您的暱稱" /> </div> <div className="space-y-2"> <label className="text-sm font-semibold text-slate-700">聯絡方式 (LINE/IG)</label> <input type="text" data-cke-saved-name="contact" name="contact" required value={formData.contact} onChange={handleInputChange} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none transition" placeholder="方便我們聯繫您" /> </div> <div className="space-y-2"> <label className="text-sm font-semibold text-slate-700">手機號碼</label> <input type="tel" data-cke-saved-name="phone" name="phone" required value={formData.phone} onChange={handleInputChange} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none transition" placeholder="09xx-xxx-xxx" /> </div> <div className="space-y-2"> <label className="text-sm font-semibold text-slate-700">寄送 7-11 門市名稱</label> <input type="text" data-cke-saved-name="storeName" name="storeName" required value={formData.storeName} onChange={handleInputChange} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none transition" placeholder="請填寫店名或店號 (例如：台大店)" /> </div> </div> {/* Specifications */} <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="space-y-2"> <label className="text-sm font-semibold text-slate-700 flex items-center gap-2"> <Ruler size={16} /> 手淨圍 (cm) </label> <input type="number" data-cke-saved-name="wristSize" name="wristSize" required step="0.1" value={formData.wristSize} onChange={handleInputChange} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none transition" placeholder="例如: 15.5" /> <p className="text-xs text-slate-400">請服貼測量手腕最細處，不需預留空隙</p> </div> <div className="space-y-2"> <label className="text-sm font-semibold text-slate-700">預算範圍</label> <select name="budget" value={formData.budget} onChange={handleInputChange} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none transition bg-white" > <option value="">請選擇預算</option> <option value="4000">NT$ 4,000</option> <option value="6000">NT$ 6,000</option> <option value="8000">NT$ 8,000</option> <option value="10000">NT$ 10,000 (收藏級)</option> </select> </div> </div> {/* Intentions */} <div className="space-y-4"> <label className="text-sm font-semibold text-slate-700 flex items-center gap-2"> <Heart size={16} /> 想要加強的能量 (可複選) </label> <div className="flex flex-wrap gap-3"> {intentionsList.map((item) => ( <button key={item.id} type="button" onClick={() => toggleIntention(item.id)} className={`px-4 py-2 rounded-full border text-sm font-medium transition duration-200 flex items-center gap-2 ${formData.intentions.includes(item.id) ? `${item.color} ring-2 ring-offset-1 ring-purple-200` : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50' }`} > {formData.intentions.includes(item.id) && <CheckCircle size={14} />} {item.label} </button> ))} </div> </div> {/* Note */} <div className="space-y-2"> <label className="text-sm font-semibold text-slate-700">備註 / 特殊需求</label> <textarea name="note" rows="4" value={formData.note} onChange={handleInputChange} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none transition" placeholder="例如：喜歡淺色系、不喜歡特定顏色、或是想告訴小熊老師的話..." >

{isSubmitting ? : } {isSubmitting ? '正在傳送訂單...' : '送出訂製單'}

{/* Footer */}

); }; export default CrystalShop;