bolightvisual

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Divider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@Composable
fun BoGuangVisualScreen() {
// 1. 定義動畫控制狀態
val bgScale = remember { Animatable(1.05f) }
val bgAlpha = remember { Animatable(0f) }
val logoScale = remember { Animatable(0.95f) }
val logoAlpha = remember { Animatable(0f) }
val footerAlpha = remember { Animatable(0f) }

// 2. 啟動動畫效果 (當畫面載入時)
LaunchedEffect(Unit) {
// 背景淡入與輕微縮放（模擬大霧散開）
launch {
bgAlpha.animateTo(1f, animationSpec = tween(2500, easing = LinearOutSlowInEasing))
}
launch {
bgScale.animateTo(1f, animationSpec = tween(2500, easing = LinearOutSlowInEasing))
}

// 中央標題圈圈淡入
delay(300)
launch {
logoAlpha.animateTo(1f, animationSpec = tween(2000))
}
launch {
logoScale.animateTo(1f, animationSpec = tween(2000, easing = LinearOutSlowInEasing))
}

// 下方文案稍微延遲後優雅浮現
delay(800)
launch {
footerAlpha.animateTo(0.85f, animationSpec = tween(2000))
}
}

// 3. 畫面佈局
Box(modifier = Modifier.fillMaxSize()) {

// — 背景圖片層 —
// 請確保將你的山霧太陽圖片放入 res/drawable 資料夾，並命名為 bg_bo_guang
Image(
painter = painterResource(id = R.drawable.bg_bo_guang),
contentDescription = “泊光背景",
modifier = Modifier
.fillMaxSize()
.alpha(bgAlpha.value)
.scale(bgScale.value),
contentScale = ContentScale.Crop
)

// 暖調微光濾鏡疊加（增加畫面的溫柔空氣感）
Box(
modifier = Modifier
.fillMaxSize()
.alpha(0.15f)
.background(Color(0xFFE6E1DA))
)

// — 中央主視覺圓圈與標題 —
Box(
modifier = Modifier
.align(Alignment.Center)
.size(320.dp) // 針對手機螢幕優化的圓圈大小
.scale(logoScale.value)
.alpha(logoAlpha.value)
.border(1.dp, Color(0x9985735D), CircleShape), // 細緻的金色系線條
contentAlignment = Alignment.Center
) {
// 圓圈左右兩側的東方禪意小圓點
Box(modifier = Modifier.align(Alignment.CenterStart).offset(x = (-3).dp).size(5.dp).background(Color(0xCC85735D), CircleShape))
Box(modifier = Modifier.align(Alignment.CenterEnd).offset(x = 3.dp).size(5.dp).background(Color(0xCC85735D), CircleShape))

Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(
text = “泊 光",
fontSize = 42.sp,
fontWeight = FontWeight.Normal,
color = Color(0xFF4A4238),
fontFamily = FontFamily.Serif // 使用襯線體還原東方古典美
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = “V I S U A L",
fontSize = 14.sp,
fontWeight = FontWeight.Light,
color = Color(0xFF615649),
fontFamily = FontFamily.SansSerif
)
}
}

// — 下方文案區塊 —
Column(
modifier = Modifier
.align(Alignment.BottomCenter)
.padding(bottom = 60.dp)
.alpha(footerAlpha.value),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = “影 像 × 美 學 × 故 事",
fontSize = 13.sp,
color = Color(0xFF544B40),
fontWeight = FontWeight.Normal
)

// 細微的分隔線
Box(
modifier = Modifier
.padding(vertical = 16.dp)
.width(30.dp)
.height(1.dp)
.background(Color(0x8085735D))
)

Text(
text = “用光影記錄有溫度的旅程",
fontSize = 12.sp,
color = Color(0xFF544B40),
fontWeight = FontWeight.Light,
alpha = 0.8f
)
}
}
}