<header class="header">
    <div class="header-content">
        <h1>3D试衣间</h1>
        <p>沉浸式虚拟试穿体验</p>
    </div>
</header>

<main class="main-content">
    <div class="fitting-room-container">
        <!-- AR相机区域 -->
        <div class="ar-camera" [class.active]="isARCameraActive" (click)="isARCameraActive ? stopAR() : startAR()">
            <div class="camera-content" *ngIf="!isARCameraActive">
                <div class="camera-icon">📷</div>
                <div>点击开启AR试穿</div>
                <div class="camera-desc">支持实时身材建模</div>
            </div>
            <div class="ar-preview" *ngIf="isARCameraActive">
                <div class="ar-overlay">
                    <div class="scanning-animation"></div>
                    <div class="ar-instruction">请将摄像头对准全身</div>
                </div>
            </div>
        </div>

        <!-- 身材设置 -->
        <div class="body-settings">
            <h4>身材参数设置</h4>
            <div class="settings-grid">
                <div class="setting-item">
                    <label>身高 (cm)</label>
                    <input type="range" min="150" max="190" [value]="height" 
                           (input)="updateHeight($event)" 
                           [style.accentColor]="'#ff6b6b'">
                    <span>{{ height }}cm</span>
                </div>
                <div class="setting-item">
                    <label>体重 (kg)</label>
                    <input type="range" min="40" max="100" [value]="weight" 
                           (input)="updateWeight($event)" 
                           [style.accentColor]="'#ff6b6b'">
                    <span>{{ weight }}kg</span>
                </div>
                <div class="setting-item">
                    <label>胸围 (cm)</label>
                    <div class="measurement-value">{{ bodyMeasurements.chest }}cm</div>
                </div>
                <div class="setting-item">
                    <label>腰围 (cm)</label>
                    <div class="measurement-value">{{ bodyMeasurements.waist }}cm</div>
                </div>
                <div class="setting-item">
                    <label>臀围 (cm)</label>
                    <div class="measurement-value">{{ bodyMeasurements.hips }}cm</div>
                </div>
                <div class="setting-item full-width">
                    <label>体型预览</label>
                    <div class="body-preview">
                        <div class="body-shape" [style.height.px]="height/2"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 场景选择 -->
        <div class="scene-selector">
            <h4>试穿场景 <span *ngIf="selectedScene">- {{ sceneNames[selectedScene] }}</span></h4>
            <div class="scenes">
                <div class="scene-item" 
                     *ngFor="let scene of sceneKeys"
                     [style.--scene-bg-start]="sceneBackgrounds[scene]['--scene-bg-start']"
                     [style.--scene-bg-end]="sceneBackgrounds[scene]['--scene-bg-end']"
                     [class.active]="selectedScene === scene"
                     (click)="selectScene(scene)">
                    <div class="scene-icon">{{ getSceneIcon(scene) }}</div>
                    <div class="scene-name">{{ sceneNames[scene] }}</div>
                </div>
            </div>
        </div>
    </div>
</main>