#!/usr/bin/env python3
"""カタログ用チローム compositions/chrome-01.html〜chrome-10.html を生成する。
手で直さず、このスクリプトを直して作り直す（lintが同一composition idの複数使用を
禁止するため、1スタイル=1ファイルへ展開する）。"""
import pathlib

STYLES = [
    ("01", "マスクリビール", "mask-reveal-up"),
    ("02", "ポップイン", "spring-pop"),
    ("03", "タイプライター", "typewriter"),
    ("04", "ビートスラム", "kinetic-beat-slam"),
    ("05", "グリッチ", "chromatic-glitch"),
    ("06", "マーカーハイライト", "marker-highlight"),
    ("07", "ウォーターフォール", "waterfall-entry"),
    ("08", "フォーカスブラー", "focus-blur-resolve"),
    ("09", "スロットカウンター", "vertical-spring-ticker"),
    ("10", "グラデーションスイープ", "gradient-text-sweep"),
]

ACCENT = "#FFC94A"

TEMPLATE = """<!doctype html>
<html>
  <head><meta charset="UTF-8" /></head>
  <body>
    <template>
      <style>
        #root {{
          position: absolute;
          inset: 0;
          --accent: {accent};
        }}
        .pc{n}-top {{
          position: absolute;
          left: 90px;
          top: 210px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          row-gap: 10px;
        }}
        .pc{n}-numrow {{
          display: flex;
          align-items: baseline;
          column-gap: 12px;
          font-family: "IBM Plex Mono", monospace;
          overflow: hidden;
          padding-bottom: 4px;
        }}
        .pc{n}-num {{
          display: inline-block;
          font-size: 84px;
          font-weight: 700;
          line-height: 1;
          color: var(--accent);
          letter-spacing: -0.02em;
          will-change: transform;
        }}
        .pc{n}-of {{
          display: inline-block;
          font-size: 30px;
          font-weight: 400;
          color: rgba(242, 239, 232, 0.4);
          letter-spacing: 0.06em;
        }}
        .pc{n}-label {{
          font-family: "Noto Sans JP", sans-serif;
          font-size: 52px;
          font-weight: 700;
          line-height: 1.2;
          color: #f2efe8;
          letter-spacing: 0.02em;
          will-change: transform;
        }}
        .pc{n}-tag {{
          font-family: "IBM Plex Mono", monospace;
          font-size: 25px;
          font-weight: 400;
          color: rgba(242, 239, 232, 0.42);
          letter-spacing: 0.1em;
        }}
        .pc{n}-ghost {{
          position: absolute;
          right: -30px;
          bottom: 330px;
          font-family: "IBM Plex Mono", monospace;
          font-weight: 700;
          font-size: 460px;
          line-height: 0.8;
          letter-spacing: -0.06em;
          background-image: linear-gradient(
            rgba(242, 239, 232, 0.075),
            rgba(242, 239, 232, 0.035)
          );
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          -webkit-text-stroke: 2px rgba(242, 239, 232, 0.09);
          will-change: transform;
        }}
        .pc{n}-dots {{
          position: absolute;
          left: 0;
          right: 0;
          bottom: 320px;
          display: flex;
          justify-content: center;
        }}
        .pc{n}-dotwrap {{
          position: relative;
          display: flex;
          column-gap: 18px;
        }}
        .pc{n}-dot {{
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: rgba(242, 239, 232, 0.16);
        }}
        .pc{n}-active {{
          position: absolute;
          top: -3px;
          left: {active_left}px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: var(--accent);
          will-change: transform;
        }}
      </style>

      <div id="root" data-composition-id="pack-chrome-{n}" data-start="0"
           data-width="1080" data-height="1920"
           data-layout-allow-overlap data-layout-allow-overflow>
        <div class="pc{n}-ghost" id="pc{n}-ghost" aria-hidden="true">{n}</div>
        <div class="pc{n}-top">
          <div class="pc{n}-numrow">
            <span class="pc{n}-num" id="pc{n}-num">{n}</span>
            <span class="pc{n}-of">/ 10</span>
          </div>
          <div class="pc{n}-label" id="pc{n}-label">{label}</div>
          <div class="pc{n}-tag" id="pc{n}-tag">{tag}</div>
        </div>
        <div class="pc{n}-dots" aria-hidden="true">
          <div class="pc{n}-dotwrap">
{dots}
            <span class="pc{n}-active" id="pc{n}-active"></span>
          </div>
        </div>
      </div>

      <script>
        window.__timelines = window.__timelines || {{}};
        (function () {{
          var tl = gsap.timeline({{ paused: true }});
          tl.fromTo("#pc{n}-num", {{ y: "110%" }},
            {{ y: "0%", duration: 0.45, ease: "power4.out" }}, 0.05);
          tl.fromTo("#pc{n}-label", {{ x: -26, opacity: 0 }},
            {{ x: 0, opacity: 1, duration: 0.45, ease: "power3.out" }}, 0.14);
          tl.fromTo("#pc{n}-tag", {{ x: -26, opacity: 0 }},
            {{ x: 0, opacity: 1, duration: 0.45, ease: "power3.out" }}, 0.22);
          tl.fromTo("#pc{n}-active", {{ scale: 0 }},
            {{ scale: 1, duration: 0.4, ease: "power3.out" }}, 0.18);
          /* ゴースト番号の超低速ドリフト（最長スロット4sぶん） */
          tl.fromTo("#pc{n}-ghost", {{ y: 16 }},
            {{ y: -16, duration: 4, ease: "none" }}, 0);
          window.__timelines["pack-chrome-{n}"] = tl;
        }})();
      </script>
    </template>
  </body>
</html>
"""

DOT = '            <span class="pc{n}-dot"></span>'

root = pathlib.Path(__file__).resolve().parent.parent / "compositions"
for i, (n, label, tag) in enumerate(STYLES):
    dots = "\n".join(DOT.format(n=n) for _ in range(10))
    # ドット12px+gap18px=30pxピッチ。アクティブ(18px)はドット中心へ-3px
    active_left = i * 30 - 3
    html = TEMPLATE.format(n=n, label=label, tag=tag, dots=dots,
                           active_left=active_left, accent=ACCENT)
    out = root / f"chrome-{n}.html"
    out.write_text(html, encoding="utf-8")
    print(f"wrote {out.name}")
