'use client'

import { motion } from 'framer-motion'
import { CheckCircle2, TrendingUp, Users, Building2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import Link from 'next/link'

export function Ecosystem() {
  return (
    <section className="py-24 bg-secondary text-white relative overflow-hidden">
      {/* Background Effects */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-40 -right-40 w-80 h-80 bg-primary/20 rounded-full blur-3xl"></div>
        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl"></div>
      </div>

      <div className="container px-4 md:px-6 mx-auto relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          {/* Left Content */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <h2 className="text-3xl md:text-5xl font-bold mb-6">
              数据收益
              <span className="text-primary"> 优先分配</span>
            </h2>
            <p className="text-lg text-gray-300 mb-8 leading-relaxed">
              白马家园首创"数据收益优先分配权"，让创造数据的人优先分享数据带来的增值红利。
              我们相信，只有相互成就，才能共建可持续发展的商业生态。
            </p>

            {/* Features List */}
            <div className="space-y-5 mb-10">
              {[
                { icon: TrendingUp, text: '时时/单单/天天补贴，立即到账' },
                { icon: Users, text: '用户消费即参与利润分配' },
                { icon: Building2, text: '商家让利即获得流量回馈' },
                { icon: CheckCircle2, text: '透明公开，无泡沫正向拨比' }
              ].map((item, index) => (
                <div key={index} className="flex items-center gap-4">
                  <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                    <item.icon className="w-5 h-5 text-primary" />
                  </div>
                  <span className="text-gray-200">{item.text}</span>
                </div>
              ))}
            </div>

            <Button asChild className="bg-primary hover:bg-primary/90 text-white rounded-full px-8 h-12">
              <Link href="/contact">立即加入生态</Link>
            </Button>
          </motion.div>

          {/* Right Visual */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="relative"
          >
            {/* Central Circle */}
            <div className="relative aspect-square w-full max-w-md mx-auto">
              {/* Outer Ring */}
              <div className="absolute inset-0 border-2 border-white/10 rounded-full"></div>
              
              {/* Inner Content */}
              <div className="absolute inset-8 border border-white/10 rounded-full flex items-center justify-center">
                <div className="w-32 h-32 bg-primary rounded-full flex items-center justify-center shadow-lg shadow-primary/30">
                  <span className="font-bold text-white text-lg">白马家园</span>
                </div>
              </div>

              {/* Orbiting Elements */}
              {[
                { angle: 0, label: '消费者' },
                { angle: 90, label: '商家' },
                { angle: 180, label: '供应链' },
                { angle: 270, label: '平台' }
              ].map((item, index) => (
                <div 
                  key={index}
                  className="absolute w-20 h-20 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/20"
                  style={{
                    top: '50%',
                    left: '50%',
                    transform: `translate(-50%, -50%) rotate(${item.angle}deg) translateY(-140px) rotate(-${item.angle}deg)`
                  }}
                >
                  <span className="text-sm font-medium">{item.label}</span>
                </div>
              ))}
              
              {/* Connection Lines */}
              <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20">
                <circle cx="50%" cy="50%" r="140" fill="none" stroke="white" strokeWidth="1" strokeDasharray="5,5" />
              </svg>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}