import React, { useState } from 'react';
import { Rabbit, Heart, Star, Mail, Instagram, Menu, X, ArrowRight, Link } from 'lucide-react';

// 導覽列組件
const Navbar = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <nav className="fixed w-full z-50 bg-white/80 backdrop-blur-md shadow-sm">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between h-20 items-center">
                    {/* Logo */}
                    <div className="flex-shrink-0 flex items-center gap-2 cursor-pointer">
                        <div className="bg-orange-100 p-2 rounded-full text-orange-400">
                            <Rabbit size={28} />
                        </div>
                        <div className="flex flex-col">
                            <span className="text-xl font-bold text-stone-700 tracking-widest leading-tight">兔寶寶</span>
                            <span className="text-sm font-bold text-orange-400 tracking-wider font-sans">TWO BAOS</span>
                        </div>
                    </div>

                    {/* Desktop Menu */}
                    <div className="hidden md:flex space-x-8 items-center">
                        <a href="#home" className="text-stone-600 hover:text-orange-400 transition-colors">首頁</a>
                        <a href="#story" className="text-stone-600 hover:text-orange-400 transition-colors">品牌故事</a>
                        <a href="#series" className="text-stone-600 hover:text-orange-400 transition-colors">IP系列</a>
                        <a href="#contact" className="px-5 py-2 rounded-full bg-stone-800 text-white hover:bg-stone-700 transition-colors text-sm font-medium">
                            聯絡我們
                        </a>
                    </div>

                    {/* Mobile Button */}
                    <div className="md:hidden flex items-center">
                        <button onClick={() => setIsOpen(!isOpen)} className="text-stone-600 p-2 rounded-full hover:bg-stone-100 transition-colors">
                            {isOpen ? <X size={24} /> : <Menu size={24} />}
                        </button>
                    </div>
                </div>
            </div>

            {/* Mobile Menu */}
            {isOpen && (
                <div className="md:hidden bg-white border-t border-stone-100 absolute w-full shadow-lg">
                    <div className="px-4 pt-2 pb-6 space-y-2 text-center">
                        <a href="#home" onClick={() => setIsOpen(false)} className="block py-3 text-stone-600 hover:bg-orange-50 rounded-full">首頁</a>
                        <a href="#story" onClick={() => setIsOpen(false)} className="block py-3 text-stone-600 hover:bg-orange-50 rounded-full">品牌故事</a>
                        <a href="#series" onClick={() => setIsOpen(false)} className="block py-3 text-stone-600 hover:bg-orange-50 rounded-full">IP系列</a>
                        <a href="#contact" onClick={() => setIsOpen(false)} className="block py-3 text-orange-500 font-bold hover:bg-orange-50 rounded-full">聯絡我們</a>
                    </div>
                </div>
            )}
        </nav>
    );
};

// Hero 區域
const Hero = () => {
    return (
        <section id="home" className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-12 relative overflow-hidden">
             {/* Watercolor Background Effect using inline styles for the gradient */}
             <div 
                className="absolute top-0 left-0 w-full h-full -z-10"
                style={{
                    backgroundImage: 'radial-gradient(circle at 50% 50%, rgba(255, 228, 230, 0.4) 0%, rgba(255, 251, 245, 0) 70%)'
                }}
            ></div>
            
            <div className="md:w-1/2 space-y-6 text-center md:text-left relative z-10">
                <div className="inline-block px-4 py-1 bg-orange-100 text-orange-500 rounded-full text-sm font-medium tracking-wide mb-2">
                    New Brand Launch
                </div>
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-stone-800 leading-tight">
                    陪伴兩個寶貝的<br/>
                    <span className="text-orange-400">溫柔時光</span>
                </h1>
                <p className="text-lg text-stone-500 leading-relaxed max-w-lg mx-auto md:mx-0">
                    TWO BAOS 源自於對兩個孩子的愛。我們以溫暖的水彩筆觸，描繪出純真與陪伴的故事，為您的家庭帶來更多溫馨時刻。
                </p>
                <div className="flex flex-wrap gap-4 justify-center md:justify-start pt-4">
                    <button className="px-8 py-3 bg-stone-800 text-white rounded-full font-medium hover:bg-stone-700 hover:shadow-lg transition-all flex items-center gap-2">
                        認識我們 <ArrowRight size={18} />
                    </button>
                    <button className="px-8 py-3 bg-white border border-stone-200 text-stone-600 rounded-full font-medium hover:bg-stone-50 transition-all">
                        探索周邊
                    </button>
                    {/* Linktree Button */}
                    <button className="px-8 py-3 bg-[#43E660] text-stone-800 rounded-full font-medium hover:bg-[#3fd65a] hover:shadow-lg transition-all flex items-center gap-2">
                        Linktree <Link size={18} />
                    </button>
                </div>
            </div>
            
            <div className="md:w-1/2 relative z-10">
                {/* 這裡是一個模擬圖片的區塊，使用者未來可以替換成真實的 Logo 圖 */}
                <div className="aspect-square bg-white rounded-[3rem] shadow-xl p-8 flex items-center justify-center relative overflow-hidden border-4 border-white">
                    <div className="absolute inset-0 bg-orange-50 opacity-50"></div>
                    <div className="relative z-10 text-center">
                        <div className="w-64 h-64 mx-auto bg-stone-100 rounded-full flex items-center justify-center mb-6 overflow-hidden">
                                {/* 預設圖示，請用戶替換為「圖1」的向量版 */}
                                <img src="https://images.unsplash.com/photo-1585110396065-88b74f38e445?q=80&w=600&auto=format&fit=crop" alt="Two Bunnies" className="w-full h-full object-cover opacity-80" />
                        </div>
                        <h3 className="text-2xl font-bold text-stone-700">兔寶寶</h3>
                        <p className="text-xl font-bold text-stone-400 mt-1 font-sans">TWO BAOS</p>
                    </div>
                    
                    {/* 裝飾元素 */}
                    <div className="absolute top-10 right-10 text-pink-200"><Heart fill="currentColor" size={40} /></div>
                    <div className="absolute bottom-10 left-10 text-yellow-200"><Star fill="currentColor" size={40} /></div>
                </div>
            </div>
        </section>
    );
};

// 品牌特色
const Features = () => {
    const features = [
        { title: "簡約設計", desc: "Minimalist Style", icon: <Star className="text-orange-400" />, text: "去繁從簡，保留最純粹的童真線條，適合現代家庭的美學風格。" },
        { title: "溫暖陪伴", desc: "Warm Company", icon: <Heart className="text-pink-400" />, text: "兩隻兔子的互動象徵著手足之情與親子間的緊密連結。" },
        { title: "獨家IP", desc: "Original Character", icon: <Rabbit className="text-stone-400" />, text: "專屬打造的兔寶寶形象，未來將延伸至繪本、生活用品等領域。" }
    ];

    return (
        <section id="story" className="py-20 bg-white">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-16">
                    <span className="text-orange-400 font-bold tracking-widest text-sm uppercase font-sans">Our Values</span>
                    <h2 className="text-3xl font-bold text-stone-800 mt-2">為什麼選擇 TWO BAOS</h2>
                </div>
                
                <div className="grid md:grid-cols-3 gap-8">
                    {features.map((item, index) => (
                        <div key={index} className="p-8 rounded-3xl bg-stone-50 hover:bg-orange-50 transition-colors duration-300 text-center group">
                            <div className="w-16 h-16 bg-white rounded-2xl shadow-sm flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                                {item.icon}
                            </div>
                            <h3 className="text-xl font-bold text-stone-700 mb-1">{item.title}</h3>
                            <p className="text-xs text-stone-400 font-bold mb-4 font-sans">{item.desc}</p>
                            <p className="text-stone-500 leading-relaxed text-sm">
                                {item.text}
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

// IP 展示系列 (對應使用者的三張圖)
const Series = () => {
    return (
        <section id="series" className="py-20 bg-[#fffbf5]">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex flex-col md:flex-row justify-between items-end mb-12">
                    <div>
                        <h2 className="text-3xl font-bold text-stone-800">IP 形象系列</h2>
                        <p className="text-stone-500 mt-2">探索 Two Baos 的不同面貌</p>
                    </div>
                    <a href="#" className="hidden md:flex items-center text-orange-500 font-medium hover:text-orange-600 mt-4 md:mt-0">
                        查看更多設計 <ArrowRight size={16} className="ml-1" />
                    </a>
                </div>

                <div className="grid md:grid-cols-3 gap-8">
                    {/* Card 1: 經典擁抱版 */}
                    <div className="bg-white p-4 rounded-3xl shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                        <div className="aspect-[4/3] bg-stone-100 rounded-2xl overflow-hidden mb-4 relative">
                            <img src="https://images.unsplash.com/photo-1591382386627-349b692688ff?q=80&w=600&auto=format&fit=crop" alt="Classic Hug" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                            <div className="absolute bottom-3 left-3 bg-white/90 px-3 py-1 rounded-full text-xs font-bold text-stone-600">經典擁抱</div>
                        </div>
                        <h3 className="text-lg font-bold text-stone-700">Classic Warmth</h3>
                        <p className="text-stone-500 text-sm mt-1">象徵守護與愛的擁抱，品牌核心形象。</p>
                    </div>

                    {/* Card 2: 牽手探險版 */}
                    <div className="bg-white p-4 rounded-3xl shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                        <div className="aspect-[4/3] bg-stone-100 rounded-2xl overflow-hidden mb-4 relative">
                            <img src="https://images.unsplash.com/photo-1555662719-7243c4820d0e?q=80&w=600&auto=format&fit=crop" alt="Adventure Together" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                            <div className="absolute bottom-3 left-3 bg-white/90 px-3 py-1 rounded-full text-xs font-bold text-stone-600">攜手探險</div>
                        </div>
                        <h3 className="text-lg font-bold text-stone-700">Adventure Duo</h3>
                        <p className="text-stone-500 text-sm mt-1">背上背包，手牽手一起探索世界。</p>
                    </div>

                    {/* Card 3: 親親有愛版 */}
                    <div className="bg-white p-4 rounded-3xl shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                        <div className="aspect-[4/3] bg-stone-100 rounded-2xl overflow-hidden mb-4 relative">
                            <img src="https://images.unsplash.com/photo-1589952283406-b53a7d1347e8?q=80&w=600&auto=format&fit=crop" alt="Love & Kiss" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                            <div className="absolute bottom-3 left-3 bg-white/90 px-3 py-1 rounded-full text-xs font-bold text-stone-600">甜蜜時刻</div>
                        </div>
                        <h3 className="text-lg font-bold text-stone-700">Sweet Moments</h3>
                        <p className="text-stone-500 text-sm mt-1">充滿粉紅泡泡的親密互動，傳遞幸福。</p>
                    </div>
                </div>
                
                <div className="md:hidden mt-8 text-center">
                        <a href="#" className="inline-flex items-center text-orange-500 font-medium hover:text-orange-600">
                        查看更多設計 <ArrowRight size={16} className="ml-1" />
                    </a>
                </div>
            </div>
        </section>
    );
};

// 底部
const Footer = () => {
    return (
        <footer className="bg-stone-800 text-white pt-16 pb-8" id="contact">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid md:grid-cols-4 gap-12 mb-12">
                    <div className="col-span-1 md:col-span-2">
                        <div className="flex items-center gap-2 mb-4">
                            <div className="bg-stone-700 p-2 rounded-full">
                                <Rabbit size={24} className="text-orange-300" />
                            </div>
                            <span className="text-2xl font-bold tracking-wider">TWO BAOS</span>
                        </div>
                        <p className="text-stone-400 max-w-sm mb-6">
                            兔寶寶 Two Baos 致力於創造溫暖的親子 IP，讓愛與陪伴成為孩子成長中最美好的記憶。
                        </p>
                        <div className="flex gap-4">
                            <a href="#" className="w-10 h-10 rounded-full bg-stone-700 flex items-center justify-center hover:bg-orange-500 transition-colors">
                                <Instagram size={20} />
                            </a>
                            <a href="#" className="w-10 h-10 rounded-full bg-stone-700 flex items-center justify-center hover:bg-orange-500 transition-colors">
                                <Mail size={20} />
                            </a>
                             {/* Footer Linktree Button */}
                            <a href="#" className="w-10 h-10 rounded-full bg-stone-700 flex items-center justify-center hover:bg-[#43E660] hover:text-stone-800 transition-colors">
                                <Link size={20} />
                            </a>
                        </div>
                    </div>
                    
                    <div>
                        <h4 className="text-lg font-bold mb-4 text-orange-200">連結</h4>
                        <ul className="space-y-2 text-stone-400">
                            <li><a href="#home" className="hover:text-white transition-colors">首頁</a></li>
                            <li><a href="#story" className="hover:text-white transition-colors">品牌理念</a></li>
                            <li><a href="#series" className="hover:text-white transition-colors">IP 設計</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 className="text-lg font-bold mb-4 text-orange-200">聯絡</h4>
                        <ul className="space-y-2 text-stone-400">
                            <li>hello@twobaos.com</li>
                            <li>台北市, 台灣</li>
                        </ul>
                    </div>
                </div>
                
                <div className="border-t border-stone-700 pt-8 flex flex-col md:flex-row justify-between items-center text-stone-500 text-sm">
                    <p>&copy; {new Date().getFullYear()} Two Baos. All rights reserved.</p>
                    <p className="mt-2 md:mt-0 font-sans font-bold">Designed for Love</p>
                </div>
            </div>
        </footer>
    );
};

export default function App() {
    return (
        <div className="min-h-screen bg-[#fffbf5] text-stone-800 font-sans selection:bg-orange-100">
            <Navbar />
            <Hero />
            <Features />
            <Series />
            <Footer />
        </div>
    );
}