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

const scenes = [
  {
    id: 'social',
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-10 0H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2h-2" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 11v6m-3-3h6" />
      </svg>
    ),
    title: '社交媒体',
    desc: '抖音、小红书、Instagram等平台爆款内容',
    features: ['15秒竖屏视频', '高完播率设计', '爆款文案生成', '多平台适配'],
    gradient: 'from-pink-500 to-rose-500'
  },
  {
    id: 'ecommerce',
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
      </svg>
    ),
    title: '电商营销',
    desc: '产品展示、直播切片、详情页视频',
    features: ['3D产品展示', '卖点可视化', '多角度展示', '批量生成'],
    gradient: 'from-orange-500 to-yellow-500'
  },
  {
    id: 'education',
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
    ),
    title: '教育培训',
    desc: '在线课程、知识科普、企业内训',
    features: ['知识可视化', 'AI讲师生成', '课程片头制作', '互动元素'],
    gradient: 'from-blue-500 to-cyan-500'
  },
  {
    id: 'brand',
    icon: (
      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
      </svg>
    ),
    title: '企业宣传',
    desc: '品牌故事、企业宣传片、招聘视频',
    features: ['品牌形象塑造', '企业文化展示', '数字人代言', '多语言版本'],
    gradient: 'from-purple-500 to-violet-500'
  }
]

export default function ServiceScenes() {
  const [activeScene, setActiveScene] = useState(scenes[0])

  return (
    <section className="py-24 px-4">
      <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">
              覆盖全场景 <span className="gradient-text">AI视频</span> 需求
            </h2>
            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
              无论您是什么行业，我们都能提供专业的AI视频解决方案
            </p>
          </div>
        </ScrollReveal>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          {/* Scene Tabs */}
          <div className="lg:col-span-4 space-y-3">
            {scenes.map((scene) => (
              <button
                key={scene.id}
                onClick={() => setActiveScene(scene)}
                className={`w-full text-left p-5 rounded-2xl transition-all duration-300 ${
                  activeScene.id === scene.id
                    ? 'glass-card border-purple-500/50'
                    : 'hover:bg-white/5'
                }`}
              >
                <div className="flex items-center gap-4">
                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${scene.gradient} flex items-center justify-center text-white flex-shrink-0`}>
                    {scene.icon}
                  </div>
                  <div>
                    <h3 className={`font-semibold transition-colors ${
                      activeScene.id === scene.id ? 'text-white' : 'text-gray-400'
                    }`}>
                      {scene.title}
                    </h3>
                    <p className="text-sm text-gray-500">{scene.desc}</p>
                  </div>
                </div>
              </button>
            ))}
          </div>

          {/* Scene Detail */}
          <div className="lg:col-span-8">
            <div className="glass-card rounded-3xl p-8 md:p-10">
              <div className="flex items-center gap-4 mb-8">
                <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${activeScene.gradient} flex items-center justify-center text-white`}>
                  {activeScene.icon}
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-white">{activeScene.title}</h3>
                  <p className="text-gray-400">{activeScene.desc}</p>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
                {activeScene.features.map((feature, index) => (
                  <div key={index} className="flex items-center gap-3 p-4 rounded-xl bg-white/5">
                    <div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${activeScene.gradient} flex items-center justify-center flex-shrink-0`}>
                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <span className="text-gray-300">{feature}</span>
                  </div>
                ))}
              </div>

              <div className="aspect-video rounded-2xl overflow-hidden bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex items-center justify-center">
                <div className="text-center">
                  <div className="w-20 h-20 mx-auto mb-4 rounded-full gradient-bg-animated flex items-center justify-center">
                    <svg className="w-10 h-10 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M8 5v14l11-7z" />
                    </svg>
                  </div>
                  <p className="text-gray-400">点击观看 {activeScene.title} 案例视频</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}