/* 进入页 EntryScreen —— 看见整条会变长的龙,被邀请加入。导出 window.WL.EntryScreen */
(function () {
  function EntryScreen({ onStart, onScaleClick }) {
    const NS = window.U4e07U9cdeWU00e0nlU00ednDesignSystem_56bec1 || {};
    const { Button, GrowthMeter } = NS;
    const { DragonCanvas } = window.WL;
    const D = window.WL_DATA;

    return (
      <div style={{ minHeight: "100%", display: "flex", flexDirection: "column", background: "var(--surface-page)" }}>
        {/* 顶栏 */}
        <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 30px" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
            <span style={{ font: "var(--fw-semibold) 24px/1 var(--font-serif)", color: "var(--text-strong)", letterSpacing: "var(--tracking-wider)" }}>织遗录</span>
            <span style={{ font: "var(--type-meta)", color: "var(--text-muted)", letterSpacing: "var(--tracking-wide)" }}>黄龙溪 · 零废弃艺术</span>
          </div>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "var(--type-meta)", color: "var(--text-accent)", letterSpacing: "var(--tracking-wide)" }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)", animation: "wlBreathe 2.4s ease-in-out infinite" }} />
            正在生长
          </span>
        </header>

        {/* 龙身 */}
        <div style={{ padding: "0 22px" }}>
          <DragonCanvas scales={D.scales} total={150} height={380} onScaleClick={onScaleClick} />
        </div>

        {/* 主张 + 行动 */}
        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", padding: "30px 24px 44px", gap: 18 }}>
          <span style={{ font: "var(--type-kicker)", textTransform: "uppercase", letterSpacing: "var(--tracking-widest)", color: "var(--text-accent)" }}>ZHIYILU · HUANGLONGXI</span>
          <h1 style={{ font: "var(--type-display)", color: "var(--text-strong)", letterSpacing: "var(--tracking-wide)", maxWidth: 660, textWrap: "balance", margin: 0 }}>
            挑一块旧布,写下一句话<br />让它成为这条龙身上的一片鳞
          </h1>
          <p style={{ font: "var(--type-body)", color: "var(--text-muted)", maxWidth: 500, margin: 0 }}>
            南宋火龙灯舞的旧龙重生。每个人一片旧布、一句话,缝成同一条会一直变长的龙。点开任意一片,都能读到那个人留下的话。
          </p>
          <div style={{ width: "100%", maxWidth: 460, marginTop: 6 }}>
            <GrowthMeter count={D.total} goal={D.goal} label="全网已缝上鳞片" />
          </div>
          <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
            <Button variant="primary" size="lg" onClick={onStart} iconLeft={<i data-lucide="scissors" style={{ width: 18, height: 18 }}></i>}>
              我也缝一片
            </Button>
            <Button variant="ghost" size="lg" onClick={() => onScaleClick && onScaleClick(D.scales[0])}>
              先读读别人的
            </Button>
          </div>
        </div>
        <style>{`@keyframes wlBreathe{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}`}</style>
      </div>
    );
  }
  window.WL = window.WL || {};
  window.WL.EntryScreen = EntryScreen;
})();