import React from 'react';
import { Button, Card, message, Typography } from 'antd';
import {
  StarOutlined,
  LockOutlined,
  GiftOutlined,
  ThunderboltOutlined,
  PlayCircleOutlined,
  CheckCircleOutlined,
  HeartOutlined,
} from '@ant-design/icons';

const CreativePlazaPage: React.FC = () => {
  const handleUnlock = () => {
    message.info('请联系客服开通');
  };


  const features = [
    {
      icon: <ThunderboltOutlined style={{ fontSize: 28, color: '#8b5cf6' }} />,
      title: 'AI智能生成',
      description: '先进的AI技术，一键生成高质量视频内容',
    },
    {
      icon: <PlayCircleOutlined style={{ fontSize: 28, color: '#ec4899' }} />,
      title: '多格式输出',
      description: '支持多种视频格式，满足不同场景需求',
    },
    {
      icon: <CheckCircleOutlined style={{ fontSize: 28, color: '#10b981' }} />,
      title: '品质保证',
      description: '专业级画质，细节清晰，色彩鲜艳',
    },
    {
      icon: <HeartOutlined style={{ fontSize: 28, color: '#f59e0b' }} />,
      title: '创意无限',
      description: '丰富的模板和风格，激发创作灵感',
    },
  ];

  return (
    <div style={{ padding: '20px 0' }}>
      <div style={{ marginBottom: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
          <div style={{
            width: 48,
            height: 48,
            borderRadius: 14,
            background: 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 4px 16px rgba(139,92,246,0.3)',
          }}>
            <GiftOutlined style={{ fontSize: 22, color: '#fff' }} />
          </div>
          <div>
            <Typography.Title level={2} style={{ margin: 0, color: '#1e293b', fontWeight: 700 }}>
              创意素材案例
              <span style={{ color: '#6366f1', fontSize: 14, fontWeight: 400, marginLeft: 8 }}>
                探索AI创作无限可能
              </span>
            </Typography.Title>
          </div>
        </div>
        <Typography.Text style={{ color: '#64748b' }}>
          精选AI生成的优秀素材案例，展示AI创作的无限潜力与创意灵感
        </Typography.Text>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginBottom: 32 }}>
        {features.map((feature, index) => (
          <Card
            key={index}
            bordered={false}
            style={{
              borderRadius: 16,
              background: 'linear-gradient(135deg, rgba(139,92,246,0.04) 0%, rgba(99,102,241,0.04) 100%)',
              border: '1px solid rgba(139,92,246,0.1)',
              padding: 20,
            }}
          >
            <div style={{ textAlign: 'center' }}>
              <div style={{ marginBottom: 16 }}>{feature.icon}</div>
              <Typography.Title level={4} style={{ marginBottom: 8, color: '#1e293b' }}>
                {feature.title}
              </Typography.Title>
              <Typography.Text style={{ color: '#64748b', fontSize: 13 }}>
                {feature.description}
              </Typography.Text>
            </div>
          </Card>
        ))}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <Typography.Title level={4} style={{ margin: 0, color: '#1e293b' }}>
          <StarOutlined style={{ marginRight: 8, color: '#f59e0b' }} />
          精选案例展示
        </Typography.Title>
        <Button
          type="primary"
          size="middle"
          onClick={handleUnlock}
          style={{
            borderRadius: 10,
            background: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)',
            border: 'none',
          }}
        >
          <LockOutlined style={{ marginRight: 6 }} />
          解锁全部案例
        </Button>
      </div>

      <Card
        bordered={false}
        style={{
          borderRadius: 16,
          background: '#fafafa',
          padding: 40,
          textAlign: 'center',
        }}
      >
        <div style={{ color: '#94a3b8', fontSize: 14 }}>
          敬请期待更多创意案例
        </div>
      </Card>
    </div>
  );
};

export default CreativePlazaPage;