import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'umi';
import { Button, Typography, Row, Col, Card, Divider } from 'antd';
import { ArrowRightOutlined, CheckCircleOutlined, MenuOutlined, XOutlined, TwitterOutlined, LinkedinOutlined, GithubOutlined } from '@ant-design/icons';
import Navbar from '@/components/Navbar';

const { Title, Paragraph, Text } = Typography;

const Homepage: React.FC = () => {
  const navigate = useNavigate();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const features = [
    {
      title: '智能选品系统',
      description: '基于AI的商品推荐，自动识别高潜力商品，提升选品效率',
    },
    {
      title: 'AI动态定价',
      description: '实时市场分析，优化定价策略，最大化利润',
    },
    {
      title: '自动上架系统',
      description: '一键批量上架，节省人工成本，提高运营效率',
    },
    {
      title: '跨平台套利',
      description: '发现价格差异，实现利润最大化，降低运营风险',
    },
    {
      title: 'AI店铺托管',
      description: '24/7智能运营，解放人力，提升店铺表现',
    },
    {
      title: '多商户管理',
      description: '集中管理多店铺，数据一目了然，简化管理流程',
    },
  ];

  const stats = [
    { title: '平均提升', value: '30%', suffix: '运营效率' },
    { title: '平均提升', value: '25%', suffix: '利润率' },
    { title: '支持商户', value: '1000+', suffix: '同时在线' },
  ];

  return (
    <div className="homepage" style={{ 
      fontFamily: '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, \'Helvetica Neue\', Arial, sans-serif',
      overflowX: 'hidden'
    }}>
      <Navbar />

      {/* 英雄区 */}
      <section className="hero" style={{ 
        padding: '180px 0 120px', 
        background: 'linear-gradient(135deg, #0a192f 0%, #172a45 100%)',
        position: 'relative',
        overflow: 'hidden'
      }}>
        {/* 背景装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: 'radial-gradient(circle at 25% 25%, rgba(24, 144, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(54, 207, 201, 0.15) 0%, transparent 50%)',
          zIndex: 1
        }} />
        {/* 网格背景 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px)',
          backgroundSize: '40px 40px',
          zIndex: 1
        }} />
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', position: 'relative', zIndex: 2 }}>
          <Row align="middle" gutter={[48, 48]}>
            <Col xs={24} md={12} style={{ textAlign: 'left' }}>
              <div style={{ 
                display: 'inline-block', 
                background: 'rgba(24, 144, 255, 0.15)', 
                color: '#1890ff', 
                padding: '10px 20px', 
                borderRadius: '25px', 
                fontSize: '14px', 
                fontWeight: '600',
                marginBottom: '32px',
                boxShadow: '0 4px 12px rgba(24, 144, 255, 0.15)'
              }}>
                AI驱动 · 智能运营
              </div>
              <Title level={1} style={{ 
                color: '#fff', 
                marginBottom: '32px', 
                fontSize: '56px', 
                fontWeight: 'bold',
                lineHeight: '1.1'
              }}>
                重新定义跨境电商
              </Title>
              <Paragraph style={{ 
                color: 'rgba(255, 255, 255, 0.8)', 
                marginBottom: '48px', 
                fontSize: '20px',
                lineHeight: '1.6'
              }}>
                利用人工智能和自动化技术，帮助您实现从选品到运营的全流程智能化，提升效率，降低成本，实现业务增长
              </Paragraph>
              <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
                <Button 
                  type="primary" 
                  size="large" 
                  onClick={() => navigate('/auth/register')}
                  style={{
                    padding: '16px 40px', 
                    fontSize: '18px',
                    borderRadius: '30px',
                    boxShadow: '0 8px 24px rgba(24, 144, 255, 0.4)',
                    transition: 'all 0.3s ease',
                    '&:hover': {
                      transform: 'translateY(-3px)',
                      boxShadow: '0 12px 32px rgba(24, 144, 255, 0.5)'
                    }
                  }}
                >
                  免费注册
                </Button>
                <Button 
                  size="large" 
                  onClick={() => navigate('/pricing')}
                  style={{
                    padding: '16px 40px', 
                    fontSize: '18px',
                    borderRadius: '30px',
                    background: 'rgba(255, 255, 255, 0.1)',
                    color: '#fff',
                    border: '1px solid rgba(255, 255, 255, 0.3)',
                    transition: 'all 0.3s ease',
                    '&:hover': {
                      background: 'rgba(255, 255, 255, 0.2)',
                      transform: 'translateY(-3px)'
                    }
                  }}
                >
                  了解更多
                </Button>
              </div>
            </Col>
            <Col xs={24} md={12}>
              <div style={{ 
                textAlign: 'center',
                position: 'relative',
                perspective: '1000px'
              }}>
                <div style={{
                  position: 'absolute',
                  top: '-30px',
                  left: '-30px',
                  right: '-30px',
                  bottom: '-30px',
                  background: 'linear-gradient(45deg, #1890ff, #36cfc9)',
                  borderRadius: '20px',
                  filter: 'blur(60px)',
                  opacity: 0.7,
                  zIndex: -1,
                  animation: 'pulse 3s ease-in-out infinite'
                }} />
                <img 
                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='450' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231890ff'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3E智能电商平台%3C/text%3E%3C/svg%3E" 
                  alt="智能电商平台" 
                  style={{ 
                    maxWidth: '100%', 
                    borderRadius: '16px', 
                    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.4)',
                    transition: 'all 0.3s ease',
                    transformStyle: 'preserve-3d',
                    '&:hover': {
                      transform: 'scale(1.05) rotateY(5deg)',
                      boxShadow: '0 24px 72px rgba(0, 0, 0, 0.5)'
                    }
                  }}
                />
              </div>
            </Col>
          </Row>
        </div>
      </section>

      {/* 核心功能区 */}
      <section className="features" style={{ 
        padding: '140px 0', 
        background: '#fafafa',
        position: 'relative'
      }}>
        {/* 背景装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          right: 0,
          width: '50%',
          height: '100%',
          backgroundImage: 'radial-gradient(circle at 100% 50%, rgba(24, 144, 255, 0.05) 0%, transparent 50%)',
          zIndex: 1
        }} />
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', position: 'relative', zIndex: 2 }}>
          <div style={{ textAlign: 'center', marginBottom: '96px' }}>
            <div style={{ 
              display: 'inline-block', 
              background: 'rgba(24, 144, 255, 0.1)', 
              color: '#1890ff', 
              padding: '10px 20px', 
              borderRadius: '25px', 
              fontSize: '14px', 
              fontWeight: '600',
              marginBottom: '32px',
              boxShadow: '0 4px 12px rgba(24, 144, 255, 0.15)'
            }}>
              核心功能
            </div>
            <Title level={2} style={{ 
              fontSize: '48px', 
              fontWeight: 'bold', 
              marginBottom: '24px', 
              color: '#333',
              lineHeight: '1.1'
            }}>全方位跨境电商解决方案</Title>
            <Paragraph style={{ 
              fontSize: '20px', 
              color: '#666', 
              maxWidth: '800px', 
              margin: '0 auto',
              lineHeight: '1.6'
            }}>
              我们提供从选品到运营的完整解决方案，帮助您实现业务增长和利润最大化
            </Paragraph>
          </div>
          <Row gutter={[48, 48]}>
            {features.map((feature, index) => (
              <Col key={index} xs={24} sm={12} md={8}>
                <Card 
                  hoverable 
                  style={{ 
                    borderRadius: '16px', 
                    overflow: 'hidden', 
                    transition: 'all 0.4s ease',
                    border: '1px solid #e8e8e8',
                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.08)',
                    height: '100%',
                    '&:hover': {
                      transform: 'translateY(-12px)',
                      boxShadow: '0 16px 48px rgba(0, 0, 0, 0.15)',
                      borderColor: '#1890ff'
                    }
                  }}
                >
                  <div style={{ marginBottom: '32px', paddingTop: '32px' }}>
                    <span style={{ 
                      display: 'inline-flex', 
                      width: '84px', 
                      height: '84px', 
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: '32px', 
                      fontWeight: 'bold', 
                      background: 'linear-gradient(135deg, #1890ff 0%, #36cfc9 100%)', 
                      color: '#fff', 
                      borderRadius: '20px',
                      boxShadow: '0 6px 20px rgba(24, 144, 255, 0.4)',
                      transition: 'all 0.3s ease',
                      '&:hover': {
                        transform: 'scale(1.1)',
                        boxShadow: '0 8px 24px rgba(24, 144, 255, 0.5)'
                      }
                    }}>{feature.title.charAt(0)}</span>
                  </div>
                  <Title level={4} style={{ 
                    marginBottom: '20px',
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '20px'
                  }}>{feature.title}</Title>
                  <Paragraph style={{ 
                    marginBottom: '32px',
                    color: '#666',
                    lineHeight: '1.6',
                    fontSize: '16px'
                  }}>{feature.description}</Paragraph>
                  <Button 
                    type="text" 
                    style={{
                      color: '#1890ff',
                      fontWeight: '600',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '10px',
                      transition: 'all 0.3s ease',
                      fontSize: '16px',
                      '&:hover': {
                        color: '#40a9ff',
                        transform: 'translateX(6px)'
                      }
                    }}
                  >
                    了解更多 <ArrowRightOutlined />
                  </Button>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </section>

      {/* 价值主张区 */}
      <section className="value-proposition" style={{ 
        padding: '140px 0', 
        background: '#fff',
        position: 'relative'
      }}>
        {/* 背景装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '50%',
          height: '100%',
          backgroundImage: 'radial-gradient(circle at 0% 50%, rgba(24, 144, 255, 0.05) 0%, transparent 50%)',
          zIndex: 1
        }} />
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', position: 'relative', zIndex: 2 }}>
          <Row align="middle" gutter={[64, 64]}>
            <Col xs={24} md={12}>
              <div style={{ 
                textAlign: 'center',
                position: 'relative',
                perspective: '1000px'
              }}>
                <div style={{
                  position: 'absolute',
                  top: '-30px',
                  left: '-30px',
                  right: '-30px',
                  bottom: '-30px',
                  background: 'linear-gradient(45deg, #1890ff, #36cfc9)',
                  borderRadius: '20px',
                  filter: 'blur(80px)',
                  opacity: 0.15,
                  zIndex: -1
                }} />
                <img 
                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='450' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%2336cfc9'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3E业务增长%3C/text%3E%3C/svg%3E" 
                  alt="业务增长" 
                  style={{ 
                    maxWidth: '100%', 
                    borderRadius: '16px', 
                    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.15)',
                    transition: 'all 0.4s ease',
                    transformStyle: 'preserve-3d',
                    '&:hover': {
                      transform: 'scale(1.05) rotateY(-5deg)',
                      boxShadow: '0 24px 72px rgba(0, 0, 0, 0.2)'
                    }
                  }}
                />
              </div>
            </Col>
            <Col xs={24} md={12}>
              <div style={{ 
                display: 'inline-block', 
                background: 'rgba(24, 144, 255, 0.1)', 
                color: '#1890ff', 
                padding: '10px 20px', 
                borderRadius: '25px', 
                fontSize: '14px', 
                fontWeight: '600',
                marginBottom: '32px',
                boxShadow: '0 4px 12px rgba(24, 144, 255, 0.15)'
              }}>
                为什么选择我们
              </div>
              <Title level={2} style={{ 
                fontSize: '44px',
                fontWeight: 'bold',
                marginBottom: '36px', 
                color: '#333',
                lineHeight: '1.1'
              }}>为什么选择 Crawlful Hub</Title>
              <div style={{ marginBottom: '48px' }}>
                <div style={{ 
                  display: 'flex', 
                  alignItems: 'flex-start', 
                  marginBottom: '32px', 
                  gap: '24px',
                  padding: '24px',
                  background: '#fafafa',
                  borderRadius: '16px',
                  transition: 'all 0.4s ease',
                  '&:hover': {
                    background: 'rgba(24, 144, 255, 0.05)',
                    transform: 'translateX(12px)',
                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.08)'
                  }
                }}>
                  <div style={{
                    width: '56px',
                    height: '56px',
                    borderRadius: '14px',
                    background: 'linear-gradient(135deg, #1890ff 0%, #36cfc9 100%)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                    boxShadow: '0 4px 16px rgba(24, 144, 255, 0.3)'
                  }}>
                    <CheckCircleOutlined style={{ color: '#fff', fontSize: '28px' }} />
                  </div>
                  <div>
                    <h3 style={{ 
                      marginBottom: '12px', 
                      color: '#333',
                      fontSize: '20px',
                      fontWeight: 'bold'
                    }}>AI驱动决策</h3>
                    <p style={{ 
                      color: '#666', 
                      margin: 0,
                      lineHeight: '1.6',
                      fontSize: '16px'
                    }}>基于人工智能的数据分析和预测，帮助您做出更明智的业务决策</p>
                  </div>
                </div>
                <div style={{ 
                  display: 'flex', 
                  alignItems: 'flex-start', 
                  marginBottom: '32px', 
                  gap: '24px',
                  padding: '24px',
                  background: '#fafafa',
                  borderRadius: '16px',
                  transition: 'all 0.4s ease',
                  '&:hover': {
                    background: 'rgba(24, 144, 255, 0.05)',
                    transform: 'translateX(12px)',
                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.08)'
                  }
                }}>
                  <div style={{
                    width: '56px',
                    height: '56px',
                    borderRadius: '14px',
                    background: 'linear-gradient(135deg, #1890ff 0%, #36cfc9 100%)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                    boxShadow: '0 4px 16px rgba(24, 144, 255, 0.3)'
                  }}>
                    <CheckCircleOutlined style={{ color: '#fff', fontSize: '28px' }} />
                  </div>
                  <div>
                    <h3 style={{ 
                      marginBottom: '12px', 
                      color: '#333',
                      fontSize: '20px',
                      fontWeight: 'bold'
                    }}>全流程自动化</h3>
                    <p style={{ 
                      color: '#666', 
                      margin: 0,
                      lineHeight: '1.6',
                      fontSize: '16px'
                    }}>从选品到上架，从定价到运营，全流程自动化管理，节省人力成本</p>
                  </div>
                </div>
                <div style={{ 
                  display: 'flex', 
                  alignItems: 'flex-start', 
                  marginBottom: '32px', 
                  gap: '24px',
                  padding: '24px',
                  background: '#fafafa',
                  borderRadius: '16px',
                  transition: 'all 0.4s ease',
                  '&:hover': {
                    background: 'rgba(24, 144, 255, 0.05)',
                    transform: 'translateX(12px)',
                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.08)'
                  }
                }}>
                  <div style={{
                    width: '56px',
                    height: '56px',
                    borderRadius: '14px',
                    background: 'linear-gradient(135deg, #1890ff 0%, #36cfc9 100%)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                    boxShadow: '0 4px 16px rgba(24, 144, 255, 0.3)'
                  }}>
                    <CheckCircleOutlined style={{ color: '#fff', fontSize: '28px' }} />
                  </div>
                  <div>
                    <h3 style={{ 
                      marginBottom: '12px', 
                      color: '#333',
                      fontSize: '20px',
                      fontWeight: 'bold'
                    }}>多平台整合</h3>
                    <p style={{ 
                      color: '#666', 
                      margin: 0,
                      lineHeight: '1.6',
                      fontSize: '16px'
                    }}>支持主流电商平台，一站式管理多店铺，提高运营效率</p>
                  </div>
                </div>
                <div style={{ 
                  display: 'flex', 
                  alignItems: 'flex-start', 
                  marginBottom: '32px', 
                  gap: '24px',
                  padding: '24px',
                  background: '#fafafa',
                  borderRadius: '16px',
                  transition: 'all 0.4s ease',
                  '&:hover': {
                    background: 'rgba(24, 144, 255, 0.05)',
                    transform: 'translateX(12px)',
                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.08)'
                  }
                }}>
                  <div style={{
                    width: '56px',
                    height: '56px',
                    borderRadius: '14px',
                    background: 'linear-gradient(135deg, #1890ff 0%, #36cfc9 100%)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                    boxShadow: '0 4px 16px rgba(24, 144, 255, 0.3)'
                  }}>
                    <CheckCircleOutlined style={{ color: '#fff', fontSize: '28px' }} />
                  </div>
                  <div>
                    <h3 style={{ 
                      marginBottom: '12px', 
                      color: '#333',
                      fontSize: '20px',
                      fontWeight: 'bold'
                    }}>专业团队支持</h3>
                    <p style={{ 
                      color: '#666', 
                      margin: 0,
                      lineHeight: '1.6',
                      fontSize: '16px'
                    }}>7x24小时技术支持，专业团队为您保驾护航，确保业务稳定运行</p>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      </section>

      {/* 成功案例区 */}
      <section className="case-studies" style={{ 
        padding: '140px 0', 
        background: '#fafafa',
        position: 'relative'
      }}>
        {/* 背景装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          right: 0,
          width: '50%',
          height: '100%',
          backgroundImage: 'radial-gradient(circle at 100% 50%, rgba(24, 144, 255, 0.05) 0%, transparent 50%)',
          zIndex: 1
        }} />
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', position: 'relative', zIndex: 2 }}>
          <div style={{ textAlign: 'center', marginBottom: '96px' }}>
            <div style={{ 
              display: 'inline-block', 
              background: 'rgba(24, 144, 255, 0.1)', 
              color: '#1890ff', 
              padding: '10px 20px', 
              borderRadius: '25px', 
              fontSize: '14px', 
              fontWeight: '600',
              marginBottom: '32px',
              boxShadow: '0 4px 12px rgba(24, 144, 255, 0.15)'
            }}>
              成功案例
            </div>
            <Title level={2} style={{ 
              fontSize: '48px', 
              fontWeight: 'bold', 
              marginBottom: '24px', 
              color: '#333',
              lineHeight: '1.1'
            }}>我们的客户成功故事</Title>
            <Paragraph style={{ 
              fontSize: '20px', 
              color: '#666', 
              maxWidth: '800px', 
              margin: '0 auto',
              lineHeight: '1.6'
            }}>
              看看我们的客户如何使用 Crawlful Hub 实现业务增长
            </Paragraph>
          </div>
          <Row gutter={[48, 48]}>
            <Col xs={24} md={8}>
              <Card 
                hoverable 
                style={{ 
                  borderRadius: '20px', 
                  overflow: 'hidden', 
                  transition: 'all 0.4s ease',
                  border: '1px solid #e8e8e8',
                  boxShadow: '0 12px 32px rgba(0, 0, 0, 0.1)',
                  height: '100%',
                  '&:hover': {
                    transform: 'translateY(-16px)',
                    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.18)',
                    borderColor: '#1890ff'
                  }
                }}
              >
                <div style={{ 
                  marginBottom: '0',
                  position: 'relative',
                  overflow: 'hidden',
                  height: '280px'
                }}>
                  <img 
                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Crect width='800' height='800' fill='%231890ff'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3E成功案例1%3C/text%3E%3C/svg%3E" 
                    alt="成功案例1" 
                    style={{ 
                      width: '100%', 
                      height: '100%', 
                      objectFit: 'cover',
                      transition: 'all 0.4s ease',
                      '&:hover': {
                        transform: 'scale(1.1)'
                      }
                    }}
                  />
                  <div style={{
                    position: 'absolute',
                    bottom: 0,
                    left: 0,
                    right: 0,
                    background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.8))',
                    padding: '24px',
                    color: '#fff'
                  }}>
                    <div style={{ 
                      display: 'inline-block', 
                      background: 'rgba(255, 255, 255, 0.25)', 
                      color: '#fff', 
                      padding: '6px 16px', 
                      borderRadius: '16px', 
                      fontSize: '12px', 
                      fontWeight: '600',
                      marginBottom: '12px'
                    }}>
                      跨境电商
                    </div>
                  </div>
                </div>
                <div style={{ padding: '36px' }}>
                  <Title level={4} style={{ 
                    marginBottom: '20px',
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '20px'
                  }}>某跨境电商企业</Title>
                  <Paragraph style={{ 
                    marginBottom: '32px',
                    color: '#666',
                    lineHeight: '1.6',
                    fontSize: '16px'
                  }}>通过智能选品和动态定价，3个月内销售额提升45%</Paragraph>
                  <Button 
                    type="text" 
                    onClick={() => navigate('/case-study/1')}
                    style={{
                      color: '#1890ff',
                      fontWeight: '600',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '10px',
                      transition: 'all 0.3s ease',
                      fontSize: '16px',
                      '&:hover': {
                        color: '#40a9ff',
                        transform: 'translateX(6px)'
                      }
                    }}
                  >
                    查看详情 <ArrowRightOutlined />
                  </Button>
                </div>
              </Card>
            </Col>
            <Col xs={24} md={8}>
              <Card 
                hoverable 
                style={{ 
                  borderRadius: '20px', 
                  overflow: 'hidden', 
                  transition: 'all 0.4s ease',
                  border: '1px solid #e8e8e8',
                  boxShadow: '0 12px 32px rgba(0, 0, 0, 0.1)',
                  height: '100%',
                  '&:hover': {
                    transform: 'translateY(-16px)',
                    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.18)',
                    borderColor: '#1890ff'
                  }
                }}
              >
                <div style={{ 
                  marginBottom: '0',
                  position: 'relative',
                  overflow: 'hidden',
                  height: '280px'
                }}>
                  <img 
                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Crect width='800' height='800' fill='%2336cfc9'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3E成功案例2%3C/text%3E%3C/svg%3E" 
                    alt="成功案例2" 
                    style={{ 
                      width: '100%', 
                      height: '100%', 
                      objectFit: 'cover',
                      transition: 'all 0.4s ease',
                      '&:hover': {
                        transform: 'scale(1.1)'
                      }
                    }}
                  />
                  <div style={{
                    position: 'absolute',
                    bottom: 0,
                    left: 0,
                    right: 0,
                    background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.8))',
                    padding: '24px',
                    color: '#fff'
                  }}>
                    <div style={{ 
                      display: 'inline-block', 
                      background: 'rgba(255, 255, 255, 0.25)', 
                      color: '#fff', 
                      padding: '6px 16px', 
                      borderRadius: '16px', 
                      fontSize: '12px', 
                      fontWeight: '600',
                      marginBottom: '12px'
                    }}>
                      品牌零售
                    </div>
                  </div>
                </div>
                <div style={{ padding: '36px' }}>
                  <Title level={4} style={{ 
                    marginBottom: '20px',
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '20px'
                  }}>某品牌零售商</Title>
                  <Paragraph style={{ 
                    marginBottom: '32px',
                    color: '#666',
                    lineHeight: '1.6',
                    fontSize: '16px'
                  }}>利用AI店铺托管，运营成本降低30%，效率提升50%</Paragraph>
                  <Button 
                    type="text" 
                    onClick={() => navigate('/case-study/2')}
                    style={{
                      color: '#1890ff',
                      fontWeight: '600',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '10px',
                      transition: 'all 0.3s ease',
                      fontSize: '16px',
                      '&:hover': {
                        color: '#40a9ff',
                        transform: 'translateX(6px)'
                      }
                    }}
                  >
                    查看详情 <ArrowRightOutlined />
                  </Button>
                </div>
              </Card>
            </Col>
            <Col xs={24} md={8}>
              <Card 
                hoverable 
                style={{ 
                  borderRadius: '20px', 
                  overflow: 'hidden', 
                  transition: 'all 0.4s ease',
                  border: '1px solid #e8e8e8',
                  boxShadow: '0 12px 32px rgba(0, 0, 0, 0.1)',
                  height: '100%',
                  '&:hover': {
                    transform: 'translateY(-16px)',
                    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.18)',
                    borderColor: '#1890ff'
                  }
                }}
              >
                <div style={{ 
                  marginBottom: '0',
                  position: 'relative',
                  overflow: 'hidden',
                  height: '280px'
                }}>
                  <img 
                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Crect width='800' height='800' fill='%23722ed1'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3E成功案例3%3C/text%3E%3C/svg%3E" 
                    alt="成功案例3" 
                    style={{ 
                      width: '100%', 
                      height: '100%', 
                      objectFit: 'cover',
                      transition: 'all 0.4s ease',
                      '&:hover': {
                        transform: 'scale(1.1)'
                      }
                    }}
                  />
                  <div style={{
                    position: 'absolute',
                    bottom: 0,
                    left: 0,
                    right: 0,
                    background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.8))',
                    padding: '24px',
                    color: '#fff'
                  }}>
                    <div style={{ 
                      display: 'inline-block', 
                      background: 'rgba(255, 255, 255, 0.25)', 
                      color: '#fff', 
                      padding: '6px 16px', 
                      borderRadius: '16px', 
                      fontSize: '12px', 
                      fontWeight: '600',
                      marginBottom: '12px'
                    }}>
                      多渠道运营
                    </div>
                  </div>
                </div>
                <div style={{ padding: '36px' }}>
                  <Title level={4} style={{ 
                    marginBottom: '20px',
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '20px'
                  }}>某多渠道卖家</Title>
                  <Paragraph style={{ 
                    marginBottom: '32px',
                    color: '#666',
                    lineHeight: '1.6',
                    fontSize: '16px'
                  }}>通过跨平台套利，6个月内利润率提升35%</Paragraph>
                  <Button 
                    type="text" 
                    onClick={() => navigate('/case-study/3')}
                    style={{
                      color: '#1890ff',
                      fontWeight: '600',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '10px',
                      transition: 'all 0.3s ease',
                      fontSize: '16px',
                      '&:hover': {
                        color: '#40a9ff',
                        transform: 'translateX(6px)'
                      }
                    }}
                  >
                    查看详情 <ArrowRightOutlined />
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
          <div style={{ textAlign: 'center', marginTop: '72px' }}>
            <Button 
              type="primary" 
              onClick={() => navigate('/case-study')}
              style={{
                padding: '16px 40px', 
                fontSize: '18px',
                borderRadius: '30px',
                boxShadow: '0 6px 18px rgba(24, 144, 255, 0.4)',
                transition: 'all 0.3s ease',
                '&:hover': {
                  transform: 'translateY(-3px)',
                  boxShadow: '0 8px 24px rgba(24, 144, 255, 0.5)'
                }
              }}
            >
              查看更多案例
            </Button>
          </div>
        </div>
      </section>

      {/* 行动召唤区 */}
      <section className="cta" style={{ 
        padding: '160px 0', 
        background: 'linear-gradient(135deg, #0a192f 0%, #172a45 100%)', 
        color: '#fff', 
        textAlign: 'center',
        position: 'relative',
        overflow: 'hidden'
      }}>
        {/* 背景装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: 'radial-gradient(circle at 25% 25%, rgba(24, 144, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(54, 207, 201, 0.15) 0%, transparent 50%)',
          zIndex: 1
        }} />
        {/* 网格背景 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px)',
          backgroundSize: '40px 40px',
          zIndex: 1
        }} />
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', position: 'relative', zIndex: 2 }}>
          <div style={{ maxWidth: '800px', margin: '0 auto' }}>
            <div style={{ 
              display: 'inline-block', 
              background: 'rgba(24, 144, 255, 0.15)', 
              color: '#1890ff', 
              padding: '10px 20px', 
              borderRadius: '25px', 
              fontSize: '14px', 
              fontWeight: '600',
              marginBottom: '32px',
              boxShadow: '0 4px 12px rgba(24, 144, 255, 0.2)'
            }}>
              立即开始
            </div>
            <Title level={2} style={{ 
              color: '#fff', 
              marginBottom: '32px',
              fontSize: '48px',
              fontWeight: 'bold',
              lineHeight: '1.1'
            }}>准备好开始您的电商增长之旅了吗？</Title>
            <Paragraph style={{ 
              color: 'rgba(255, 255, 255, 0.8)', 
              marginBottom: '64px', 
              fontSize: '22px',
              lineHeight: '1.6'
            }}>
              立即注册，享受14天免费试用，体验AI驱动的跨境电商解决方案，开启您的业务增长之路
            </Paragraph>
            <Button 
              type="primary" 
              size="large" 
              onClick={() => navigate('/auth/register')}
              style={{
                padding: '18px 56px', 
                fontSize: '20px',
                borderRadius: '35px',
                boxShadow: '0 8px 24px rgba(24, 144, 255, 0.4)',
                transition: 'all 0.3s ease',
                '&:hover': {
                  transform: 'translateY(-3px)',
                  boxShadow: '0 12px 32px rgba(24, 144, 255, 0.5)'
                }
              }}
            >
              免费注册
            </Button>
            <div style={{ marginTop: '32px', color: 'rgba(255, 255, 255, 0.6)', fontSize: '16px' }}>
              无需信用卡 · 14天免费试用 · 随时取消
            </div>
          </div>
        </div>
      </section>

      {/* 页脚 */}
      <footer style={{ 
        padding: '120px 0 80px', 
        background: '#0a192f', 
        color: '#fff',
        position: 'relative',
        overflow: 'hidden'
      }}>
        {/* 背景装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: 'radial-gradient(circle at 50% 50%, rgba(24, 144, 255, 0.05) 0%, transparent 70%)',
          zIndex: 1
        }} />
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', position: 'relative', zIndex: 2 }}>
          <Row gutter={[48, 48]}>
            <Col xs={24} md={6}>
              <div style={{ 
                fontSize: '32px', 
                fontWeight: 'bold', 
                marginBottom: '28px',
                color: '#1890ff',
                letterSpacing: '1px'
              }}>Crawlful Hub</div>
              <Paragraph style={{ 
                color: 'rgba(255, 255, 255, 0.6)', 
                marginBottom: '36px',
                lineHeight: '1.6',
                fontSize: '16px'
              }}>
                智能驱动跨境电商增长，为您的业务提供全方位解决方案
              </Paragraph>
              <div style={{ display: 'flex', gap: '16px' }}>
                <a href="#" style={{ 
                  display: 'inline-flex', 
                  alignItems: 'center', 
                  justifyContent: 'center',
                  width: '48px',
                  height: '48px',
                  borderRadius: '50%',
                  background: 'rgba(255, 255, 255, 0.08)',
                  color: 'rgba(255, 255, 255, 0.6)',
                  transition: 'all 0.3s ease',
                  '&:hover': {
                    background: '#1890ff',
                    color: '#fff',
                    transform: 'translateY(-2px)'
                  }
                }}>
                  <TwitterOutlined />
                </a>
                <a href="#" style={{ 
                  display: 'inline-flex', 
                  alignItems: 'center', 
                  justifyContent: 'center',
                  width: '48px',
                  height: '48px',
                  borderRadius: '50%',
                  background: 'rgba(255, 255, 255, 0.08)',
                  color: 'rgba(255, 255, 255, 0.6)',
                  transition: 'all 0.3s ease',
                  '&:hover': {
                    background: '#1890ff',
                    color: '#fff',
                    transform: 'translateY(-2px)'
                  }
                }}>
                  <LinkedinOutlined />
                </a>
                <a href="#" style={{ 
                  display: 'inline-flex', 
                  alignItems: 'center', 
                  justifyContent: 'center',
                  width: '48px',
                  height: '48px',
                  borderRadius: '50%',
                  background: 'rgba(255, 255, 255, 0.08)',
                  color: 'rgba(255, 255, 255, 0.6)',
                  transition: 'all 0.3s ease',
                  '&:hover': {
                    background: '#1890ff',
                    color: '#fff',
                    transform: 'translateY(-2px)'
                  }
                }}>
                  <GithubOutlined />
                </a>
              </div>
            </Col>
            <Col xs={24} md={6}>
              <h3 style={{ 
                fontSize: '20px', 
                fontWeight: 'bold', 
                marginBottom: '28px', 
                color: '#fff',
                letterSpacing: '0.5px'
              }}>产品</h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                <li style={{ marginBottom: '20px' }}><Link to="/pricing" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>定价方案</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/case-study" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>成功案例</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>功能介绍</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>API文档</Link></li>
              </ul>
            </Col>
            <Col xs={24} md={6}>
              <h3 style={{ 
                fontSize: '20px', 
                fontWeight: 'bold', 
                marginBottom: '28px', 
                color: '#fff',
                letterSpacing: '0.5px'
              }}>公司</h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>关于我们</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>联系我们</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>招贤纳士</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>新闻资讯</Link></li>
              </ul>
            </Col>
            <Col xs={24} md={6}>
              <h3 style={{ 
                fontSize: '20px', 
                fontWeight: 'bold', 
                marginBottom: '28px', 
                color: '#fff',
                letterSpacing: '0.5px'
              }}>支持</h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>帮助中心</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>常见问题</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>联系支持</Link></li>
                <li style={{ marginBottom: '20px' }}><Link to="/" style={{ 
                  color: 'rgba(255, 255, 255, 0.6)', 
                  transition: 'all 0.3s ease',
                  textDecoration: 'none',
                  fontSize: '16px',
                  '&:hover': {
                    color: '#1890ff',
                    transform: 'translateX(4px)'
                  }
                }}>API文档</Link></li>
              </ul>
            </Col>
          </Row>
          <Divider style={{ 
            backgroundColor: 'rgba(255, 255, 255, 0.1)', 
            margin: '80px 0 40px',
            height: '1px'
          }} />
          <div style={{ textAlign: 'center', color: 'rgba(255, 255, 255, 0.4)', fontSize: '14px' }}>
            <div style={{ marginBottom: '16px' }}>
              <Link to="/" style={{ 
                color: 'rgba(255, 255, 255, 0.4)', 
                transition: 'color 0.3s ease',
                textDecoration: 'none',
                margin: '0 16px',
                '&:hover': {
                  color: '#1890ff'
                }
              }}>隐私政策</Link>
              <Link to="/" style={{ 
                color: 'rgba(255, 255, 255, 0.4)', 
                transition: 'color 0.3s ease',
                textDecoration: 'none',
                margin: '0 16px',
                '&:hover': {
                  color: '#1890ff'
                }
              }}>服务条款</Link>
              <Link to="/" style={{ 
                color: 'rgba(255, 255, 255, 0.4)', 
                transition: 'color 0.3s ease',
                textDecoration: 'none',
                margin: '0 16px',
                '&:hover': {
                  color: '#1890ff'
                }
              }}>Cookie政策</Link>
            </div>
            © 2025 Crawlful Hub. All rights reserved.
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Homepage;