const { Button } = window.VerseViewMediaDesignSystem_fc0edd;
function Sticker({ children, bg, rotate, style }) {
  return React.createElement('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, background: bg, color: 'var(--ink-900)', fontWeight: 700, borderRadius: 'var(--radius-pill)', transform: 'rotate(' + rotate + 'deg)', transition: 'transform var(--dur-base) var(--ease-standard)', ...style } }, children);
}
function HeroImg({ id, placeholder, src, label, style }) {
  return React.createElement('div', { style: { position: 'absolute', ...style } },
    React.createElement('image-slot', { id, shape: 'rounded', radius: 10, placeholder, src, style: { width: '100%', height: '100%', border: '4px solid var(--white)', boxShadow: '0 14px 30px rgba(24,24,24,0.18)' } }),
    label ? React.createElement('div', { style: { position: 'absolute', bottom: -12, left: 12, fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', padding: '4px 10px', borderRadius: 'var(--radius-pill)', background: 'var(--white)', boxShadow: '0 4px 10px rgba(24,24,24,0.12)' } }, label) : null
  );
}
function HomeScreen({ setPage }) {
  const services = [
    { t: '品牌策略', bg: 'var(--pink)', r: -3 }, { t: '內容創作', bg: 'var(--sky)', r: 2 }, { t: 'KOL營銷', bg: 'var(--lemon)', r: -2 },
    { t: '社交媒體運營', bg: 'var(--lime)', r: 3 }, { t: '視頻製作', bg: 'var(--lavender)', r: -1 }, { t: '數據分析', bg: 'var(--coral)', r: 2 },
  ];
  const cases = [
    { id: 'case1', t: '品牌合作案例', d: '美妝品牌抖音專場直播', stat: '328萬', statLabel: 'GMV', platforms: ['抖音'], img: 'assets/photography/case-douyin-live-beauty.jpg' },
    { id: 'case2', t: '社交媒體成果', d: '小紅書種草+直播聯動', stat: '11%', statLabel: '互動率', platforms: ['小紅書'], img: 'assets/photography/case-xiaohongshu-live.jpg' },
    { id: 'case3', t: '創意項目', d: '快閃市集現場多平台直播', stat: '620人', statLabel: '到店轉化', platforms: ['抖音', '小紅書', 'Facebook'], img: 'assets/photography/case-flashmob-multiplatform.jpg' },
  ];
  const stats = [['180+', '服務客戶'], ['420+', '執行活動場數'], ['3,600萬+', '累計觀看']];
  return React.createElement('div', { style: { fontFamily: 'var(--font-sans-body)', background: 'var(--bg-page)', color: 'var(--text-body)' } },

    React.createElement('section', { style: { maxWidth: 1280, margin: '0 auto', padding: '56px 40px 40px', display: 'grid', gridTemplateColumns: '50% 50%', gap: 8, alignItems: 'center' } },
      React.createElement('div', null,
        React.createElement('div', { style: { fontSize: 12, fontWeight: 700, letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8 } }, React.createElement('span', null, '✦'), 'VerseView Media · 詩映視界傳媒'),
        React.createElement('h1', { style: { fontFamily: 'var(--font-serif-display)', fontSize: 'var(--text-display-xl)', lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-display)', color: 'var(--text-heading)', margin: '0 0 28px' } },
          '用內容創造', React.createElement('br'),
          React.createElement('span', { style: { background: 'var(--lime)', padding: '0 6px' } }, '品牌影響力')
        ),
        React.createElement('p', { style: { fontSize: 'var(--text-body-l)', lineHeight: 'var(--lh-relaxed)', margin: '0 0 32px', maxWidth: 420 } }, '深耕大灣區的線上多平台直播 × 線下活動全案服務商，覆蓋香港與內地雙市場。'),
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
          React.createElement(Button, { variant: 'secondary', size: 'l', onClick: () => setPage('contact') }, '開始合作'),
          React.createElement('span', { style: { fontSize: 22 } }, '→')
        )
      ),
      React.createElement('div', { style: { position: 'relative', height: 420 } },
        React.createElement(HeroImg, { id: 'hero-1', placeholder: 'KOL拍攝', src: 'assets/photography/kol-shoot.jpg', label: '真實拍攝 · 自然光', style: { width: '64%', height: '60%', top: 0, right: 0, animation: 'vv-float 6s ease-in-out infinite' } }),
        React.createElement(HeroImg, { id: 'hero-2', placeholder: '社交媒體內容製作', src: 'assets/photography/social-content-production.jpg', label: '創意內容', style: { width: '38%', height: '30%', top: '6%', left: 0, animation: 'vv-float 7s ease-in-out infinite 0.4s' } }),
        React.createElement(HeroImg, { id: 'hero-3', placeholder: '品牌活動', src: 'assets/photography/brand-activation.jpg', label: '現場活動', style: { width: '44%', height: '34%', bottom: 0, left: '10%', animation: 'vv-float 8s ease-in-out infinite 0.8s' } }),
        React.createElement('span', { style: { position: 'absolute', bottom: '4%', right: 0, fontSize: 32, transform: 'rotate(12deg)' } }, '✦')
      )
    ),

    React.createElement('section', { style: { maxWidth: 1200, margin: '0 auto', padding: '48px 40px 80px' } },
      React.createElement('div', { style: { fontFamily: 'var(--font-serif-display)', fontSize: 'var(--text-h1)', letterSpacing: 'var(--ls-display)', marginBottom: 36, display: 'flex', alignItems: 'baseline', gap: 12 } },
        React.createElement('span', { style: { fontSize: 16, color: 'var(--coral-deep)' } }, '01'), '核心服務'
      ),
      React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 24, justifyContent: 'center', padding: '20px 0' } },
        services.map((s, i) => React.createElement(Sticker, { key: i, bg: s.bg, rotate: s.r, style: { fontSize: 22, padding: '20px 34px' } }, s.t))
      )
    ),

    React.createElement('section', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 40px 80px', display: 'flex', borderTop: '1px solid var(--ink-900)' } },
      stats.map(([v, l], i) => React.createElement('div', { key: i, style: { flex: 1, padding: '32px 16px', borderRight: i < stats.length - 1 ? '1px solid var(--border-subtle)' : 'none' } },
        React.createElement('div', { style: { fontFamily: 'var(--font-serif-display)', fontSize: 'clamp(2.5rem,5vw,4.5rem)', lineHeight: 1, letterSpacing: 'var(--ls-display)', color: 'var(--text-heading)' } }, v),
        React.createElement('div', { style: { fontSize: 13, letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 8 } }, l)
      ))
    ),

    React.createElement('section', { style: { maxWidth: 1320, margin: '0 auto', padding: '0 40px 96px' } },
      React.createElement('div', { style: { fontFamily: 'var(--font-serif-display)', fontSize: 'var(--text-h1)', letterSpacing: 'var(--ls-display)', marginBottom: 32, display: 'flex', alignItems: 'baseline', gap: 12 } },
        React.createElement('span', { style: { fontSize: 16, color: 'var(--sky-deep)' } }, '02'), '精選案例'
      ),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 20 } },
        React.createElement('div', { style: { position: 'relative' } },
          React.createElement('image-slot', { id: cases[0].id, shape: 'rect', radius: 0, placeholder: cases[0].t, src: cases[0].img, style: { width: '100%', height: 420 } }),
          React.createElement('div', { style: { display: 'flex', gap: 6, marginTop: 14, flexWrap: 'wrap' } },
            cases[0].platforms.map((p, k) => React.createElement('span', { key: k, style: { fontSize: 11, fontWeight: 700, padding: '3px 9px', borderRadius: 'var(--radius-pill)', background: 'var(--cream-200)' } }, p))
          ),
          React.createElement('div', { style: { marginTop: 8 } },
            React.createElement('div', { style: { fontFamily: 'var(--font-serif-display)', fontSize: 'clamp(2rem,4vw,3.2rem)', letterSpacing: 'var(--ls-display)', lineHeight: 1 } }, cases[0].stat),
            React.createElement('div', { style: { fontSize: 14, marginTop: 4 } }, cases[0].statLabel + ' · ' + cases[0].t)
          )
        ),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 20 } },
          cases.slice(1).map((c, i) => React.createElement('div', { key: i, style: { display: 'flex', flexDirection: 'column' } },
            React.createElement('image-slot', { id: c.id, shape: 'rounded', radius: 8, placeholder: c.t, src: c.img, style: { width: '100%', height: 180 } }),
            React.createElement('div', { style: { display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' } },
              c.platforms.map((p, k) => React.createElement('span', { key: k, style: { fontSize: 11, fontWeight: 700, padding: '3px 9px', borderRadius: 'var(--radius-pill)', background: 'var(--cream-200)' } }, p))
            ),
            React.createElement('div', { style: { marginTop: 8 } },
              React.createElement('div', { style: { fontFamily: 'var(--font-serif-display)', fontSize: 26, letterSpacing: 'var(--ls-display)' } }, c.stat),
              React.createElement('div', { style: { fontSize: 13, color: 'var(--text-muted)' } }, c.statLabel + ' · ' + c.t)
            )
          ))
        )
      ),
      React.createElement('div', { style: { textAlign: 'right', marginTop: 20 } },
        React.createElement('a', { onClick: () => setPage('cases'), style: { cursor: 'pointer', fontSize: 14, fontWeight: 700, textDecoration: 'underline', textUnderlineOffset: 4 } }, '查看更多案例 →')
      )
    ),

    React.createElement('section', { style: { maxWidth: 1320, margin: '0 auto', padding: '56px 48px 96px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 } },
      React.createElement('div', { style: { background: 'var(--pink)', borderRadius: 12, padding: '56px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24, width: '100%' } },
      React.createElement('div', null,
        React.createElement('div', { style: { fontFamily: 'var(--font-serif-display)', fontSize: 'var(--text-display-l)', lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-display)', color: 'var(--ink-900)' } }, '免費獲取', React.createElement('br'), '定制方案'),
        React.createElement('p', { style: { margin: '16px 0 0', color: 'var(--ink-900)' } }, '告訴我們您的需求，我們的團隊將於1個工作日內回覆')
      ),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 14 } },
        React.createElement(Button, { variant: 'dark', size: 'l', onClick: () => setPage('contact') }, '立即聯絡我們'),
        React.createElement('span', { style: { fontSize: 28, color: 'var(--ink-900)' } }, '↗')
      )
      )
    )
  );
}
window.HomeScreen = HomeScreen;