'use client';

import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button';
import { PageNav } from '@/components/layout/page-nav';
import {
  CheckCircle2,
  TrendingUp,
  Target,
  Clock,
  MessageCircle,
  ArrowRight,
} from 'lucide-react';
import { SERVICES } from '@/lib/constants';

interface ServiceDetailClientProps {
  service: typeof SERVICES[number];
}

const challenges: Record<string, { title: string; description: string }[]> = {
  software: [
    { title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' },
    { title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' },
    { title: '项目延期', description: '开发进度难以把控，上线时间一拖再拖' },
    { title: '维护成本高', description: '系统上线后问题不断，运维压力巨大' },
  ],
  data: [
    { title: '数据孤岛', description: '各系统数据分散，无法整合分析' },
    { title: '决策盲区', description: '缺乏数据支撑，决策凭感觉' },
    { title: '报表滞后', description: '手工制作报表，时效性差' },
    { title: '价值难挖', description: '数据很多，但不知道怎么用' },
  ],
  consulting: [
    { title: '方向不明', description: '数字化转型不知道从哪里入手' },
    { title: '技术债务', description: '历史系统包袱重，新技术难以引入' },
    { title: '人才短缺', description: '缺乏专业的技术规划和架构人才' },
    { title: '投入浪费', description: 'IT投入不少，但看不到明显效果' },
  ],
  solutions: [
    { title: '行业壁垒', description: '不了解行业最佳实践，走弯路' },
    { title: '方案碎片化', description: '各系统各自为政，无法协同' },
    { title: '实施风险', description: '大型项目实施失败率高' },
    { title: '效果难量化', description: '投入产出比不清晰，难以评估' },
  ],
};

const outcomes: Record<string, { value: string; label: string }[]> = {
  software: [
    { value: '30%+', label: '预期开发效率提升' },
    { value: '50%+', label: '预期返工率降低' },
    { value: '严格', label: '交付质量把控' },
  ],
  data: [
    { value: '实时', label: '数据更新' },
    { value: '自助式', label: '分析模式' },
    { value: '多维度', label: '可视化报表' },
  ],
  consulting: [
    { value: '清晰', label: '转型方向规划' },
    { value: '系统化', label: '技术选型评估' },
    { value: '可落地', label: '实施路径设计' },
  ],
  solutions: [
    { value: '标准化', label: '行业方案交付' },
    { value: '端到端', label: '全流程实施' },
    { value: '持续化', label: '运维优化支持' },
  ],
};

export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
  const serviceChallenges = challenges[service.id] ?? [];
  const serviceOutcomes = outcomes[service.id] ?? [];

  return (
    <div className="min-h-screen bg-[var(--color-bg-primary)]">
      <div className="pt-32 pb-16">
        <div className="container-wide">
          <PageNav items={[{ label: '服务', href: '/services' }, { label: service.title }]} />
          <div className="max-w-4xl mt-8">
            <p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Services</p>
            <h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
              {service.title}
            </h1>
            <p className="text-xl text-[var(--color-text-muted)] leading-relaxed">
              {service.description}
            </p>
          </div>
        </div>
      </div>

      <div className="container-wide pb-20">
        <div className="max-w-4xl space-y-16">
          <section>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
                <MessageCircle className="w-5 h-5 text-[var(--color-brand-primary)]" />
              </div>
              <h2 className="text-2xl font-bold text-[var(--color-text-primary)]">您可能面临的挑战</h2>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              {serviceChallenges.map((challenge, index) => (
                <div
                  key={index}
                  className="p-4 bg-[var(--color-bg-tertiary)] rounded-lg border border-[var(--color-border-primary)] hover:border-[var(--color-brand-primary)]/30 hover:bg-[var(--color-brand-primary-bg)] transition-colors"
                >
                  <h3 className="font-semibold text-[var(--color-text-primary)] mb-1 text-sm">{challenge.title}</h3>
                  <p className="text-sm text-[var(--color-text-muted)]">{challenge.description}</p>
                </div>
              ))}
            </div>
          </section>

          <section>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
                <Target className="w-5 h-5 text-[var(--color-brand-primary)]" />
              </div>
              <h2 className="text-2xl font-bold text-[var(--color-text-primary)]">我们如何帮助您</h2>
            </div>
            <p className="text-lg text-[var(--color-text-muted)] leading-relaxed mb-6">
              {service.overview}
            </p>
            <div className="space-y-3">
              {service.features.map((feature, index) => (
                <div key={index} className="flex items-start gap-3">
                  <CheckCircle2 className="w-5 h-5 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
                  <span className="text-[var(--color-text-primary)] text-sm">{feature}</span>
                </div>
              ))}
            </div>
          </section>

          <section>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
                <Clock className="w-5 h-5 text-[var(--color-brand-primary)]" />
              </div>
              <h2 className="text-2xl font-bold text-[var(--color-text-primary)]">服务流程</h2>
            </div>
            <div className="space-y-4">
              {service.process.map((step, index) => (
                <div key={index} className="flex items-start gap-4">
                  <div className="w-8 h-8 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
                    {index + 1}
                  </div>
                  <p className="text-[var(--color-text-primary)] pt-1">{step}</p>
                </div>
              ))}
            </div>
          </section>

          <section>
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
                <TrendingUp className="w-5 h-5 text-[var(--color-brand-primary)]" />
              </div>
              <h2 className="text-2xl font-bold text-[var(--color-text-primary)]">您将获得的改变</h2>
            </div>
            <div className="grid sm:grid-cols-3 gap-4">
              {serviceOutcomes.map((outcome, index) => (
                <div
                  key={index}
                  className="p-6 bg-[var(--color-bg-tertiary)] rounded-lg text-center hover:bg-[var(--color-brand-primary-bg)] transition-colors"
                >
                  <div className="text-3xl font-bold text-[var(--color-brand-primary)] mb-2">
                    {outcome.value}
                  </div>
                  <div className="text-sm text-[var(--color-text-muted)]">{outcome.label}</div>
                </div>
              ))}
            </div>
            <div className="mt-4 p-4 bg-[var(--color-bg-tertiary)] rounded-lg">
              <p className="text-sm text-[var(--color-text-muted)]">
                {service.benefits.join('；')}
              </p>
            </div>
          </section>

          <div className="flex justify-center gap-4 pt-8 border-t border-[var(--color-border-primary)]">
            <StaticLink href="/services">
              <Button variant="outline" size="lg">查看其他服务</Button>
            </StaticLink>
            <StaticLink href="/contact">
              <Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
                开始您的转型之旅
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </StaticLink>
          </div>
        </div>
      </div>
    </div>
  );
}