'use client';

import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import dynamic from 'next/dynamic';
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button';
import { PageHeader } from '@/components/ui/page-header';
import { ArrowRight } from 'lucide-react';
import { MethodologySection } from '@/components/sections/methodology-section';
import { SOLUTIONS } from '@/lib/constants/solutions';
import { FadeUp } from '@/lib/animations';

const ConsultingSection = dynamic(
  () => import('@/components/solutions/consulting-section').then(mod => ({ default: mod.ConsultingSection })),
  { ssr: false }
);

const TechSolutionSection = dynamic(
  () => import('@/components/solutions/tech-solution-section').then(mod => ({ default: mod.TechSolutionSection })),
  { ssr: false }
);

const AccompanySection = dynamic(
  () => import('@/components/solutions/accompany-section').then(mod => ({ default: mod.AccompanySection })),
  { ssr: false }
);

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">

          <ConsultingSection />
          <TechSolutionSection />
          <AccompanySection />

        </div>
      </div>

      {/* 行业解决方案入口 */}
      <section className="py-20 md:py-28 bg-[#F8F8F8]">
        <div className="container-wide">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-[#1C1C1C] mb-3">
              行业解决方案
            </h2>
            <p className="text-[#5C5C5C] text-lg">
              针对不同行业的数字化痛点，提供定制化解决方案
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
            {SOLUTIONS.map((solution, index) => (
              <FadeUp key={solution.id} delay={index * 0.1}>
                <StaticLink href={`/solutions/${solution.id}`}>
                  <div className="group p-6 md:p-8 bg-white rounded-2xl border border-[#E5E5E5] hover:border-[var(--color-brand-primary)]/30 transition-all hover:shadow-lg">
                    <div className="flex items-center gap-2 mb-3">
                      <span className="inline-block px-3 py-1 bg-[var(--color-brand-primary)]/10 text-[var(--color-brand-primary)] text-xs font-semibold rounded-full">
                        {solution.industry}
                      </span>
                    </div>
                    <h3 className="text-xl font-bold text-[#1C1C1C] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
                      {solution.title}
                    </h3>
                    <p className="text-[#5C5C5C] text-sm mb-4 line-clamp-2">
                      {solution.description}
                    </p>
                    <div className="flex items-center gap-1 text-[var(--color-brand-primary)] text-sm font-semibold">
                      查看方案
                      <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                    </div>
                  </div>
                </StaticLink>
              </FadeUp>
            ))}
          </div>
        </div>
      </section>

      <MethodologySection />

      <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>
          <Button
              size="lg"
              className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white"
              asChild
            >
              <StaticLink href="/contact">
                立即咨询
                <ArrowRight className="ml-2 w-4 h-4" />
              </StaticLink>
            </Button>
        </div>
      </motion.div>
    </div>
  );
}