// Home Page

function HomePage() {
  const { navigate, currentUser, requireLogin } = useApp();

  const quickActions = [
    { name: '商城中心', icon: '🛒', color: '#FF6B3D', action: 'mall' },
    { name: '心情动态', icon: '💭', color: '#3B82F6', action: 'feed' },
    { name: '应用中心', icon: '📱', color: '#8B5CF6', action: 'apps' },
    { name: '视频广场', icon: '🎬', color: '#1F2937', action: 'video' },
    { name: '久聊IM', icon: '💬', color: '#0EA5E9', action: 'im' },
    { name: '记账模块', icon: '💰', color: '#10B981', action: 'accounting' },
    { name: '爱情空间', icon: '💕', color: '#EC4899', action: 'love' },
    { name: '云祭祀', icon: '🕯️', color: '#8B7355', action: 'memorial' },
    { name: '会员中心', icon: '👑', color: '#B8860B', action: 'member' },
  ];

  return (
    <PageWrapper>
      {/* Header with Logo */}
      <div style={{
        background: 'linear-gradient(135deg, #165DFF 0%, #4080FF 100%)',
        padding: '16px 16px 24px',
        color: '#fff',
      }}>
        <div className="flex items-center justify-between">
          <div>
            <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 2 }}>
              久存网
            </div>
            <div style={{ fontSize: 11, opacity: 0.9 }}>
              云端永久存储平台
            </div>
          </div>
          <div className="flex items-center gap-8">
            <div style={{ cursor: 'pointer' }} onClick={() => navigate('sitemap')}>
              🗺️
            </div>
            <div className="avatar avatar-sm" style={{ background: 'rgba(255,255,255,0.2)', cursor: 'pointer' }} onClick={() => requireLogin(() => navigate('profile'))}>
              {currentUser?.nickname?.charAt(0) || '登'}
            </div>
          </div>
        </div>

        {/* Welcome */}
        <div style={{ marginTop: 16 }}>
          <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>
            你好，{currentUser?.nickname || '用户'} 👋
          </div>
          <div style={{ fontSize: 12, opacity: 0.85 }}>
            欢迎来到久存网，您的数字资产永久之家
          </div>
        </div>
      </div>

      {/* Quick Actions */}
      <div style={{ padding: 16 }}>
        <div className="card card-shadow">
          <div className="grid-4">
            {quickActions.map(action => (
              <div
                key={action.name}
                className="publish-item"
                onClick={() => navigate(action.action)}
              >
                <div className="publish-icon" style={{ background: action.color + '22', color: action.color }}>
                  {action.icon}
                </div>
                <span className="publish-label">{action.name}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Platform Features */}
      <div style={{ padding: '0 16px 16px' }}>
        <div className="section-title">
          <span>平台特色</span>
        </div>
        <div className="grid-2">
          {[
            { title: '永久存储', desc: '数据永久保存，永不丢失', icon: '💾' },
            { title: '安全可靠', desc: '多重加密，数据安全有保障', icon: '🔒' },
            { title: '便捷分享', desc: '一键分享，轻松传递', icon: '🔗' },
            { title: '丰富功能', desc: '多种模块，满足多种需求', icon: '✨' },
          ].map((item, idx) => (
            <div key={idx} className="card card-shadow">
              <div style={{ fontSize: 28, marginBottom: 8 }}>{item.icon}</div>
              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>{item.title}</div>
              <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{item.desc}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Announcement */}
      <div style={{ padding: '0 16px 16px' }}>
        <div className="card card-shadow">
          <div className="flex items-center" style={{ marginBottom: 10 }}>
            <span style={{ fontSize: 16, marginRight: 8 }}>📢</span>
            <span style={{ fontSize: 13, fontWeight: 500 }}>平台公告</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.8 }}>
            • 久存网正式上线，欢迎体验<br/>
            • 首月注册送100GB永久存储空间<br/>
            • 邀请好友注册，双方各得50GB
          </div>
        </div>
      </div>

      {/* Company Info */}
      <div style={{ padding: '0 16px 16px' }}>
        <div className="card card-shadow">
          <div className="flex items-center" style={{ marginBottom: 10 }}>
            <span style={{ fontSize: 16, marginRight: 8 }}>🏢</span>
            <span style={{ fontSize: 13, fontWeight: 500 }}>关于我们</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.8 }}>
            四川久存网科技有限公司<br/>
            致力于为用户提供永久、安全、便捷的云端存储服务。<br/>
            所有数据经过多重加密，确保您的数字资产永久保存。
          </div>
        </div>
      </div>
    </PageWrapper>
  );
}

Object.assign(window, { HomePage });