import { useState } from "react";
import { Link } from "react-router-dom";
import VideoCard from "../components/VideoCard";
import VideoModal from "../components/VideoModal";
import ParticleBackground from "../components/ParticleBackground";
import AnimatedCounter from "../components/AnimatedCounter";
import MarqueeTicker from "../components/MarqueeTicker";
import TestimonialCard from "../components/TestimonialCard";
import ScrollReveal from "../components/ScrollReveal";
import ServiceScenes from "../components/ServiceScenes";
import CaseComparison from "../components/CaseComparison";
import ProcessAnimation from "../components/ProcessAnimation";
import FAQ from "../components/FAQ";
import { videos, Video } from "../data/videos";

const testimonials = [
  {
    name: "張總",
    role: "市場總監",
    company: "某科技公司",
    content:
      "CYH Technology 的 AI 短視頻製作效率令人驚歎，原本需要兩週的工作現在一天就能完成，而且質量非常出色！",
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=zhang",
  },
  {
    name: "李經理",
    role: "品牌負責人",
    company: "某電商平臺",
    content:
      "他們的創意團隊非常專業，能夠精準把握我們的品牌調性，製作出的視頻在社交媒體上獲得了極高的傳播率。",
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=li",
  },
  {
    name: "王女士",
    role: "創始人",
    company: "某新消費品牌",
    content:
      "作爲初創公司，CYH Technology 幫我們用有限預算實現了高品質的品牌視頻，性價比非常高！",
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=wang",
  },
];

export default function Home() {
  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
  const featuredVideos = videos.slice(0, 6);

  return (
    <div>
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
        <ParticleBackground />

        <div className="absolute inset-0">
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-[128px] animate-float" />
          <div
            className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-600/20 rounded-full blur-[128px] animate-float"
            style={{ animationDelay: "2s" }}
          />
        </div>

        <div className="relative z-10 px-4 max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            {/* Left Content */}
            <div className="animate-fade-in-up">
              <h1 className="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                <div className="gradient-text mb-5">AI短視頻</div>

                <span className="text-white">讓創意觸手可及</span>
              </h1>

              <p className="text-lg text-gray-400 mb-8 max-w-lg leading-relaxed">
                用前沿 AI 科技，10倍效率提升，80%成本降低。
                從品牌宣傳片到社交媒體內容，一站式視頻解決方案。
              </p>

              <div className="flex flex-col sm:flex-row gap-4 mb-12">
                <Link
                  to="/works"
                  className="group px-8 py-4 gradient-bg-animated rounded-2xl text-white font-bold text-lg overflow-hidden relative"
                >
                  <span className="relative z-10 flex items-center justify-center">
                    查看作品
                    <svg
                      className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M17 8l4 4m0 0l-4 4m4-4H3"
                      />
                    </svg>
                  </span>
                </Link>
                <Link
                  to="/contact"
                  className="px-8 py-4 border-2 border-purple-500/50 rounded-2xl text-purple-400 font-bold text-lg hover:border-purple-400 hover:bg-purple-500/10 transition-all duration-300"
                >
                  免費諮詢
                </Link>
              </div>

              {/* Quick Stats */}
              <div className="flex gap-8">
                {[
                  { value: "500+", label: "成功案例" },
                  { value: "98%", label: "滿意度" },
                  { value: "10x", label: "效率提升" },
                ].map((stat, index) => (
                  <div key={index}>
                    <div className="text-2xl font-bold gradient-text">
                      {stat.value}
                    </div>
                    <div className="text-sm text-gray-500">{stat.label}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right - Video Showcase */}
            <div className="hidden lg:block relative">
              <div className="relative">
                {/* Main Video Card */}
                <div className="glass-card rounded-3xl overflow-hidden transform rotate-2 hover:rotate-0 transition-transform duration-500">
                  <div className="aspect-video 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 animate-pulse-glow">
                        <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">AI生成的品牌宣傳片</p>
                    </div>
                  </div>
                </div>

                {/* Floating Cards */}
                <div
                  className="absolute -bottom-6 -left-6 glass-card rounded-2xl p-4 animate-float"
                  style={{ animationDelay: "1s" }}
                >
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
                      <svg
                        className="w-5 h-5 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>
                    <div>
                      <div className="text-sm font-semibold text-white">
                        10x 效率
                      </div>
                      <div className="text-xs text-gray-500">相比傳統制作</div>
                    </div>
                  </div>
                </div>

                <div
                  className="absolute -top-6 -right-6 glass-card rounded-2xl p-4 animate-float"
                  style={{ animationDelay: "2s" }}
                >
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
                      <svg
                        className="w-5 h-5 text-purple-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                      </svg>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-white">
                        80% 節省
                      </div>
                      <div className="text-xs text-gray-500">製作成本</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="absolute bottom-12 left-1/2 transform -translate-x-1/2 animate-bounce">
          <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
            <div className="w-1.5 h-3 bg-white/50 rounded-full mt-2 animate-pulse" />
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-20 px-4 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-purple-900/10 to-transparent" />
        <div className="max-w-7xl mx-auto relative z-10">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { end: 500, suffix: "+", label: "完成項目" },
              { end: 1000, suffix: "+", label: "合作客戶" },
              { end: 200, suffix: "+", label: "團隊成員" },
              { end: 98, suffix: "%", label: "客戶滿意度" },
            ].map((stat, index) => (
              <ScrollReveal key={index} delay={index * 100}>
                <div className="text-center glass-card rounded-2xl p-6 hover-lift">
                  <AnimatedCounter end={stat.end} suffix={stat.suffix} />
                  <p className="text-gray-400 mt-2 font-medium">{stat.label}</p>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <ScrollReveal>
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                爲什麼選擇 <span className="gradient-text">CYH</span>
              </h2>
              <p className="text-gray-400 max-w-xl mx-auto">
                我們將人工智能技術與創意完美融合，爲您提供前所未有的視頻製作體驗
              </p>
            </div>
          </ScrollReveal>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 h-[234px]">
            {[
              {
                icon: (
                  <svg
                    className="w-8 h-8"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13 10V3L4 14h7v7l9-11h-7z"
                    />
                  </svg>
                ),
                title: "高效產出",
                desc: "AI驅動的製作流程，將傳統數週的製作週期縮短至數小時",
                gradient: "from-yellow-500 to-orange-500",
              },
              {
                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 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
                    />
                  </svg>
                ),
                title: "創意無限",
                desc: "突破傳統制作限制，實現任何想象中的視覺效果",
                gradient: "from-purple-500 to-pink-500",
              },
              {
                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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                ),
                title: "成本優化",
                desc: "大幅降低視頻製作成本，讓高品質視頻觸手可及",
                gradient: "from-green-500 to-emerald-500",
              },
            ].map((feature, index) => (
              <ScrollReveal key={index} delay={index * 150}>
                <div className="group glass-card h-full rounded-2xl p-8 hover-lift relative overflow-hidden">
                  <div
                    className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-br ${feature.gradient} opacity-10 rounded-full blur-3xl group-hover:opacity-20 transition-opacity`}
                  />
                  <div
                    className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.gradient} flex items-center justify-center mb-5 text-white shadow-lg`}
                  >
                    {feature.icon}
                  </div>
                  <h3 className="text-xl font-bold text-white mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-gray-400 leading-relaxed">
                    {feature.desc}
                  </p>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Service Scenes */}
      <ServiceScenes />

      {/* Process Animation */}
      <ProcessAnimation />

      {/* Featured Videos */}
      <section className="py-20 px-4 bg-[#0d0d2b]/50 relative overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-purple-500/50 to-transparent" />

        <div className="max-w-7xl mx-auto">
          <ScrollReveal>
            <div className="text-center mb-16">
          
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                探索 <span className="gradient-text">AI創作</span>
              </h2>
              <p className="text-gray-400">
                探索我們用AI技術創作的精彩短視頻作品
              </p>
            </div>
          </ScrollReveal>

          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
            {featuredVideos.map((video, index) => (
              <ScrollReveal key={video.id} delay={index * 100}>
                <VideoCard video={video} onClick={setSelectedVideo} />
              </ScrollReveal>
            ))}
          </div>

          <ScrollReveal>
            <div className="text-center">
              <Link
                to="/works"
                className="group inline-flex items-center px-8 py-4 gradient-bg-animated rounded-2xl text-white font-bold hover:shadow-2xl hover:shadow-purple-500/25 transition-all duration-300"
              >
                查看全部作品
                <svg
                  className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M17 8l4 4m0 0l-4 4m4-4H3"
                  />
                </svg>
              </Link>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Case Comparison */}
      <CaseComparison />

      {/* Testimonials */}
      <section className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <ScrollReveal>
            <div className="text-center mb-16">
          
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                他們都在說
              </h2>
              <p className="text-gray-400">來自合作伙伴的真實反饋</p>
            </div>
          </ScrollReveal>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {testimonials.map((testimonial, index) => (
              <ScrollReveal key={index} delay={index * 150}>
                <TestimonialCard testimonial={testimonial} />
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <FAQ />

      {/* CTA Section */}
      <section className="py-24 px-4 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-purple-900/20 to-[#0a0a1a]" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[128px]" />

        <div className="max-w-4xl mx-auto text-center relative z-10">
          <ScrollReveal>
            <h2 className="text-4xl md:text-5xl font-bold mb-6">
              準備好開始 <span className="gradient-text">AI視頻之旅</span>{" "}
              了嗎？
            </h2>
            <p className="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
              立即聯繫我們，獲取免費諮詢和定製方案
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link
                to="/contact"
                className="px-10 py-5 gradient-bg-animated rounded-2xl text-white font-bold text-lg hover:shadow-2xl hover:shadow-purple-500/25 transition-all duration-300"
              >
                免費諮詢
              </Link>
              <Link
                to="/works"
                className="px-10 py-5 border-2 border-purple-500/50 rounded-2xl text-purple-400 font-bold text-lg hover:border-purple-400 hover:bg-purple-500/10 transition-all duration-300"
              >
                查看案例
              </Link>
            </div>
          </ScrollReveal>
        </div>
      </section>

      <VideoModal
        video={selectedVideo}
        onClose={() => setSelectedVideo(null)}
      />
    </div>
  );
}