# -*- coding: utf-8 -*-
"""Claudeのデザイン（ショート専用・舞台型・2026-11-06）
エイイチの言葉: Claude のデザインの質が低いのは、デザイン力がないからではなく、進め方・修正・組み立て・統一する力が弱いから／要素を詰め込みすぎる（2026-10-24）
このモニターの見た目も、2026-11-06 にエイイチ「雑に見える」で、面で組む・1画面に1つ・色の意味は1つ、に作り直した"""
from butai_parts import *
OUTRO_K = 6   # 締めの文の番号（narration.py の最後に足した文）

NAME, VER = "Claudeのデザイン", 3
HEAD = "AIの<br>デザイン、どう？"
T_ON = (0, 1.2)


def clutter(t0, step=0.06):
    import random
    random.seed(4)
    cols = ["#E2683A", "#57B5F8", "#3BB273", "#F2C14E", "#C4472A", "#9B6BD6", "#F5F3EE"]
    words = ["NEW!", "★", "重要", "→", "POINT", "!!", "※", "100%", "▶", "✓", "注目", "◆"]
    out = ""
    for k in range(26):
        x, y = random.randint(20, 760), random.randint(40, 520)
        c = random.choice(cols)
        if k % 3 == 0:
            el = f'width:{random.randint(60, 180)}px;height:{random.randint(30, 90)}px;border:3px solid {c};border-radius:{random.choice([0, 8, 40])}px'
            txt = ""
        else:
            el = f'font-size:{random.randint(22, 48)}px;font-weight:900;color:{c}'
            txt = random.choice(words)
        out += (f'<div style="position:absolute;left:{x}px;top:{y}px;{el};transform:rotate({random.randint(-14, 14)}deg);opacity:0;'
                f'animation:{a("pop", t0 + k * step, .2)}">{txt}</div>')
    return out


def scene(T, S):
    h = CSS
    # 0: デザインを頼むと？（白紙）
    h += win(T(0, 1.2), T(1, 0), kick("Claude にデザインを頼むと")
             + f'<div class="card" style="left:200px;top:140px;width:500px;height:340px;align-items:center;font-size:40px;color:{DIM}">（白紙）</div>')
    # 1: 詰め込みすぎる（要素が次々に増える）
    t1 = T(1, 0)
    h += win(t1, T(2, 0), clutter(t1 + 0.15))
    # 2: デザイン力じゃない。進め方と統一する力（エイイチの言葉）
    t2, s2 = T(2, 0), S(2)
    h += win(t2, T(3, 0), kick("エイイチの見立て")
             + f'<div class="card" style="left:48px;top:150px;width:390px;height:300px;font-size:44px;color:#8A93A3;opacity:0;animation:{a("up", t2 + 0.3)}"><small>弱いのは</small>デザイン力</div>'
             + f'<div class="strike" style="left:70px;width:340px;top:330px;animation:{a("strike", t2 + 1.4, .3)}"></div>'
             + f'<div class="card or" style="left:462px;top:150px;width:390px;height:300px;font-size:44px;opacity:0;animation:{a("up", t2 + s2 - 2.2)}"><small>弱いのは</small>進め方と<br>統一する力</div>')
    # 3: 1画面で伝えることは1つ（散らかりが消えて、1文だけ残る）
    t3 = T(3, 0)
    h += win(t3, T(4, 0), kick("だから")
             + f'<div class="msg" style="top:200px;text-align:center;font-size:90px;opacity:0;animation:{a("pop", t3 + 0.6, .4)}">1画面に、1つ</div>')
    # 4: 線より面。色は意味を1つだけ
    t4, s4 = T(4, 0), S(4)
    lines_ = "".join(f'<div style="position:absolute;left:{70 + k * 120}px;top:240px;width:100px;height:160px;border:2px solid #5C6678;border-radius:4px"></div>' for k in range(3))
    faces_ = "".join(f'<div style="position:absolute;left:{480 + k * 125}px;top:240px;width:110px;height:160px;border-radius:12px;background:{ORANGE if k == 1 else FACE_2};'
                     f'opacity:0;animation:{a("up", t4 + 1.0 + k * 0.15)}"></div>' for k in range(3))
    h += win(t4, T(5, 0), kick("決まり")
             + f'<div style="position:absolute;left:70px;top:150px;font-size:40px;font-weight:900;color:{DIM}">線</div>' + lines_
             + f'<div style="position:absolute;left:480px;top:150px;font-size:40px;font-weight:900;color:{INK}">面</div>' + faces_
             + f'<div style="position:absolute;left:480px;top:430px;font-size:30px;font-weight:800;color:{INK};opacity:0;animation:{a("up", t4 + s4 - 1.6)}">色の意味は、1つだけ</div>')
    # 5: このモニターも作り直した（前と後）
    t5 = T(5, 0)
    h += win(t5, None, kick("このモニターも")
             + f'<div class="card" style="left:48px;top:140px;width:380px;height:330px;padding:0;overflow:hidden;opacity:.6"><div style="position:relative;transform:scale(.42);transform-origin:0 0;width:900px;height:780px">{clutter(-10, 0)}</div></div>'
             + f'<div style="position:absolute;left:48px;top:490px;font-size:28px;font-weight:800;color:{DIM}">前</div>'
             + f'<div class="card" style="left:472px;top:140px;width:380px;height:330px;justify-content:flex-start;padding-top:40px;opacity:0;animation:{a("pop", t5 + 0.5, .35)}">'
               f'<span style="font-size:22px;color:{DIM}">■ いまは</span><span style="font-size:40px;margin-top:10px">1画面に、1つ</span>'
               f'<div style="margin-top:30px;height:70px;width:140px;border-radius:10px;background:{ORANGE}"></div></div>'
             + f'<div style="position:absolute;left:472px;top:490px;font-size:28px;font-weight:800;color:{ORANGE};opacity:0;animation:{a("up", t5 + 0.5)}">後</div>')
    h += outro(T, OUTRO_K)   # 締め：サイトへの入口
    return h


def OVER(T):
    return stage_fx(T, shakes=[(T(1, 1.4), 0.6)], fx=[dict(kind="shine", t=T(5, 0.9), d=0.9), dict(kind="shine", t=T(3, 0.6), d=0.8)])


FACE = [(-1, 0.0, 1.0, "smile"), (1, 0.0, 2.3, "trouble"), (2, 0.0, 4.6, "trouble"), (3, 0.0, 3.4, "think"), (4, 0.0, 3.4, "smile"), (5, 0.0, 3.0, "joy"), ("end", 0.0, 3.0, "joy")]
POSE = [(-1, 0.0, 1), (1, 0.6, 3), (2, 0.0, 2), (3, 0.0, 1), (5, 0.5, 4)]
LEAN = []
INTRO = "hop"
MOVES = [(1, 0.2, "shake", 1.4), (2, 0.4, "bow", 1.6), (3, 0.4, "tilt", 1.0), (5, 0.3, "jump", 1.0)]
SE = [(-1, 0.0, "se_rise", -10), (0, 1.2, "se_boot", -12)] + [(1, 0.15 + k * 0.18, "se_pop", -15) for k in range(8)] + [
      (2, 0.0, "se_whoosh", -12), (2, 1.4, "se_pechin", -10), (3, 0.0, "se_whoosh", -12), (3, 0.6, "se_ding", -10),
      (4, 0.0, "se_whoosh", -12), (5, 0.0, "se_whoosh", -12), (5, 0.9, "se_chapter_glock", -10)]
ENDING = dict(kind="jump", at=(5, 0.9))