/* global React, RobotCar, HLIcon */
// All page sections except the form / Day2 energy / Day3 driving

const { useState, useEffect, useRef, useMemo } = React;

// ─── Nav ────────────────────────────────────────────────
function Nav({ daysLeft, deadline, onJump }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" className="brand" onClick={(e) => {e.preventDefault();onJump('top');}}>
          <div className="brand-mark">N</div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 900, lineHeight: 1.1 }}>AI×STEAM <span style={{ color: 'var(--accent)' }}>五日旗艦</span></div>
            <div style={{ fontSize: 10, color: 'var(--muted)', fontFamily: 'var(--font-mono)', letterSpacing: '.05em' }}>FAYMI LOOK · SUMMER CAMP</div>
          </div>
        </a>
        <div className="nav-links">
          <a href="#about" onClick={(e) => {e.preventDefault();onJump('about');}}>特色</a>
          <a href="#schedule" onClick={(e) => {e.preventDefault();onJump('schedule');}}>課程</a>
          <a href="#energy" onClick={(e) => {e.preventDefault();onJump('energy');}}>能源實驗</a>
          <a href="#driving" onClick={(e) => {e.preventDefault();onJump('driving');}}>駕訓挑戰</a>
          <a href="#faq" onClick={(e) => {e.preventDefault();onJump('faq');}}>FAQ</a>
          <span className="countdown-chip">
            <span className="dot"></span>
            {deadline.closed ? '報名已截止' : `報名倒數 ${deadline.days}d`} · T-{daysLeft}d 開營
          </span>
          <button className="btn small" onClick={() => onJump('register')}>
            立即報名 →
          </button>
        </div>
      </div>
    </nav>);

}

// ─── Hero ───────────────────────────────────────────────
function Hero({ deadline, onRegister }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">飛米 LOOK 旗艦營 · 2026 夏天</span>
            <h1 style={{ marginTop: 20 }}>
              AI <span className="x">×</span> STEAM<br />
              <span className="underline">未來科技探索營</span>
            </h1>
            <p className="hero-sub">
              五天，五種職業，一場科技冒險！
              孩子每天扮演一種未來科技職業——AI 程式設計師、3D 創客工程師、
              綠色能源科學家、智慧車輛工程師、科技創新挑戰者，
              完成任務蓋徽章、集滿護照領證書。
            </p>

            <div className="hero-date">
              <div className="big">07.27<br />— 07.31</div>
              <div>
                <div style={{ fontWeight: 800, fontSize: 16 }}>五日旗艦營</div>
                <div className="small">7月27日（一）— 7月31日（五）<br />每日 08:30 – 16:00（08:30 報到）　|　國立高雄科技大學 建工校區<br /><strong>報名截止：7月22日（三）</strong></div>
              </div>
            </div>

            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
              marginTop: 18, padding: '14px 22px',
              background: 'var(--ink)', color: 'var(--bg)',
              border: '2px solid var(--ink)', borderRadius: 14,
              boxShadow: '4px 4px 0 rgba(0,0,0,.15)'
            }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--primary)', lineHeight: 1 }}>NT$8,000</span>
              <span style={{ fontSize: 14, fontWeight: 700, lineHeight: 1.55 }}>五日全包式旗艦營<br />（課程・教材耗材・午餐・保險・任務護照・結業證書）</span>
            </div>

            <div className="hero-chips">
              <span className="chip solid"><span style={{ width: 6, height: 6, background: 'var(--accent)', borderRadius: '50%' }}></span>
                {deadline.closed
                ? '報名已截止'
                : `報名截止 7/22（三）· 倒數 ${deadline.days} 天`}
              </span>
              <span className="chip solid"><span style={{ width: 6, height: 6, background: 'var(--primary)', borderRadius: '50%' }}></span> 名額有限 · 額滿為止</span>
              <span className="chip">國小 · 國中 · 高中</span>
              <span className="chip">共 5 天</span>
              <span className="chip">五職業體驗</span>
              <span className="chip">結業證書＋作品帶回家</span>
              <span className="chip">對科技有興趣者</span>
            </div>

            <div className="hero-cta">
              <button className="btn" onClick={onRegister}>
                立即報名 <span style={{ fontFamily: 'var(--font-display)' }}>→</span>
              </button>
              <a className="btn ghost" href="#schedule" onClick={(e) => {e.preventDefault();document.getElementById('schedule')?.scrollIntoView({ behavior: 'smooth', block: 'start' });}}>
                查看五日課程
              </a>
            </div>
          </div>

          <div className="robot-stage">
            <div className="stage-corner tl">LAB · KUAS</div>
            <div className="stage-corner tr">FAYMI-5D ● REC</div>
            <div className="stage-corner bl">v2.26.07</div>
            <div className="stage-corner br">CODE · 3D · H₂ · CAR · GO</div>
            <div className="stage-grid"></div>
            <div className="stage-track"></div>
            <div className="stage-checker"></div>

            {/* Top-left mini hud — 五日職業 */}
            <div style={{
              position: 'absolute', top: 36, left: 36,
              padding: '10px 12px',
              background: 'var(--bg)', border: '2px solid var(--ink)', borderRadius: 10,
              fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.5
            }}>
              <div>▸ D1 : <b>AI CODE</b></div>
              <div>▸ D2 : <b>3D MAKER</b></div>
              <div>▸ D3 : <b>H₂ / ⚡</b></div>
              <div>▸ D4 : <b>SMART CAR</b></div>
              <div>▸ D5 : <span style={{ color: 'var(--accent)' }}>FINAL!</span></div>
            </div>

            {/* Block stack mini hud */}
            <div style={{
              position: 'absolute', top: 36, right: 36,
              display: 'flex', flexDirection: 'column', gap: 0, alignItems: 'flex-end'
            }}>
              <MiniBlock color="var(--primary)">當 ▶ 被點擊</MiniBlock>
              <MiniBlock color="var(--mint, #2E9B5E)" stack>如果 偵測到氫氣泡</MiniBlock>
              <MiniBlock color="var(--blue)" stack>自走車 前進 50</MiniBlock>
            </div>

            {/* H₂ bubble */}
            <div style={{
              position: 'absolute', bottom: 120, right: 48,
              width: 64, height: 64, borderRadius: '50%',
              background: 'radial-gradient(circle at 32% 30%, #ffffff 0%, #BFE7FF 45%, #7EC4F5 100%)',
              border: '2.5px solid var(--ink)',
              display: 'grid', placeItems: 'center',
              fontFamily: 'var(--font-display)', fontSize: 20,
              boxShadow: '3px 3px 0 var(--ink)'
            }}>H₂</div>

            <RobotCar />
          </div>
        </div>
      </div>
    </section>);

}

function MiniBlock({ color, stack, children }) {
  return (
    <div style={{
      position: 'relative',
      background: color,
      color: 'var(--paper)',
      border: '2px solid var(--ink)',
      borderRadius: 8,
      padding: '7px 12px',
      fontSize: 12,
      fontWeight: 700,
      fontFamily: 'var(--font-cn)',
      marginTop: stack ? -2 : 0,
      boxShadow: '2px 2px 0 var(--ink)',
      zIndex: stack ? 0 : 1
    }}>
      {children}
    </div>);

}

// ─── Highlights（營隊特色）────────────────────────────
function Highlights() {
  const items = [
  { kind: 'code', num: '01', title: '五職業體驗', en: '5 Careers', desc: '每天扮演一種未來科技職業：AI 程式設計師、3D 創客、能源科學家、車輛工程師、科技挑戰者。', cls: 'b1' },
  { kind: 'hands', num: '02', title: '任務護照', en: 'Passport', desc: '每完成一天任務蓋一枚職業徽章。集滿五枚，就是家長看得見的學習軌跡。', cls: 'b2' },
  { kind: 'tech', num: '03', title: '作品帶回家', en: 'Take Home', desc: '3D 列印創意作品、AI 程式作品、任務護照、結業證書、小小科技駕照——五樣實體成果。', cls: 'b3' },
  { kind: 'team', num: '04', title: '團隊合作', en: 'Teamwork', desc: '跨校混編小隊，從破冰、分工到最終救援任務，練習溝通、策略與臨場反應。', cls: 'b4' }];

  return (
    <section id="about">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">營隊特色 · Highlights</span>
            <h2 style={{ marginTop: 14 }}>跨領域學習，<span className="accent">五天，五種職業。</span></h2>
          </div>
          <p>不只是體驗。每天扮演一種未來科技職業、完成該日任務、蓋徽章、集滿五枚領證書——每一天都讓孩子帶走一個新的「我會了」。</p>
        </div>
        <div className="highlights">
          {items.map((it) =>
          <div className={`hl ${it.cls}`} key={it.num}>
              <div className="num">{it.num} · {it.en}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
              <div className="icon"><HLIcon kind={it.kind} /></div>
            </div>
          )}
        </div>

        <div className="stats">
          <div className="stat"><div className="v">5<span style={{ fontSize: 24, marginLeft: 4 }}>天</span></div><div className="l">DURATION · 課程天數</div></div>
          <div className="stat"><div className="v">5<span style={{ fontSize: 24, marginLeft: 4 }}>職業</span></div><div className="l">CAREERS · 每天一種</div></div>
          <div className="stat"><div className="v">5<span style={{ fontSize: 24, marginLeft: 4 }}>徽章</span></div><div className="l">BADGES · 集滿授證</div></div>
          <div className="stat"><div className="v">3<span style={{ fontSize: 24, marginLeft: 4 }}>學段</span></div><div className="l">國小 × 國中 × 高中</div></div>
        </div>
      </div>
    </section>);

}

// ─── About / 活動宗旨 ──────────────────────────────────
function About() {
  const gains = [
  '五種科技職業體驗，找到興趣方向',
  'AI 程式 × 3D 設計 × 能源實驗 × 車輛工程',
  '任務護照集章、完成作品建立自信',
  '結業證書、駕照、獎狀正式表揚成果'];

  return (
    <section>
      <div className="container">
        <div className="about-grid">
          <div>
            <span className="eyebrow">營隊定位 · Why AI×STEAM</span>
            <p className="lead" style={{ marginTop: 18 }}>
              五天互相銜接的科技冒險：從程式邏輯、3D 創客、能源科學、車輛駕駛到最終救援挑戰。
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <p>
              本旗艦營以<strong>職業體驗</strong>為主軸：孩子每天扮演一種未來科技職業，
              從 <strong>AI 程式設計師</strong>用圖像化程式讓角色動起來，
              到 <strong>3D 創客工程師</strong>把腦中的創意印成實體，
              再走進 <strong>綠色能源科學家</strong>的氫能實驗室、
              考取 <strong>智慧車輛工程師</strong>的小小駕照，
              最後化身 <strong>科技創新挑戰者</strong>完成未來城市救援行動。
            </p>
            <p>
              孩子每完成一天蓋一枚職業徽章，五天集滿就是家長最直接看得見的學習軌跡——
              帶回家的除了作品、駕照、證書，還有<strong>對科技的整體視野</strong>。
              零基礎可上手，不需要任何先備程式或實驗經驗。
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10, marginTop: 4 }}>
              {gains.map((g) =>
              <div key={g} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '12px 14px', background: 'var(--soft-1)',
                border: '1.5px solid var(--ink)', borderRadius: 10,
                fontSize: 14, fontWeight: 600
              }}>
                  <span style={{
                  width: 22, height: 22, flexShrink: 0, borderRadius: '50%',
                  background: 'var(--primary)', border: '1.5px solid var(--ink)',
                  display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 900
                }}>✓</span>
                  {g}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Schedule ──────────────────────────────────────────
const SCHEDULE = {
  d1: {
    date: '7月 27 日 · 週一',
    sub: '🎨 AI 程式設計師',
    theme: '讓角色動起來，打造你的第一個 AI 程式世界！透過像拼積木一樣的圖像化程式設計，讓角色、機器人和遊戲依照你的想法運作。',
    rows: [
    ['08:30 – 09:00', '報到、分組、發放任務護照', '確認學生名單、分組與座位；發放五日職業徽章護照', 'check'],
    ['09:00 – 09:30', '開營式與五日冒險地圖', '介紹五大職業與護照集章機制', 'highlight'],
    ['09:30 – 10:10', '破冰活動', '跨校混編建立小隊默契', null],
    ['10:10 – 10:20', '休息', '', 'break'],
    ['10:20 – 11:00', 'AI 與程式語言導入', '認識 AI 應用、順序／條件／迴圈概念', null],
    ['11:00 – 12:00', '任務一：讓指令動起來', '圖像化程式基礎操作，控制角色完成指令', null],
    ['12:00 – 13:00', '午餐與休息', '', 'lunch'],
    ['13:00 – 13:50', '任務二：AI 互動判斷', '設計簡單互動邏輯，體驗生活中的 AI', null],
    ['13:50 – 14:00', '休息', '', 'break'],
    ['14:00 – 15:10', '任務三：我的互動小遊戲', '各組完成一個屬於自己的小遊戲作品', null],
    ['15:10 – 15:40', '小隊發表與互玩', '展示作品、互相體驗與回饋', 'highlight'],
    ['15:40 – 16:00', '蓋徽章、總結、明日預告', '獲得「AI 程式設計師」徽章，預告 3D 創客日', null]]

  },
  d2: {
    date: '7月 28 日 · 週二',
    sub: '🖨️ 3D 創客工程師',
    theme: '把腦中的創意，變成真正摸得到的作品！化身小小產品設計師，從零開始設計自己的模型，認識 3D 列印技術。',
    rows: [
    ['08:30 – 09:00', '報到、集合、點名', '', 'check'],
    ['09:00 – 09:30', '產品是怎麼誕生的？', '從發想 → 設計 → 製造的創客思維', 'highlight'],
    ['09:30 – 10:10', '3D 列印技術認識', '現場印表機示範啟動，觀察逐層堆疊過程', null],
    ['10:10 – 10:20', '休息', '', 'break'],
    ['10:20 – 11:10', '建模概念與軟體上手', '基本幾何、堆疊、挖洞、縮放操作', null],
    ['11:10 – 12:00', '任務一：名牌／吊飾設計', '完成第一件個人化 3D 設計', null],
    ['12:00 – 13:00', '午餐與休息', '列印機持續運轉，飯後可觀察', 'lunch'],
    ['13:00 – 14:10', '任務二：我的創意作品', '主題式自由設計，老師巡迴指導', null],
    ['14:10 – 14:20', '休息', '', 'break'],
    ['14:20 – 15:10', '設計優化與送印', '檢查可列印性、排版送印', null],
    ['15:10 – 15:40', '創客分享會', '說明設計理念與遇到的困難', 'highlight'],
    ['15:40 – 16:00', '蓋徽章、總結、明日預告', '獲得「3D 創客工程師」徽章，預告綠色能源科學家日', null]]

  },
  d3: {
    date: '7月 29 日 · 週三',
    sub: '⚡ 綠色能源科學家',
    theme: '水竟然可以變成能源？揭開氫能的秘密！透過趣味實驗探索氫能與電能的奧秘，了解未來能源科技如何改變世界。',
    rows: [
    ['08:30 – 09:00', '報到、集合、點名', '確認人數，提醒實驗安全與器材使用規範', 'check'],
    ['09:00 – 09:15', '今日開場', '介紹氫能、能源轉換與海水電解主題', 'highlight'],
    ['09:15 – 09:45', '主題導入：什麼是氫能？', '氫氣作為潔淨能源：發電、工廠燃料、載具燃料與儲能', null],
    ['09:45 – 10:15', '氫氣怎麼產生？', '認識灰氫、棕氫、藍氫與綠氫，強調綠氫低碳概念', null],
    ['10:15 – 10:30', '休息', '補水與實驗器材確認', 'break'],
    ['10:30 – 11:00', '海水電解介紹', '電流分解水分子，產生氫氣 H₂ 與氧氣 O₂', null],
    ['11:00 – 11:40', '實驗一：鉛筆電解實驗', '以筆芯作為電極，觀察氣泡產生 — 點此查看實驗內容', 'practice'],
    ['11:40 – 12:00', '實驗觀察與討論', '比較兩端氣泡量，記錄觀察結果', null],
    ['12:00 – 13:00', '午餐與休息', '', 'lunch'],
    ['13:00 – 13:20', '上午回顧', '回顧氫能、海水電解與上午實驗重點', null],
    ['13:20 – 14:10', '實驗二：霍夫曼電解實驗', '觀察氫氣與氧氣的產生與收集方式', 'practice'],
    ['14:10 – 14:40', '燃料電池示範', '氫氣與氧氣重新結合，產生電力與水', 'highlight'],
    ['14:40 – 15:00', '休息與器材整理', '', 'break'],
    ['15:00 – 15:30', '氫能與永續發展', '連結 SDG 7、9、11、13，討論綠能與未來城市', null],
    ['15:30 – 15:50', '小組學習單／問答', '完成觀察紀錄與課程回顧', null],
    ['15:50 – 16:00', '蓋徽章、總結、明日預告', '獲得「綠色能源科學家」徽章，預告智慧車輛工程師日', null]]

  },
  d4: {
    date: '7月 30 日 · 週四',
    sub: '🚗 智慧車輛工程師',
    theme: '打造你的第一台智慧小車，挑戰小小駕照！親手操作智慧自走車，挑戰各種道路關卡，學習工程控制與團隊合作。',
    rows: [
    ['08:30 – 09:00', '報到、集合、場地準備', '確認隊伍、設備、電池、競賽場地', 'check'],
    ['09:00 – 09:20', '駕訓開場與交通規則說明', '安全規範、交通標誌、駕訓任務與闖關方式', 'highlight'],
    ['09:20 – 09:50', '自走車檢查與駕訓準備', '確認自走車、遙控器、電池、輪胎與場地狀況', null],
    ['09:50 – 10:30', '操作練習', '各組練習前進、後退、轉彎、停止與定點停車', null],
    ['10:30 – 10:45', '休息', '補水、充電與場地整理', 'break'],
    ['10:45 – 12:00', '第一階段駕訓練習', '直線、轉彎、停等、倒車入庫、路邊停車', null],
    ['12:00 – 13:00', '午餐與休息', '整理上午成績，確認下午賽程', 'lunch'],
    ['13:00 – 13:20', '下午賽程說明', '公布五大考照關卡與加分任務規則', null],
    ['13:20 – 14:30', '考照挑戰賽', '五大關卡（各20分）＋隱藏／護送／狙擊加分任務 — 點此查看闖關項目', 'competition'],
    ['14:30 – 14:50', '成績整理、休息', '工作人員統計成績，準備明日結業式', 'break'],
    ['14:50 – 15:30', '成果分享與策略回顧', '各組分享駕駛策略與分工', null],
    ['15:30 – 15:50', '核發小小科技駕照', '每位學員獲得駕照證書（正式排名獎項留至結業式頒發）', 'highlight'],
    ['15:50 – 16:00', '蓋徽章、總結、明日預告', '獲得「智慧車輛工程師」徽章，預告最終挑戰日', null]]

  },
  d5: {
    date: '7月 31 日 · 週五',
    sub: '🚀 科技創新挑戰者',
    theme: '成為真正的科技小達人！五天所學全部派上用場，透過團隊合作完成最終挑戰，展示成果、分享創意。',
    rows: [
    ['08:30 – 09:00', '報到、集合', '', 'check'],
    ['09:00 – 09:30', '最終任務說明', '公布「未來城市救援行動」規則與分站任務', 'highlight'],
    ['09:30 – 10:30', '任務準備與策略時間', '各隊分工、複習四日技能', null],
    ['10:30 – 10:45', '休息', '', 'break'],
    ['10:45 – 12:00', '最終挑戰（上半場）', '程式解謎 → 3D 道具組裝 → 能源問答，分站累積積分', null],
    ['12:00 – 13:00', '午餐與休息', '', 'lunch'],
    ['13:00 – 13:50', '最終挑戰（下半場）', '駕駛自走車完成護送救援任務', null],
    ['13:50 – 14:00', '休息、成績統計', '', 'break'],
    ['14:00 – 14:50', '成果發表會（家長可入場觀禮）', '各隊上台分享五日作品與心得', 'highlight'],
    ['14:50 – 15:40', '結業式', '頒發結業證書、五日榮譽獎項、Day 4 考照獎項、發還 3D 作品', 'highlight'],
    ['15:40 – 16:00', '大合照、賦歸', '完成合照與學生離場確認', null]]

  }
};

function Schedule() {
  const [day, setDay] = useState('d1');
  const data = SCHEDULE[day];
  const days = [
  { id: 'd1', n: 'DAY 01', t: 'AI 程式', d: '7.27 週一' },
  { id: 'd2', n: 'DAY 02', t: '3D 創客', d: '7.28 週二' },
  { id: 'd3', n: 'DAY 03', t: '氫與電', d: '7.29 週三' },
  { id: 'd4', n: 'DAY 04', t: '智慧車輛', d: '7.30 週四' },
  { id: 'd5', n: 'DAY 05', t: '最終挑戰', d: '7.31 週五' }];

  return (
    <section id="schedule" style={{ background: 'var(--soft-1)', paddingTop: 'var(--pad-section)', paddingBottom: 'var(--pad-section)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">五日課程 · Schedule</span>
            <h2 style={{ marginTop: 14 }}>每天 08:30 – 16:00<br /><span className="accent">五天，五種職業，一場冒險。</span></h2>
          </div>
          <p>從 AI 程式設計師、3D 創客工程師、綠色能源科學家、智慧車輛工程師到科技創新挑戰者——每天扮演一種未來科技職業，完成任務蓋徽章。點選分頁切換每日流程。</p>
        </div>

        <div className="schedule-tabs" role="tablist">
          {days.map((d) =>
          <button
            key={d.id}
            role="tab"
            className="tab"
            aria-selected={day === d.id}
            onClick={() => setDay(d.id)}>
            
              <span className="day-num">{d.n}</span>
              <span className="day-title">{d.t}</span>
              <span className="day-date">{d.d}</span>
            </button>
          )}
        </div>

        <div className="card" style={{ padding: '32px 32px 28px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 12, flexWrap: 'wrap', gap: 12 }}>
            <div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '.1em' }}>第 {day.slice(1)} 天 · {data.date}</div>
              <h3 style={{ marginTop: 6 }}>{data.sub}</h3>
            </div>
            <span className="chip"><span className="chip-dot"></span> 共 {data.rows.length} 個時段</span>
          </div>
          <p style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 24, lineHeight: 1.7 }}>{data.theme}</p>

          <div className="timeline">
            {data.rows.map((r, i) => {
              const [time, act, note, type] = r;
              let cls = '';
              if (type === 'lunch') cls = 'lunch';else
              if (type === 'break') cls = 'break';else
              if (type === 'highlight') cls = 'highlight';else
              if (type === 'competition') cls = 'competition';else
              if (type === 'practice') cls = 'practice';
              const jumpTarget = type === 'competition' ? 'driving' : type === 'practice' ? 'energy' : null;
              const clickable = !!jumpTarget;
              const onClick = clickable ? () => document.getElementById(jumpTarget)?.scrollIntoView({ behavior: 'smooth', block: 'start' }) : undefined;
              return (
                <div className="tl-row" key={i}>
                  <div className="tl-time">{time}</div>
                  <div className={`tl-dot ${cls} ${clickable ? 'jump' : ''}`} onClick={onClick} role={clickable ? 'button' : undefined}>
                    <div className="card-row">
                      <div>
                        <div className="activity">{act}{clickable && <span className="jump-arrow"> ↓</span>}</div>
                        {note && <div className="note">{note}</div>}
                      </div>
                      {type === 'check' && <span className="badge">報到</span>}
                      {type === 'lunch' && <span className="badge" style={{ background: 'var(--paper)' }}>用餐</span>}
                      {type === 'break' && <span className="badge" style={{ background: 'transparent', border: 'none', color: 'var(--muted)' }}>休息</span>}
                      {type === 'highlight' && <span className="badge" style={{ background: 'var(--ink)', color: 'var(--bg)', borderColor: 'var(--ink)' }}>主場活動</span>}
                      {type === 'practice' && <span className="badge" style={{ background: 'var(--mint)', color: '#fff', borderColor: 'var(--mint)' }}>實驗 →</span>}
                      {type === 'competition' && <span className="badge" style={{ background: '#fff', color: 'var(--accent)', borderColor: '#fff' }}>闖關挑戰 →</span>}
                    </div>
                  </div>
                </div>);

            })}
          </div>
        </div>
      </div>
    </section>);

}

// ─── Notes / 注意事項 ─────────────────────────────────
function Notes() {
  const items = [
  '五日全程 08:30 完成報到，每次集合與移動教室皆會點名',
  '自備個人水壺，請勿攜帶含糖飲料；每日午餐由營隊提供（已含在費用內）',
  '有飲食過敏或特殊飲食需求，請於報名時告知',
  '氣喘、癲癇、過敏、心臟病等特殊狀況請填寫健康聲明',
  '3D 列印作品可能因排程於 Day 2–5 陸續產出，最晚於結業式發還',
  '能源實驗課程需配戴護目鏡，接線由講師或助教確認後才可通電',
  '駕訓與競賽時，非操作學生不得進入場地',
  '任務護照請每日攜帶，遺失恕不補發（可補蓋徽章）',
  '活動全程拍照錄影作為紀錄、宣傳與報告使用；家長 Day 5 下午可入場觀禮成果發表',
  '天災、疫情等不可抗力因素將另行通知調整或取消'];

  return (
    <section style={{ background: 'var(--paper)', borderTop: '2px solid var(--ink)', borderBottom: '2px solid var(--ink)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">學員注意事項 · Before You Come</span>
            <h2 style={{ marginTop: 14 }}>安全第一，<span className="accent">準備好就出發。</span></h2>
          </div>
          <p>下面這些事項請家長與學員一起閱讀，到場時會更順利。報名時也會再次提醒。</p>
        </div>
        <div className="notes">
          {items.map((t) => <div className="note-item" key={t}>{t}</div>)}
        </div>
      </div>
    </section>);

}

// ─── FAQ ──────────────────────────────────────────────
const FAQS = [
{ q: '五天內容會不會太累？', a: '每日 08:30–16:00，含 1 小時午餐與多次休息，並穿插動手實作與發表分享。孩子每天扮演一種職業、完成一天任務就結束，節奏活潑不會沉悶。' },
{ q: '需要先會寫程式或用 3D 軟體嗎？', a: '完全不用。Day 1 從圖像化程式（拖拉積木）開始，Day 2 從基本幾何操作學建模，零基礎的孩子也能完成作品。' },
{ q: '費用 NT$8,000 包含哪些？', a: '五日課程、教材與耗材（含 3D 列印作品材料）、每日午餐、平安保險、任務護照、結業證書皆已包含在內，不再額外收費。繳費方式將於錄取通知中說明。' },
{ q: '國小、國中、高中生都可以報名嗎？', a: '可以。本營隊開放國小、國中、高中生報名，只要對科技有興趣都歡迎。分組會考量年齡與程度混編，讓每位學員都能參與。' },
{ q: '報名到什麼時候截止？', a: '報名將於 115年7月22日（星期三）截止，額滿為止。因需辦理保險、教材與 3D 列印耗材準備，逾期恕不受理，請及早完成報名。' },
{ q: '孩子帶得回什麼作品？', a: '3D 列印創意作品、AI 程式作品（雲端連結或作品卡）、集滿五枚徽章的任務護照、結業證書、小小科技駕照——五樣實體或數位成果。' },
{ q: 'Day 5 家長可以到現場嗎？', a: 'Day 5 下午 14:00 起的「成果發表會」開放家長入場觀禮，孩子會上台分享五日作品與心得。歡迎家長一同見證。' },
{ q: '氫能實驗與駕訓活動安全嗎？', a: '所有實驗皆在講師與助教指導下進行。學員操作時需配戴護目鏡，電池與導線接線由工作人員確認後才通電；駕訓與競賽時非操作學生不得進入場地，並全程有工作人員在場督導。' },
{ q: '活動會拍照錄影嗎？可以選擇不公開嗎？', a: '活動會全程紀錄。報名時的「肖像權同意」欄位可以選擇「不同意公開使用」，我們會妥善處理該名學員的影像。' },
{ q: '名額滿了怎麼辦？有候補嗎？', a: '依報名順序錄取，額滿為止並保留候補名單。若有名額釋出，主辦單位會以報名留存的聯絡方式通知。其他問題歡迎來電 07-3814526 分機 15453 洽詢。' }];


function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">常見問題 · FAQ</span>
            <h2 style={{ marginTop: 14 }}>家長最常問的<br /><span className="accent">十個問題。</span></h2>
          </div>
          <p>還有其他疑問？歡迎透過下方聯絡資訊與我們聯繫。</p>
        </div>
        <div className="faq">
          {FAQS.map((f, i) =>
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={f.q}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span><span className="mono" style={{ color: 'var(--muted)', marginRight: 12, fontSize: 13 }}>Q.0{i + 1}</span>{f.q}</span>
                <span className="toggle">+</span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Contact / 聯絡資訊 ────────────────────────────────
function Orgs() {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">聯絡資訊 · Contact</span>
            <h2 style={{ marginTop: 14 }}>報名或洽詢，<br />隨時找得到我們。</h2>
          </div>
          <p>掃描報名 QR Code 或使用本頁報名表單，額滿為止。任何問題歡迎來電或來信。</p>
        </div>
        <div className="orgs">
          <div className="orgs-row">
            <div className="role">報名截止</div>
            <span className="org-badge solid">7/22（三）</span>
            <span className="org-badge">115年7月22日截止，額滿為止，逾期恕不受理</span>
          </div>
          <div className="orgs-row">
            <div className="role">洽詢電話</div>
            <span className="org-badge solid">07-3814526 分機 15453</span>
            <span className="org-badge">高科大 教育推廣中心（協辦窗口）</span>
          </div>
          <div className="orgs-row">
            <div className="role">電子信箱</div>
            <span className="org-badge"><a href="mailto:md406md406@gmail.com" style={{ color: 'inherit', textDecoration: 'none' }}>md406md406@gmail.com</a></span>
          </div>
          <div className="orgs-row">
            <div className="role">費用說明</div>
            <span className="org-badge solid">NT$8,000 / 人</span>
            <span className="org-badge">五日全包（課程・教材耗材・午餐・保險・護照・證書）</span>
          </div>
          <div className="orgs-row">
            <div className="role">活動地點</div>
            <span className="org-badge">國立高雄科技大學 建工校區</span>
          </div>
          <div className="orgs-row">
            <div className="role">主辦單位</div>
            <span className="org-badge solid">飛米 LOOK</span>
          </div>
          <div className="orgs-row">
            <div className="role">協辦單位</div>
            <span className="org-badge">國立高雄科技大學 教育推廣中心</span>
          </div>
        </div>
      </div>
    </section>);

}

// expose globals (defensive — mirrors form.jsx pattern)
window.Nav = Nav; window.Hero = Hero; window.Highlights = Highlights;
window.About = About; window.Schedule = Schedule; window.Notes = Notes;
window.FAQ = FAQ; window.Orgs = Orgs;