import { useState } from 'react';
import { motion } from 'framer-motion';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default function Lesson1Page() {
  const [activeSection, setActiveSection] = useState('intro');

  const scrollToSection = (sectionId: string) => {
    setActiveSection(sectionId);
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div className="flex flex-col md:flex-row gap-6">
      {/* Sidebar Navigation */}
      <div className="md:w-1/4 lg:w-1/5">
        <div className="bg-white rounded-xl shadow-md p-6 sticky top-24">
          <h3 className="text-lg font-bold text-gray-800 mb-4">課程目錄</h3>
          <nav className="space-y-2">
            <button 
              onClick={() => scrollToSection('intro')}
              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                activeSection === 'intro' 
                  ? 'bg-blue-100 text-blue-700' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              課程目標
            </button>
            <button 
              onClick={() => scrollToSection('part1')}
              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                activeSection === 'part1' 
                  ? 'bg-blue-100 text-blue-700' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              Roblox 平台介紹
            </button>
            <button 
              onClick={() => scrollToSection('part2')}
              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                activeSection === 'part2' 
                  ? 'bg-blue-100 text-blue-700' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              Roblox 基本操作
            </button>
            <button 
              onClick={() => scrollToSection('part3')}
              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                activeSection === 'part3' 
                  ? 'bg-blue-100 text-blue-700' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              Roblox Studio 環境熟悉
            </button>
            <button 
              onClick={() => scrollToSection('summary')}
              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                activeSection === 'summary' 
                  ? 'bg-blue-100 text-blue-700' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              總結與練習
            </button>
          </nav>
        </div>
      </div>

      {/* Main Content */}
      <div className="md:w-3/4 lg:w-4/5">
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-8 mb-8 text-white">
            <h1 className="text-3xl md:text-4xl font-bold mb-4">Roblox 基礎入門 - 第一課</h1>
            <p className="text-lg opacity-90">
              從零開始學習 Roblox，了解平台基礎與 Studio 開發環境
            </p>
          </div>

          {/* Course Objectives */}
          <section id="intro" className="mb-12 scroll-mt-24">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">課程目標</h2>
            <div className="bg-white rounded-xl shadow-md p-6">
              <p className="text-gray-700 mb-4">
                本課程旨在幫助初學者了解 Roblox 平台的基本概念，掌握基本操作，並熟悉 Roblox Studio 開發環境。通過本課程，學員將能夠：
              </p>
              <ul className="list-disc pl-6 space-y-2 text-gray-700">
                <li>了解 Roblox 平台的基本概念與特色</li>
                <li>掌握 Roblox 平台的基本操作方式</li>
                <li>熟悉 Roblox Studio 開發環境的界面與功能</li>
                <li>創建一個簡單的 Roblox 場景</li>
              </ul>
            </div>
          </section>

          {/* Part 1: Roblox Platform Introduction */}
          <section id="part1" className="mb-12 scroll-mt-24">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">第一部分：Roblox 平台介紹</h2>
            
            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">Roblox 是什麼？</h3>
              <p className="text-gray-700 mb-4">
                Roblox 是一個全球性平台，每天有成千上萬人在這裡的沉浸式使用者創作 3D 世界裡一起想像、創作及分享體驗。在 Roblox 中，您可以找到各種類型的體驗，這些多樣化的體驗充分展現了創作者們廣闊的想像力。
              </p>
              <p className="text-gray-700 mb-4">
                Roblox 的獨特之處在於，平台上所有的體驗和大部分虛擬人偶道具都是由全球社群創作的。這意味著 Roblox 不僅是一個遊戲平台，更是一個創作平台，讓使用者可以自由發揮創意，創造屬於自己的虛擬世界。
              </p>
              <div className="my-6 flex justify-center">
                <img 
                  src="/roblox-platform.webp" 
                  alt="Roblox 平台介紹" 
                  className="rounded-lg shadow-md max-w-full h-auto"
                />
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">Roblox 的特色</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">創作與分享</h4>
                  <p className="text-gray-700">
                    Roblox 允許使用者創建自己的遊戲和體驗，並與全球數百萬玩家分享。
                  </p>
                </div>
                <div className="bg-purple-50 p-4 rounded-lg">
                  <h4 className="font-bold text-purple-800 mb-2">社交互動</h4>
                  <p className="text-gray-700">
                    使用者可以與朋友一起遊玩，參與各種社交活動，建立虛擬社區。
                  </p>
                </div>
                <div className="bg-green-50 p-4 rounded-lg">
                  <h4 className="font-bold text-green-800 mb-2">跨平台體驗</h4>
                  <p className="text-gray-700">
                    Roblox 支援多種設備，包括電腦、手機、平板和遊戲主機，讓使用者可以隨時隨地享受 Roblox 體驗。
                  </p>
                </div>
                <div className="bg-yellow-50 p-4 rounded-lg">
                  <h4 className="font-bold text-yellow-800 mb-2">虛擬經濟系統</h4>
                  <p className="text-gray-700">
                    Roblox 擁有自己的虛擬貨幣 Robux，使用者可以通過創作內容賺取 Robux，甚至將其兌換為真實貨幣。
                  </p>
                </div>
                <div className="bg-pink-50 p-4 rounded-lg md:col-span-2">
                  <h4 className="font-bold text-pink-800 mb-2">持續更新與發展</h4>
                  <p className="text-gray-700">
                    Roblox 平台不斷推出新功能和工具，為創作者提供更多可能性。
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">Roblox 的應用領域</h3>
              <p className="text-gray-700 mb-4">
                除了娛樂，Roblox 也被廣泛應用於教育領域。許多教育工作者利用 Roblox 教授編程、設計和創意思維等技能。通過在 Roblox 上開發，使用者可以培養問題解決、團隊合作和程式編寫等重要能力，同時也能發展數理工科（STEM）技能。
              </p>
              <div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-bold text-blue-800 mb-2">教育價值</h4>
                <ul className="list-disc pl-6 space-y-1 text-gray-700">
                  <li>培養程式設計思維</li>
                  <li>發展 3D 建模與空間思考能力</li>
                  <li>鍛煉創意解決問題的能力</li>
                  <li>學習團隊協作與專案管理</li>
                  <li>理解基本經濟概念與市場運作</li>
                </ul>
              </div>
            </div>
          </section>

          {/* Part 2: Roblox Basic Operations */}
          <section id="part2" className="mb-12 scroll-mt-24">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">第二部分：Roblox 基本操作</h2>
            
            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">註冊與登入</h3>
              <p className="text-gray-700 mb-4">
                要開始使用 Roblox，首先需要創建一個帳號。訪問 <a href="https://www.roblox.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Roblox 官網</a>，點擊「註冊」按鈕，填寫相關信息即可完成註冊。註冊後，您可以使用您的用戶名和密碼登入 Roblox 平台。
              </p>
              <div className="bg-yellow-50 p-4 rounded-lg">
                <h4 className="font-bold text-yellow-800 mb-2">註冊提示</h4>
                <ul className="list-disc pl-6 space-y-1 text-gray-700">
                  <li>選擇一個容易記住但難以猜測的密碼</li>
                  <li>使用真實的出生日期（這會影響帳號的安全設置）</li>
                  <li>考慮啟用雙重驗證以增強帳號安全性</li>
                </ul>
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">探索 Roblox 平台</h3>
              <p className="text-gray-700 mb-4">
                登入後，您將看到 Roblox 的主頁面，這裡展示了推薦的遊戲和體驗。您可以通過頂部的導航欄訪問不同的頁面：
              </p>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">首頁</h4>
                  <p className="text-gray-700">顯示推薦的遊戲和體驗</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">發現</h4>
                  <p className="text-gray-700">瀏覽不同類別的遊戲和體驗</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">市場</h4>
                  <p className="text-gray-700">購買虛擬物品，如服裝、配件等</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">創建</h4>
                  <p className="text-gray-700">訪問 Roblox Studio 和創作相關資源</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">Robux</h4>
                  <p className="text-gray-700">購買和管理虛擬貨幣</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">個人資料</h4>
                  <p className="text-gray-700">查看和編輯個人信息</p>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">遊玩體驗</h3>
              <p className="text-gray-700 mb-4">
                在 Roblox 中遊玩體驗非常簡單：
              </p>
              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
                <li>在首頁或發現頁面找到您感興趣的體驗</li>
                <li>點擊體驗卡片進入詳情頁</li>
                <li>點擊「遊玩」按鈕開始體驗</li>
                <li>等待體驗加載完成後，您就可以開始遊玩了</li>
              </ol>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">基本控制</h3>
              <p className="text-gray-700 mb-4">
                在大多數 Roblox 體驗中，基本控制方式如下：
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">移動</h4>
                  <p className="text-gray-700">使用 W, A, S, D 鍵或方向鍵控制角色移動</p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">跳躍</h4>
                  <p className="text-gray-700">按空格鍵</p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">視角控制</h4>
                  <p className="text-gray-700">移動滑鼠來改變視角</p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">互動</h4>
                  <p className="text-gray-700">點擊滑鼠左鍵或按 E 鍵與物體互動（具體按鍵可能因體驗而異）</p>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">社交功能</h3>
              <p className="text-gray-700 mb-4">
                Roblox 提供了豐富的社交功能，讓使用者可以與朋友互動：
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-purple-50 p-4 rounded-lg">
                  <h4 className="font-bold text-purple-800 mb-2">添加好友</h4>
                  <p className="text-gray-700">訪問其他使用者的個人資料頁面，點擊「添加好友」按鈕</p>
                </div>
                <div className="bg-purple-50 p-4 rounded-lg">
                  <h4 className="font-bold text-purple-800 mb-2">聊天</h4>
                  <p className="text-gray-700">通過聊天功能與好友交流</p>
                </div>
                <div className="bg-purple-50 p-4 rounded-lg">
                  <h4 className="font-bold text-purple-800 mb-2">組隊</h4>
                  <p className="text-gray-700">邀請好友一起遊玩體驗</p>
                </div>
                <div className="bg-purple-50 p-4 rounded-lg">
                  <h4 className="font-bold text-purple-800 mb-2">加入群組</h4>
                  <p className="text-gray-700">參與社區活動，結識志同道合的玩家</p>
                </div>
              </div>
            </div>
          </section>

          {/* Part 3: Roblox Studio Environment */}
          <section id="part3" className="mb-12 scroll-mt-24">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">第三部分：Roblox Studio 環境熟悉</h2>
            
            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">什麼是 Roblox Studio？</h3>
              <p className="text-gray-700 mb-4">
                Roblox Studio 是 Roblox 的官方開發工具，它允許創作者設計、構建和發布自己的 Roblox 體驗。無論您是初學者還是有經驗的開發者，Roblox Studio 都提供了豐富的工具和資源，幫助您實現創意。
              </p>
              <div className="my-6 flex justify-center">
                <img 
                  src="/roblox-studio.webp" 
                  alt="Roblox Studio 介紹" 
                  className="rounded-lg shadow-md max-w-full h-auto"
                />
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">安裝 Roblox Studio</h3>
              <p className="text-gray-700 mb-4">
                要開始使用 Roblox Studio，請按照以下步驟操作：
              </p>
              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
                <li>訪問 <a href="https://www.roblox.com/create" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Roblox 創建頁面</a></li>
                <li>點擊「開始創建」按鈕</li>
                <li>如果您尚未安裝 Roblox Studio，系統會提示您下載並安裝</li>
                <li>安裝完成後，使用您的 Roblox 帳號登入 Studio</li>
              </ol>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">Roblox Studio 界面概覽</h3>
              <p className="text-gray-700 mb-4">
                首次打開 Roblox Studio 時，您會看到一個起始頁面，提供了多種模板供您選擇。選擇一個模板後，您將進入 Studio 的主界面，主要包括以下部分：
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">菜單欄</h4>
                  <p className="text-gray-700">位於頂部，包含文件、編輯、視圖等選項</p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">工具欄</h4>
                  <p className="text-gray-700">包含常用工具按鈕，如選擇、移動、縮放等</p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">資源管理器</h4>
                  <p className="text-gray-700">顯示場景中的所有物體和組件</p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">屬性面板</h4>
                  <p className="text-gray-700">顯示選中物體的屬性和設置</p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">工作區</h4>
                  <p className="text-gray-700">主要的 3D 編輯區域，您可以在這裡構建和編輯場景</p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">輸出窗口</h4>
                  <p className="text-gray-700">顯示腳本執行結果和錯誤信息</p>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">基本工具使用</h3>
              <p className="text-gray-700 mb-4">
                Roblox Studio 提供了多種工具，幫助您創建和編輯場景：
              </p>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">選擇工具</h4>
                  <p className="text-gray-700">用於選擇場景中的物體</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">移動工具</h4>
                  <p className="text-gray-700">用於移動物體的位置</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">旋轉工具</h4>
                  <p className="text-gray-700">用於旋轉物體</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h4 className="font-bold text-blue-800 mb-2">縮放工具</h4>
                  <p className="text-gray-700">用於調整物體的大小</p>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg md:col-span-2">
                  <h4 className="font-bold text-blue-800 mb-2">部件工具</h4>
                  <p className="text-gray-700">用於創建基本形狀，如方塊、球體等</p>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">創建簡單場景</h3>
              <p className="text-gray-700 mb-4">
                讓我們通過創建一個簡單的場景來熟悉 Roblox Studio 的基本操作：
              </p>
              <div className="space-y-4">
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">1. 創建新項目</h4>
                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
                    <li>打開 Roblox Studio</li>
                    <li>選擇「基礎模板」創建新項目</li>
                  </ul>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">2. 添加地形</h4>
                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
                    <li>點擊「模型」選項卡</li>
                    <li>選擇「地形編輯器」</li>
                    <li>使用地形工具創建基本地形</li>
                  </ul>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">3. 添加物體</h4>
                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
                    <li>在工具欄中選擇「部件」工具</li>
                    <li>點擊工作區創建一個方塊</li>
                    <li>使用移動、旋轉和縮放工具調整方塊的位置和大小</li>
                  </ul>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">4. 設置屬性</h4>
                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
                    <li>在資源管理器中選擇創建的方塊</li>
                    <li>在屬性面板中修改顏色、材質等屬性</li>
                  </ul>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">5. 測試場景</h4>
                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
                    <li>點擊「播放」按鈕測試場景</li>
                    <li>使用 WASD 鍵和空格鍵控制角色移動和跳躍</li>
                  </ul>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <h4 className="font-bold text-gray-800 mb-2">6. 保存項目</h4>
                  <ul className="list-disc pl-6 space-y-1 text-gray-700">
                    <li>點擊「文件」{'>'}「保存」</li>
                    <li>輸入項目名稱並保存</li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">發布體驗</h3>
              <p className="text-gray-700 mb-4">
                完成場景創建後，您可以將其發布到 Roblox 平台，與其他玩家分享：
              </p>
              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
                <li>點擊「文件」{'>'}「發布到 Roblox」</li>
                <li>設置體驗名稱、描述和縮略圖</li>
                <li>選擇發布選項（公開或私人）</li>
                <li>點擊「發布」按鈕</li>
              </ol>
            </div>
          </section>

          {/* Summary and Practice */}
          <section id="summary" className="mb-12 scroll-mt-24">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">總結</h2>
            
            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <p className="text-gray-700 mb-4">
                在本課程中，我們介紹了 Roblox 平台的基本概念，學習了 Roblox 的基本操作方式，並熟悉了 Roblox Studio 開發環境。通過這些基礎知識，您已經具備了開始 Roblox 創作之旅的能力。
              </p>
              <p className="text-gray-700 mb-4">
                在接下來的課程中，我們將深入探討 Roblox Studio 的更多功能，學習如何創建更複雜的場景，添加互動元素，以及使用 Lua 腳本為體驗添加邏輯和功能。
              </p>
            </div>

            <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">練習任務</h3>
              <p className="text-gray-700 mb-4">
                為了鞏固所學知識，請嘗試完成以下任務：
              </p>
              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
                <li>創建一個 Roblox 帳號並探索平台</li>
                <li>遊玩至少三個不同類型的 Roblox 體驗</li>
                <li>安裝 Roblox Studio 並熟悉界面</li>
                <li>使用基礎模板創建一個簡單的場景，包含地形和至少三個不同的物體</li>
                <li>測試您創建的場景並保存項目</li>
              </ol>
            </div>

            <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-green-700 mb-3">資源推薦</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <a href="https://create.roblox.com/docs" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者文檔</h4>
                  <p className="text-gray-700">官方開發文檔，包含詳細的 API 參考和教程</p>
                </a>
                <a href="https://education.roblox.com/" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                  <h4 className="font-bold text-blue-800 mb-2">Roblox 教育資源</h4>
                  <p className="text-gray-700">專為教育者和學生設計的學習資源</p>
                </a>
                <a href="https://devforum.roblox.com/" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者論壇</h4>
                  <p className="text-gray-700">與其他開發者交流，獲取幫助和分享經驗</p>
                </a>
                <a href="https://www.youtube.com/channel/UCjiPEaapiHbJMoAdi_L8fNA" target="_blank" rel="noopener noreferrer" className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
                  <h4 className="font-bold text-blue-800 mb-2">Roblox 開發者 YouTube 頻道</h4>
                  <p className="text-gray-700">官方視頻教程和開發者更新</p>
                </a>
              </div>
            </div>
          </section>

          {/* Navigation Buttons */}
          <div className="flex justify-between mt-12">
            <a 
              href="/" 
              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clipRule="evenodd" />
              </svg>
              返回首頁
            </a>
            <a 
              href="/lesson2" 
              className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center"
            >
              下一課：賽車遊戲
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
              </svg>
            </a>
          </div>
        </motion.div>
      </div>
    </div>
  );
}