// ==========================================================================
// 3. Components 元件庫 — 5 大家族 overview + 每個元件 detail card (Ant Design 風)
// ==========================================================================

// 共用：頁面內 Demo 區塊（共用版本來自 components.jsx 的 window.Demo / DocCard / CompGrid）
const Demo = window.Demo;
const DocCard = window.DocCard;
const CompGrid = window.CompGrid;

// ==========================================================================
// 主要區塊
// ==========================================================================
const ComponentsSection = () => (
  <Section id="components" num="03" zh="Components 元件庫" en="Components · UI Library">
    {/* family overview cards */}
    <FamilyInputs />
    <FamilyDisplay />
    <FamilyFeedback />
    <FamilyNav />
    <FamilyLayout />

    {/* detail cards */}
    <DocInputs />
    <DocDisplay />
    <DocFeedback />
    <DocNav />
    <DocLayout />
  </Section>
);

// ==========================================================================
// 家族 overview Cards (5 個)
// ==========================================================================
const FamilyInputs = () => (
  <Card id="c-inputs" title="Components-Inputs">
    <p className="ds-desc">與「輸入資料」相關的所有元件 — 按鈕、欄位、開關、選擇器、上傳、評分等。點擊任一卡片進入詳細頁。</p>
    <CompGrid items={[
      { id: "c-inputs-autocomplete", en: "Autocomplete",          zh: "下拉搜尋框",  demo: <T_Autocomplete /> },
      { id: "c-inputs-button",       en: "Button",                zh: "按鈕",       demo: <T_Button /> },
      { id: "c-inputs-button-group", en: "Button Group",          zh: "按鈕組合",    demo: <T_ButtonGroup /> },
      { id: "c-inputs-checkbox",     en: "Checkbox",              zh: "核取按鈕",    demo: <T_Checkbox /> },
      { id: "c-inputs-fab",          en: "Floating Action Button",zh: "浮動操作按鈕", demo: <T_FAB /> },
      { id: "c-inputs-number",       en: "Number Field",          zh: "數字輸入框",   demo: <T_NumberField /> },
      { id: "c-inputs-radio",        en: "Radio Group",           zh: "單選框",      demo: <T_RadioGroup /> },
      { id: "c-inputs-select",       en: "Select",                zh: "下拉選擇框",   demo: <T_Select /> },
      { id: "c-inputs-rating",       en: "Rating",                zh: "評分",       demo: <T_Rating /> },
      { id: "c-inputs-slider",       en: "Slider",                zh: "滑桿",       demo: <T_Slider /> },
      { id: "c-inputs-switch",       en: "Switch",                zh: "開關按鈕",    demo: <T_Switch /> },
      { id: "c-inputs-textfield",    en: "Text Field",            zh: "文字輸入框",   demo: <T_TextField /> },
      { id: "c-inputs-transfer",     en: "Transfer List",         zh: "雙列轉移選擇框",demo: <T_Transfer /> },
      { id: "c-inputs-toggle",       en: "Toggle Button",         zh: "切換按鈕",    demo: <T_Toggle /> },
      { id: "c-inputs-upload",       en: "Upload",                zh: "上傳",       demo: <T_Upload /> },
      { id: "c-inputs-cascader",     en: "Cascader",              zh: "級聯選擇器",   demo: <T_Cascader /> },
      { id: "c-inputs-colorpicker",  en: "ColorPicker",           zh: "顏色選擇器",   demo: <T_ColorPicker /> },
      { id: "c-inputs-datepicker",   en: "DatePicker / TimePicker", zh: "日期 / 時間選擇器", demo: <T_DatePicker /> },
      { id: "c-inputs-camera",       en: "Camera",                zh: "相機",       demo: <T_Camera /> },
    ]} />
  </Card>
);

const FamilyDisplay = () => (
  <Card id="c-display" title="Components-Data Display">
    <p className="ds-desc">與「呈現資料」相關的所有元件 — 頭像、標籤、清單、表格、卡片、空狀態等。</p>
    <CompGrid items={[
      { id: "c-display-avatar",     en: "Avatar",            zh: "頭像",        demo: <T_Avatar /> },
      { id: "c-display-badge",      en: "Badge",             zh: "標記 / 徽章", demo: <T_Badge /> },
      { id: "c-display-chip",       en: "Chip",              zh: "片狀標籤",    demo: <T_Chip /> },
      { id: "c-display-tag",        en: "Tag",               zh: "標籤",       demo: <T_Tag /> },
      { id: "c-display-divider",    en: "Divider",           zh: "分割線",     demo: <T_Divider /> },
      { id: "c-display-icons",      en: "Icons",             zh: "圖示",       demo: <T_Icons /> },
      { id: "c-display-list",       en: "Lists",             zh: "清單 / 列表", demo: <T_List /> },
      { id: "c-display-table",      en: "Table",             zh: "數據表格",    demo: <T_Table /> },
      { id: "c-display-tooltip",    en: "Tooltip",           zh: "文字提示",    demo: <T_Tooltip /> },
      { id: "c-display-popover",    en: "Popover",           zh: "氣泡卡片",    demo: <T_Popover /> },
      { id: "c-display-typography", en: "Typography / Text", zh: "文字排版",    demo: <T_Typography /> },
      { id: "c-display-carousel",   en: "Carousel",          zh: "輪播",       demo: <T_Carousel /> },
      { id: "c-display-accordion",  en: "Accordion",         zh: "摺疊面板",    demo: <T_Accordion /> },
      { id: "c-display-card",       en: "Card",              zh: "卡片",       demo: <T_Card /> },
      { id: "c-display-paper",      en: "Paper",             zh: "紙張 / 容器", demo: <T_Paper /> },
      { id: "c-display-calendar",   en: "Calendar",          zh: "日曆",       demo: <T_Calendar /> },
      { id: "c-display-empty",      en: "Empty",             zh: "空狀態",     demo: <T_Empty /> },
      { id: "c-display-qrcode",     en: "QRCode",            zh: "二維碼",     demo: <T_QRCode /> },
    ]} />
  </Card>
);

const FamilyFeedback = () => (
  <Card id="c-feedback" title="Components-Feedback">
    <p className="ds-desc">與「系統回饋」相關的元件 — 警告、對話框、進度、骨架屏、通知訊息等。</p>
    <CompGrid items={[
      { id: "c-feedback-alert",    en: "Alert",        zh: "警告提示",     demo: <T_Alert /> },
      { id: "c-feedback-backdrop", en: "Backdrop",     zh: "背景遮罩",     demo: <T_Backdrop /> },
      { id: "c-feedback-dialog",   en: "Dialog",       zh: "對話框",       demo: <T_Dialog /> },
      { id: "c-feedback-progress", en: "Progress bar", zh: "進度條",       demo: <T_Progress /> },
      { id: "c-feedback-skeleton", en: "Skeleton",     zh: "骨架屏",       demo: <T_Skeleton /> },
      { id: "c-feedback-toast",    en: "Toast",        zh: "吐司訊息",     demo: <T_Toast /> },
      { id: "c-feedback-snackbar", en: "Snackbar",     zh: "可互動式提示", demo: <T_Snackbar /> },
    ]} />
  </Card>
);

const FamilyNav = () => (
  <Card id="c-nav" title="Components-Navigation">
    <p className="ds-desc">與「頁面導航」相關的元件 — 選單、麵包屑、分頁、步驟、Tabs、抽屜等。</p>
    <CompGrid items={[
      { id: "c-nav-menubar",    en: "Menu Bar & Menu",   zh: "選單列與選單", demo: <T_MenuBar /> },
      { id: "c-nav-appbar",     en: "App Bar",           zh: "應用程式列",   demo: <T_AppBar /> },
      { id: "c-nav-bottom",     en: "Bottom Navigation", zh: "底部導覽",     demo: <T_BottomNav /> },
      { id: "c-nav-breadcrumb", en: "Breadcrumbs",       zh: "麵包屑",      demo: <T_Breadcrumb /> },
      { id: "c-nav-drawer",     en: "Drawer",            zh: "側邊抽屜",     demo: <T_Drawer /> },
      { id: "c-nav-links",      en: "Links",             zh: "連結",        demo: <T_Links /> },
      { id: "c-nav-pagination", en: "Pagination",        zh: "頁碼",        demo: <T_Pagination /> },
      { id: "c-nav-speeddial",  en: "Speed Dial",        zh: "快速撥號鍵",   demo: <T_SpeedDial /> },
      { id: "c-nav-stepper",    en: "Stepper",           zh: "步驟進度條",   demo: <T_Stepper /> },
      { id: "c-nav-tabs",       en: "Tabs",              zh: "標籤頁",      demo: <T_Tabs /> },
      { id: "c-nav-dropdown",   en: "Dropdown",          zh: "動作選單",    demo: <T_Dropdown /> },
      { id: "c-nav-anchor",     en: "Anchor",            zh: "錨點",        demo: <T_Anchor /> },
    ]} />
  </Card>
);

const FamilyLayout = () => (
  <Card id="c-layout" title="Components-Layout">
    <p className="ds-desc">與「頁面佈局」相關的元件 — 表單、捲軸、瀑布流、分割器、圖片列表等。</p>
    <CompGrid items={[
      { id: "c-layout-form",      en: "Form",       zh: "表單",     demo: <T_Form /> },
      { id: "c-layout-scrollbar", en: "Scrollbar",  zh: "捲軸指南", demo: <T_Scrollbar /> },
      { id: "c-layout-imagelist", en: "Image List", zh: "圖片列表", demo: <T_ImageList /> },
      { id: "c-layout-splitter",  en: "Splitter",   zh: "分割器",   demo: <T_Splitter /> },
      { id: "c-layout-masonry",   en: "Masonry",    zh: "瀑布流",   demo: <T_Masonry /> },
    ]} />
  </Card>
);

// ==========================================================================
// Detail Cards 集中 — 由各 Doc* 元件組裝
// ==========================================================================
window.ComponentsSection = ComponentsSection;