<template>
  <div class="landing">
    <div class="space-bg"></div>
    <div class="stars" ref="starsEl"></div>
    <div class="planet planet-1"></div>
    <div class="planet planet-2"></div>

    <nav class="navbar">
      <div class="logo-space">{{ data.logo_text || 'YUHENG ONE' }}</div>
      <div class="nav-links">
        <a v-for="(link, i) in data.nav_links" :key="i" :href="link.url || '#'">{{ link.label || '' }}</a>
      </div>
    </nav>

    <section class="hero">
      <div class="title-container">
        <h1 class="title-3d">
          <span v-for="(ch, i) in titleChars" :key="i">{{ ch }}</span>
        </h1>
      </div>
      <p class="subtitle-space">{{ data.subtitle || 'INTERSTELLAR EXPLORER EDITION' }}</p>
      <p class="description-space" v-html="descriptionHtml"></p>
      <div class="download-warp">
        <div class="warp-effect"></div>
        <a :href="data.download_url || '#'" class="warp-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
          {{ data.download_text || 'START EXPLORING' }}
        </a>
      </div>
      <div class="orbit-platforms">
        <div class="orbit-collision-ring" aria-hidden="true"></div>
        <a v-for="(p, i) in data.platforms" :key="i" class="orbit-platform" :href="p.url || '#'" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24"><path d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/></svg>
          <span>{{ p.name }}</span>
        </a>
      </div>
      <div class="mission-info">
        <span class="mission-badge">{{ data.version || 'VERSION 3.2.1' }}</span>
        <span>🚀 {{ data.launch_year || 'LAUNCH: 2024' }}</span>
        <span>⚡ {{ data.badge_text || 'FREE ACCESS' }}</span>
      </div>
      <div class="features-space">
        <div v-for="(f, i) in data.features" :key="i" class="feature-space">
          <div class="feature-icon"><svg viewBox="0 0 24 24"><path :d="featureIconPath(i)"/></svg></div>
          <h3>{{ f.title }}</h3>
          <p>{{ f.desc }}</p>
        </div>
      </div>
    </section>

    <footer>
      <p>{{ data.footer_text || '© 2024 YUHENG ONE // STELLAR EXPLORATION INITIATIVE' }}</p>
      <p class="beian">成都宇惠达智能科技有限公司 <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">蜀ICP备2025134957号-1</a></p>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { apiBase } from '../config'

const starsEl = ref(null)
let cometTimer = null

const defaultData = () => ({
  logo_text: 'YUHENG ONE',
  nav_links: [{ label: 'MISSION', url: '#' }, { label: 'DOWNLOAD', url: '#' }, { label: 'CONTACT', url: '#' }],
  title: '宇恒一号',
  subtitle: 'INTERSTELLAR EXPLORER EDITION',
  description: '跨越星际的智能伙伴 · 探索无限可能\n引领您进入前所未有的数字宇宙',
  download_text: 'START EXPLORING',
  download_url: '#',
  platforms: [
    { name: 'WINDOWS', url: '#' },
    { name: 'MACOS', url: '#' },
    { name: 'LINUX', url: '#' },
    { name: 'IOS', url: '#' },
    { name: 'ANDROID', url: '#' }
  ],
  version: 'VERSION 3.2.1',
  launch_year: 'LAUNCH: 2024',
  badge_text: 'FREE ACCESS',
  features: [
    { title: '星际导航', desc: '先进的AI导航系统，精准定位您的需求，引领探索之旅' },
    { title: '量子同步', desc: '跨维度数据同步技术，您的数据在多宇宙中保持一致' },
    { title: '星际防护', desc: '来自未来的安全加密协议，守护您的数字资产安全' }
  ],
  footer_text: '© 2024 YUHENG ONE // STELLAR EXPLORATION INITIATIVE'
})

const data = reactive(defaultData())

const titleChars = computed(() => {
  const t = data.title || '宇恒一号'
  return [...t]
})

const descriptionHtml = computed(() => {
  const s = (data.description || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
  return s.replace(/\n/g, '<br>')
})

const featureIconPaths = [
  'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z',
  'M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z',
  'M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'
]
function featureIconPath(i) {
  return featureIconPaths[i % featureIconPaths.length] || featureIconPaths[0]
}

function addStars() {
  if (!starsEl.value) return
  for (let i = 0; i < 200; i++) {
    const star = document.createElement('div')
    star.className = 'star'
    star.style.left = Math.random() * 100 + '%'
    star.style.top = Math.random() * 100 + '%'
    const size = Math.random() * 2 + 1
    star.style.width = size + 'px'
    star.style.height = size + 'px'
    star.style.setProperty('--duration', (Math.random() * 3 + 2) + 's')
    star.style.setProperty('--min-opacity', Math.random() * 0.3 + 0.1)
    star.style.animationDelay = Math.random() * 5 + 's'
    starsEl.value.appendChild(star)
  }
}

function createComet() {
  const root = document.getElementById('app') || document.body
  const comet = document.createElement('div')
  comet.className = 'comet'
  comet.style.top = Math.random() * 60 + '%'
  comet.style.left = '-100px'
  comet.style.transform = 'rotate(' + (Math.random() * 30 - 15) + 'deg)'
  root.appendChild(comet)
  let position = -100
  const speed = Math.random() * 3 + 2
  function move() {
    position += speed
    comet.style.left = position + 'px'
    comet.style.opacity = (position > window.innerWidth * 0.3 && position < window.innerWidth * 0.7) ? 1 : 0
    if (position < window.innerWidth + 100) requestAnimationFrame(move)
    else comet.remove()
  }
  move()
}

async function fetchHomepage() {
  try {
    const url = apiBase ? `${apiBase}/api/web/homepage` : '/api/web/homepage'
    const res = await fetch(url)
    if (!res.ok) return
    const json = await res.json()
    Object.assign(data, defaultData(), json)
    if (Array.isArray(json.nav_links) && json.nav_links.length) data.nav_links = json.nav_links
    if (Array.isArray(json.platforms) && json.platforms.length) data.platforms = json.platforms
    if (Array.isArray(json.features) && json.features.length) data.features = json.features
  } catch (_) {}
}

onMounted(() => {
  fetchHomepage()
  document.title = (data.title || '宇恒一号') + ' - 星际探索版'
  nextTick(() => {
    addStars()
    cometTimer = setInterval(createComet, 3000)
  })
})

onUnmounted(() => {
  if (cometTimer) clearInterval(cometTimer)
})
</script>

<style scoped>
.landing {
  font-family: 'Noto Sans SC', sans-serif;
  background: var(--space-dark);
  color: var(--star-white);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;700;900&family=Noto+Sans+SC:wght@300;400;700&display=swap');

.landing {
  --space-dark: #0a0a12;
  --space-blue: #1e3a5f;
  --nebula-purple: #4a1a6b;
  --star-white: #ffffff;
  --plasma-cyan: #00d4ff;
  --plasma-pink: #ff2d95;
}

.space-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
  background: radial-gradient(ellipse at 20% 80%, rgba(74,26,107,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(30,58,95,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 0%, var(--space-dark) 100%);
}

.stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.landing .stars .star {
  position: absolute; background: #fff; border-radius: 50%;
  animation: landing-twinkle var(--duration, 2.5s) ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes landing-twinkle {
  0%, 100% { opacity: var(--min-opacity, 0.3); transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.comet {
  position: fixed; width: 120px; height: 3px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, transparent 100%);
  border-radius: 2px; box-shadow: 0 0 10px rgba(255,255,255,0.6);
}

.planet { position: fixed; border-radius: 50%; z-index: 2; pointer-events: none; }
.planet-1 {
  width: 300px; height: 300px; top: 10%; right: -100px;
  background: linear-gradient(135deg, var(--nebula-purple), #1a0a2e);
  box-shadow: inset -30px -30px 60px rgba(0,0,0,0.5), 0 0 60px rgba(74,26,107,0.4);
  opacity: 0.6;
}
.planet-2 {
  width: 150px; height: 150px; bottom: 20%; left: -50px;
  background: linear-gradient(135deg, var(--space-blue), #0a1520);
  box-shadow: inset -20px -20px 40px rgba(0,0,0,0.5), 0 0 40px rgba(30,58,95,0.4);
  opacity: 0.5;
}

.navbar {
  position: fixed; top: 0; left: 0; right: 0; padding: 25px 50px;
  display: flex; justify-content: space-between; align-items: center; z-index: 100;
  background: linear-gradient(180deg, rgba(10,10,18,0.9) 0%, transparent 100%);
}
.logo-space {
  font-family: 'Exo 2', sans-serif; font-size: 26px; font-weight: 900;
  background: linear-gradient(90deg, var(--plasma-cyan), var(--star-white), var(--plasma-pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; letter-spacing: 4px;
}
.nav-links { display: flex; gap: 35px; font-family: 'Exo 2', sans-serif; font-size: 12px; letter-spacing: 2px; }
.nav-links a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: var(--plasma-cyan); }

.hero {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 100px 20px; position: relative; z-index: 10;
}
.title-container { perspective: 1000px; margin-bottom: 30px; }
.title-3d {
  font-family: 'Exo 2', sans-serif; font-size: clamp(60px, 12vw, 150px); font-weight: 900;
  color: var(--star-white);
  text-shadow: 0 0 20px rgba(0,212,255,0.3);
  animation: float-title 4s ease-in-out infinite; transform-style: preserve-3d;
}
@keyframes float-title {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-15px) rotateX(5deg); }
}
.title-3d span { display: inline-block; animation: glow-text 3s ease-in-out infinite; }
@keyframes glow-text {
  0%, 100% { text-shadow: 0 0 10px rgba(0,212,255,0.5); }
  50% { text-shadow: 0 0 30px rgba(255,45,149,0.8); }
}

.subtitle-space {
  font-family: 'Exo 2', sans-serif; font-size: clamp(16px, 3vw, 24px); letter-spacing: 12px;
  color: var(--plasma-cyan); margin-bottom: 25px; text-transform: uppercase;
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.7; text-shadow: 0 0 10px var(--plasma-cyan); }
  50% { opacity: 1; text-shadow: 0 0 30px var(--plasma-cyan); }
}

.description-space {
  max-width: 650px; text-align: center; color: rgba(255,255,255,0.6);
  line-height: 2; font-size: 16px; margin-bottom: 50px;
}

.download-warp { position: relative; display: inline-block; padding: 0; background: transparent; border: none; cursor: pointer; }
.download-warp .warp-btn {
  position: relative; display: flex; align-items: center; gap: 15px; padding: 22px 45px;
  font-size: 16px; font-weight: 700; color: var(--space-dark);
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  border: none; font-family: 'Exo 2', sans-serif; letter-spacing: 2px; text-transform: uppercase;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: all 0.4s ease; text-decoration: none;
}
.download-warp .warp-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0,212,255,0.6), 0 0 60px rgba(255,45,149,0.4);
}
.warp-effect {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
  border-radius: 50%; transform: translate(-50%, -50%);
  animation: warp-drive 1.5s ease-out infinite;
}
@keyframes warp-drive { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } }

.orbit-platforms {
  display: flex; gap: 25px; margin-top: 70px; flex-wrap: wrap; justify-content: center; position: relative;
}
.orbit-platforms::before {
  content: ''; position: absolute; top: 50%; left: -50px; right: -50px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--plasma-cyan), transparent); z-index: -1;
}
.orbit-platform {
  width: 90px; height: 90px; background: rgba(30,58,95,0.3); border: 1px solid rgba(0,212,255,0.3);
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; transition: all 0.4s ease; position: relative;
  overflow: visible; text-decoration: none; color: inherit;
}
.orbit-platform:hover {
  background: rgba(0,212,255,0.25); border-color: var(--plasma-cyan);
  transform: translateY(-12px) scale(1.08); box-shadow: 0 12px 35px rgba(0,212,255,0.4);
}
.orbit-platform svg { width: 28px; height: 28px; fill: var(--star-white); }
.orbit-platform span { font-size: 10px; color: rgba(255,255,255,0.6); font-family: 'Exo 2', sans-serif; letter-spacing: 1px; }

.mission-info {
  margin-top: 60px; display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;
  font-family: 'Exo 2', sans-serif; font-size: 13px; color: rgba(255,255,255,0.4);
}
.mission-info span { display: flex; align-items: center; gap: 8px; }
.mission-info .mission-badge {
  padding: 4px 12px; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3);
  border-radius: 20px; color: var(--plasma-cyan); font-size: 11px;
}

.features-space {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px;
  max-width: 1100px; margin: 80px auto 0; padding: 0 20px; width: 100%;
}
.feature-space {
  background: linear-gradient(135deg, rgba(30,58,95,0.2) 0%, rgba(10,10,18,0.8) 100%);
  border: 1px solid rgba(0,212,255,0.1); border-radius: 20px; padding: 35px;
  backdrop-filter: blur(10px); transition: all 0.5s ease; position: relative; overflow: hidden;
}
.feature-space:hover {
  transform: translateY(-15px); border-color: rgba(0,212,255,0.4);
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.feature-icon {
  width: 55px; height: 55px;
  background: linear-gradient(135deg, var(--plasma-cyan), var(--plasma-pink));
  border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.feature-icon svg { width: 28px; height: 28px; fill: var(--space-dark); }
.feature-space h3 { font-family: 'Exo 2', sans-serif; font-size: 18px; color: var(--star-white); margin-bottom: 12px; letter-spacing: 1px; }
.feature-space p { color: rgba(255,255,255,0.5); font-size: 14px; line-height: 1.7; }

.landing footer {
  padding: 40px; text-align: center; border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 80px; position: relative; z-index: 10;
}
.landing footer p { color: rgba(255,255,255,0.3); font-size: 12px; font-family: 'Exo 2', sans-serif; letter-spacing: 2px; }
.landing footer .beian { margin-top: 8px; }
.landing footer .beian a { color: rgba(255,255,255,0.4); text-decoration: none; }
.landing footer .beian a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .navbar { padding: 15px 20px; }
  .planet { display: none; }
  .orbit-platforms::before { display: none; }
}
</style>
