src/pages/Lesson4Page.tsx

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';

const cubeGeneratorScript = `
-- 立方體生成函數
local function createCube(position, size, color, transparency)
    local cube = Instance.new("Part")
    cube.Size = Vector3.new(size, size, size)
    cube.Position = position
    cube.Anchored = true
    cube.CanCollide = false
    cube.Material = Enum.Material.Neon
    cube.Color = color or Color3.fromRGB(0, 170, 255)
    cube.Transparency = transparency or 0.5
    cube.Parent = workspace
    
    -- 添加發光效果
    local light = Instance.new("PointLight")
    light.Range = size * 2
    light.Brightness = 0.5
    light.Color = color or Color3.fromRGB(0, 170, 255)
    light.Parent = cube
    
    return cube
end

-- 創建立方體網格陣列
local function createCubeGrid(centerPosition, gridSize, cubeSize, spacing)
    local model = Instance.new("Model")
    model.Name = "CubeGrid"
    model.Parent = workspace
    
    for x = -gridSize/2, gridSize/2 do
        for y = -gridSize/2, gridSize/2 do
            for z = -gridSize/2, gridSize/2 do
                -- 計算位置
                local position = centerPosition + Vector3.new(
                    x * (cubeSize + spacing),
                    y * (cubeSize + spacing),
                    z * (cubeSize + spacing)
                )
                
                -- 根據位置計算顏色（漸變效果）
                local color = Color3.fromHSV(
                    (x + gridSize/2) / gridSize,
                    (y + gridSize/2) / gridSize,
                    (z + gridSize/2) / gridSize
                )
                
                -- 創建立方體
                local cube = createCube(position, cubeSize, color, 0.5)
                cube.Parent = model
            end
        end
    end
    
    return model
end
`;

const dnaStructureScript = `
-- 創建DNA雙螺旋結構
local function createDNAStructure(centerPosition, height, radius, turns)
    local model = Instance.new("Model")
    model.Name = "DNAStructure"
    model.Parent = workspace
    
    local pointsPerTurn = 20 -- 每圈點數
    local totalPoints = turns * pointsPerTurn -- 總點數
    
    -- 創建兩條螺旋骨架
    for i = 0, totalPoints do
        local angle = (i / pointsPerTurn) * math.pi * 2
        local y = (i / totalPoints) * height
        
        -- 第一條螺旋
        local x1 = math.cos(angle) * radius
        local z1 = math.sin(angle) * radius
        local position1 = centerPosition + Vector3.new(x1, y, z1)
        local cube1 = createCube(position1, 0.4, Color3.fromRGB(0, 200, 255), 0.3)
        cube1.Parent = model
        
        -- 第二條螺旋 (相位差180度)
        local x2 = math.cos(angle + math.pi) * radius
        local z2 = math.sin(angle + math.pi) * radius
        local position2 = centerPosition + Vector3.new(x2, y, z2)
        local cube2 = createCube(position2, 0.4, Color3.fromRGB(0, 255, 200), 0.3)
        cube2.Parent = model
        
        -- 每隔幾個點添加連接橫桿
        if i % 4 == 0 then
            -- 創建連接兩條螺旋的橫桿
            local connector = Instance.new("Part")
            connector.Size = Vector3.new(radius * 2, 0.2, 0.2)
            connector.CFrame = CFrame.new(
                centerPosition + Vector3.new((x1 + x2) / 2, y, (z1 + z2) / 2),
                centerPosition + Vector3.new(x2, y, z2)
            )
            connector.Anchored = true
            connector.CanCollide = false
            connector.Material = Enum.Material.Neon
            connector.Color = Color3.fromRGB(255, 255, 255)
            connector.Transparency = 0.7
            connector.Parent = model
        end
    end
    
    return model
end
`;

const holographicProjectionScript = `
-- 服務引用
local RunService = game:GetService("RunService")
local TweenService = game:GetService("TweenService")

-- 常數設定
local GRID_SIZE = 20 -- 網格大小
local BASE_COLOR = Color3.fromRGB(0, 100, 150) -- 基本顏色（藍色）

-- 創建容器模型
local hologramModel = Instance.new("Model")
hologramModel.Name = "HologramModel"
hologramModel.Parent = workspace

-- 創建投影平台
local function createProjectionBase()
    local base = Instance.new("Part")
    base.Name = "ProjectionBase"
    base.Size = Vector3.new(GRID_SIZE * 1.5, 0.5, GRID_SIZE * 1.5)
    base.Position = Vector3.new(0, 0, 0)
    base.Anchored = true
    base.CanCollide = true
    base.Material = Enum.Material.Neon
    base.Color = BASE_COLOR
    base.Transparency = 0.2
    base.Parent = hologramModel
    
    -- 添加投影光環
    local ring = Instance.new("Part")
    ring.Name = "ProjectionRing"
    ring.Shape = Enum.PartType.Cylinder
    ring.Size = Vector3.new(0.2, base.Size.X * 1.1, base.Size.Z * 1.1)
    ring.CFrame = base.CFrame * CFrame.Angles(0, 0, math.rad(90))
    ring.Anchored = true
    ring.CanCollide = false
    ring.Material = Enum.Material.Neon
    ring.Color = Color3.fromRGB(0, 200, 255)
    ring.Transparency = 0.5
    ring.Parent = hologramModel
    
    return base
end

-- 添加投影光束
local function createProjectionBeam(base)
    -- 創建光束起點
    local attachment1 = Instance.new("Attachment")
    attachment1.Position = Vector3.new(0, -2, 0)
    attachment1.Parent = base
    
    -- 創建光束終點
    local attachment2 = Instance.new("Attachment")
    attachment2.Position = Vector3.new(0, 15, 0)
    attachment2.Parent = base
    
    -- 創建光束
    local beam = Instance.new("Beam")
    beam.Attachment0 = attachment1
    beam.Attachment1 = attachment2
    beam.Width0 = 5
    beam.Width1 = 2
    beam.FaceCamera = true
    beam.LightEmission = 1
    beam.LightInfluence = 0
    beam.Transparency = NumberSequence.new({
        NumberSequenceKeypoint.new(0, 0.7),
        NumberSequenceKeypoint.new(1, 0.9)
    })
    beam.Color = ColorSequence.new(Color3.fromRGB(0, 200, 255))
    beam.Parent = base
    
    return beam
end
`;

export default function Lesson4Page() {
  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'
              }`}
            >
              科技感圖像設計概念
            </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'
              }`}
            >
              立方體模型建構
            </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'
              }`}
            >
              科技感圖像實例
            </button>
            <button 
              onClick={() => scrollToSection('part4')}
              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                activeSection === 'part4' 
                  ? 'bg-blue-100 text-blue-700' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              立體投影效果實現
            </button>
            <button 
              onClick={() => scrollToSection('part5')}
              className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                activeSection === 'part5' 
                  ? 'bg-blue-100 text-blue-700' 
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              互動控制與優化
            </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-cyan-500 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">
              探索程式與視覺藝術的完美結合，使用立方體 Part 創建令人驚嘆的科技感立體投影
            </p>
          </div>

          {/* Course Introduction */}
          <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 中的視覺化程式設計，通過使用立方體 Part 創建科技感的立體投影圖像，展現程式與視覺藝術的完美結合。學習者將掌握如何使用程式化方法生成複雜的視覺效果，並實現互動式的立體投影展示。
              </p>
              <h3 className="text-xl font-bold text-blue-700 mb-3">課程目標</h3>
              <ul className="list-disc pl-6 space-y-2 text-gray-700">
                <li>在 Roblox Studio 中使用立方體 Part 創建複雜的科技感圖像</li>
                <li>設計並實現立體投影效果</li>
                <li>編寫程式控制圖像的動態變化與互動</li>
                <li>掌握粒子效果與光源運用技巧</li>
              </ul>
              <h3 className="text-xl font-bold text-blue-700 mt-6 mb-3">前置準備</h3>
              <ul className="list-disc pl-6 space-y-2 text-gray-700">
                <li>已安裝最新版本的 Roblox Studio</li>
                <li>具備 Roblox Studio 基本操作能力（第一課內容）</li>
                <li>了解基本的 Lua 程式語法（第二課與第三課內容）</li>
                <li>對視覺設計有基本興趣</li>
              </ul>
            </div>
          </section>

          {/* Part 1: Design Concepts */}
          <section id="part1" 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">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：了解科技感設計元素</h3>
              <p className="text-gray-700 mb-4">
                科技感設計通常包含以下元素：
              </p>
              <ul className="list-disc pl-6 space-y-2 text-gray-700 mb-4">
                <li><strong>幾何形狀與線條</strong>：使用簡潔的幾何形狀、直線和網格</li>
                <li><strong>色彩選擇</strong>：藍色、青色等冷色調，高對比度</li>
                <li><strong>光影效果</strong>：發光、半透明、光束</li>
                <li><strong>動態變化</strong>：脈衝、旋轉、懸浮效果</li>
              </ul>
              <p className="text-gray-700 mb-4">
                在 Roblox 中，我們可以通過以下方式實現這些元素：
              </p>
              <ul className="list-disc pl-6 space-y-2 text-gray-700">
                <li>使用立方體 Part 創建基本形狀</li>
                <li>調整材質、顏色和透明度</li>
                <li>添加光源和粒子效果</li>
                <li>使用腳本控制動態變化</li>
              </ul>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 2：規劃立方體陣列設計</h3>
              <p className="text-gray-700 mb-4">
                立方體陣列是創建複雜科技感圖像的基礎，主要設計思路包括：
              </p>
              <div className="space-y-4">
                <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>每個網格點放置一個立方體</li>
                    <li>通過控制立方體的存在、大小、顏色等屬性形成圖像</li>
                  </ul>
                </div>
                
                <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>使用函數生成不同的模塊</li>
                    <li>組合模塊形成完整圖像</li>
                  </ul>
                </div>
                
                <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>使用參數控制整體效果</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">步驟 3：創建新專案</h3>
              <ol className="list-decimal pl-6 space-y-2 text-gray-700">
                <li>打開 Roblox Studio</li>
                <li>選擇「基礎模板」創建新專案</li>
                <li>保存專案，命名為「HolographicProjection」</li>
              </ol>
            </div>
          </section>

          {/* Part 2: Cube Model Construction */}
          <section id="part2" 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">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：創建基本立方體</h3>
              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
                <li>在工作區中插入一個方塊部件（Part）</li>
                <li>調整立方體屬性：
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>Size: 0.5, 0.5, 0.5 (寬, 高, 長)</li>
                    <li>Color: 設置為藍色 (0, 170, 255)</li>
                    <li>Material: Neon</li>
                    <li>Transparency: 0.5</li>
                    <li>Anchored: true</li>
                    <li>CanCollide: false</li>
                  </ul>
                </li>
                <li>添加發光效果：
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>在立方體中添加 PointLight</li>
                    <li>Range: 1</li>
                    <li>Brightness: 0.5</li>
                    <li>Color: 與立方體相同顏色</li>
                  </ul>
                </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">步驟 2：創建立方體生成函數</h3>
              <p className="text-gray-700 mb-4">
                為了更有效地創建多個立方體，我們需要編寫一個函數來生成它們：
              </p>
              <ol className="list-decimal pl-6 space-y-2 text-gray-700 mb-4">
                <li>在 ServerScriptService 中添加腳本，命名為「CubeGenerator」</li>
                <li>編寫立方體生成函數</li>
                <li>測試立方體生成</li>
              </ol>
              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg">
                {cubeGeneratorScript}
              </SyntaxHighlighter>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：創建立方體陣列</h3>
              <p className="text-gray-700 mb-4">
                使用迴圈創建立方體陣列，形成基本的三維網格結構：
              </p>
              <div className="bg-gray-100 p-4 rounded-lg mb-4">
                <p className="text-gray-700 font-mono">
                  -- 創建一個 5x5x5 的立方體網格<br/>
                  local grid = createCubeGrid(Vector3.new(0, 10, 0), 5, 0.5, 0.2)
                </p>
              </div>
              <p className="text-gray-700">
                這段代碼將在空間中創建一個 5x5x5 的立方體網格，每個立方體大小為 0.5，間距為 0.2，中心位置在 (0, 10, 0)。
              </p>
            </div>
          </section>

          {/* Part 3: Tech Image Examples */}
          <section id="part3" 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">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：創建 DNA 雙螺旋結構</h3>
              <p className="text-gray-700 mb-4">
                DNA 雙螺旋是一個很好的科技感圖像範例，我們可以使用立方體來構建它：
              </p>
              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg mb-4">
                {dnaStructureScript}
              </SyntaxHighlighter>
              <div className="bg-gray-100 p-4 rounded-lg">
                <p className="text-gray-700 font-mono">
                  -- 創建一個 DNA 雙螺旋結構<br/>
                  local dna = createDNAStructure(Vector3.new(0, 5, 0), 15, 3, 3)
                </p>
              </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">步驟 2：創建全息投影地球</h3>
              <p className="text-gray-700 mb-4">
                全息地球是另一個很酷的科技感圖像，使用立方體點陣模擬球體：
              </p>
              <div className="bg-blue-50 p-4 rounded-lg mb-4">
                <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>根據隨機值決定是陸地還是海洋，設置不同顏色</li>
                  <li>添加經緯線網格增強科技感</li>
                </ul>
              </div>
              <p className="text-gray-700">
                實現代碼會創建一個由小立方體組成的球體，模擬地球表面，並添加經緯線網格增強科技感。
              </p>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：創建 3D 數據可視化圖表</h3>
              <p className="text-gray-700 mb-4">
                數據可視化是科技感圖像的重要應用：
              </p>
              <div className="bg-blue-50 p-4 rounded-lg mb-4">
                <h4 className="font-bold text-blue-800 mb-2">3D 數據圖表實現要點</h4>
                <ul className="list-disc pl-6 space-y-1 text-gray-700">
                  <li>創建 X、Y、Z 三個坐標軸</li>
                  <li>根據數據值生成不同高度的柱體</li>
                  <li>使用顏色漸變表示數據值大小</li>
                </ul>
              </div>
              <p className="text-gray-700">
                實現代碼會創建一個三維座標系，並在其中生成數據柱體，柱體高度和顏色根據數據值變化。
              </p>
            </div>
          </section>

          {/* Part 4: Holographic Projection */}
          <section id="part4" 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">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：創建投影平台</h3>
              <p className="text-gray-700 mb-4">
                投影平台是立體投影效果的基礎：
              </p>
              <SyntaxHighlighter language="lua" style={vscDarkPlus} className="rounded-lg">
                {holographicProjectionScript}
              </SyntaxHighlighter>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 2：添加投影光效</h3>
              <p className="text-gray-700 mb-4">
                為了增強立體投影效果，我們需要添加光效：
              </p>
              <div className="bg-blue-50 p-4 rounded-lg mb-4">
                <h4 className="font-bold text-blue-800 mb-2">投影光效關鍵元素</h4>
                <ul className="list-disc pl-6 space-y-1 text-gray-700">
                  <li>光束效果：使用 Beam 物件創建從底部向上的光束</li>
                  <li>環繞粒子：使用 ParticleEmitter 創建環繞投影的粒子效果</li>
                  <li>脈衝光環：使用 TweenService 創建平台邊緣的脈衝光環</li>
                </ul>
              </div>
              <p className="text-gray-700">
                這些視覺效果結合起來，能夠創造出逼真的科幻全息投影感。
              </p>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：實現投影切換效果</h3>
              <p className="text-gray-700 mb-4">
                為了展示不同的科技感圖像，我們需要實現投影切換功能：
              </p>
              <div className="bg-blue-50 p-4 rounded-lg mb-4">
                <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>設置模型顯示/隱藏邏輯</li>
                  <li>添加切換時的視覺效果（如淡入淡出、粒子爆發等）</li>
                </ul>
              </div>
              <p className="text-gray-700">
                通過這種方式，玩家可以輕鬆切換不同的科技感圖像，增強互動體驗。
              </p>
            </div>
          </section>

          {/* Part 5: Interactive Control */}
          <section id="part5" 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">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 1：添加旋轉控制</h3>
              <p className="text-gray-700 mb-4">
                為了讓玩家能夠從不同角度觀察投影模型，我們可以添加旋轉控制：
              </p>
              <div className="bg-gray-100 p-4 rounded-lg mb-4">
                <p className="text-gray-700 font-mono">
                  -- 添加旋轉功能<br/>
                  RunService.Heartbeat:Connect(function(deltaTime)<br/>
                  &nbsp;&nbsp;-- 緩慢旋轉當前顯示的模型<br/>
                  &nbsp;&nbsp;if displays[currentDisplay].Parent == hologramModel then<br/>
                  &nbsp;&nbsp;&nbsp;&nbsp;displays[currentDisplay]:SetPrimaryPartCFrame(<br/>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displays[currentDisplay].PrimaryPart.CFrame * CFrame.Angles(0, deltaTime * 0.5, 0)<br/>
                  &nbsp;&nbsp;&nbsp;&nbsp;)<br/>
                  &nbsp;&nbsp;end<br/>
                  end)
                </p>
              </div>
              <p className="text-gray-700">
                這段代碼會使當前顯示的模型緩慢旋轉，讓玩家可以看到模型的各個角度。
              </p>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6 mb-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 2：添加縮放控制</h3>
              <p className="text-gray-700 mb-4">
                添加縮放控制可以讓玩家更詳細地觀察模型：
              </p>
              <div className="bg-blue-50 p-4 rounded-lg mb-4">
                <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>使用 TweenService 平滑過渡縮放效果</li>
                  <li>設置縮放限制，防止模型過大或過小</li>
                </ul>
              </div>
              <p className="text-gray-700">
                通過縮放控制，玩家可以放大查看模型細節，或縮小查看整體效果。
              </p>
            </div>

            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-blue-700 mb-3">步驟 3：優化性能</h3>
              <p className="text-gray-700 mb-4">
                由於我們使用了大量立方體，需要注意性能優化：
              </p>
              <div className="bg-blue-50 p-4 rounded-lg mb-4">
                <h4 className="font-bold text-blue-800 mb-2">性能優化技巧</h4>
                <ul className="list-disc pl-6 space-y-1 text-gray-700">
                  <li>使用 LOD（細節層次）：根據距離調整立方體數量</li>
                  <li>對象池技術：重用立方體而非創建新的</li>
                  <li>視錐體剔除：只渲染視野內的立方體</li>
                  <li>減少光源數量：合理控制發光效果</li>
                </ul>
              </div>
              <p className="text-gray-700">
                通過這些優化技巧，可以在保持視覺效果的同時提高遊戲性能。
              </p>
            </div>
          </section>

          {/* Summary and Challenge */}
          <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">
              <h3 className="text-xl font-bold text-blue-700 mb-3">課程總結</h3>
              <p className="text-gray-700 mb-4">
                在本課程中，我們學習了如何在 Roblox Studio 中使用立方體 Part 創建科技感的立體投影圖像。我們掌握了以下關鍵技能：
              </p>
              <ul className="list-disc pl-6 space-y-2 text-gray-700">
                <li>使用程式化方法生成複雜的立方體陣列</li>
                <li>創建 DNA 雙螺旋、全息地球等科技感圖像</li>
                <li>實現立體投影效果，包括投影平台、光束和粒子效果</li>
                <li>添加互動控制，如切換顯示、旋轉和縮放</li>
                <li>優化性能，確保流暢運行</li>
              </ul>
              <p className="text-gray-700 mt-4">
                這些技能可以應用於各種 Roblox 遊戲和體驗，如科幻遊戲、教育應用、數據可視化等。
              </p>
            </div>

            <div className="bg-gradient-to-r from-blue-50 to-cyan-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>
              <ul className="list-disc pl-6 space-y-2 text-gray-700">
                <li>創建更複雜的科技感圖像，如太陽系模型、分子結構等</li>
                <li>添加聲音效果，增強沉浸感</li>
                <li>實現手勢控制，讓玩家可以用手勢旋轉和縮放模型</li>
                <li>添加數據連接功能，實時顯示外部數據源的信息</li>
                <li>創建可編程界面，讓玩家自定義立方體陣列</li>
              </ul>
            </div>

            <div className="bg-gradient-to-r from-cyan-50 to-blue-50 rounded-xl shadow-md p-6">
              <h3 className="text-xl font-bold text-blue-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://developer.roblox.com/en-us/articles/Particle-Emitters" 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">粒子效果指南</h4>
                  <p className="text-gray-700">學習如何創建和自定義粒子效果</p>
                </a>
                <a href="https://devforum.roblox.com/c/resources/visualization/55" 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">視覺化資源</h4>
                  <p className="text-gray-700">Roblox 開發者論壇中的視覺化資源和討論</p>
                </a>
                <a href="https://www.youtube.com/results?search_query=roblox+studio+hologram+effect" 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">全息效果教學</h4>
                  <p className="text-gray-700">YouTube 上的全息效果教學視頻</p>
                </a>
              </div>
            </div>
          </section>

          {/* Navigation Buttons */}
          <div className="flex justify-between mt-12">
            <a 
              href="/lesson3" 
              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="/" 
              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 d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
              </svg>
            </a>
          </div>
        </motion.div>
      </div>
    </div>
  );
}