import React, { useState, useEffect } from 'react';
import { Leaf, Coffee, Smile, Sparkles, X, ExternalLink, Tag, Heart, ChevronRight, Instagram, Facebook, Calendar, Ticket } from 'lucide-react';

// --- 模擬資料庫 (Mock Data) ---
const CATEGORIES = [
  { id: 'all', name: '全部推薦', icon: Heart },
  { id: 'flavor', name: '食．風土滋味', icon: Coffee },
  { id: 'life', name: '日．拾光好物', icon: Leaf },
  { id: 'play', name: '樂．野放時光', icon: Smile },
  { id: 'heal', name: '癒．身心綠洲', icon: Sparkles },
];

const BRANDS = [
  {
    id: 1,
    categoryId: 'play',
    name: '摸魚美學 Moyu Studio',
    subtitle: '兒童藝術教室',
    description: '在這裡，創作不是為了畫得好看，而是為了讓孩子感受「我可以這樣看世界」的自由。每一個主題選擇與引導，都藏著對孩子深深的理解與信任，讓孩子們用線條與顏色創造出獨一無二的作品🎨',
    discountCode: 'DIDI-MOYU88',
    link: 'https://www.instagram.com/moyu__studio/',
    socialType: 'IG',
    logo: 'https://images.unsplash.com/photo-1513364776144-60967b0f800f?auto=format&fit=crop&q=80&w=200',
    photos: [
      'https://drive.google.com/thumbnail?id=12GXE1W_sWvErbrB6LVry0tIgNLcy__wB&sz=w800',
      'https://drive.google.com/thumbnail?id=1CAJ1AnCZeVAL8A0ga163rZUrhp7p2fyE&sz=w800',
      'https://drive.google.com/thumbnail?id=1lOVAA5yCvMXILCMZ7QqqLyXp3d_bIcfe&sz=w800'
    ],
    posts: [
      { text: '讓孩子盡情揮灑顏料，在沒有標準答案的空間裡創作🎨', url: 'https://www.instagram.com/p/DJ8skhQRHkn/?img_index=1' }
    ]
  },
  {
    id: 2,
    categoryId: 'play',
    name: 'Weili Studio',
    subtitle: '藝術工作室',
    description: '一踏進去就讓人放慢呼吸的小祕境✨ 像掉進一個關於自然、藝術的小宇宙。創辦人為女兒在後院創造了一座「大自然廚房」，讓孩子自在探索，用想像煮出一桌桌的快樂。',
    discountCode: 'DIDI-WEILI95',
    link: 'https://www.instagram.com/weilisoul/',
    socialType: 'IG',
    logo: 'https://drive.google.com/thumbnail?id=1Ho0yqyfsEW65_ZaV5rSngSR4Mq7Gfj-x&sz=w500',
    photos: [
      'https://drive.google.com/thumbnail?id=181faU7W-cObs7dYBvG3OAPOzfGOLnPzW&sz=w800',
      'https://drive.google.com/thumbnail?id=1M--fxQwnBuguBa8XuTXb29b8I3GZqW9I&sz=w800',
      'https://drive.google.com/thumbnail?id=1RJjGRwUbcw40EzJetTTBg84KMO0f14Cr&sz=w800'
    ],
    posts: [
      { text: '尋找內心平靜、自我對話的秘密基地✨', url: 'https://www.instagram.com/p/DKOoURQT08J/?img_index=1' }
    ]
  },
  {
    id: 3,
    categoryId: 'play',
    name: '物物島 Wuu Island',
    subtitle: '質感親子空間',
    description: '坐落在三峽的選物小島🌿 用「體驗」替代「擁有」，提供好玩又有質感的玩具租借。第一次踏進就被無數小細節吸引，每一處擺設都藏著創辦人的用心，連廁所都整理得乾淨又舒服（真的！🤣）',
    discountCode: 'DIDI-WUU100',
    link: 'https://www.instagram.com/wuu_island/',
    socialType: 'IG',
    logo: 'https://drive.google.com/thumbnail?id=1SW-EuvELvdkNxQ4u6Avs2i2YARTtxLqr&sz=w500',
    photos: [
      'https://drive.google.com/thumbnail?id=1KJ4MXAtJLuNsW3RK5TezMc5xG6xYsvoX&sz=w800',
      'https://drive.google.com/thumbnail?id=1UxnD-jCvYhvcUpJYzBUfGyL9m6QXXzYk&sz=w800',
      'https://drive.google.com/thumbnail?id=1cTWUwgsmHSdW_XiI66PDSjjv_LEnlmaI&sz=w800'
    ],
    posts: [
      { text: '安心放電的同時，也能培養孩子對美的感知力🥰', url: 'https://www.instagram.com/p/DKhRxmFTBmq/?img_index=1' }
    ]
  },
  {
    id: 4,
    categoryId: 'play',
    name: '暖蒔光 Sunlight Art Studio',
    subtitle: '親子共學品牌',
    description: '就像一束光，悄悄撒進孩子的生活裡✨ 用光影與感官探索，打造專屬孩子的藝術舞台。在孩子與美學相遇的瞬間，感受光的方向、質地與溫度，讓光線成為最美的引導。',
    discountCode: 'DIDI-SUNLIGHT',
    link: 'https://www.instagram.com/sunlight.artstudio/',
    socialType: 'IG',
    logo: 'https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?auto=format&fit=crop&q=80&w=200',
    photos: [
      'https://images.unsplash.com/photo-1606092195730-5d7b9af1efc5?auto=format&fit=crop&q=80&w=800'
    ],
    posts: [
      { text: '透過自然媒材的引導，讓親子間的對話變得好溫柔🌿', url: 'https://www.instagram.com/p/DLPF5VVTVI8/?img_index=1' }
    ]
  },
  {
    id: 5,
    categoryId: 'play',
    name: '知遊學苑',
    subtitle: '親子共學品牌',
    description: '帶孩子走進展覽，好好感受作品的力量。我們不是為了讓孩子「看得懂藝術」，而是讓他們知道這世界除了語言和數字，還有那些說不清但感受得出的「感覺」🥰',
    discountCode: 'DIDI-CURIO',
    link: 'https://www.instagram.com/curio_kids_/',
    socialType: 'IG',
    logo: 'https://images.unsplash.com/photo-1453738773917-9c3eff1db985?auto=format&fit=crop&q=80&w=200',
    photos: [
      'https://drive.google.com/thumbnail?id=1UhpeZoHNbhY8b2krwQzvWe3COLAIe6C9&sz=w800',
      'https://drive.google.com/thumbnail?id=1_L676JcX7sIPjq4POMQCZ8kJGkc5uM_7&sz=w800',
      'https://drive.google.com/thumbnail?id=1tS0xOBZ_mpHMJhoI9gfAhXrBbQIK_5-U&sz=w800'
    ],
    posts: [
      { text: '看著他們充滿好奇心的模樣，真的是媽媽最大的滿足！', url: 'https://www.instagram.com/p/DLmxpSZzfPr/?img_index=1' }
    ]
  },
  {
    id: 6,
    categoryId: 'flavor',
    name: 'Sengang 森崗雞蛋',
    subtitle: '在地小農放牧蛋',
    description: '一顆蛋能說多少故事？母雞快樂奔跑，蛋就會更好吃🥚 養雞人家最大的心願不是產量，而是「風調雨順」。最感動的時刻，就是聽見大家吃了一口後說出：「好好吃！」',
    discountCode: 'DIDI-EGG9折',
    link: 'https://www.instagram.com/sengang.egg/',
    socialType: 'IG',
    logo: 'https://drive.google.com/thumbnail?id=1x2c_wY8MQKwjqOxm8AGSo5TOG_H761Wb&sz=w500',
    photos: [
      'https://drive.google.com/thumbnail?id=1__v5A27SmkgnsVmSSSJdTOqy0R3mZCm2&sz=w800',
      'https://drive.google.com/thumbnail?id=1CtG6PaeUeq7UjDlA1IskwJvolkr5Xcwo&sz=w800',
      'https://drive.google.com/thumbnail?id=1GrgvYvwhCOT5rMpYBzvpyzhqqndW3PbB&sz=w800'
    ],
    posts: [
      { text: '給啾寶和桔寶吃的，當然要最安心的！', url: 'https://www.instagram.com/p/DO58l85gZTk/?img_index=1' },
      { text: '每次看到那飽滿透亮的蛋黃，就知道母雞們被照顧得多好🥚', url: 'https://www.instagram.com/p/DNkXhFsT-2O/' },
      { text: '是我們家冰箱絕對不能斷貨的必備品', url: 'https://www.instagram.com/p/DQMOZ9jgf4t/' }
    ]
  },
  {
    id: 7,
    categoryId: 'flavor',
    name: '牧慕四季檸檬',
    subtitle: '友善農法果園',
    description: '屏東鹽埔一片承載思念的果園🍋 承載著三代人對土地的守護，堅持草木共生、減少藥劑的照顧。今天還在樹上，明天就能抵達餐桌，品嚐得到最純粹的用心。',
    discountCode: 'DIDI-LEMON50',
    link: 'https://www.instagram.com/mumu_seasonslemon/',
    socialType: 'IG',
    logo: 'https://drive.google.com/thumbnail?id=1VyIaIAC41ZQ_4C4Gr-tuW73sMWJUVD2i&sz=w500',
    photos: [
      'https://drive.google.com/thumbnail?id=1h_0empgBGmXQDqaR3rT5CFDanlnx1XM1&sz=w800',
      'https://drive.google.com/thumbnail?id=15Ts5KHHR9TwLXZbSjFywGLgK8_LAFfKV&sz=w800',
      'https://drive.google.com/thumbnail?id=1VGfiTfxXyb90HKuiQ938oxEACb7gJE25&sz=w800'
    ],
    posts: [
      { text: '這香氣真的太療癒了🍋！堅持友善土地種出來的檸檬', url: 'https://www.instagram.com/p/DPRL1k8idtH/?img_index=1' },
      { text: '泡杯蜂蜜檸檬水給孩子喝，滿滿的維他命C！', url: 'https://www.instagram.com/p/DNaLQAYT8xB/' }
    ]
  },
  {
    id: 8,
    categoryId: 'flavor',
    name: '田中央義式冰淇淋',
    subtitle: '在地食材 Gelato',
    description: '隱身在田野間的秘密基地！結合在地小農食材，製作出成分單純的義式冰淇淋。終於可以不用天人交戰，放心讓兩隻小怪獸大口大口吃甜點了🍦',
    discountCode: 'DIDI-GELATO',
    link: 'https://www.facebook.com/p/%E7%94%B0%E4%B8%AD%E5%A4%AEgalato%E7%BE%A9%E5%BC%8F%E5%86%B0%E6%B7%87%E6%B7%8B%E5%92%96%E5%95%A1%E9%A4%90-100057497895917/',
    socialType: 'FB',
    logo: 'https://images.unsplash.com/photo-1570197781395-8e3b0704dd5e?auto=format&fit=crop&q=80&w=200',
    photos: [
      'https://images.unsplash.com/photo-1563805042-7684c8a9e9cb?auto=format&fit=crop&q=80&w=800'
    ]
  },
  {
    id: 9,
    categoryId: 'flavor',
    name: '果嶼 goodisland',
    subtitle: '醜果再生製品',
    description: '把醜醜的水果變成魔法！好喜歡他們珍惜食物的理念，果乾和果醬不只超級美味，還能順便跟孩子來場最棒的食農與環境教育🍎，一舉兩得！',
    discountCode: 'DIDI-FRUIT',
    link: 'https://www.instagram.com/guoyu_goodisland/',
    socialType: 'IG',
    logo: 'https://drive.google.com/thumbnail?id=1TUTmB4Q_UL7VZRH7g9953xk7QoqKGjiZ&sz=w500',
    photos: [
      'https://drive.google.com/thumbnail?id=1RIpal2oNzWfOKrutIcZx08_305b1R3ut&sz=w800',
      'https://drive.google.com/thumbnail?id=1Bg7Bw0K63TffZjPMpenjr9hBd48RRi4q&sz=w800',
      'https://drive.google.com/thumbnail?id=1M9S6Ags5mBXq_Yud-vvamkYgVoff5HKp&sz=w800'
    ],
    posts: [
      { text: '把醜醜的水果變成魔法！', url: 'https://www.instagram.com/p/DT-kyFHgXxa/?img_index=1' },
      { text: '順便跟孩子來場最棒的食農與環境教育🍎', url: 'https://www.instagram.com/p/DVS50ddgbm8/' }
    ]
  },
  {
    id: 10,
    categoryId: 'flavor',
    name: '蘭園養蜂場',
    subtitle: '純淨天然蜂蜜',
    description: '天然的甜蜜滋味！沒有什麼比純淨的蜂蜜更能安撫孩子（和媽媽）的心了🍯。這份來自大自然的禮物，用溫暖守護全家人的健康，真心推薦給你們。',
    discountCode: 'DIDI-HONEY88',
    link: 'https://www.lanyuanbeefarm.com.tw/',
    socialType: 'Web',
    logo: 'https://drive.google.com/thumbnail?id=1YKBtLal1UPFiT66bySxBBOErWyWI5ZDX&sz=w500',
    photos: [
      'https://drive.google.com/thumbnail?id=10ADo2ITfIrQ3ZSODu2svu15t9iXMiFea&sz=w800',
      'https://drive.google.com/thumbnail?id=13SEPTlC0cHnIWRkegMLqpJxyjct5eU0j&sz=w800',
      'https://drive.google.com/thumbnail?id=1Biy3H6j5h_bUFWIRy_doclNHfdtzTkv_&sz=w800'
    ],
    posts: [
      { text: '這份來自大自然的禮物，用溫暖守護全家人的健康🍯', url: 'https://www.instagram.com/p/DVs_a-vgXy4/?img_index=1' }
    ]
  },
  {
    id: 11,
    categoryId: 'flavor',
    name: '鮮乳坊 Better Milk',
    subtitle: '獸醫把關小農鮮乳',
    description: '每天早上都要來一杯的純粹！由大動物獸醫親自把關的鮮乳，喝得出滿滿的安心與濃郁。看著啾寶和桔寶喝完嘴唇上那圈可愛的白鬍子，媽媽的心都融化啦～給孩子喝的當然要挑最好的！🥛',
    discountCode: 'DIDI-MILK',
    link: 'https://www.bettermilk.com.tw/',
    socialType: 'Web',
    logo: 'https://drive.google.com/thumbnail?id=12Fkucr999EMhSn316JVdi2KqREaI8xyO&sz=w500',
    photos: [
      'https://images.unsplash.com/photo-1550583724-b2692b85b150?auto=format&fit=crop&q=80&w=800',
      'https://images.unsplash.com/photo-1570527352358-1f1484af8043?auto=format&fit=crop&q=80&w=800'
    ]
  }
];

const WORKSHOPS = [
  {
    id: 'w1',
    title: '孩子的生活療育提案',
    subtitle: '嘉禾新村 駐村企劃 ｜ 3-4月活動亮點',
    description: '很開心在2024年滴滴兒森認識了嘉禾新村這個美好的世外桃源，在2025年正式進駐這裡。雖然2026年第二季暫時要跟這裡說掰掰了，但很開心在這段時光裡我們也在這寫下了許多精彩故事。\n\n雖然有些臨時，但也想好好的為這裡的活動劃下最美的逗號。這次的一些企劃細節，都希望可以為大家留下一些美好的記憶。當然也有我們的好朋友物物島的合作企劃小彩蛋藏在三月裡！',
    highlights: [
      '《春天の繽紛花花日》繪本療育 x 食育體驗',
      '《嘉禾の春日野餐籃》食育體驗 x 藝術創作',
      '《嘉禾美好生活練習》自然療癒 x 繪本導讀',
      '《蜂蜜商店營業中》 食農體驗 x 感統任務',
      '《蘋菓菓の散步日記》 食育體驗 x 感統任務'
    ],
    footerText: '謝謝每一次的相遇，都讓我們在生活裡多了一份溫柔與力量。接下來滴滴兒森將會走訪到更多地方，和更多家庭們一起 #放大生活中的美好',
    photos: [
      'https://drive.google.com/thumbnail?id=1ZIya3i5zJ7k4NKPvWgOLocRGcRafT1cW&sz=w800',
      'https://drive.google.com/thumbnail?id=1v8HZSH1rW9C2Cunjy-5WMyX30l7BeSUN&sz=w800',
      'https://drive.google.com/thumbnail?id=1fV9Rbv86VI2p6rinlbYtBZv5fzKti63b&sz=w800'
    ],
    links: [
      { name: '前往報名', url: 'https://forms.gle/jA5t265TfsXKiTSEA', icon: Ticket, primary: true },
      { name: '活動介紹', url: 'https://www.instagram.com/p/DUsVSjBgZp3/?img_index=1', icon: Instagram, primary: false }
    ]
  },
  {
    id: 'w2',
    title: '《看見發光的自己》',
    subtitle: '滴滴兒森 x 物物島 大人限定療癒茶會',
    description: '成為媽媽後，我們常以為自己迷失了方向，其實我們是在跌跌撞撞中走向更完整的自己。\n\n在這場茶會中，我們不僅分享故事，更透過大自然的力量療癒身心。親手調配兩款專屬的「情緒香草茶包」，在草本香氣中搭配兩款茶點，讓壓力溫柔釋放。\n\n在這裡，妳不需要永遠堅強，每種情緒都會被溫暖接住，陪妳在愛與疲憊之間練習前行，重新看見閃閃發光的自己。獻給每一位在育兒路上努力著，也渴望重新擁抱自己的妳。',
    highlights: [],
    footerText: '',
    photos: [
      'https://drive.google.com/thumbnail?id=1-9OFI7_4DVxwgO2b9g1GwIhghkRjZE0r&sz=w800',
      'https://drive.google.com/thumbnail?id=1NIIIBQ0bhCuqEMWApnYhAenjCFwHdXSw&sz=w800',
      'https://drive.google.com/thumbnail?id=1WU-LPPpMhDYMWA_mHBYEGlXTCyGYd44D&sz=w800'
    ],
    links: [
      { name: '前往報名', url: 'https://p2.groupbuyforms.tw/jh3i9?utm_source=ig&utm_medium=social&utm_content=link_in_bio&fbclid=PAZXh0bgNhZW0CMTEAc3J0YwZhcHBfaWQMMjU2MjgxMDQwNTU4AAGnFYCE7jYqkhFfHXi7qCizcZXUaYqJhxHgHj2djcNNgm-l-y0W4ce866jH46c_aem_4QvFYBB2RXCjpz5BXcQ0Dw', icon: Ticket, primary: true }
    ]
  }
];

export default function App() {
  const [activeCategory, setActiveCategory] = useState('all');
  const [selectedBrand, setSelectedBrand] = useState(null);
  const [isScrolled, setIsScrolled] = useState(false);

  // 監聽滾動以改變導覽列樣式
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 過濾品牌
  const filteredBrands = activeCategory === 'all' 
    ? BRANDS 
    : BRANDS.filter(brand => brand.categoryId === activeCategory);

  return (
    <div className="min-h-screen bg-[#FDFBF7] text-[#5C4A3D] font-sans selection:bg-[#D5D2C1] selection:text-[#5C4A3D]">
      
      {/* 頂部導覽列 */}
      <nav className={`fixed w-full z-40 transition-all duration-500 ${isScrolled ? 'bg-[#FDFBF7]/90 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-6'}`}>
        <div className="max-w-6xl mx-auto px-6 flex justify-between items-center">
          <div className="flex items-center cursor-pointer">
            <img 
              src="https://drive.google.com/thumbnail?id=1uM-vRLXIviB4i7SPt1DCp8r9uQikzumN&sz=w500" 
              alt="The Drippy Forest Logo" 
              className="h-12 w-auto object-contain"
            />
          </div>
          <div className="hidden md:flex gap-6 text-sm font-medium">
            <a href="#" className="hover:text-[#7B8B50] transition-colors">關於我們</a>
            <a href="#" className="hover:text-[#7B8B50] transition-colors">推薦品牌</a>
            <a href="#" className="hover:text-[#7B8B50] transition-colors">專屬優惠</a>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <header className="relative pt-32 pb-20 md:pt-48 md:pb-32 px-6 overflow-hidden flex items-center justify-center min-h-[60vh]">
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&q=80&w=2000" 
            alt="Nature Background" 
            className="w-full h-full object-cover opacity-20"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-[#FDFBF7]/40 via-[#FDFBF7]/80 to-[#FDFBF7]"></div>
        </div>
        
        <div className="relative z-10 max-w-3xl mx-auto text-center">
          <span className="inline-block py-1 px-3 rounded-full bg-[#E8E1D3] text-[#7B8B50] text-sm font-medium mb-6 animate-fade-in-up">
            找回育兒的從容與美好 🌿
          </span>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight animate-fade-in-up delay-100">
            走進滴滴兒森，<br className="md:hidden" />放大生活中的美好
          </h1>
          <p className="text-lg md:text-xl text-[#8C7A6B] mb-10 leading-relaxed animate-fade-in-up delay-200">
            ✧大自然療癒｜親子生活美學✧<br />
            期望陪伴更多家庭好好生活<br />
            ғᴏʀ 家庭 ꚰ 不定期療癒療育工作坊<br />
            療癒體驗｜親子食育｜活動設計
          </p>
        </div>
      </header>

      {/* 實體活動工作坊 Section */}
      <section className="bg-[#F9F7F2] py-20 relative border-b border-[#E8E1D3]">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-16">
            <span className="inline-flex items-center justify-center p-3 bg-[#E8E1D3] rounded-full mb-4 text-[#7B8B50] shadow-sm">
              <Calendar className="w-6 h-6" />
            </span>
            <h2 className="text-3xl md:text-4xl font-bold text-[#5C4A3D] mb-4">森．實體工作坊</h2>
            <p className="text-[#8C7A6B]">走出戶外，與我們一起在真實的溫度裡相聚</p>
          </div>

          <div className="flex flex-col gap-16">
            {WORKSHOPS.map((workshop, idx) => (
              <div key={workshop.id} className={`flex flex-col ${idx % 2 !== 0 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 items-stretch`}>
                {/* 圖片區 */}
                <div className="w-full md:w-1/2 grid grid-cols-2 grid-rows-2 gap-3 h-[350px] md:h-auto min-h-[400px]">
                  <img src={workshop.photos[0]} alt={workshop.title} className="w-full h-full object-cover rounded-2xl col-span-2 row-span-1 shadow-sm hover:opacity-95 transition-opacity" />
                  <img src={workshop.photos[1]} alt="活動實紀" className="w-full h-full object-cover rounded-2xl shadow-sm hover:opacity-95 transition-opacity" />
                  <img src={workshop.photos[2]} alt="活動實紀" className="w-full h-full object-cover rounded-2xl shadow-sm hover:opacity-95 transition-opacity" />
                </div>
                {/* 文字區 */}
                <div className="w-full md:w-1/2 bg-white p-8 md:p-10 rounded-3xl shadow-sm border border-[#F0EBE1] flex flex-col justify-center transform transition-transform hover:-translate-y-1 duration-500">
                  <h4 className="text-[#7B8B50] font-bold text-sm tracking-widest mb-3 bg-[#E8E1D3]/50 inline-block px-3 py-1 rounded-full self-start">{workshop.subtitle}</h4>
                  <h3 className="text-3xl font-bold text-[#5C4A3D] mb-6">{workshop.title}</h3>
                  <div className="text-[#8C7A6B] whitespace-pre-line leading-relaxed mb-6">
                    {workshop.description}
                  </div>
                  {workshop.highlights.length > 0 && (
                    <div className="bg-[#FDFBF7] p-5 rounded-2xl mb-6 border border-[#E8E1D3]/50">
                      <ul className="flex flex-col gap-3">
                        {workshop.highlights.map((hl, i) => (
                          <li key={i} className="text-[#5C4A3D] font-medium text-sm flex items-start gap-2">
                            <span className="text-[#D4A373] mt-0.5">✿</span>
                            {hl}
                          </li>
                        ))}
                      </ul>
                    </div>
                  )}
                  {workshop.footerText && (
                    <p className="text-[#8C7A6B] text-sm leading-relaxed mb-8 italic">
                      {workshop.footerText}
                    </p>
                  )}
                  <div className="flex flex-wrap gap-4 mt-auto">
                    {workshop.links.map((link, i) => {
                      const LinkIcon = link.icon;
                      return (
                        <a
                          key={i}
                          href={link.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={`flex items-center gap-2 px-6 py-3 rounded-full font-medium transition-all ${link.primary ? 'bg-[#7B8B50] hover:bg-[#687643] text-white shadow-md' : 'bg-[#E8E1D3] hover:bg-[#D5D2C1] text-[#5C4A3D]'}`}
                        >
                          <LinkIcon className="w-4 h-4" />
                          {link.name}
                        </a>
                      )
                    })}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 分類導覽 (Category Filter) */}
      <section className="sticky top-[60px] z-30 bg-[#FDFBF7]/95 backdrop-blur-md border-b border-[#E8E1D3] py-4 px-4">
        <div className="max-w-6xl mx-auto flex overflow-x-auto hide-scrollbar gap-3 pb-2 md:pb-0 justify-start md:justify-center">
          {CATEGORIES.map((cat) => {
            const Icon = cat.icon;
            const isActive = activeCategory === cat.id;
            return (
              <button
                key={cat.id}
                onClick={() => setActiveCategory(cat.id)}
                className={`flex items-center gap-2 px-5 py-2.5 rounded-full whitespace-nowrap transition-all duration-300 ${
                  isActive 
                    ? 'bg-[#7B8B50] text-white shadow-md transform scale-105' 
                    : 'bg-white text-[#8C7A6B] hover:bg-[#E8E1D3] hover:text-[#5C4A3D] border border-[#E8E1D3]'
                }`}
              >
                <Icon className="w-4 h-4" />
                <span className="font-medium">{cat.name}</span>
              </button>
            );
          })}
        </div>
      </section>

      {/* 品牌列表 (Brand Grid) */}
      <main className="max-w-6xl mx-auto px-6 py-16 min-h-[50vh]">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredBrands.map((brand) => (
            <div 
              key={brand.id} 
              onClick={() => setSelectedBrand(brand)}
              className="group bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer border border-[#F0EBE1] transform hover:-translate-y-1"
            >
              <div className="relative h-56 overflow-hidden">
                <img 
                  src={brand.photos[0]} 
                  alt={brand.name} 
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-60"></div>
                <div className="absolute bottom-4 left-4 right-4 flex items-end gap-3">
                  <img src={brand.logo} alt="logo" className="w-12 h-12 rounded-full border-2 border-white object-cover shadow-md bg-white"/>
                  <div className="text-white">
                    <p className="text-xs font-medium bg-white/20 backdrop-blur-sm px-2 py-0.5 rounded inline-block mb-1">{brand.subtitle}</p>
                    <h3 className="text-lg font-bold leading-tight">{brand.name}</h3>
                  </div>
                </div>
              </div>
              <div className="p-6">
                <p className="text-[#8C7A6B] text-sm line-clamp-2 leading-relaxed mb-4">
                  {brand.description}
                </p>
                <div className="flex items-center justify-between mt-4 pt-4 border-t border-[#F0EBE1]">
                  <span className="flex items-center gap-1.5 text-sm font-medium text-[#D4A373]">
                    <Tag className="w-4 h-4" />
                    專屬優惠
                  </span>
                  <span className="text-[#7B8B50] flex items-center text-sm font-medium group-hover:translate-x-1 transition-transform">
                    探索更多 <ChevronRight className="w-4 h-4 ml-1" />
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
        
        {filteredBrands.length === 0 && (
          <div className="text-center py-20 text-[#8C7A6B]">
            <Sparkles className="w-12 h-12 mx-auto mb-4 opacity-30" />
            <p className="text-lg">更多美好品牌，即將進駐...</p>
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-[#5C4A3D] text-[#E8E1D3] py-16 text-center">
        <div className="max-w-4xl mx-auto px-6">
          <img 
            src="https://drive.google.com/thumbnail?id=1x75LgKTCOZ6kiIOepsUJm561OXtS42Y3&sz=w500" 
            alt="The Drippy Forest Logo" 
            className="h-32 w-auto mx-auto mb-6 object-contain"
          />
          <h2 className="text-2xl font-bold mb-1">滴滴兒森</h2>
          <h3 className="text-sm font-medium tracking-widest uppercase opacity-70 mb-4">The Drippy Forest</h3>
          <p className="mb-8 opacity-80 tracking-widest font-medium">#放大生活中的美好</p>
          <div className="text-sm opacity-60">
            &copy; {new Date().getFullYear()} 兒森生活有限公司 Kodomori. All rights reserved.
          </div>
        </div>
      </footer>

      {/* 品牌詳細資訊彈窗 (Modal) */}
      {selectedBrand && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 md:p-6">
          {/* 背景遮罩 */}
          <div 
            className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
            onClick={() => setSelectedBrand(null)}
          ></div>
          
          {/* 彈窗內容 */}
          <div className="relative bg-[#FDFBF7] w-full max-w-3xl max-h-[90vh] rounded-3xl overflow-hidden shadow-2xl flex flex-col animate-scale-up">
            
            {/* 關閉按鈕 */}
            <button 
              onClick={() => setSelectedBrand(null)}
              className="absolute top-4 right-4 z-10 p-2 bg-white/50 hover:bg-white backdrop-blur-md rounded-full text-[#5C4A3D] transition-colors"
            >
              <X className="w-6 h-6" />
            </button>

            <div className="overflow-y-auto hide-scrollbar flex-1">
              {/* 頂部大圖 */}
              <div className="h-64 sm:h-80 relative">
                <img src={selectedBrand.photos[0]} alt={selectedBrand.name} className="w-full h-full object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-[#FDFBF7] via-transparent to-transparent"></div>
              </div>

              {/* 內容區 */}
              <div className="px-6 md:px-10 pb-10 -mt-16 relative z-10">
                <div className="flex flex-col md:flex-row gap-6 items-start">
                  {/* Logo */}
                  <img src={selectedBrand.logo} alt="logo" className="w-24 h-24 rounded-2xl shadow-lg border-4 border-[#FDFBF7] bg-white object-cover shrink-0"/>
                  
                  <div className="flex-1 mt-2 md:mt-16">
                    <div className="flex items-center gap-3 mb-2">
                      <span className="px-3 py-1 bg-[#E8E1D3] text-[#7B8B50] text-xs font-bold rounded-full">
                        {selectedBrand.subtitle}
                      </span>
                    </div>
                    <h2 className="text-3xl font-bold text-[#5C4A3D] mb-4">{selectedBrand.name}</h2>
                    <p className="text-[#8C7A6B] leading-relaxed mb-6">
                      {selectedBrand.description}
                    </p>

                    {/* 滴滴兒森 x 品牌日常 (IG 貼文連結) */}
                    {selectedBrand.posts && selectedBrand.posts.length > 0 && (
                      <div className="mb-8">
                        <h4 className="text-[#5C4A3D] font-bold mb-3 flex items-center gap-2">
                          <Instagram className="w-5 h-5 text-[#D4A373]" />
                          滴滴兒森日常回顧
                        </h4>
                        <div className="flex flex-col gap-3">
                          {selectedBrand.posts.map((post, idx) => (
                            <a 
                              key={idx} 
                              href={post.url} 
                              target="_blank" 
                              rel="noopener noreferrer" 
                              className="group flex items-center gap-3 text-sm text-[#7B8B50] bg-white border border-[#E8E1D3] p-3 rounded-xl hover:border-[#7B8B50] hover:shadow-sm transition-all"
                            >
                              <span className="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-[#FDFBF7] rounded-full group-hover:bg-[#7B8B50] group-hover:text-white transition-colors">
                                <Instagram className="w-4 h-4" />
                              </span>
                              <span className="flex-1 leading-relaxed">{post.text}</span>
                              <ChevronRight className="w-4 h-4 text-[#D4A373] opacity-0 group-hover:opacity-100 transition-opacity" />
                            </a>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* 優惠碼與連結區塊 */}
                    <div className="bg-white rounded-2xl p-6 border border-[#F0EBE1] shadow-sm mb-8">
                      <h4 className="text-[#5C4A3D] font-bold mb-4 flex items-center gap-2">
                        <Sparkles className="w-5 h-5 text-[#D4A373]" />
                        滴滴兒森粉絲專屬
                      </h4>
                      <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
                        <div className="w-full sm:w-auto flex-1 bg-[#FDFBF7] border border-dashed border-[#D4A373] rounded-xl p-3 text-center">
                          <span className="text-xs text-[#8C7A6B] block mb-1">結帳輸入優惠碼</span>
                          <span className="font-mono text-lg font-bold text-[#D4A373] tracking-wider">{selectedBrand.discountCode}</span>
                        </div>
                        <a 
                          href={selectedBrand.link}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="w-full sm:w-auto px-6 py-4 bg-[#7B8B50] hover:bg-[#687643] text-white rounded-xl font-medium transition-colors flex items-center justify-center gap-2"
                        >
                          {selectedBrand.socialType === 'IG' && <Instagram className="w-5 h-5" />}
                          {selectedBrand.socialType === 'FB' && <Facebook className="w-5 h-5" />}
                          {selectedBrand.socialType === 'Web' && <ExternalLink className="w-5 h-5" />}
                          前往逛逛
                        </a>
                      </div>
                    </div>

                    {/* 照片集 */}
                    {selectedBrand.photos.length > 1 && (
                      <div>
                        <h4 className="font-bold text-[#5C4A3D] mb-4">品牌實影</h4>
                        <div className="grid grid-cols-2 gap-4">
                          {selectedBrand.photos.slice(1).map((photo, index) => (
                            <img 
                              key={index} 
                              src={photo} 
                              alt={`${selectedBrand.name} photo ${index + 1}`} 
                              className="w-full h-32 md:h-48 object-cover rounded-xl shadow-sm"
                            />
                          ))}
                        </div>
                      </div>
                    )}

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 自訂動畫樣式 */}
      <style dangerouslySetInnerHTML={{__html: `
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
        .delay-100 { animation-delay: 100ms; }
        .delay-200 { animation-delay: 200ms; }
        
        @keyframes scaleUp {
          from { opacity: 0; transform: scale(0.95); }
          to { opacity: 1; transform: scale(1); }
        }
        .animate-scale-up { animation: scaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
      `}} />
    </div>
  );
}