// Events — 活動與同步教學

const EventsPage = () => {
  const [tab, setTab] = React.useState("upcoming");

  const events = [
    { id: 1, type: "線上直播", title: "115 年度新學員招生說明會", date: "2026/04/22", time: "14:00–16:00", host: "勞動力發展署", capacity: 200, enrolled: 142, adapt: ["VI","HI","CI","LD"], featured: true, img: "LIVE SESSION" },
    { id: 2, type: "實體工作坊", title: "AI 履歷撰寫實戰（台北場）", date: "2026/05/04", time: "09:00–17:00", host: "漫話科技 × 發展署", capacity: 30, enrolled: 23, adapt: ["VI","HI","CI"], location: "台北市中正區" },
    { id: 3, type: "線上直播", title: "同步聽打：客服職能培訓", date: "2026/05/11", time: "10:00–12:00", host: "發展署", capacity: 150, enrolled: 68, adapt: ["HI","CI","LD"] },
    { id: 4, type: "小組共學", title: "易讀版：求職面試技巧討論", date: "2026/05/18", time: "19:00–21:00", host: "學員共學社群", capacity: 12, enrolled: 8, adapt: ["CI","LD"] },
  ];

  return (
    <Page screen="07 活動與同步教學" title="活動與同步教學" summary="這裡提供線上直播課、實體工作坊與共學活動的報名。">
      <SectionHeader
        eyebrow="同步 × 實體 × 共學"
        title="即將舉辦的活動"
        desc="所有活動皆提供即時字幕、手語翻譯、輔具協助，可依需求報名"
      />

      {/* Tabs */}
      <div style={{ display: "flex", gap: 6, marginBottom: 24 }}>
        {[
          { k: "upcoming", l: "即將舉辦", n: 4 },
          { k: "mine", l: "我的報名", n: 2 },
          { k: "past", l: "歷史回放", n: 18 },
        ].map(t => (
          <button key={t.k} onClick={() => setTab(t.k)} style={{
            padding: "10px 16px", borderRadius: 8,
            background: tab === t.k ? "var(--brand)" : "var(--paper)",
            color: tab === t.k ? "#fff" : "var(--ink-2)",
            border: `1.5px solid ${tab === t.k ? "var(--brand)" : "var(--border)"}`,
            fontFamily: "inherit", fontSize: "var(--fs-sm)", fontWeight: 600,
          }}>{t.l} <span style={{ opacity: 0.7 }}>（{t.n}）</span></button>
        ))}
      </div>

      {/* Featured event banner */}
      {events[0] && (
        <Card style={{ padding: 0, marginBottom: 24, overflow: "hidden", display: "grid", gridTemplateColumns: "1fr 1fr" }}>
          <div style={{ width: "55%", minHeight: 280, overflow: "hidden" }}>
            <img
              src="https://images.unsplash.com/photo-1591115765373-5207764f72e7?auto=format&fit=crop&w=1200&q=75"
              alt="線上直播會議畫面：一群人透過視訊參與說明會"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div style={{ padding: 32 }}>
            <Tag color="accent">🔴 本週推薦</Tag>
            <h2 style={{ margin: "14px 0 8px", fontSize: "var(--fs-2xl)", fontWeight: 800, letterSpacing: "-0.02em" }}>
              {events[0].title}
            </h2>
            <p style={{ color: "var(--ink-soft)", fontSize: "var(--fs-base)", lineHeight: 1.7 }}>
              年度新學員招生說明會，介紹無礙 e 網的學習服務、AI 助教應用，以及個別化學習路徑規劃。
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 20 }}>
              <EventMeta ic="calendar" l="日期" v={events[0].date} />
              <EventMeta ic="clock" l="時間" v={events[0].time} />
              <EventMeta ic="users" l="報名狀況" v={`${events[0].enrolled} / ${events[0].capacity} 席`} />
              <EventMeta ic="shield" l="無障礙" v="字幕、手語、聽打" />
            </div>
            <div style={{ marginTop: 20, display: "flex", gap: 10 }}>
              <Button variant="accent" icon="check">立即報名</Button>
              <Button variant="ghost" icon="book">加入行事曆</Button>
            </div>
          </div>
        </Card>
      )}

      {/* Event list */}
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {events.slice(1).map(e => <EventRow key={e.id} ev={e} />)}
      </div>
    </Page>
  );
};

const EventMeta = ({ ic, l, v }) => (
  <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
    <div style={{
      width: 36, height: 36, borderRadius: 8, flexShrink: 0,
      background: "var(--brand-50)", color: "var(--brand)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }}><Icon name={ic} size={18} color="var(--brand)" /></div>
    <div>
      <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>{l}</div>
      <div style={{ fontSize: "var(--fs-sm)", fontWeight: 700, marginTop: 2 }}>{v}</div>
    </div>
  </div>
);

const EventRow = ({ ev }) => {
  const pct = Math.round(ev.enrolled / ev.capacity * 100);
  const nearFull = pct > 80;
  return (
    <Card hover style={{ padding: 20, display: "grid", gridTemplateColumns: "90px 1fr auto", gap: 20, alignItems: "center" }}>
      <div style={{
        padding: 14, borderRadius: 10,
        background: ev.type === "線上直播" ? "var(--accent-100)" : ev.type === "實體工作坊" ? "var(--brand-50)" : "var(--ok-100)",
        textAlign: "center",
      }}>
        <div style={{ fontSize: "var(--fs-xs)", color: "var(--muted)", fontWeight: 600 }}>{ev.date.split("/")[1]} 月</div>
        <div style={{ fontSize: "var(--fs-2xl)", fontWeight: 900, lineHeight: 1, margin: "2px 0", letterSpacing: "-0.03em" }}>
          {ev.date.split("/")[2]}
        </div>
        <div style={{ fontSize: 10, color: "var(--muted)" }}>{ev.time.split("–")[0]}</div>
      </div>
      <div>
        <div style={{ display: "flex", gap: 6, marginBottom: 6 }}>
          <Tag color={ev.type === "線上直播" ? "accent" : "brand"}>{ev.type}</Tag>
          {ev.adapt.map(a => <DisabilityBadge key={a} type={a} />)}
        </div>
        <div style={{ fontWeight: 700, fontSize: "var(--fs-lg)", marginBottom: 4 }}>{ev.title}</div>
        <div style={{ fontSize: "var(--fs-sm)", color: "var(--muted)" }}>
          {ev.host} · {ev.location || "線上"}
        </div>
      </div>
      <div style={{ textAlign: "right", display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-end" }}>
        <div style={{ fontSize: "var(--fs-xs)", color: nearFull ? "var(--warn)" : "var(--muted)", fontWeight: 600 }}>
          {ev.enrolled} / {ev.capacity} 席　{nearFull && "· 快額滿"}
        </div>
        <div style={{ width: 140, height: 4, background: "var(--bg-2)", borderRadius: 2, overflow: "hidden" }}>
          <div style={{ height: "100%", width: `${pct}%`, background: nearFull ? "var(--warn)" : "var(--brand)" }} />
        </div>
        <Button size="sm" variant="secondary">報名</Button>
      </div>
    </Card>
  );
};

Object.assign(window, { EventsPage });