'use client';

import { motion } from 'framer-motion';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { StaticLink } from '@/components/ui/static-link';
import {
  Lightbulb,
  Cpu,
  Users,
} from 'lucide-react';
import { MethodologySection } from '@/components/sections/methodology-section';
import { CTASection } from '@/components/sections/cta-section';
import { BreadcrumbSchema } from '@/components/seo/structured-data';
import { SwipeNavigation } from '@/hooks/use-swipe-gesture';
import { ListPageHeroV3 } from '@/components/detail-v2/list-page-hero-v3';
import { SolutionCardV3 } from '@/components/detail-v2/solution-service-card-v3';
import { SOLUTIONS } from '@/lib/constants/solutions';

export default function SolutionsPage() {
  const shouldReduceMotion = useReducedMotion();
  const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };

  return (
    <div className="min-h-screen bg-[var(--color-bg-primary)]">
      <BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '解决方案', href: '/solutions' }]} />
      <SwipeNavigation
        prevRoute="/products"
        nextRoute="/services"
        prevLabel="产品方案"
        nextLabel="服务支持"
      />

      {/* Hero 区域 (V3) */}
      <ListPageHeroV3
        title="行业解决方案"
        subtitle="针对不同行业的核心痛点，提供端到端数字化路径"
        description="基于企业套装产品的行业化组合方案"
        stats={[
          { value: '4', label: '行业方案' },
          { value: '6+', label: '核心产品' },
          { value: '100%', label: '自主可控' },
        ]}
      />

      {/* 行业解决方案网格 */}
      <section className="pb-16">
        <div className="container-wide">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {SOLUTIONS.map((solution) => (
              <SolutionCardV3 key={solution.id} solution={solution} />
            ))}
          </div>
        </div>
      </section>

      {/* 方案→服务关联推荐 */}
      <section className="py-16">
        <div className="container-wide">
          <motion.div
            {...fadeUp}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-center mb-10"
          >
            <h2 className="text-2xl font-bold text-gray-900 lg:text-3xl mb-3">
              从方案到落地，全程陪伴
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              我们不仅提供行业解决方案，更通过专业服务确保方案真正落地见效
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {[
              { icon: Lightbulb, title: '数字化转型咨询', desc: '帮您看清前路，迈对第一步', href: '/services', bgColor: 'rgba(196,30,58,0.06)', color: '#C41E3A' },
              { icon: Cpu, title: '信息技术解决方案', desc: '让技术真正为业务服务', href: '/products', bgColor: 'rgba(37,99,235,0.06)', color: '#2563eb' },
              { icon: Users, title: '长期陪跑服务', desc: '从需求到落地，持续陪伴', href: '/services', bgColor: 'rgba(22,163,74,0.06)', color: '#16a34a' },
            ].map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
              >
                <StaticLink
                  href={item.href}
                  className="block p-6 rounded-xl bg-white border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all group"
                >
                  <div
                    className="w-10 h-10 rounded-lg flex items-center justify-center mb-4"
                    style={{ backgroundColor: item.bgColor }}
                  >
                    <item.icon className="w-5 h-5" style={{ color: item.color }} />
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-1 group-hover:text-[#C41E3A] transition-colors">
                    {item.title}
                  </h3>
                  <p className="text-sm text-gray-500">{item.desc}</p>
                </StaticLink>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <MethodologySection />

      <CTASection
        title="准备开始您的数字化转型之旅？"
        description="无论您处于哪个阶段，我们都能为您提供合适的解决方案"
        primaryLabel="立即咨询"
        primaryHref="/contact"
        secondaryLabel="联系我们"
        secondaryHref="/contact"
      />
    </div>
  );
}