// Screen 1: Landing page
function LandingScreen({ onStart }) {
  return (
    <div style={{
      width: '100%', minHeight: '100vh', position: 'relative',
      background: 'linear-gradient(180deg, #FFF8EE 0%, #FBE8D1 100%)',
      display: 'flex', flexDirection: 'column',
      paddingTop: 60, paddingBottom: 40,
      overflow: 'hidden',
    }}>
      {/* Soft decorative blobs */}
      <div style={{
        position: 'absolute', top: 60, right: -40, width: 220, height: 220,
        borderRadius: '50%', background: 'radial-gradient(circle, #FFD9A8 0%, transparent 70%)',
        filter: 'blur(8px)', opacity: 0.7,
      }} />
      <div style={{
        position: 'absolute', bottom: 200, left: -60, width: 240, height: 240,
        borderRadius: '50%', background: 'radial-gradient(circle, #F5C6E8 0%, transparent 70%)',
        filter: 'blur(8px)', opacity: 0.5,
      }} />

      {/* Top label */}
      <div style={{
        position: 'relative', textAlign: 'center', marginBottom: 32,
        fontFamily: 'var(--font-display)', fontSize: 13, color: '#9C7A52',
        letterSpacing: 6, fontWeight: 500,
      }}>FAMILY · MBTI</div>

      {/* Hero */}
      <div style={{ position: 'relative', padding: '0 32px', textAlign: 'center', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        {/* Decorative letter cluster */}
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 6, marginBottom: 28,
        }}>
          {[
            { c: '🔗', bg: '#E8804A' },
            { c: '🔧', bg: '#3F8CCB' },
            { c: '💬', bg: '#7D6BC9' },
            { c: '🔋', bg: '#5BA86F' },
          ].map((d, i) => (
            <div key={i} style={{
              width: 44, height: 44, borderRadius: 12,
              background: '#fff', border: `2px solid ${d.bg}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22, transform: `rotate(${[-6, 3, -3, 6][i]}deg) translateY(${[2, -4, 0, -2][i]}px)`,
              boxShadow: '0 4px 12px rgba(0,0,0,0.06)',
            }}>{d.c}</div>
          ))}
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 800,
          color: '#2A1F14', margin: '0 0 16px', lineHeight: 1.1, letterSpacing: -1,
        }}>
          你家是<br/>什么型？
        </h1>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 16, color: '#7D6347',
          margin: '0 0 8px', lineHeight: 1.5,
        }}>12 道题，2 分钟</p>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 16, color: '#7D6347',
          margin: 0, lineHeight: 1.5,
        }}>测出你家的家庭性格类型</p>

        <div style={{ height: 48 }} />

        {/* CTA */}
        <button onClick={onStart} style={{
          width: '100%', height: 60, borderRadius: 30,
          background: '#2A1F14', color: '#FFF8EE',
          fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600,
          border: 'none', cursor: 'pointer',
          boxShadow: '0 8px 24px rgba(42,31,20,0.25), inset 0 1px 0 rgba(255,255,255,0.1)',
          letterSpacing: 1,
        }}>
          开始测试 →
        </button>

        <div style={{
          marginTop: 16, fontFamily: 'var(--font-body)', fontSize: 12,
          color: '#A89378', textAlign: 'center',
        }}>
          已有 <span style={{ fontWeight: 700, color: '#7D6347' }}>12,847</span> 个家庭测过
        </div>
      </div>

      {/* Bottom — mysterious hint, no spoilers */}
      <div style={{
        position: 'relative', display: 'flex', gap: 6, justifyContent: 'center',
        alignItems: 'center', padding: '0 24px',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '8px 14px', borderRadius: 999,
          background: 'rgba(255,255,255,0.5)', border: '0.5px solid rgba(42,31,20,0.1)',
          fontSize: 11, fontFamily: 'var(--font-body)', color: '#7D6347', letterSpacing: 1,
        }}>
          <span style={{ display: 'flex', gap: 3 }}>
            {['?', '?', '?', '?'].map((c, i) => (
              <span key={i} style={{
                width: 16, height: 16, borderRadius: 4,
                background: ['#E8804A', '#3F8CCB', '#7D6BC9', '#5BA86F'][i],
                color: '#fff', fontWeight: 800, fontSize: 11,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{c}</span>
            ))}
          </span>
          <span>8 种家庭类型 · 等你揭晓</span>
        </div>
      </div>
    </div>
  );
}

window.LandingScreen = LandingScreen;