novalon-website/src/app/(marketing)/services/service-detail-content-v4.tsx

'use client';

import { motion } from 'framer-motion';
import { CTAButton } from '@/components/ui/cta-button';
import { ArrowUpRight, CheckCircle2, Zap, Clock, Users, Award, TrendingUp, Shield } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import type { Service, CaseStudy } from '@/lib/constants/services';

const EASE_OUT = [0.22, 1, 0.36, 1] as const;

const FEATURE_ICONS: LucideIcon[] = [Zap, Clock, Users, Award, TrendingUp, Shield];

function DetailHero({ service }: { service: Service }) {
  const firstBenefit = service.benefits?.[0] || '效率提升 40%';

  return (
    <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
        <div className="max-w-4xl">
          <motion.h1
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.92] tracking-tightest mb-10 sm:mb-12 md:mb-16"
          >
            <div className="block">{service.title}</div>
            <div className="block mt-4 sm:mt-6">
              <span className="relative inline-block">
                <span className="relative text-brand font-black">
                  {firstBenefit}
                  <motion.span
                    className="absolute -bottom-2 left-0 w-full h-[3px] bg-brand"
                    style={{ transformOrigin: 'left' }}
                    initial={{ scaleX: 0 }}
                    animate={{ scaleX: 1 }}
                    transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
                  />
                </span>
              </span>
            </div>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.5, ease: EASE_OUT }}
            className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12 sm:mb-16"
          >
            {service.description}
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.7, ease: EASE_OUT }}
            className="grid grid-cols-3 gap-8 mb-12 sm:mb-16 max-w-xl"
          >
            <div>
              <div className="text-3xl sm:text-4xl font-black text-brand tracking-tight leading-none mb-2">
                10+
              </div>
              <div className="text-sm text-text-muted">人核心团队</div>
            </div>
            <div>
              <div className="text-3xl sm:text-4xl font-black text-ink tracking-tight leading-none mb-2">
                6
              </div>
              <div className="text-sm text-text-muted">款自研产品</div>
            </div>
            <div>
              <div className="text-3xl sm:text-4xl font-black text-ink tracking-tight leading-none mb-2">
                100%
              </div>
              <div className="text-sm text-text-muted">结果导向交付</div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.9, ease: EASE_OUT }}
            className="flex flex-col sm:flex-row gap-4 sm:gap-6"
          >
            <CTAButton href="/contact" dataTestId="service-detail-hero-primary" className="min-h-[52px]">
              免费咨询
            </CTAButton>
            <CTAButton href="#cases" variant="secondary" className="min-h-[52px] touch-manipulation">
              查看案例
            </CTAButton>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function OverviewSection({ service }: { service: Service }) {
  return (
    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
      <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-12 sm:gap-16 md:gap-20 items-start">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: '-80px' }}
            transition={{ duration: 0.8, ease: EASE_OUT }}
            className="lg:col-span-5"
          >
            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
              解决什么问题
            </h2>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: '-80px' }}
            transition={{ duration: 0.8, delay: 0.15, ease: EASE_OUT }}
            className="lg:col-span-7"
          >
            <p className="text-text-secondary leading-relaxed text-lg mb-8">
              {service.overview}
            </p>
            <div className="flex flex-wrap gap-3">
              {service.benefits?.slice(0, 4).map((benefit, i) => (
                <div
                  key={i}
                  className="inline-flex items-center gap-2 px-4 py-2 text-sm border border-border-primary text-ink"
                >
                  <CheckCircle2 className="w-4 h-4 shrink-0 text-brand" />
                  <span className="font-medium">{benefit}</span>
                </div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function FeaturesSection({ service }: { service: Service }) {
  return (
    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-80px' }}
          transition={{ duration: 0.8, ease: EASE_OUT }}
          className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
        >
          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
            核心能力
          </h2>
          <p className="mt-6 text-lg text-text-secondary leading-relaxed">
            每一项能力都来自核心团队的项目实践与持续打磨
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary">
          {service.features.map((feature, index) => {
            const [title, desc] = feature.split('：');
            const Icon = FEATURE_ICONS[index % FEATURE_ICONS.length]!;

            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-60px' }}
                transition={{ duration: 0.6, delay: index * 0.06, ease: EASE_OUT }}
                className="group relative p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-bg-primary"
              >
                <div className="relative z-10">
                  <Icon className="w-8 h-8 mb-6 text-brand" />
                  <h3 className="text-lg sm:text-xl font-bold mb-3 text-ink group-hover:text-brand transition-colors duration-300">
                    {desc ? title : feature.slice(0, 10)}
                  </h3>
                  <p className="text-sm leading-relaxed text-text-secondary">
                    {desc || feature}
                  </p>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProcessSection({ service }: { service: Service }) {
  if (!service.process || service.process.length === 0) return null;

  return (
    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />
      <div className="absolute bottom-0 left-0 right-0 h-px bg-border-primary" />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-80px' }}
          transition={{ duration: 0.8, ease: EASE_OUT }}
          className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
        >
          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
            服务流程
          </h2>
          <p className="mt-6 text-lg text-text-secondary leading-relaxed">
            标准化流程，确保每个项目可控、可预期
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-px bg-border-primary">
          {service.process.slice(0, 5).map((step, index) => {
            const [title, desc] = step.split('：');
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-60px' }}
                transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
                className="relative group p-6 sm:p-8 bg-bg-primary hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 transition-all duration-500"
              >
                <div
                  className="w-2 h-2 rounded-full mb-6"
                  style={{ backgroundColor: index === 0 ? '#C41E3A' : 'var(--color-border-primary)' }}
                />
                <h3 className="text-lg font-bold mb-2 text-ink group-hover:text-brand transition-colors duration-300">
                  {desc ? title : step.slice(0, 6)}
                </h3>
                <p className="text-sm leading-relaxed text-text-secondary">
                  {desc || step}
                </p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function CaseStudiesSection({ caseStudies = [] }: { caseStudies?: CaseStudy[] }) {
  if (caseStudies.length === 0) return null;

  return (
    <section id="cases" className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-80px' }}
          transition={{ duration: 0.8, ease: EASE_OUT }}
          className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
        >
          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
            真实案例，<br className="sm:hidden" />可衡量的成果
          </h2>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-px bg-border-primary">
          {caseStudies.slice(0, 4).map((cs, i) => (
            <motion.a
              key={i}
              href={`/cases/${cs.client.toLowerCase().replace(/\s+/g, '-')}`}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-60px' }}
              transition={{ duration: 0.6, delay: i * 0.08, ease: EASE_OUT }}
              className="group relative block p-8 sm:p-10 transition-all duration-500 hover:bg-bg-secondary hover:shadow-lg hover:-translate-y-1 bg-bg-primary border border-transparent hover:border-border-primary"
            >

              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-5">
                  <span className="text-xs font-medium text-brand">
                    {cs.industry}
                  </span>
                  <span className="text-border-primary">•</span>
                  <span className="text-sm text-text-secondary">{cs.client}</span>
                </div>

                <h3 className="text-xl sm:text-2xl font-bold mb-6 text-ink leading-tight group-hover:text-brand transition-colors duration-300">
                  {cs.challenge.slice(0, 30)}
                </h3>

                <p className="text-sm leading-relaxed mb-6 text-text-secondary">
                  {cs.solution}
                </p>

                <div className="inline-flex items-center gap-2 text-sm font-semibold text-text-secondary group-hover:text-brand transition-colors duration-300">
                  <span>查看详情</span>
                  <ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
                </div>
              </div>
            </motion.a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-secondary">
      <div className="absolute top-0 left-0 right-0 h-px bg-border-primary" />

      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-80px' }}
          transition={{ duration: 0.8, ease: EASE_OUT }}
          className="max-w-3xl"
        >
          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95] mb-8">
            准备好开始了吗？
          </h2>
          <p className="text-lg text-text-secondary leading-relaxed mb-10">
            无论是一个明确的项目，还是一个模糊的想法，我们都愿意坐下来和您一起理清楚。
            <br className="hidden sm:block" />
            首次咨询免费，没有任何销售压力。
          </p>
          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
            <CTAButton href="/contact" dataTestId="service-detail-bottom-primary" className="min-h-[52px]">
              预约免费咨询
            </CTAButton>
            <CTAButton href="/services" variant="secondary" dataTestId="service-detail-bottom-secondary" className="min-h-[52px]">
              返回服务列表
            </CTAButton>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

export default function ServiceDetailContentV4({ service }: { service: Service }) {
  return (
    <main className="min-h-screen bg-bg-primary text-ink">
      <DetailHero service={service} />
      <OverviewSection service={service} />
      <FeaturesSection service={service} />
      <ProcessSection service={service} />
      <CaseStudiesSection caseStudies={service.caseStudies} />
      <CTASection />
    </main>
  );
}