import React, { useState, useEffect, useMemo } from 'react';
import { 
  Coffee, MapPin, Droplets, Leaf, Thermometer, 
  BookOpen, ChevronRight, X, Award, CheckCircle, 
  Search, Globe, Beaker, Sun, Wind, Filter, 
  Timer, Zap, AlertCircle, Palette, Settings,
  Flame, Activity, MousePointer2, ExternalLink, Languages
} from 'lucide-react';

// --- 多語言設定 ---
const LANGUAGES = [
  { code: 'zh-TW', label: '繁體中文' },
  { code: 'zh-CN', label: '简体中文' },
  { code: 'en',    label: 'English' },
  { code: 'ja',    label: '日本語' },
  { code: 'ko',    label: '한국어' }
];

// --- UI 翻譯字典 ---
const UI_TEXT = {
  'zh-TW': {
    title: '里響咖啡知識百科',
    subtitle: 'Reshock Coffee Encyclopedia',
    heroTitle: '從種子到杯中靈魂',
    heroDesc: '我們致力於推廣阿里山咖啡，更希望讓每一個熱愛咖啡的靈魂，都能在這裡找到從種子到杯中的完整解答。',
    startBtn: '開始探索知識',
    officialBtn: '前往里響官網',
    readMore: '閱讀完整介紹',
    coreKnowledge: '核心知識',
    processFlow: '處理流程',
    impact: '負面影響',
    features: ['全球與台灣產地', '互動式風味輪', '完整瑕疵豆圖鑑', '專業烘焙曲線'],
    tabs: {
      origins: '產地百科', varieties: '品種圖鑑', processing: '處理法', 
      brewing: '沖煮指南', sensory: '風味感官', roasting: '烘焙全解', 
      grinding: '研磨刻度', defects: '瑕疵豆大全', quiz: '大師考核'
    },
    severity: '嚴重度',
    highlight: '里響推薦'
  },
  'zh-CN': {
    title: '里响咖啡知识百科',
    subtitle: 'Reshock Coffee Encyclopedia',
    heroTitle: '从种子到杯中灵魂',
    heroDesc: '我们致力于推广阿里山咖啡，更希望让每一个热爱咖啡的灵魂，都能在这里找到从种子到杯中的完整解答。',
    startBtn: '开始探索知识',
    officialBtn: '前往里响官网',
    readMore: '阅读完整介绍',
    coreKnowledge: '核心知识',
    processFlow: '处理流程',
    impact: '负面影响',
    features: ['全球与台湾产地', '交互式风味轮', '完整瑕疵豆图鉴', '专业烘焙曲线'],
    tabs: {
      origins: '产地百科', varieties: '品种图鉴', processing: '处理法', 
      brewing: '冲煮指南', sensory: '风味感官', roasting: '烘焙全解', 
      grinding: '研磨刻度', defects: '瑕疵豆大全', quiz: '大师考核'
    },
    severity: '严重度',
    highlight: '里响推荐'
  },
  'en': {
    title: 'Reshock Coffee Encyclopedia',
    subtitle: 'Knowledge Base',
    heroTitle: 'From Seed to Cup',
    heroDesc: 'Dedicated to promoting Alishan coffee, we hope every coffee soul can find complete answers from seed to cup here.',
    startBtn: 'Start Exploring',
    officialBtn: 'Official Website',
    readMore: 'Read More',
    coreKnowledge: 'Core Knowledge',
    processFlow: 'Process Flow',
    impact: 'Negative Impact',
    features: ['Global & Taiwan Origins', 'Flavor Wheel', 'Defect Guide', 'Roasting Curves'],
    tabs: {
      origins: 'Origins', varieties: 'Varieties', processing: 'Processing', 
      brewing: 'Brewing', sensory: 'Sensory', roasting: 'Roasting', 
      grinding: 'Grinding', defects: 'Defects', quiz: 'Quiz'
    },
    severity: 'Severity',
    highlight: 'Recommended'
  },
  'ja': {
    title: 'Reshock コーヒー百科事典',
    subtitle: '知識ベース',
    heroTitle: '種子からカップまで',
    heroDesc: '阿里山コーヒーの普及に努め、すべてのコーヒー愛好家がここで答えを見つけられることを願っています。',
    startBtn: '探索を開始',
    officialBtn: '公式サイト',
    readMore: '詳細を読む',
    coreKnowledge: '基礎知識',
    processFlow: 'プロセスフロー',
    impact: '悪影響',
    features: ['世界の産地', 'フレーバーホイール', '欠点豆ガイド', '焙煎曲線'],
    tabs: {
      origins: '産地', varieties: '品種', processing: '精製方法', 
      brewing: '抽出', sensory: '官能評価', roasting: '焙煎', 
      grinding: '挽き目', defects: '欠点豆', quiz: 'クイズ'
    },
    severity: '深刻度',
    highlight: '推奨'
  },
  'ko': {
    title: '리샹 커피 백과사전',
    subtitle: '지식 기반',
    heroTitle: '씨앗에서 컵까지',
    heroDesc: '아리산 커피를 알리는 데 전념하며, 모든 커피 애호가가 여기서 해답을 찾을 수 있기를 바랍니다.',
    startBtn: '탐색 시작',
    officialBtn: '공식 웹사이트',
    readMore: '더 읽기',
    coreKnowledge: '핵심 지식',
    processFlow: '처리 과정',
    impact: '부정적 영향',
    features: ['세계 산지', '플레이버 휠', '결점두 가이드', '로스팅 곡선'],
    tabs: {
      origins: '산지', varieties: '품종', processing: '가공법', 
      brewing: '브루잉', sensory: '관능 평가', roasting: '로스팅', 
      grinding: '분쇄도', defects: '결점두', quiz: '퀴즈'
    },
    severity: '심각도',
    highlight: '추천'
  }
};

// --- 資料生成函數 (根據語言回傳資料) ---
const getCoffeeData = (lang) => {
  // 簡單的翻譯輔助 (實際專案會使用完整的翻譯檔)
  const isZh = lang.includes('zh');
  const isEn = lang === 'en';
  
  return {
    origins: [
      {
        id: 'taiwan-alishan',
        title: isZh ? '台灣阿里山 (Taiwan Alishan)' : 'Taiwan Alishan',
        subtitle: isZh ? '雲海滋養的島嶼寶藏' : 'Treasure of the Sea of Clouds',
        region: isZh ? '亞洲' : 'Asia',
        isHighlight: true,
        description: isZh 
          ? '阿里山擁有得天獨厚的雲霧帶與高海拔微氣候，日夜溫差大，讓咖啡豆能在慢速生長中累積驚人的甜度與茶感。「里響咖啡」嚴選阿里山頂級莊園，帶您品味這份來自日出與雲海的禮物。'
          : 'Alishan possesses a unique cloud belt and high-altitude microclimate. The significant temperature difference between day and night allows coffee beans to accumulate amazing sweetness and tea-like notes during slow growth. Reshock Coffee selects top estates in Alishan to bring you this gift from the sunrise and clouds.',
        details: [
          { label: isZh ? '知名產區' : 'Region', value: isZh ? '阿里山樂野、達邦、特富野' : 'Leye, Dabang, Tefuye' },
          { label: isZh ? '品牌推薦' : 'Brand', value: '里響咖啡 Reshock Coffee' },
          { label: isZh ? '海拔' : 'Altitude', value: '1,000 - 1,400m' },
          { label: isZh ? '風味' : 'Flavor', value: isZh ? '烏龍茶韻、黑糖、龍眼' : 'Oolong Tea, Brown Sugar, Longan' }
        ],
        image: 'https://images.unsplash.com/photo-1518832553480-cd0e625ed3e6?auto=format&fit=crop&w=800&q=80', // 阿里山意象 (茶園/山脈)
        icon: <MapPin className="w-8 h-8 text-amber-400" />
      },
      {
        id: 'ethiopia',
        title: isZh ? '衣索比亞 (Ethiopia)' : 'Ethiopia',
        subtitle: isZh ? '咖啡基因庫與花香之王' : 'Birthplace of Coffee',
        region: isZh ? '非洲' : 'Africa',
        description: isZh 
          ? '阿拉比卡發源地，擁有成千上萬種原生種(Heirloom)。產區極致細分，風味以細緻花香與水果酸質著稱。'
          : 'The birthplace of Arabica, home to thousands of Heirloom varieties. Known for delicate floral notes and fruity acidity.',
        details: [
          { label: isZh ? '產區' : 'Region', value: 'Yirgacheffe, Sidamo, Guji' },
          { label: isZh ? '風味' : 'Flavor', value: isZh ? '茉莉花、檸檬、水蜜桃' : 'Jasmine, Lemon, Peach' }
        ],
        image: 'https://images.unsplash.com/photo-1621843669478-6d925d853511?auto=format&fit=crop&w=800&q=80', // 衣索比亞儀式/豆子
        icon: <Globe className="w-8 h-8 text-orange-500" />
      },
      {
        id: 'kenya',
        title: isZh ? '肯亞 (Kenya)' : 'Kenya',
        subtitle: isZh ? '強勁酸質與磷酸感' : 'Bright Acidity',
        region: isZh ? '非洲' : 'Africa',
        description: isZh 
          ? '特有的紅色火山土壤孕育出極具爆發力的酸質與莓果香。'
          : 'Unique red volcanic soil cultivates powerful acidity and berry aromas.',
        details: [
          { label: isZh ? '產區' : 'Region', value: 'Nyeri, Kirinyaga' },
          { label: isZh ? '風味' : 'Flavor', value: isZh ? '黑醋栗、烏梅、葡萄柚' : 'Blackcurrant, Plum, Grapefruit' }
        ],
        image: 'https://images.unsplash.com/photo-1526404522228-3e65d297c0c2?auto=format&fit=crop&w=800&q=80', // 肯亞豆/自然
        icon: <Sun className="w-8 h-8 text-red-600" />
      },
      {
        id: 'panama',
        title: isZh ? '巴拿馬 (Panama)' : 'Panama',
        subtitle: isZh ? '競標天價與藝妓傳奇' : 'Legend of Geisha',
        region: isZh ? '中美洲' : 'Central America',
        description: isZh 
          ? '擁有獨特的微型氣候，孕育出世界上最昂貴的藝妓(Geisha)咖啡。'
          : 'Possesses unique microclimates, cultivating the world\'s most expensive Geisha coffee.',
        details: [
          { label: isZh ? '產區' : 'Region', value: 'Boquete, Volcan' },
          { label: isZh ? '風味' : 'Flavor', value: isZh ? '極致花香、柑橘、精緻' : 'Floral, Citrus, Delicate' }
        ],
        image: 'https://images.unsplash.com/photo-1459755486867-b55449bb39ff?auto=format&fit=crop&w=800&q=80', // 咖啡莊園
        icon: <Award className="w-8 h-8 text-purple-500" />
      }
    ],
    processing: [
      {
        id: 'washed',
        title: isZh ? '水洗法 (Washed)' : 'Washed Process',
        subtitle: isZh ? '乾淨明亮的試金石' : 'Clean & Bright',
        description: isZh 
          ? '利用水洗去除果肉與果膠。發酵過程較短且受控，能呈現最純淨的酸質與原產地風味。'
          : 'Removes pulp and mucilage via washing. Controlled fermentation highlights pure acidity and terroir.',
        flow: isZh ? ['去果皮', '水槽發酵', '清洗', '乾燥', '養豆'] : ['De-pulp', 'Ferment', 'Wash', 'Dry', 'Rest'],
        image: 'https://images.unsplash.com/photo-1611057726661-77765e570055?auto=format&fit=crop&w=800&q=80', // 水洗處理站
        icon: <Droplets className="w-8 h-8 text-blue-500" />
      },
      {
        id: 'natural',
        title: isZh ? '日曬法 (Natural)' : 'Natural Process',
        subtitle: isZh ? '陽光濃縮的甜美' : 'Sun-Dried Sweetness',
        description: isZh
          ? '整顆漿果直接曝曬，果肉糖分滲入種子。風險在於乾燥不均易產生發酵過度，但成功時甜度驚人。'
          : 'Whole cherries are dried in the sun. Sugars permeate the bean. High sweetness and fruity notes.',
        flow: isZh ? ['浮選', '整顆曝曬', '翻動', '去殼'] : ['Float', 'Sun Dry', 'Turn', 'Hull'],
        image: 'https://images.unsplash.com/photo-1599455304872-8c692ee342b0?auto=format&fit=crop&w=800&q=80', // 日曬床
        icon: <Sun className="w-8 h-8 text-orange-500" />
      },
      {
        id: 'honey',
        title: isZh ? '蜜處理 (Honey)' : 'Honey Process',
        subtitle: isZh ? '精準控制的平衡' : 'Sweet Balance',
        description: isZh
          ? '去除果皮但保留果膠層進行乾燥。依保留量分為白蜜、黃蜜、紅蜜、黑蜜。'
          : 'De-pulped but mucilage remains. Classified as White, Yellow, Red, or Black Honey.',
        flow: isZh ? ['去皮', '保留果膠', '曝曬', '監控', '脫殼'] : ['De-pulp', 'Save Mucilage', 'Dry', 'Monitor', 'Hull'],
        image: 'https://plus.unsplash.com/premium_photo-1675718772835-4395a30590b6?auto=format&fit=crop&w=800&q=80', // 咖啡果膠感
        icon: <Beaker className="w-8 h-8 text-amber-600" />
      },
      {
        id: 'anaerobic',
        title: isZh ? '厭氧發酵 (Anaerobic)' : 'Anaerobic',
        subtitle: isZh ? '現代風味實驗' : 'Modern Experiment',
        description: isZh
          ? '在無氧環境下發酵，控制溫度與pH值，創造出肉桂、優格等特殊強烈香氣。'
          : 'Fermentation in oxygen-free tanks. Creates intense notes like cinnamon and yogurt.',
        flow: isZh ? ['密封桶', '注入CO2', '低溫發酵', '乾燥'] : ['Sealed Tank', 'CO2', 'Ferment', 'Dry'],
        image: 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=800&q=80', // 實驗室/桶裝感
        icon: <Filter className="w-8 h-8 text-purple-600" />
      }
    ],
    varieties: [
      {
        id: 'arabica',
        title: '阿拉比卡 (Arabica)',
        subtitle: isZh ? '精品咖啡主流' : 'Mainstream Specialty',
        description: isZh ? '風味精緻多變，佔全球產量多數。' : 'Delicate flavors, majority of global production.',
        image: 'https://images.unsplash.com/photo-1524350876685-274059332603?auto=format&fit=crop&w=800&q=80',
        icon: <Leaf className="w-8 h-8 text-green-700" />
      },
      {
        id: 'geisha',
        title: '藝妓/瑰夏 (Geisha)',
        subtitle: isZh ? '當代王者' : 'The Queen of Coffee',
        description: isZh ? '擁有辨識度極高的茉莉花香與柑橘調。' : 'Distinctive jasmine and citrus notes.',
        image: 'https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=800&q=80',
        icon: <Award className="w-8 h-8 text-pink-500" />
      },
      {
        id: 'sl28',
        title: 'SL28 / SL34',
        subtitle: isZh ? '肯亞之光' : 'Star of Kenya',
        description: isZh ? '擁有極致的黑醋栗酸質與扎實口感。' : 'Intense blackcurrant acidity and body.',
        image: 'https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=800&q=80',
        icon: <Zap className="w-8 h-8 text-red-700" />
      }
    ],
    brewing: [
      {
        id: 'v60',
        title: 'V60',
        subtitle: isZh ? '手沖標準' : 'Pour Over Standard',
        description: isZh ? '60度錐形設計，流速快，層次分明。' : '60-degree cone, fast flow, clear layers.',
        guide: { ratio: '1:15', temp: '90-93°C', grind: 'Medium-Fine', time: '2:30' },
        image: 'https://images.unsplash.com/photo-1519081836204-c8b907593a76?auto=format&fit=crop&w=800&q=80',
        icon: <Filter className="w-8 h-8 text-red-500" />
      },
      {
        id: 'espresso',
        title: 'Espresso',
        subtitle: isZh ? '義式濃縮' : 'High Pressure',
        description: isZh ? '9 bar 高壓萃取，濃郁油脂(Crema)。' : '9 bar extraction, rich Crema.',
        guide: { ratio: '1:2', temp: '92°C', grind: 'Extra-Fine', time: '30s' },
        image: 'https://images.unsplash.com/photo-1514066558159-fc8c737ef259?auto=format&fit=crop&w=800&q=80',
        icon: <Zap className="w-8 h-8 text-yellow-500" />
      }
    ],
    defects: [
      {
        id: 'black',
        title: isZh ? '全黑豆 (Full Black)' : 'Full Black',
        subtitle: isZh ? '嚴重真菌感染' : 'Fungus Damage',
        description: isZh ? '外觀完全變黑。通常由嚴重真菌感染或過度發酵引起。' : 'Completely black beans caused by severe fungus or over-fermentation.',
        impact: isZh ? '發霉味、藥水味、苯酚味。' : 'Moldy, phenolic, medicinal taste.',
        severity: 'High',
        image: 'https://images.unsplash.com/photo-1559525839-b184a4d698c7?auto=format&fit=crop&w=800&q=80', // 示意圖
        icon: <X className="text-stone-500"/>
      },
      {
        id: 'sour',
        title: isZh ? '發酵豆 (Sour)' : 'Sour Bean',
        subtitle: isZh ? '發酵過度' : 'Over Fermented',
        description: isZh ? '顏色由黃轉褐。採收後處理不當導致。' : 'Yellow to brown color. Improper processing.',
        impact: isZh ? '腐敗酸味、醋酸味。' : 'Rotten sour, vinegar taste.',
        severity: 'High',
        image: 'https://images.unsplash.com/photo-1616489888285-8509d5d1e17e?auto=format&fit=crop&w=800&q=80',
        icon: <AlertCircle className="text-yellow-700"/>
      },
      {
        id: 'insect',
        title: isZh ? '蟲蛀豆 (Insect)' : 'Insect Damage',
        subtitle: isZh ? '咖啡果小蠹' : 'Berry Borer',
        description: isZh ? '豆體表面有小圓孔。' : 'Small holes on the bean surface.',
        impact: isZh ? '風味平淡、髒味。' : 'Flat flavor, dirty taste.',
        severity: 'Medium',
        image: 'https://images.unsplash.com/photo-1517682205457-097214f08d79?auto=format&fit=crop&w=800&q=80', // 示意用
        icon: <Activity className="text-green-800"/>
      },
       {
        id: 'broken',
        title: isZh ? '破碎豆 (Broken)' : 'Broken Bean',
        subtitle: isZh ? '機械損傷' : 'Mechanical Damage',
        description: isZh ? '豆子破裂、缺角。' : 'Chipped or broken beans.',
        impact: isZh ? '烘焙易燒焦，產生焦苦味。' : 'Easy to burn, bitter taste.',
        severity: 'Low',
        image: 'https://images.unsplash.com/photo-1552346988-192350239da4?auto=format&fit=crop&w=800&q=80',
        icon: <Zap className="text-stone-400"/>
      },
    ],
     roasting_levels: [
      { id: 'light', title: isZh ? '淺焙' : 'Light', temp: isZh ? '一爆結束' : 'First Crack', flavor: isZh ? '花果酸香' : 'Floral & Fruity', color: 'bg-[#C69C6D]' },
      { id: 'medium', title: isZh ? '中焙' : 'Medium', temp: isZh ? '二爆前' : 'Before 2nd Crack', flavor: isZh ? '堅果焦糖' : 'Nutty & Caramel', color: 'bg-[#8B5E3C]' },
      { id: 'dark', title: isZh ? '深焙' : 'Dark', temp: isZh ? '二爆後' : 'After 2nd Crack', flavor: isZh ? '醇厚苦甜' : 'Dark & Bitter', color: 'bg-[#3E2723]' }
    ],
     sensory: [
    {
      id: 'floral',
      title: isZh ? '花香調 (Floral)' : 'Floral',
      color: '#F472B6',
      desc: isZh ? '優雅輕盈的氣息，常見於水洗衣索比亞或藝妓品種。' : 'Elegant and light. Common in washed Ethiopia or Geisha.',
      notes: isZh ? ['茉莉花', '玫瑰', '洋甘菊', '咖啡花'] : ['Jasmine', 'Rose', 'Chamomile', 'Blossom']
    },
    {
      id: 'fruity',
      title: isZh ? '水果調 (Fruity)' : 'Fruity',
      color: '#F87171',
      desc: isZh ? '酸質的主要來源，包含柑橘、莓果與熱帶水果。' : 'Source of acidity. Citrus, berry, and tropical fruits.',
      notes: isZh ? ['柑橘', '莓果', '水蜜桃', '鳳梨'] : ['Citrus', 'Berry', 'Peach', 'Pineapple']
    },
    {
      id: 'nutty',
      title: isZh ? '堅果可可 (Nutty)' : 'Nutty',
      color: '#A8A29E',
      desc: isZh ? '中深焙常見的風味，帶來厚實與溫暖的感受。' : 'Common in medium-dark roasts. Warm and full body.',
      notes: isZh ? ['杏仁', '榛果', '花生', '巧克力'] : ['Almond', 'Hazelnut', 'Peanut', 'Chocolate']
    }
  ],
   grinding: [
    { id: 'coarse', title: isZh ? '粗研磨' : 'Coarse', desc: isZh ? '像海鹽' : 'Like Sea Salt', usage: isZh ? '法壓壺, 冷萃' : 'French Press', size: 'w-5 h-5' },
    { id: 'medium', title: isZh ? '中研磨' : 'Medium', desc: isZh ? '像二砂' : 'Like Sand', usage: isZh ? '手沖, 美式' : 'Pour Over', size: 'w-4 h-4' },
    { id: 'fine', title: isZh ? '細研磨' : 'Fine', desc: isZh ? '像精鹽' : 'Like Fine Salt', usage: isZh ? '摩卡壺' : 'Moka Pot', size: 'w-3 h-3' },
    { id: 'extra-fine', title: isZh ? '極細研磨' : 'Extra Fine', desc: isZh ? '像麵粉' : 'Like Flour', usage: isZh ? '義式濃縮' : 'Espresso', size: 'w-2 h-2' }
  ],
  };
};

// --- 組件區 ---

const Navigation = ({ activeTab, setActiveTab, lang, setLang }) => {
  const t = UI_TEXT[lang] || UI_TEXT['zh-TW'];
  
  const navItems = [
    { id: 'origins', label: t.tabs.origins, icon: <Globe size={16} /> },
    { id: 'varieties', label: t.tabs.varieties, icon: <Leaf size={16} /> },
    { id: 'processing', label: t.tabs.processing, icon: <Settings size={16} /> },
    { id: 'brewing', label: t.tabs.brewing, icon: <Filter size={16} /> },
    { id: 'sensory', label: t.tabs.sensory, icon: <Palette size={16} /> },
    { id: 'roasting', label: t.tabs.roasting, icon: <Flame size={16} /> },
    { id: 'grinding', label: t.tabs.grinding, icon: <Activity size={16} /> },
    { id: 'defects', label: t.tabs.defects, icon: <AlertCircle size={16} /> },
    { id: 'quiz', label: t.tabs.quiz, icon: <Award size={16} /> },
  ];

  return (
    <div className="bg-blue-950/95 text-stone-100 sticky top-0 z-50 shadow-lg border-b border-blue-900 backdrop-blur-sm">
      <div className="max-w-7xl mx-auto p-3">
        {/* Top Row: Logo & Language */}
        <div className="flex justify-between items-center mb-3">
          <div className="flex items-center space-x-3 cursor-pointer group" onClick={() => setActiveTab('home')}>
            <div className="bg-gradient-to-br from-amber-400 to-amber-600 p-2 rounded-lg shadow-lg shadow-amber-500/20 group-hover:shadow-amber-500/40 transition-all">
               <Coffee className="text-white" size={24} />
            </div>
            <div className="flex flex-col">
              <h1 className="text-lg md:text-xl font-bold tracking-wider text-white">{t.title}</h1>
              <span className="text-[10px] text-blue-200 tracking-widest uppercase hidden md:block">{t.subtitle}</span>
            </div>
          </div>

          {/* Language Switcher */}
          <div className="flex items-center gap-2 bg-blue-900/50 rounded-full p-1 border border-blue-800">
             <Languages size={16} className="text-amber-400 ml-2" />
             <select 
               value={lang} 
               onChange={(e) => setLang(e.target.value)}
               className="bg-transparent text-xs md:text-sm text-blue-100 border-none focus:ring-0 cursor-pointer py-1 pr-2 outline-none"
             >
               {LANGUAGES.map(l => (
                 <option key={l.code} value={l.code} className="bg-blue-950 text-white">{l.label}</option>
               ))}
             </select>
          </div>
        </div>
        
        {/* Bottom Row: Nav Items (Scrollable) */}
        <div className="w-full overflow-x-auto pb-1 scrollbar-hide">
          <div className="flex space-x-1 min-w-max">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => setActiveTab(item.id)}
                className={`flex items-center space-x-1 px-3 py-2 rounded-lg transition-all text-sm font-medium whitespace-nowrap ${
                  activeTab === item.id 
                    ? 'bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-900/50' 
                    : 'text-blue-200 hover:text-white hover:bg-blue-900'
                }`}
              >
                {item.icon}
                <span>{item.label}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const Hero = ({ onStart, lang }) => {
  const t = UI_TEXT[lang] || UI_TEXT['zh-TW'];
  return (
    <div className="relative min-h-screen flex items-center justify-center bg-blue-950 text-white overflow-hidden">
      <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1497935586351-b67a49e012bf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')] bg-cover bg-center opacity-30"></div>
      <div className="absolute inset-0 bg-gradient-to-b from-blue-950 via-blue-900/80 to-amber-900/40"></div>
      
      <div className="relative z-10 text-center px-4 max-w-5xl mx-auto animate-fadeIn">
        <div className="mb-8 flex justify-center">
           <span className="inline-flex items-center px-4 py-1 rounded-full bg-amber-500/10 border border-amber-500/50 text-amber-400 text-sm font-bold tracking-widest uppercase backdrop-blur-md shadow-[0_0_15px_rgba(245,158,11,0.3)]">
             <Sun size={14} className="mr-2"/> {t.heroTitle}
           </span>
        </div>

        <h1 className="text-4xl md:text-7xl font-black mb-6 tracking-tighter leading-tight">
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-amber-400 to-amber-200">里響咖啡</span>
          <br/>
          <span className="text-white">{t.title}</span>
        </h1>
        
        <p className="text-lg md:text-xl text-blue-100 mb-12 max-w-3xl mx-auto leading-relaxed font-light">
          {t.heroDesc}
        </p>
        
        <div className="flex flex-col sm:flex-row items-center justify-center gap-6 mb-16">
          <button 
            onClick={() => onStart('origins')}
            className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gradient-to-r from-amber-500 to-amber-600 rounded-full hover:shadow-[0_0_30px_rgba(245,158,11,0.5)] hover:-translate-y-1"
          >
            {t.startBtn}
            <ChevronRight className="ml-2 group-hover:translate-x-1 transition-transform" />
          </button>
          
          <a 
            href="https://www.reshockcoffee.com/" 
            target="_blank" 
            rel="noopener noreferrer"
            className="group inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-blue-100 transition-all duration-200 bg-blue-900/50 border border-blue-700 rounded-full hover:bg-blue-800/50 hover:text-white hover:border-amber-400/50"
          >
            {t.officialBtn}
            <ExternalLink size={18} className="ml-2 opacity-70 group-hover:opacity-100" />
          </a>
        </div>
        
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto border-t border-white/10 pt-8">
          {t.features.map((feat, idx) => (
            <div key={idx} className="flex flex-col items-center gap-2 cursor-default">
              <div className="p-2 rounded-full bg-blue-900/30 text-amber-400">
                <CheckCircle size={20} />
              </div>
              <span className="text-sm font-medium text-blue-200">{feat}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const CardGrid = ({ data, category, onSelect, subtitle, lang }) => {
  const t = UI_TEXT[lang] || UI_TEXT['zh-TW'];

  return (
    <div className="p-4 md:p-8 max-w-7xl mx-auto min-h-screen">
      <div className="mb-8 md:mb-12 text-center md:text-left">
        <h2 className="text-3xl md:text-4xl font-black text-stone-900 mb-2 tracking-tight">{category}</h2>
        {subtitle && <p className="text-stone-500 text-lg">{subtitle}</p>}
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {data.map((item) => (
          <div 
            key={item.id}
            onClick={() => onSelect(item)}
            className={`bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-2xl hover:shadow-amber-500/10 transition-all cursor-pointer group border flex flex-col relative ${item.isHighlight ? 'border-amber-400 ring-2 ring-amber-100' : 'border-stone-100'}`}
          >
            {item.isHighlight && (
              <div className="absolute top-0 left-0 bg-amber-500 text-white text-[10px] font-bold px-3 py-1 rounded-br-lg z-10 shadow-md">
                {t.highlight}
              </div>
            )}
            
            {/* 卡片圖片區域 (Cover Image) */}
            <div className="h-48 relative overflow-hidden bg-stone-200">
               {/* 圖片層 */}
               {item.image ? (
                 <img 
                   src={item.image} 
                   alt={item.title}
                   className="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700"
                 />
               ) : (
                 <div className="w-full h-full flex items-center justify-center bg-stone-100 text-stone-300">
                   <Coffee size={48}/>
                 </div>
               )}
               
               {/* 漸層遮罩，讓文字更清楚或增加質感 */}
               <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-80 group-hover:opacity-60 transition-opacity"></div>

               {/* Icon Overlay */}
               <div className="absolute bottom-3 left-3 text-white drop-shadow-lg transform group-hover:scale-110 transition-transform">
                 {item.icon}
               </div>

               {item.severity && (
                  <span className={`absolute top-3 right-3 text-[10px] font-bold px-2 py-1 rounded-full backdrop-blur-md border shadow-sm ${
                      item.severity === 'High' || item.severity === 'Critical' ? 'bg-red-500/90 text-white border-red-400' : 'bg-stone-800/60 text-white border-stone-600'
                  }`}>
                    {t.severity}: {item.severity}
                  </span>
               )}
            </div>
            
            <div className="p-5 flex-1 flex flex-col">
              <div className="mb-4 flex-1">
                <h3 className="text-lg font-bold text-stone-800 leading-tight mb-1 group-hover:text-amber-600 transition-colors">{item.title}</h3>
                {item.subtitle && <p className="text-xs font-medium text-stone-500 uppercase tracking-wide">{item.subtitle}</p>}
                <p className="text-stone-600 text-sm mt-3 line-clamp-2 leading-relaxed">
                  {item.description}
                </p>
              </div>
              
              <div className="pt-4 border-t border-stone-100 flex items-center justify-between text-stone-400 group-hover:text-amber-600 transition-colors">
                <span className="text-xs font-bold uppercase tracking-wider">{t.readMore}</span>
                <div className="bg-stone-50 p-1.5 rounded-full group-hover:bg-amber-100 transition-colors">
                  <ChevronRight size={14} />
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const DetailModal = ({ item, onClose, type, lang }) => {
  if (!item) return null;
  const t = UI_TEXT[lang] || UI_TEXT['zh-TW'];

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-blue-950/90 backdrop-blur-md animate-fadeIn">
      <div className="bg-white rounded-2xl w-full max-w-5xl max-h-[90vh] overflow-y-auto shadow-2xl relative animate-slideUp flex flex-col lg:flex-row overflow-hidden">
        
        {/* 左側：大圖視覺區 */}
        <div className="w-full lg:w-5/12 relative min-h-[300px] lg:min-h-full">
           {item.image ? (
             <img src={item.image} alt={item.title} className="w-full h-full object-cover absolute inset-0" />
           ) : (
             <div className="w-full h-full bg-stone-200 flex items-center justify-center"><Coffee size={64} className="text-stone-300"/></div>
           )}
           <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent lg:bg-gradient-to-r lg:from-transparent lg:via-black/20 lg:to-black/90"></div>
           
           <button onClick={onClose} className="absolute top-4 left-4 lg:hidden bg-black/40 p-2 rounded-full text-white backdrop-blur-md z-20"><X size={20}/></button>

           <div className="absolute bottom-0 left-0 p-8 text-white w-full z-10">
              <span className="inline-block px-3 py-1 bg-amber-500/90 backdrop-blur-sm rounded-full text-xs font-bold tracking-wider mb-4 uppercase shadow-lg">{type}</span>
              <div className="flex items-center mb-4">
                <div className="p-2 bg-white/20 backdrop-blur-md rounded-lg mr-4">{item.icon}</div>
                <h2 className="text-3xl lg:text-4xl font-black leading-tight shadow-black drop-shadow-md">{item.title}</h2>
              </div>
              <p className="text-white/90 font-serif italic text-lg border-l-4 border-amber-500 pl-4">{item.subtitle}</p>
           </div>
        </div>

        {/* 右側：內容詳解區 */}
        <div className="w-full lg:w-7/12 p-8 lg:p-12 relative bg-white overflow-y-auto">
          <button onClick={onClose} className="absolute top-6 right-6 p-2 hover:bg-stone-100 rounded-full transition-colors hidden lg:block">
            <X size={24} className="text-stone-400 hover:text-stone-800" />
          </button>

          <div className="prose prose-stone max-w-none">
            <h3 className="text-stone-900 font-bold text-xl mb-6 flex items-center border-b pb-2 border-stone-100">
              <BookOpen size={20} className="mr-2 text-amber-600"/> {t.coreKnowledge}
            </h3>
            
            <div className="bg-amber-50/50 p-6 rounded-xl border border-amber-100 mb-8">
               <p className="text-stone-700 leading-relaxed text-lg m-0 font-medium">{item.description}</p>
            </div>
            
            {/* 圖文整合的詳細數據 */}
            {item.details && (
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
                {item.details.map((detail, idx) => (
                  <div key={idx} className="flex flex-col p-4 bg-stone-50 rounded-xl border border-stone-100 hover:border-amber-200 transition-colors">
                    <span className="text-stone-400 text-xs font-bold uppercase mb-1">{detail.label}</span>
                    <span className="text-stone-800 font-bold text-lg">{detail.value}</span>
                  </div>
                ))}
              </div>
            )}
            
            {/* 處理法流程 */}
            {item.flow && (
              <div className="mb-8">
                <h4 className="font-bold text-stone-800 mb-4 flex items-center"><Settings size={18} className="mr-2 text-blue-600"/> {t.processFlow}</h4>
                <div className="flex flex-wrap gap-2">
                  {item.flow.map((step, i) => (
                    <div key={i} className="flex items-center">
                      <div className="flex flex-col items-center">
                        <span className="bg-white text-stone-700 px-4 py-2 rounded-lg font-bold border-2 border-stone-100 shadow-sm text-sm">{step}</span>
                      </div>
                      {i < item.flow.length - 1 && <div className="w-6 h-[2px] bg-stone-300 mx-1"></div>}
                    </div>
                  ))}
                </div>
              </div>
            )}
            
            {/* 瑕疵影響 */}
            {item.impact && (
               <div className="bg-red-50 p-5 rounded-xl border border-red-100 text-red-800 mt-6 flex items-start">
                 <AlertCircle size={24} className="mr-3 shrink-0 mt-0.5"/> 
                 <div>
                    <div className="font-bold text-lg mb-1">{t.impact}</div>
                    <p className="opacity-90 m-0">{item.impact}</p>
                 </div>
               </div>
            )}

             {/* 沖煮參數 */}
             {item.guide && (
              <div className="bg-stone-900 text-white p-6 rounded-xl mt-6">
                <h4 className="font-bold mb-4 flex items-center text-amber-400"><Filter size={18} className="mr-2"/> Recipe</h4>
                <div className="grid grid-cols-4 gap-2 text-center">
                   <div><div className="text-xs text-stone-400 uppercase">Ratio</div><div className="font-bold text-lg">{item.guide.ratio}</div></div>
                   <div><div className="text-xs text-stone-400 uppercase">Temp</div><div className="font-bold text-lg">{item.guide.temp}</div></div>
                   <div><div className="text-xs text-stone-400 uppercase">Grind</div><div className="font-bold text-lg">{item.guide.grind}</div></div>
                   <div><div className="text-xs text-stone-400 uppercase">Time</div><div className="font-bold text-lg">{item.guide.time}</div></div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

const FlavorWheel = ({ data, lang }) => {
  const [activeSlice, setActiveSlice] = useState(null);
  const radius = 150;
  const center = 160;
  const t = UI_TEXT[lang] || UI_TEXT['zh-TW'];

  const createSlice = (index, total) => {
    const angle = 360 / total;
    const startAngle = (index * angle - 90) * (Math.PI / 180);
    const endAngle = ((index + 1) * angle - 90) * (Math.PI / 180);
    const x1 = center + radius * Math.cos(startAngle);
    const y1 = center + radius * Math.sin(startAngle);
    const x2 = center + radius * Math.cos(endAngle);
    const y2 = center + radius * Math.sin(endAngle);
    return `M${center},${center} L${x1},${y1} A${radius},${radius} 0 0,1 ${x2},${y2} Z`;
  };

  return (
    <div className="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-16 p-4">
      <div className="relative w-80 h-80 shrink-0 drop-shadow-2xl animate-fadeIn">
        <svg viewBox="0 0 320 320" className="w-full h-full transform transition-transform duration-700 hover:rotate-12">
          <circle cx={center} cy={center} r={radius + 5} fill="#fff" opacity="0.1" />
          {data.map((slice, i) => (
            <g key={slice.id} onClick={() => setActiveSlice(slice)} className="cursor-pointer group">
              <path
                d={createSlice(i, data.length)}
                fill={slice.color}
                className={`transition-all duration-300 hover:opacity-90 ${activeSlice?.id === slice.id ? 'opacity-100 scale-105' : 'opacity-80'}`}
                stroke="white" strokeWidth="2"
              />
              <text 
                x={center + (radius * 0.65) * Math.cos(((i + 0.5) * (360 / data.length) - 90) * (Math.PI / 180))} 
                y={center + (radius * 0.65) * Math.sin(((i + 0.5) * (360 / data.length) - 90) * (Math.PI / 180))}
                textAnchor="middle" fill="white" className="text-[10px] font-bold uppercase pointer-events-none drop-shadow-md"
                style={{ transformBox: 'fill-box', transformOrigin: 'center' }}
              >
                {slice.title.split(' ')[0]}
              </text>
            </g>
          ))}
          <circle cx={center} cy={center} r="30" fill="#1c1917" className="drop-shadow-lg"/>
          <text x={center} y={center} dy=".3em" textAnchor="middle" fill="white" className="text-xs font-bold">SCA</text>
        </svg>
      </div>

      <div className="flex-1 w-full max-w-md min-h-[200px] bg-stone-800/50 backdrop-blur-sm rounded-2xl p-6 border border-stone-700 transition-all duration-300">
        {activeSlice ? (
          <div className="animate-fadeIn">
            <h3 className="text-2xl font-bold mb-2 flex items-center" style={{ color: activeSlice.color }}>
              <Palette className="mr-2" /> {activeSlice.title}
            </h3>
            <p className="text-stone-300 mb-6 text-lg leading-relaxed">{activeSlice.desc}</p>
            <div>
              <span className="text-xs font-bold text-stone-500 uppercase tracking-wider block mb-3">Notes</span>
              <div className="flex flex-wrap gap-2">
                {activeSlice.notes.map((note, idx) => (
                  <span key={idx} className="px-3 py-1 rounded-full text-sm bg-stone-700 text-white border border-stone-600 shadow-sm">{note}</span>
                ))}
              </div>
            </div>
          </div>
        ) : (
          <div className="h-full flex flex-col items-center justify-center text-stone-500 space-y-4">
            <MousePointer2 className="w-12 h-12 animate-bounce opacity-50" />
            <p>Select a flavor<br/>點擊色塊查看細節</p>
          </div>
        )}
      </div>
    </div>
  );
};

const RoastingView = ({ data, lang }) => {
  const t = UI_TEXT[lang] || UI_TEXT['zh-TW'];
  return (
    <div className="p-6 md:p-12 bg-stone-900 min-h-screen text-stone-100">
      <div className="max-w-6xl mx-auto">
        <div className="mb-12">
          <h2 className="text-4xl font-black text-white mb-4">{t.tabs.roasting}</h2>
          <p className="text-stone-400 text-lg max-w-3xl">Roasting is the journey of heat. 烘焙是將生豆轉化為熟豆的「熱能旅程」。</p>
        </div>
        
        <div className="grid gap-6">
            {data.map((level) => (
              <div key={level.id} className="bg-stone-800 rounded-2xl overflow-hidden flex items-center p-6 border border-stone-700 hover:border-amber-500 transition-colors">
                <div className={`w-16 h-16 rounded-full ${level.color} shadow-lg flex items-center justify-center mr-6 shrink-0`}>
                  <Flame className="text-white/80" size={32}/>
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-white">{level.title}</h3>
                  <div className="flex items-center gap-4 mt-2 text-sm text-stone-400">
                     <span className="flex items-center"><Thermometer size={14} className="mr-1 text-amber-500"/> {level.temp}</span>
                     <span className="flex items-center"><Activity size={14} className="mr-1 text-amber-500"/> {level.flavor}</span>
                  </div>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
};

// --- 主程式 ---

export default function App() {
  const [activeTab, setActiveTab] = useState('home');
  const [selectedItem, setSelectedItem] = useState(null);
  const [lang, setLang] = useState('zh-TW'); // 預設繁體中文

  // 根據目前選擇的語言產生資料
  const currentData = useMemo(() => getCoffeeData(lang), [lang]);
  const t = UI_TEXT[lang] || UI_TEXT['zh-TW'];

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [activeTab]);

  const renderContent = () => {
    switch (activeTab) {
      case 'home':
        return <Hero onStart={(tab) => setActiveTab(tab)} lang={lang} />;
      case 'origins':
        return <CardGrid data={currentData.origins} category={t.tabs.origins} onSelect={setSelectedItem} lang={lang} />;
      case 'processing':
        return <CardGrid data={currentData.processing} category={t.tabs.processing} onSelect={setSelectedItem} lang={lang} />;
      case 'varieties':
        return <CardGrid data={currentData.varieties} category={t.tabs.varieties} onSelect={setSelectedItem} lang={lang} />;
      case 'brewing':
        return <CardGrid data={currentData.brewing} category={t.tabs.brewing} onSelect={setSelectedItem} lang={lang} />;
      case 'sensory':
        return (
           <div className="p-6 md:p-12 bg-stone-50 min-h-screen">
             <div className="max-w-6xl mx-auto">
               <h2 className="text-4xl font-black text-stone-900 mb-8 text-center">{t.tabs.sensory}</h2>
               <div className="bg-white rounded-3xl shadow-xl p-4 md:p-8 border border-stone-100">
                 <FlavorWheel data={currentData.sensory} lang={lang} />
               </div>
             </div>
           </div>
        );
      case 'roasting':
        return <RoastingView data={currentData.roasting_levels} lang={lang} />; 
      case 'grinding':
        return <CardGrid data={currentData.grinding} category={t.tabs.grinding} onSelect={null} lang={lang} />;
      case 'defects':
         return <CardGrid data={currentData.defects} category={t.tabs.defects} onSelect={setSelectedItem} lang={lang} />;
      case 'quiz':
        return (
          <div className="min-h-screen flex items-center justify-center bg-stone-100 p-4">
            <div className="bg-white p-12 rounded-3xl shadow-xl max-w-2xl w-full text-center">
              <Award className="w-20 h-20 text-amber-500 mx-auto mb-6"/>
              <h2 className="text-3xl font-black text-stone-800 mb-4">{t.tabs.quiz}</h2>
              <p className="text-stone-600 mb-8">Feature coming soon.</p>
            </div>
          </div>
        );
      default:
        return <Hero onStart={(tab) => setActiveTab(tab)} lang={lang} />;
    }
  };

  return (
    <div className="font-sans bg-stone-50 min-h-screen text-stone-900 selection:bg-amber-200">
      <Navigation activeTab={activeTab} setActiveTab={setActiveTab} lang={lang} setLang={setLang} />
      
      <main className="animate-fadeIn min-h-screen pb-20">
        {renderContent()}
      </main>

      {selectedItem && (
        <DetailModal 
          item={selectedItem} 
          onClose={() => setSelectedItem(null)} 
          type={activeTab}
          lang={lang}
        />
      )}
      
      <footer className="bg-blue-950 text-blue-200 py-12 text-center border-t border-blue-900">
        <div className="flex items-center justify-center mb-6 space-x-3">
          <Coffee size={24} className="text-amber-400" />
          <span className="font-bold text-white text-xl">里響咖啡<span className="text-amber-400">知識百科</span></span>
        </div>
        <div className="mb-8 space-y-2">
           <p className="text-sm opacity-80">阿里山咖啡的領航者，帶您聽見山裡的聲音。</p>
           <a href="https://www.reshockcoffee.com/" target="_blank" rel="noreferrer" className="text-amber-400 hover:text-amber-300 underline text-sm inline-block">
             www.reshockcoffee.com
           </a>
        </div>
        <p className="text-xs opacity-40">
          © 2024 Reshock Coffee. All rights reserved.
        </p>
      </footer>

      <style>{`
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .animate-fadeIn { animation: fadeIn 0.5s ease-out; }
        .animate-slideUp { animation: slideUp 0.4s ease-out; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>
    </div>
  );
}