import React from 'react';
import { motion } from 'framer-motion';

const ContactSection = ({ isActive }) => {
  const contactMethods = [
    {
      icon: '📧',
      title: '邮件联系',
      content: 'contact@radiant-ai.com',
      description: '7x24小时响应您的咨询'
    },
    {
      icon: '📞',
      title: '电话咨询',
      content: '+86 400-888-9999',
      description: '专业顾问为您答疑解惑'
    },
    {
      icon: '📍',
      title: '公司地址',
      content: '北京市朝阳区',
      description: '欢迎莅临参观交流'
    }
  ];

  const formVariants = {
    hidden: { opacity: 0, x: 50 },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 0.8,
        staggerChildren: 0.1
      }
    }
  };

  const fieldVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6 }
    }
  };

  return (
    <div className="contact-section">
      <motion.div
        className="contact-header"
        initial={{ opacity: 0, y: 50 }}
        animate={isActive ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.8, delay: 0.2 }}
      >
        <h2>联系我们</h2>
        <p>让我们一起探索AI的无限可能</p>
      </motion.div>

      <div className="contact-container">
        <motion.div
          className="contact-info"
          initial={{ opacity: 0, x: -50 }}
          animate={isActive ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.4 }}
        >
          <div className="contact-methods">
            {contactMethods.map((method, index) => (
              <motion.div
                key={index}
                className="contact-method"
                whileHover={{ scale: 1.05, y: -5 }}
                transition={{ duration: 0.3 }}
              >
                <div className="method-icon">{method.icon}</div>
                <div className="method-content">
                  <h4>{method.title}</h4>
                  <div className="method-value">{method.content}</div>
                  <p className="method-description">{method.description}</p>
                </div>
              </motion.div>
            ))}
          </div>

          <motion.div
            className="contact-social"
            initial={{ opacity: 0, y: 30 }}
            animate={isActive ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.8 }}
          >
            <h4>关注我们</h4>
            <div className="social-links">
              {['微信', '微博', 'LinkedIn', 'GitHub'].map((platform, idx) => (
                <motion.div
                  key={idx}
                  className="social-link"
                  whileHover={{ scale: 1.2, rotate: 5 }}
                  whileTap={{ scale: 0.9 }}
                >
                  {platform}
                </motion.div>
              ))}
            </div>
          </motion.div>
        </motion.div>

        <motion.div
          className="contact-form"
          variants={formVariants}
          initial="hidden"
          animate={isActive ? "visible" : "hidden"}
        >
          <motion.form variants={formVariants}>
            <motion.div className="form-group" variants={fieldVariants}>
              <label>姓名</label>
              <input type="text" placeholder="请输入您的姓名" />
            </motion.div>
            
            <motion.div className="form-group" variants={fieldVariants}>
              <label>公司</label>
              <input type="text" placeholder="请输入公司名称" />
            </motion.div>
            
            <motion.div className="form-group" variants={fieldVariants}>
              <label>邮箱</label>
              <input type="email" placeholder="请输入邮箱地址" />
            </motion.div>
            
            <motion.div className="form-group" variants={fieldVariants}>
              <label>需求类型</label>
              <select>
                <option>产品咨询</option>
                <option>技术合作</option>
                <option>商务合作</option>
                <option>其他</option>
              </select>
            </motion.div>
            
            <motion.div className="form-group" variants={fieldVariants}>
              <label>详细需求</label>
              <textarea placeholder="请详细描述您的需求和期望..."></textarea>
            </motion.div>
            
            <motion.button
              type="submit"
              className="form-submit"
              variants={fieldVariants}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              提交咨询
            </motion.button>
          </motion.form>
        </motion.div>
      </div>

      <motion.div
        className="contact-footer"
        initial={{ opacity: 0 }}
        animate={isActive ? { opacity: 1 } : {}}
        transition={{ duration: 1, delay: 1.2 }}
      >
        <p>© 2024 Radiant AI. 创新科技，引领未来。</p>
        <p>
          <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text-secondary)', textDecoration: 'none', fontSize: '0.9rem' }}>
            滇ICP备2025071546号-1
          </a>
        </p>
      </motion.div>
    </div>
  );
};

export default ContactSection;
