'use client';

import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Button } from '@/components/ui/button';
import { PageHeader } from '@/components/ui/page-header';
import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';

export default function SolutionsPage() {
  const contentRef = useRef(null);
  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });

  return (
    <div className="min-h-screen bg-white">
      <PageHeader
        title="三种角色，一种身份——您的成长伙伴"
        description="我们以伙伴的身份，陪您走过数字化转型的每一步"
      />

      <div className="container-wide relative z-10 py-16" ref={contentRef}>
        <div className="max-w-6xl mx-auto space-y-24">
          
          <motion.section
            initial={{ opacity: 0, y: 20 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
            className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
          >
            <div className="flex items-start gap-6 mb-8">
              <div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
                <Lightbulb className="w-8 h-8 text-white" />
              </div>
              <div>
                <h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
                  模块一：数字化转型咨询 · 参谋伙伴
                </h2>
                <p className="text-lg text-[#5C5C5C]">
                  帮您看清前路，迈对第一步
                </p>
              </div>
            </div>

            <div className="space-y-6 mb-8">
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                数字化转型最大的成本，是走错方向的成本。
              </p>
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                我们用行业智慧帮您洞察趋势，用理性分析帮您避开陷阱。
              </p>
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                不堆砌概念，只帮您想清楚：该不该做、做什么、怎么做。
              </p>
            </div>

            <div className="mb-8">
              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
                <CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
                核心价值点
              </h3>
              <div className="grid md:grid-cols-3 gap-4">
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">行业趋势洞察报告</span>
                </div>
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">数字化转型成熟度评估</span>
                </div>
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">个性化实施路径规划</span>
                </div>
              </div>
            </div>

            <div className="flex justify-center">
              <Button 
                size="lg" 
                className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
                onClick={() => {
                  const element = document.getElementById('contact');
                  if (element) {
                    element.scrollIntoView({ behavior: 'smooth' });
                  }
                }}
              >
                预约一次免费诊断
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </div>
          </motion.section>

          <motion.section
            initial={{ opacity: 0, y: 20 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
          >
            <div className="flex items-start gap-6 mb-8">
              <div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
                <Cpu className="w-8 h-8 text-white" />
              </div>
              <div>
                <h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
                  模块二：信息技术解决方案 · 技术伙伴
                </h2>
                <p className="text-lg text-[#5C5C5C]">
                  让技术真正为业务服务
                </p>
              </div>
            </div>

            <div className="space-y-6 mb-8">
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                我们不追逐"最火"的技术，只选择"最对"的技术。
              </p>
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                将前沿技术深度融入您的业务场景，让每一行代码都产生业务价值。
              </p>
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                您不必懂技术原理，只需要看见业务在增长。
              </p>
            </div>

            <div className="mb-8">
              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
                <CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
                核心价值点
              </h3>
              <div className="grid md:grid-cols-3 gap-4">
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">业务场景深度调研</span>
                </div>
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">技术方案定制开发</span>
                </div>
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">敏捷交付快速迭代</span>
                </div>
              </div>
            </div>

            <div className="flex justify-center">
              <Button 
                size="lg" 
                variant="outline"
                className="border-[#C41E3A] text-[#C41E3A] hover:bg-[#C41E3A] hover:text-white"
                onClick={() => {
                  const element = document.getElementById('cases');
                  if (element) {
                    element.scrollIntoView({ behavior: 'smooth' });
                  }
                }}
              >
                查看技术案例
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </div>
          </motion.section>

          <motion.section
            initial={{ opacity: 0, y: 20 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
          >
            <div className="flex items-start gap-6 mb-8">
              <div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
                <Users className="w-8 h-8 text-white" />
              </div>
              <div>
                <h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
                  模块三：长期陪跑服务 · 同行伙伴
                </h2>
                <p className="text-lg text-[#5C5C5C]">
                  交付只是开始，陪伴才是常态
                </p>
              </div>
            </div>

            <div className="space-y-6 mb-8">
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                项目上线那天，是我们真正成为伙伴的开始。
              </p>
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                我们建立长效服务机制，定期回访、持续优化、随时响应。
              </p>
              <p className="text-lg text-[#1C1C1C] leading-relaxed">
                在您需要的时候，我们始终在场。
              </p>
            </div>

            <div className="mb-8">
              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
                <CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
                核心价值点
              </h3>
              <div className="grid md:grid-cols-3 gap-4">
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">专属客户成功经理</span>
                </div>
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">季度业务复盘会</span>
                </div>
                <div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
                  <div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
                  <span className="text-[#1C1C1C]">7×24小时响应通道</span>
                </div>
              </div>
            </div>

            <div className="flex justify-center">
              <Button 
                size="lg" 
                className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
                onClick={() => {
                  const element = document.getElementById('contact');
                  if (element) {
                    element.scrollIntoView({ behavior: 'smooth' });
                  }
                }}
              >
                了解陪跑服务
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </div>
          </motion.section>

        </div>
      </div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={isContentInView ? { opacity: 1, y: 0 } : {}}
        transition={{ duration: 0.6, delay: 0.6 }}
        className="bg-[#F5F5F5] py-16"
      >
        <div className="container-wide text-center">
          <h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
            准备开始您的数字化转型之旅？
          </h2>
          <p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
            无论您处于哪个阶段，我们都能为您提供合适的解决方案
          </p>
          <div className="flex justify-center gap-4">
            <Button 
              size="lg" 
              variant="outline"
              onClick={() => {
                const element = document.getElementById('contact');
                if (element) {
                  element.scrollIntoView({ behavior: 'smooth' });
                }
              }}
            >
              联系我们
            </Button>
            <Button 
              size="lg" 
              className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
              onClick={() => {
                const element = document.getElementById('contact');
                if (element) {
                  element.scrollIntoView({ behavior: 'smooth' });
                }
              }}
            >
              立即咨询
              <ArrowRight className="ml-2 w-4 h-4" />
            </Button>
          </div>
        </div>
      </motion.div>
    </div>
  );
}