import { useState } from 'react'
import ScrollReveal from './ScrollReveal'

const comparisons = [
  {
    id: 1,
    title: '品牌宣传片',
    traditional: {
      time: '2-4周',
      cost: '¥50,000-200,000',
      team: '导演+摄影+后期+演员',
      process: '脚本撰写→选角→拍摄→后期制作→修改→交付'
    },
    ai: {
      time: '1-3天',
      cost: '¥5,000-20,000',
      team: 'AI工程师+创意策划',
      process: '需求确认→AI生成→人工优化→交付'
    }
  },
  {
    id: 2,
    title: '产品展示视频',
    traditional: {
      time: '1-2周',
      cost: '¥20,000-80,000',
      team: '摄影师+灯光师+后期',
      process: '产品准备→场景搭建→拍摄→精修→交付'
    },
    ai: {
      time: '4-8小时',
      cost: '¥2,000-8,000',
      team: 'AI工程师',
      process: '产品图片→AI建模→动画生成→交付'
    }
  },
  {
    id: 3,
    title: '社交媒体短视频',
    traditional: {
      time: '3-7天',
      cost: '¥10,000-30,000',
      team: '编导+拍摄+剪辑',
      process: '策划→拍摄→剪辑→字幕→交付'
    },
    ai: {
      time: '2-4小时',
      cost: '¥1,000-3,000',
      team: 'AI工程师',
      process: '文案输入→AI生成→一键发布'
    }
  }
]

export default function CaseComparison() {
  const [activeCase, setActiveCase] = useState(comparisons[0])

  return (
    <section className="py-24 px-4 bg-[#0d0d2b]/50">
      <div className="max-w-7xl mx-auto">
        <ScrollReveal>
          <div className="text-center mb-16">
            <div className="inline-flex items-center px-4 py-2 rounded-full glass-card mb-6">
              <span className="text-purple-400 text-sm font-medium">效率对比</span>
            </div>
            <h2 className="text-4xl md:text-5xl font-bold mb-4">
              AI vs 传统 <span className="gradient-text">制作对比</span>
            </h2>
            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
              数据说话，AI制作效率提升10倍，成本降低80%
            </p>
          </div>
        </ScrollReveal>

        {/* Case Tabs */}
        <ScrollReveal delay={100}>
          <div className="flex flex-wrap justify-center gap-3 mb-12">
            {comparisons.map((comp) => (
              <button
                key={comp.id}
                onClick={() => setActiveCase(comp)}
                className={`px-5 py-2.5 rounded-xl font-medium transition-all duration-300 ${
                  activeCase.id === comp.id
                    ? 'gradient-bg-animated text-white'
                    : 'glass-card text-gray-400 hover:text-white'
                }`}
              >
                {comp.title}
              </button>
            ))}
          </div>
        </ScrollReveal>

        {/* Comparison Cards */}
        <ScrollReveal delay={200}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* Traditional */}
            <div className="glass-card rounded-3xl p-8 border-red-500/20">
              <div className="flex items-center gap-3 mb-8">
                <div className="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center">
                  <svg className="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-white">传统制作</h3>
              </div>

              <div className="space-y-6">
                <div className="flex items-center justify-between py-4 border-b border-white/5">
                  <span className="text-gray-400">制作周期</span>
                  <span className="text-red-400 font-semibold">{activeCase.traditional.time}</span>
                </div>
                <div className="flex items-center justify-between py-4 border-b border-white/5">
                  <span className="text-gray-400">制作成本</span>
                  <span className="text-red-400 font-semibold">{activeCase.traditional.cost}</span>
                </div>
                <div className="flex items-center justify-between py-4 border-b border-white/5">
                  <span className="text-gray-400">团队配置</span>
                  <span className="text-gray-300 text-sm text-right">{activeCase.traditional.team}</span>
                </div>
                <div>
                  <span className="text-gray-400 block mb-3">制作流程</span>
                  <p className="text-gray-300 text-sm leading-relaxed">{activeCase.traditional.process}</p>
                </div>
              </div>
            </div>

            {/* AI */}
            <div className="glass-card rounded-3xl p-8 border-green-500/20 relative overflow-hidden">
              <div className="absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-semibold gradient-bg-animated">
                推荐
              </div>
              <div className="flex items-center gap-3 mb-8">
                <div className="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center">
                  <svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-white">AI制作</h3>
              </div>

              <div className="space-y-6">
                <div className="flex items-center justify-between py-4 border-b border-white/5">
                  <span className="text-gray-400">制作周期</span>
                  <span className="text-green-400 font-semibold">{activeCase.ai.time}</span>
                </div>
                <div className="flex items-center justify-between py-4 border-b border-white/5">
                  <span className="text-gray-400">制作成本</span>
                  <span className="text-green-400 font-semibold">{activeCase.ai.cost}</span>
                </div>
                <div className="flex items-center justify-between py-4 border-b border-white/5">
                  <span className="text-gray-400">团队配置</span>
                  <span className="text-gray-300 text-sm">{activeCase.ai.team}</span>
                </div>
                <div>
                  <span className="text-gray-400 block mb-3">制作流程</span>
                  <p className="text-gray-300 text-sm leading-relaxed">{activeCase.ai.process}</p>
                </div>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  )
}