import React, { useState } from 'react';
import {
Coffee,
Heart,
Users,
Leaf,
Instagram,
Mail,
Phone,
ChevronRight,
Menu,
X,
ArrowRight,
ShieldCheck
} from 'lucide-react';

const App = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);

// 平滑捲動功能
const scrollTo = (id) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
setIsMenuOpen(false);
};

const products = [
{
id: 1,
nameZh: "雲南古樹生普",
nameEn: "Yunnan Ancient Tree Raw Pu'er",
desc: "來自千年古樹，入口甘甜，回甘生津，助靜心養生。",
price: "HK$ 880",
tag: "精選 Select"
},
{
id: 2,
nameZh: "陳年熟普餅茶",
nameEn: "Aged Ripe Pu'er Cake",
desc: "溫潤醇厚，養胃暖身，適合長者及機構日常飲用。",
price: "HK$ 650",
tag: "熱銷 Popular"
},
{
id: 3,
nameZh: "穀花香小沱茶",
nameEn: "Sticky Rice Aroma Mini Tuocha",
desc: "淡淡穀香，輕鬆沖泡，療癒日常一刻。",
price: "HK$ 320",
tag: "便攜 Mini"
},
{
id: 4,
nameZh: "古樹普洱禮盒",
nameEn: "Ancient Tree Pu'er Gift Set",
desc: "用心挑選，適合送禮或企業批發。",
price: "HK$ 1,280",
tag: "禮贈 Gift"
}
];

const events = [
{ id: 1, title: "茶禪與情緒療癒工作坊", date: "2024.05.20", type: "Social Work" },
{ id: 2, title: "跨代家庭治療：茶席間的對話", date: "2024.06.12", type: "Family Therapy" },
{ id: 3, title: "社區長者身心靈講座", date: "2024.06.28", type: "Community" },
{ id: 4, title: "企業靜心品茶體驗", date: "2024.07.05", type: "Corporate" }
];

return (
<div className="font-sans text-slate-800 bg-slate-50 min-h-screen">
{/* 導覽列 Navigation */}
<nav className="fixed w-full z-50 bg-white/90 backdrop-blur-md border-b border-purple-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-20 items-center">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-gradient-to-tr from-[#5B3A7D] to-[#3B82F6] rounded-xl flex items-center justify-center shadow-md">
<Leaf className="text-white w-6 h-6" />
</div>
<div className="flex flex-col">
<span className="text-xl font-bold tracking-tight text-[#5B3A7D] leading-none">
Love and Grow
</span>
<span className="text-sm font-medium text-slate-500 tracking-[0.2em]">
愛與成長
</span>
</div>
</div>

{/* 桌面端選單 Desktop Nav */}
<div className="hidden md:flex items-center space-x-8">
<button onClick={() => scrollTo('products')} className="text-sm font-medium hover:text-[#3B82F6] transition-colors">精選產品</button>
<button onClick={() => scrollTo('events')} className="text-sm font-medium hover:text-[#3B82F6] transition-colors">最新活動</button>
<button onClick={() => scrollTo('about')} className="text-sm font-medium hover:text-[#3B82F6] transition-colors">關於我們</button>
<button
onClick={() => scrollTo('contact')}
className="px-6 py-2.5 bg-gradient-to-r from-[#5B3A7D] to-[#3B82F6] text-white text-sm font-bold rounded-full hover:shadow-lg hover:opacity-90 transition-all active:scale-95"
>
預約咨詢
</button>
</div>

{/* 行動端選單按鈕 Mobile menu button */}
<div className="md:hidden">
<button onClick={() => setIsMenuOpen(!isMenuOpen)} className="p-2 text-[#5B3A7D]">
{isMenuOpen ? <X /> : <Menu />}
</button>
</div>
</div>
</div>

{/* 行動端選單內容 Mobile menu */}
{isMenuOpen && (
<div className="md:hidden bg-white border-b border-purple-100 p-6 space-y-4 shadow-2xl animate-in slide-in-from-top">
<button onClick={() => scrollTo('products')} className="block w-full text-left py-3 border-b border-slate-50 font-medium text-slate-600">精選產品 Products</button>
<button onClick={() => scrollTo('events')} className="block w-full text-left py-3 border-b border-slate-50 font-medium text-slate-600">最新活動 Events</button>
<button onClick={() => scrollTo('about')} className="block w-full text-left py-3 border-b border-slate-50 font-medium text-slate-600">關於我們 About</button>
<button onClick={() => scrollTo('contact')} className="block w-full text-center py-4 bg-[#5B3A7D] text-white rounded-xl font-bold">預約咨詢 Contact Us</button>
</div>
)}
</nav>

{/* 首頁 Hero Section */}
<section className="relative h-[90vh] md:h-screen flex items-center justify-center overflow-hidden">
{/* 背景圖與疊加層 Background Overlay */}
<div className="absolute inset-0 z-0">
<div className="absolute inset-0 bg-gradient-to-b from-[#5B3A7D]/50 via-slate-900/40 to-slate-900/80 z-10" />
<img
src="https://images.unsplash.com/photo-1576092768241-dec231879fc3?auto=format&fit=crop&q=80&w=2000"
alt="Pu'er Tea Ceremony"
className="w-full h-full object-cover scale-105 animate-pulse-slow"
/>
</div>

<div className="relative z-20 text-center px-4 max-w-5xl mx-auto">
<h2 className="text-white text-sm md:text-lg font-bold tracking-[0.4em] mb-6 drop-shadow-md uppercase opacity-90">
Love and Grow
</h2>
<h1 className="text-6xl md:text-8xl font-bold text-white mb-8 drop-shadow-2xl tracking-tight">
愛與成長
</h1>
<p className="text-lg md:text-2xl text-white/95 mb-12 leading-relaxed font-light drop-shadow-sm max-w-3xl mx-auto">
以一杯普洱，品味生命；以愛相伴，共同成長。<br/>
<span className="font-normal border-b border-[#D4A017] pb-1">天然普洱茶 × 專業身心靈療癒服務</span>
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-6">
<button
onClick={() => scrollTo('products')}
className="w-full sm:w-auto px-12 py-4 bg-white text-[#5B3A7D] rounded-full font-bold hover:bg-[#D4A017] hover:text-white transition-all transform hover:-translate-y-1 shadow-2xl"
>
探索普洱茶 Explore Tea
</button>
<button
onClick={() => scrollTo('contact')}
className="w-full sm:w-auto px-12 py-4 bg-transparent border-2 border-white/80 text-white rounded-full font-bold hover:bg-white/10 backdrop-blur-md transition-all transform hover:-translate-y-1"
>
預約咨詢 Counseling
</button>
</div>
</div>
</section>

{/* 信任標章 Trust Badges */}
<div className="bg-white py-8 border-b border-slate-100 shadow-sm relative z-30 -mt-10 mx-4 md:mx-auto max-w-6xl rounded-2xl">
<div className="max-w-7xl mx-auto px-6 flex flex-wrap justify-around gap-8 items-center text-slate-600 font-medium">
<div className="flex items-center gap-3">
<ShieldCheck className="w-6 h-6 text-[#D4A017]" />
<span className="text-sm md:text-base">FEHD 香港食環署認可批發商</span>
</div>
<div className="flex items-center gap-3 border-l border-slate-100 pl-8 hidden md:flex">
<Heart className="w-6 h-6 text-red-400" />
<span className="text-sm md:text-base">註冊社工提供專業心理輔導</span>
</div>
<div className="flex items-center gap-3 border-l border-slate-100 pl-8 hidden lg:flex">
<Leaf className="w-6 h-6 text-green-500" />
<span className="text-sm md:text-base">100% 天然雲南古樹普洱</span>
</div>
</div>
</div>

{/* 產品區塊 Products Section */}
<section id="products" className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-20">
<span className="text-[#D4A017] font-bold tracking-widest text-sm uppercase">Shop ProudTea</span>
<h2 className="text-3xl md:text-5xl font-bold text-[#5B3A7D] mt-4 mb-4">精選普洱茶產品</h2>
<p className="text-slate-400 text-lg">高品質雲南古樹茶材，大宗批發或機構供應</p>
<div className="w-24 h-1.5 bg-gradient-to-r from-[#5B3A7D] to-[#3B82F6] mx-auto mt-8 rounded-full" />
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
{products.map((p) => (
<div key={p.id} className="group flex flex-col bg-white rounded-3xl border border-slate-100 overflow-hidden hover:shadow-3xl transition-all duration-500 hover:-translate-y-2">
<div className="h-72 bg-slate-100 relative overflow-hidden">
<div className="absolute top-5 right-5 bg-white/90 backdrop-blur-sm text-[#5B3A7D] text-[10px] px-4 py-1.5 rounded-full z-10 font-black shadow-sm border border-purple-50">
{p.tag}
</div>
<div className="w-full h-full bg-gradient-to-br from-slate-50 to-slate-200 flex items-center justify-center">
<Coffee className="w-20 h-20 text-slate-300 group-hover:text-[#D4A017] transition-colors duration-500" />
</div>
<div className="absolute inset-0 bg-[#5B3A7D]/10 opacity-0 group-hover:opacity-100 transition-opacity" />
</div>
<div className="p-8 flex-grow flex flex-col">
<h3 className="text-xl font-bold text-slate-800 mb-1">{p.nameZh}</h3>
<p className="text-[10px] text-slate-400 uppercase tracking-widest mb-4 font-bold">{p.nameEn}</p>
<p className="text-slate-500 text-sm mb-8 leading-relaxed line-clamp-2">{p.desc}</p>
<div className="mt-auto flex items-center justify-between">
<div>
<span className="text-xs text-slate-400 block mb-0.5 underline decoration-[#D4A017]/30">批發價優</span>
<span className="text-2xl font-black text-[#5B3A7D]">{p.price}</span>
</div>
<button className="w-12 h-12 rounded-2xl bg-slate-900 text-white flex items-center justify-center hover:bg-[#5B3A7D] transition-all transform hover:rotate-12">
<ArrowRight className="w-5 h-5" />
</button>
</div>
</div>
</div>
))}
</div>

<div className="mt-20 text-center">
<button className="px-10 py-4 border-2 border-[#5B3A7D] text-[#5B3A7D] rounded-full font-bold hover:bg-[#5B3A7D] hover:text-white transition-all shadow-xl hover:shadow-[#5B3A7D]/20">
索取完整批發報價單 Wholesale List
</button>
</div>
</div>
</section>

{/* 活動區塊 Events Section */}
<section id="events" className="py-24 bg-slate-50 relative">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
<div className="max-w-xl">
<h2 className="text-3xl md:text-5xl font-bold text-[#5B3A7D] mb-6">最新活動與工作坊</h2>
<p className="text-slate-600 leading-relaxed italic border-l-4 border-[#3B82F6] pl-6">
「透過普洱茶與專業社工服務，我們定期舉辦身心靈成長工作坊、跨代家庭對話……讓愛在每一次相聚中綻放。」
</p>
</div>
<button className="flex items-center gap-2 px-6 py-3 bg-white text-[#3B82F6] rounded-xl shadow-sm hover:shadow-md transition-all border border-blue-50">
<Instagram className="w-5 h-5" /> 追蹤 @proudtea.co
</button>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{events.map((e) => (
<div key={e.id} className="group relative aspect-square bg-slate-800 rounded-3xl overflow-hidden shadow-lg cursor-pointer">
<div className="absolute inset-0 bg-gradient-to-t from-[#5B3A7D] via-slate-900/20 to-transparent z-10 opacity-90 group-hover:opacity-100 transition-opacity" />
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform scale-90 group-hover:scale-100">
<div className="p-3 bg-white/20 backdrop-blur-md rounded-full text-white">
<ArrowRight className="w-6 h-6" />
</div>
</div>
<div className="absolute bottom-0 left-0 p-8 z-20">
<span className="text-[10px] uppercase tracking-[0.2em] text-[#60A5FA] font-black mb-2 block">{e.type}</span>
<h4 className="text-white font-bold text-xl leading-snug group-hover:translate-x-1 transition-transform">{e.title}</h4>
<div className="flex items-center gap-2 text-white/60 text-xs mt-4">
<span className="w-1.5 h-1.5 bg-[#D4A017] rounded-full" />
{e.date}
</div>
</div>
</div>
))}
</div>
</div>
</section>

{/* 關於我們 About Us Section */}
<section id="about" className="py-24 bg-white relative overflow-hidden">
{/* 裝飾背景元件 */}
<div className="absolute -right-20 -top-20 w-[30rem] h-[30rem] bg-purple-50 rounded-full blur-[100px] opacity-70" />
<div className="absolute -left-20 -bottom-20 w-[30rem] h-[30rem] bg-blue-50 rounded-full blur-[100px] opacity-70" />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
<div className="relative">
<div className="grid grid-cols-2 gap-6">
<div className="space-y-6 pt-12">
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?auto=format&fit=crop&q=80&w=600" alt="Meditation" className="rounded-[3rem] shadow-2xl w-full h-80 object-cover transform -rotate-3 hover:rotate-0 transition-transform duration-500" />
<img src="https://images.unsplash.com/photo-1517686469429-8bdb88b9f907?auto=format&fit=crop&q=80&w=600" alt="Tea Workshop" className="rounded-3xl shadow-xl w-full h-56 object-cover" />
</div>
<div className="space-y-6">
<img src="https://images.unsplash.com/photo-1594631252845-29fc4586bd9c?auto=format&fit=crop&q=80&w=600" alt="Elderly Tea" className="rounded-3xl shadow-xl w-full h-56 object-cover" />
<img src="https://images.unsplash.com/photo-1571988840298-3b5301d5109b?auto=format&fit=crop&q=80&w=600" alt="Counseling" className="rounded-[3rem] shadow-2xl w-full h-80 object-cover transform rotate-3 hover:rotate-0 transition-transform duration-500" />
</div>
</div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-[#D4A017] rounded-full border-8 border-white flex flex-col items-center justify-center text-white text-center p-4 shadow-2xl z-20">
<Heart className="w-8 h-8 mb-2" />
<span className="text-[10px] font-black uppercase tracking-widest leading-tight">Professional Caring</span>
</div>
</div>

<div className="space-y-10">
<div>
<span className="text-[#3B82F6] font-bold tracking-[0.3em] uppercase text-xs">Our Vision</span>
<h2 className="text-4xl md:text-5xl font-black text-[#5B3A7D] mt-4 mb-6">關於我們 / About Us</h2>
<div className="w-20 h-2 bg-gradient-to-r from-[#D4A017] to-amber-200 rounded-full" />
</div>

<div className="space-y-6 text-slate-600 leading-relaxed text-lg">
<p>
<strong className="text-[#5B3A7D]">Love and Grow 愛與成長</strong> 源自對生命意義的深刻追尋。我們不僅是普天茗茶 ProudTea 的持有者，更是一群相信「一杯好茶，能療癒身心；一句真誠對話，能開啟成長」的夥伴。
</p>
<p>
普天茗茶專注於 <span className="text-[#5B3A7D] font-bold">100% 天然、無添加的雲南普洱茶</span>，獲食環署認可批發商資格，長期為醫療集團、安老院舍及企業提供穩定優質的批發供應。
</p>
<p>
我們深信：普洱茶的陳化如人生，需要時間與耐心；身心靈的療癒，亦需陪伴與理解。由註冊社工主理的輔導服務，讓茶文化與專業輔導跨界融合。
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6 border-t border-slate-100">
<div className="flex items-start gap-5">
<div className="bg-purple-100 p-4 rounded-2xl text-[#5B3A7D]"><Users className="w-6 h-6" /></div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-1">B2B 批發供應</h5>
<p className="text-sm text-slate-500">專為醫療及養老機構設計的高品質茶材供應鏈</p>
</div>
</div>
<div className="flex items-start gap-5">
<div className="bg-blue-100 p-4 rounded-2xl text-[#3B82F6]"><Heart className="w-6 h-6" /></div>
<div>
<h5 className="font-bold text-slate-900 text-lg mb-1">專業身心靈療癒</h5>
<p className="text-sm text-slate-500">註冊社工帶領，涵蓋情緒成長與跨代家庭治療</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

{/* 聯絡區塊 Contact Section */}
<section id="contact" className="py-24 bg-slate-900 text-white relative overflow-hidden">
<div className="absolute right-0 bottom-0 opacity-10 pointer-events-none transform translate-x-1/4 translate-y-1/4">
<Leaf className="w-[40rem] h-[40rem] text-white" />
</div>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20">
<div className="space-y-10">
<h2 className="text-4xl md:text-6xl font-black mb-8 tracking-tighter">聯絡我們 / Contact</h2>
<p className="text-slate-400 text-xl leading-relaxed max-w-lg">
無論您是想批發優質普洱茶，還是尋求專業的心靈陪伴，我們都在這裡。期待與您一同 Love and Grow。
</p>

<div className="space-y-8 pt-4">
<div className="flex items-center gap-6 group">
<div className="w-16 h-16 rounded-3xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-[#3B82F6] group-hover:border-[#3B82F6] transition-all duration-300">
<Mail className="w-8 h-8" />
</div>
<div>
<p className="text-xs text-slate-500 uppercase font-black tracking-widest mb-1">Email Us</p>
<p className="text-xl font-medium">info@loveandgrow.hk</p>
</div>
</div>
<div className="flex items-center gap-6 group">
<div className="w-16 h-16 rounded-3xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-[#3B82F6] group-hover:border-[#3B82F6] transition-all duration-300">
<Phone className="w-8 h-8" />
</div>
<div>
<p className="text-xs text-slate-500 uppercase font-black tracking-widest mb-1">WhatsApp / Call</p>
<p className="text-xl font-medium">+852 1234 5678</p>
</div>
</div>
<div className="flex items-center gap-6 group">
<div className="w-16 h-16 rounded-3xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-[#3B82F6] group-hover:border-[#3B82F6] transition-all duration-300">
<Instagram className="w-8 h-8" />
</div>
<div>
<p className="text-xs text-slate-500 uppercase font-black tracking-widest mb-1">Follow Us</p>
<p className="text-xl font-medium">@proudtea.co</p>
</div>
</div>
</div>
</div>

<div className="bg-white rounded-[3rem] p-10 md:p-14 text-slate-900 shadow-2xl transform lg:translate-y-12">
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="block text-xs font-black text-slate-400 uppercase tracking-widest mb-3">您的姓名 Name</label>
<input type="text" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:outline-none focus:ring-4 focus:ring-[#5B3A7D]/10 focus:border-[#5B3A7D] transition-all" placeholder="張先生/小姐" />
</div>
<div>
<label className="block text-xs font-black text-slate-400 uppercase tracking-widest mb-3">聯絡資訊 Contact</label>
<input type="text" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:outline-none focus:ring-4 focus:ring-[#5B3A7D]/10 focus:border-[#5B3A7D] transition-all" placeholder="Email 或 電話" />
</div>
</div>
<div>
<label className="block text-xs font-black text-slate-400 uppercase tracking-widest mb-3">查詢類型 Inquiry Type</label>
<select className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:outline-none focus:ring-4 focus:ring-[#5B3A7D]/10 appearance-none">
<option>普洱茶批發 (B2B)</option>
<option>個人心理咨詢 / 療癒</option>
<option>跨代家庭治療</option>
<option>機構/團體活動合作</option>
<option>其他事項</option>
</select>
</div>
<div>
<label className="block text-xs font-black text-slate-400 uppercase tracking-widest mb-3">訊息內容 Message</label>
<textarea className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl focus:outline-none focus:ring-4 focus:ring-[#5B3A7D]/10 h-32 resize-none" placeholder="請告訴我們您的具體需求..."></textarea>
</div>
<button className="w-full py-5 bg-gradient-to-r from-[#5B3A7D] to-[#3B82F6] text-white font-black rounded-2xl shadow-xl hover:shadow-[#5B3A7D]/30 hover:opacity-90 transition-all active:scale-95 text-lg">
提交訊息 Send Message
</button>
<p className="text-center text-[10px] text-slate-400 uppercase tracking-widest pt-4">We usually respond within 24 hours</p>
</form>
</div>
</div>
</div>
</section>

{/* 腳部 Footer */}
<footer className="py-20 bg-slate-950 text-slate-600 border-t border-white/5">
<div className="max-w-7xl mx-auto px-4 text-center">
<div className="flex justify-center items-center space-x-3 mb-10">
<div className="w-8 h-8 bg-gradient-to-tr from-[#5B3A7D] to-[#3B82F6] rounded-lg flex items-center justify-center">
<Leaf className="text-white w-4 h-4" />
</div>
<span className="text-lg font-bold text-white tracking-widest">Love and Grow 愛與成長</span>
</div>

<div className="flex flex-wrap justify-center gap-x-12 gap-y-4 mb-10 text-xs font-bold uppercase tracking-widest">
<button onClick={() => scrollTo('products')} className="hover:text-white transition-colors">Products</button>
<button onClick={() => scrollTo('events')} className="hover:text-white transition-colors">Events</button>
<button onClick={() => scrollTo('about')} className="hover:text-white transition-colors">Our Story</button>
<button onClick={() => scrollTo('contact')} className="hover:text-white transition-colors">Contact</button>
</div>

<div className="space-y-3 opacity-50">
<p className="text-[10px]">&copy; 2024 Love and Grow 愛與成長 | ProudTea 普天茗茶. All Rights Reserved.</p>
<p className="text-[10px]">FEHD Food Importer/Wholesaler Registration No. (Hong Kong)</p>
</div>
</div>
</footer>
</div>
);
};

export default App;