// Home page — 首頁

const HeroSection = ({ setPage, onOpenAI }) => (
  <section style={{
    background: "linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 55%, #0a2656 100%)",
    color: "#fff",
    borderRadius: 20,
    padding: "48px 56px",
    marginBottom: 32,
    position: "relative",
    overflow: "hidden",
    minHeight: 440,
  }}>
    <img
      src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=1600&q=75"
      alt="學員在桌上使用筆電學習，畫面溫暖明亮"
      style={{
        position: "absolute", right: 0, top: 0, bottom: 0, width: "55%",
        objectFit: "cover", opacity: 0.55,
        maskImage: "linear-gradient(to left, black 40%, transparent 100%)",
        WebkitMaskImage: "linear-gradient(to left, black 40%, transparent 100%)",
      }}
    />
    <div style={{
      position: "absolute", right: -80, top: -60,
      width: 400, height: 400, borderRadius: "50%",
      background: "radial-gradient(circle, rgba(232,116,60,0.25), transparent 60%)",
    }} />
    <div style={{
      position: "absolute", right: 60, bottom: -120,
      width: 320, height: 320, borderRadius: "50%",
      border: "1.5px solid rgba(255,255,255,0.12)",
    }} />
    <div style={{ position: "relative", maxWidth: 680 }}>
      <Tag color="accent" style={{ background: "rgba(232,116,60,0.2)", color: "#ffc89f" }}>
        <Icon name="sparkle" size={12} /> AI 助教已上線
      </Tag>
      <h1 style={{
        margin: "18px 0 14px",
        fontSize: "var(--fs-4xl)", fontWeight: 900,
        lineHeight: 1.15, letterSpacing: "-0.03em",
      }}>
        每一份學習路徑<br/>都為你而設計
      </h1>
      <p style={{
        fontSize: "var(--fs-lg)", lineHeight: 1.7,
        color: "rgba(255,255,255,0.85)", marginBottom: 28, textWrap: "pretty",
      }}>
        無礙 e 網透過 AI 助教與無障礙設計，讓每位學員都能以**最適合自己的方式**學習——不論您習慣用聽、用看、或循序漸進，介面都會自動配合您。
      </p>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <Button variant="accent" size="lg" icon="sparkle" onClick={onOpenAI}>
          讓 AI 幫我選課
        </Button>
        <Button size="lg" onClick={() => setPage("catalog")}
          style={{ background: "rgba(255,255,255,0.12)", color: "#fff", border: "1.5px solid rgba(255,255,255,0.3)" }}>
          瀏覽課程總覽
        </Button>
      </div>
      <div style={{ display: "flex", gap: 32, marginTop: 36, flexWrap: "wrap" }}>
        <HeroStat num="1,200+" label="累計參訓人數" />
        <HeroStat num="37,500+" label="網站瀏覽人次" />
        <HeroStat num="WCAG 2.1 AAA" label="無障礙認證" />
      </div>
    </div>
  </section>
);

const HeroStat = ({ num, label }) => (
  <div>
    <div style={{ fontSize: "var(--fs-xl)", fontWeight: 900, letterSpacing: "-0.02em" }}>{num}</div>
    <div style={{ fontSize: "var(--fs-sm)", color: "rgba(255,255,255,0.65)", marginTop: 2 }}>{label}</div>
  </div>
);

const DisabilityQuickAccess = () => {
  const types = [
    { key: "VI", label: "聽覺優先模式", desc: "語音朗讀、鍵盤操作、純文字摘要", color: "#1a4789", bg: "#e8eef9", icon: "volume" },
    { key: "HI", label: "視覺閱讀模式", desc: "即時字幕、逐字稿、視覺提示", color: "#0d6b88", bg: "#def0f5", icon: "cc" },
    { key: "CI", label: "逐步引導模式", desc: "易讀版、圖示摘要、單步驟指引", color: "#2d7a4f", bg: "#e3efe0", icon: "book" },
    { key: "LD", label: "多感官輔助模式", desc: "聽看做並用、結構化重點、互動提示", color: "#5b3db5", bg: "#ece7f7", icon: "puzzle" },
  ];
  return (
    <section style={{ marginBottom: 40 }}>
      <SectionHeader
        eyebrow="AI 個人化"
        title="介面會依您的學習習慣自動調整"
        desc="首次登入只要回答幾題，之後系統就會記住您的偏好——資訊會以您最容易接收的方式呈現"
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {types.map(t => (
          <Card key={t.key} hover style={{ padding: 20, overflow: "hidden", position: "relative" }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10,
              background: t.bg, color: t.color,
              display: "flex", alignItems: "center", justifyContent: "center",
              marginBottom: 14,
            }}>
              <Icon name={t.icon} size={22} color={t.color} />
            </div>
            <div style={{ fontWeight: 700, fontSize: "var(--fs-lg)", marginBottom: 4 }}>{t.label}</div>
            <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: "var(--fs-sm)", lineHeight: 1.6 }}>
              {t.desc}
            </p>
          </Card>
        ))}
      </div>
    </section>
  );
};

const FeaturedCourses = ({ setPage, onPlayCourse }) => {
  const courses = [
    { id: 1, title: "AI 工具應用入門", cat: "職能提升", dur: "120 分鐘", level: "入門", progress: 45, feat: ["tts","caption","keyboard"], img: "https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=800&q=75" },
    { id: 2, title: "易讀版求職必備技能", cat: "易讀版課程", dur: "45 分鐘", level: "基礎", progress: 0, feat: ["easy","multi","caption"], img: "https://images.unsplash.com/photo-1517022812141-23620dba5c23?auto=format&fit=crop&w=800&q=75", isNew: true },
    { id: 3, title: "Excel 實務運用", cat: "資訊技能", dur: "180 分鐘", level: "進階", progress: 78, feat: ["tts","caption","keyboard"], img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=75" },
  ];
  return (
    <section style={{ marginBottom: 40 }}>
      <SectionHeader
        eyebrow="本月推薦"
        title="為你推薦的課程"
        action={<Button variant="ghost" onClick={() => setPage("catalog")}>看全部課程 →</Button>}
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {courses.map(c => <CourseCard key={c.id} course={c} onClick={() => onPlayCourse(c)} />)}
      </div>
    </section>
  );
};

const CourseCard = ({ course, onClick }) => (
  <Card hover onClick={onClick} style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
    <div className="ph-img" style={{ height: 160, position: "relative" }}>
      {course.img}
      {course.isNew && (
        <div style={{ position: "absolute", top: 12, left: 12 }}>
          <Tag color="accent">NEW</Tag>
        </div>
      )}
      {course.progress > 0 && (
        <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 4, background: "rgba(255,255,255,0.4)" }}>
          <div style={{ height: "100%", width: `${course.progress}%`, background: "var(--accent)" }} />
        </div>
      )}
    </div>
    <div style={{ padding: 18, display: "flex", flexDirection: "column", flex: 1 }}>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 10 }}>
        <Tag color="brand">{course.cat}</Tag>
        <Tag>{course.level}</Tag>
      </div>
      <h3 style={{ margin: 0, fontSize: "var(--fs-lg)", fontWeight: 700, lineHeight: 1.3, marginBottom: 10 }}>
        {course.title}
      </h3>
      <div style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--muted)", fontSize: "var(--fs-sm)", marginBottom: 12 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
          <Icon name="clock" size={14} /> {course.dur}
        </span>
      </div>
      <div style={{ marginTop: "auto", paddingTop: 10, borderTop: "1px dashed var(--border)", display: "flex", gap: 6, flexWrap: "wrap" }}>
        {(course.feat || []).map(f => <FeatureBadge key={f} type={f} />)}
      </div>
      {course.progress > 0 && (
        <div style={{
          marginTop: 12, padding: "8px 12px",
          background: "var(--accent-100)", color: "var(--accent-600)",
          borderRadius: 6, fontSize: "var(--fs-sm)", fontWeight: 600,
          display: "flex", justifyContent: "space-between",
        }}>
          <span>繼續學習</span>
          <span>{course.progress}% 完成</span>
        </div>
      )}
    </div>
  </Card>
);

const AnnouncementRow = () => {
  const items = [
    { tag: "活動公告", date: "04/22", text: "115 年度新學員招生說明會（線上直播，提供同步聽打）", color: "accent" },
    { tag: "系統更新", date: "04/18", text: "AI 助教新增影像輔助生成功能（Text-to-Image）" },
    { tag: "成果發表", date: "04/10", text: "Q1 學員完課率 82%，較去年同期成長 18%", color: "ok" },
  ];
  return (
    <Card style={{ padding: "18px 22px", marginBottom: 32 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
        <div style={{ fontWeight: 700, color: "var(--brand-600)", fontSize: "var(--fs-sm)", whiteSpace: "nowrap" }}>
          最新公告
        </div>
        <div style={{ flex: 1, overflow: "hidden" }}>
          <div style={{ display: "flex", gap: 28 }}>
            {items.map((it, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: "var(--fs-sm)", whiteSpace: "nowrap", flex: 1, minWidth: 0, overflow: "hidden" }}>
                <Tag color={it.color || "ink"}>{it.tag}</Tag>
                <span style={{ color: "var(--muted)" }}>{it.date}</span>
                <span style={{ color: "var(--ink-2)", overflow: "hidden", textOverflow: "ellipsis" }}>{it.text}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Card>
  );
};

const PlatformIntegration = ({ setPage, onOpenAI, onStartOnboarding }) => {
  const touchpoints = [
    { num: "01", title: "新手導引", desc: "AI 智能問卷蒐集障別、偏好與職涯目標", action: "開始新手導引", page: "onboarding", icon: "sparkle" },
    { num: "02", title: "AI 幫我選課", desc: "依身心障礙證明或自述偏好推薦適配課程", action: "開始選課", page: "catalog", icon: "filter" },
    { num: "03", title: "學習播放器", desc: "右側 AI 側欄即時問答、重點摘要、下一步", action: "進入學習", page: "player", icon: "play" },
    { num: "04", title: "課後摘要複習卡", desc: "自動產出四種障別版本摘要與複習問題", action: "查看範例", page: "summary", icon: "book" },
    { num: "05", title: "中斷預警回流", desc: "7/14/30 日三階段提醒與人工關懷接手", action: "查看儀表板", page: "dashboard", icon: "alert" },
    { num: "06", title: "職重轉介", desc: "銜接履歷健檢、面試準備、職業重建窗口", action: "我的學習", page: "dashboard", icon: "briefcase" },
  ];
  return (
    <section style={{ marginBottom: 40 }}>
      <SectionHeader
        eyebrow="六大平台整合觸點"
        title="AI 助教嵌入學習的每個環節"
        desc="從註冊、選課、學習、複習、回流到就業銜接，AI 助教不是獨立對話框，而是貫穿全旅程的導航系統"
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {touchpoints.map(tp => {
          const [hover, setHover] = React.useState(false);
          return (
            <div
              key={tp.num}
              onMouseEnter={() => setHover(true)}
              onMouseLeave={() => setHover(false)}
              onClick={() => {
                if (tp.page === "onboarding") onStartOnboarding();
                else setPage(tp.page);
              }}
              style={{
                padding: 22,
                background: "var(--paper)",
                border: "1px solid var(--border)",
                borderLeft: "3px solid var(--brand)",
                borderRadius: "var(--radius)",
                cursor: "pointer",
                transition: "all 180ms",
                transform: hover ? "translateY(-2px)" : "none",
                boxShadow: hover ? "var(--shadow)" : "var(--shadow-sm)",
              }}
            >
              <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 10 }}>
                <span style={{
                  fontFamily: "JetBrains Mono, monospace",
                  fontSize: "var(--fs-xs)", fontWeight: 700,
                  color: "var(--accent-600)", letterSpacing: "0.08em",
                }}>{tp.num}</span>
                <Icon name={tp.icon} size={18} color="var(--brand)" />
              </div>
              <div style={{ fontSize: "var(--fs-lg)", fontWeight: 700, marginBottom: 6 }}>{tp.title}</div>
              <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: "var(--fs-sm)", lineHeight: 1.6 }}>
                {tp.desc}
              </p>
              <div style={{ marginTop: 14, color: "var(--brand)", fontSize: "var(--fs-sm)", fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 6 }}>
                {tp.action} <Icon name="arrowR" size={14} color="var(--brand)" />
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
};

const HomePage = ({ setPage, onOpenAI, onPlayCourse, onStartOnboarding }) => (
  <Page screen="01 首頁" title="無礙e網 首頁" summary="歡迎回來。您可以從熱門課程開始，或使用右下角的 AI 助教協助選課。">
    <HeroSection setPage={setPage} onOpenAI={onOpenAI} />
    <AnnouncementRow />
    <DisabilityQuickAccess />
    <FeaturedCourses setPage={setPage} onPlayCourse={onPlayCourse} />
    <PlatformIntegration setPage={setPage} onOpenAI={onOpenAI} onStartOnboarding={onStartOnboarding} />
  </Page>
);

Object.assign(window, { HomePage });