novalon-website/src/app/(marketing)/cases/cases-content-v3.tsx

'use client';

import { useState, useMemo } from 'react';
import { motion } from 'framer-motion';
import { CTAButton } from '@/components/ui/cta-button';
import { Building2, ArrowUpRight, Target, Lightbulb, Filter } from 'lucide-react';
import {
  type CaseStudy,
} from '@/lib/constants/cases';
import { cn } from '@/lib/utils';

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

const PAGE_METRICS = [
  { value: '首批', label: '客户共创', sub: '案例持续积累中' },
  { value: '10+', label: '人核心团队', sub: '复合型技术团队' },
  { value: '100%', label: '结果导向', sub: '以业务改善为衡量标准' },
  { value: '6大', label: '行业场景', sub: '制造零售医疗等' },
];

function CaseCard({ caseItem, index }: { caseItem: CaseStudy; index: number }) {
  return (
    <motion.a
      href={`/cases/${caseItem.slug}`}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-60px' }}
      transition={{ duration: 0.3, delay: index * 0.06, ease: EASE_OUT }}
      className="group relative block overflow-hidden border border-border-primary hover:border-border-secondary bg-bg-elevated hover:bg-bg-secondary transition-all duration-150 flex flex-col h-full"
    >
      <div className="absolute top-0 left-0 h-0 w-[2px] group-hover:h-full transition-all duration-150 origin-top bg-brand" />

      <div className="p-6 sm:p-7 lg:p-8 flex flex-col flex-1 relative z-10">
        <div className="flex items-center gap-3 mb-5">
          <span className="inline-block px-3 py-1 text-[11px] font-bold text-brand border border-brand/20 bg-brand/[0.05]">
            {caseItem.industry}
          </span>
          <span className="text-[10px] tracking-[0.25em] uppercase text-text-muted font-semibold">
            {caseItem.companySize}
          </span>
        </div>

        <h3 className="text-lg sm:text-xl font-bold text-ink mb-4 leading-tight group-hover:text-brand transition-colors duration-300">
          {caseItem.title}
        </h3>

        <div className="space-y-4 mb-6 flex-1">
          <div>
            <div className="flex items-center gap-2 mb-2">
              <Target className="w-3.5 h-3.5 text-brand" />
              <span className="text-[11px] tracking-wide uppercase font-bold text-brand">挑战</span>
            </div>
            <p className="text-sm text-text-secondary leading-relaxed line-clamp-2 pl-5.5">
              {caseItem.challenge}
            </p>
          </div>
          <div>
            <div className="flex items-center gap-2 mb-2">
              <Lightbulb className="w-3.5 h-3.5 text-text-muted" />
              <span className="text-[11px] tracking-wide uppercase font-bold text-text-secondary">方案</span>
            </div>
            <p className="text-sm text-text-secondary leading-relaxed line-clamp-2 pl-5.5">
              {caseItem.solution}
            </p>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 pt-5 border-t border-border-primary mb-5">
          {caseItem.metrics.slice(0, 2).map((m, i) => (
            <div key={i}>
              <div className={`text-2xl sm:text-3xl font-black mb-1 tabular-nums tracking-tight ${
                i === 0 ? 'text-brand' : 'text-ink'
              }`}>
                {m.value}
              </div>
              <div className="text-xs text-text-muted">{m.label}</div>
            </div>
          ))}
        </div>

        <div className="flex items-center justify-between pt-4 mt-auto border-t border-border-primary">
          <div className="flex items-center gap-2">
            <Building2 className="w-4 h-4 text-text-muted" />
            <span className="text-xs text-text-muted">{caseItem.client}</span>
          </div>
          <div className="flex items-center gap-1.5 text-brand text-sm font-semibold">
            查看详情
            <ArrowUpRight className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
          </div>
        </div>
      </div>
    </motion.a>
  );
}

export default function CasesContentV3({
  cases: casesProp,
  industries: industriesProp,
  pageCopy,
}: {
  cases?: CaseStudy[];
  industries?: { id: string; label: string }[];
  pageCopy?: Record<string, unknown> | null;
}) {
  const [selectedIndustry, setSelectedIndustry] = useState('all');

  const industries = industriesProp ?? [];

  const heroTitle1 = (pageCopy?.casePageHeroTitle1 as string) || '每一个项目，';
  const heroTitle2 = (pageCopy?.casePageHeroTitle2 as string) || '都以成果为目标';
  const heroDescription = (pageCopy?.casePageHeroDescription as string) || '我们正在与首批客户共同创造价值故事。\n从挑战到方案，从过程到成果——用数据说话，用结果证明。';
  const heroDescriptionLines = heroDescription.split('\n');
  const filterTitle = (pageCopy?.casePageFilterTitle as string) || '全部案例';
  const filterDescription = (pageCopy?.casePageFilterDescription as string) || '按行业筛选，找到与您业务最相关的成功故事';

  const filteredCases = useMemo(() => {
    const allCases = casesProp ?? [];
    if (selectedIndustry === 'all') return allCases;
    return allCases.filter(c => c.industry === selectedIndustry);
  }, [selectedIndustry, casesProp]);

  return (
    <div className="min-h-screen bg-bg-primary text-ink overflow-x-hidden">
      {/* Hero Section */}
      <section className="relative min-h-[70vh] 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-40">
          <div className="max-w-4xl">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: 0.1, ease: EASE_OUT }}
              className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-8"
            >
              Case Studies
            </motion.div>

            <motion.h1
              initial={{ opacity: 0, y: 40 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, 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.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
            >
              <div className="block">{heroTitle1}</div>
              <div className="block mt-4 sm:mt-6">
                <span className="relative inline-block">
                  <span className="relative text-brand font-black">
                    {heroTitle2}
                    <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.3, 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.3, delay: 0.5, ease: EASE_OUT }}
              className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12"
            >
              {heroDescriptionLines.map((line, i) => (
                <span key={i}>
                  {i > 0 && <br className="hidden sm:block" />}
                  {line}
                </span>
              ))}
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: 0.7, ease: EASE_OUT }}
              className="flex flex-wrap gap-3"
            >
              <span className="px-4 py-2 text-xs font-bold text-brand border border-brand/20 bg-brand/[0.05]">
                首批客户共创中
              </span>
              <span className="px-4 py-2 text-xs font-medium text-text-secondary border border-border-primary">
                10+ 人核心团队
              </span>
              <span className="px-4 py-2 text-xs font-medium text-text-secondary border border-border-primary">
                6 大行业场景
              </span>
              <span className="px-4 py-2 text-xs font-medium text-text-secondary border border-border-primary">
                100% 结果导向
              </span>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Metrics Strip */}
      <section className="relative py-16 sm:py-20 md:py-24 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 relative z-10">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
            {PAGE_METRICS.map((metric, i) => (
              <motion.div
                key={metric.label}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-80px' }}
                transition={{ duration: 0.3, delay: i * 0.06, ease: EASE_OUT }}
                className="text-center lg:text-left"
              >
                <div className={`text-3xl sm:text-4xl md:text-5xl font-black tracking-tight mb-2 ${
                  i === 0 ? 'text-brand' : 'text-ink'
                }`}>
                  {metric.value}
                </div>
                <div className="text-sm font-medium text-text-secondary mb-1">{metric.label}</div>
                <div className="text-xs text-text-muted">{metric.sub}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Cases List Section */}
      <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 relative z-10">
          <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-12 sm:mb-16 md:mb-20">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-80px' }}
              transition={{ duration: 0.3, ease: EASE_OUT }}
              className="lg:max-w-2xl"
            >
              <div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
                All Cases
              </div>
              <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95]">
                {filterTitle}
              </h2>
              <p className="mt-6 text-lg text-text-secondary leading-relaxed">
                {filterDescription}
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-80px' }}
              transition={{ duration: 0.3, delay: 0.15, ease: EASE_OUT }}
            >
              <div className="flex items-center gap-2 flex-wrap">
                <Filter className="w-4 h-4 text-text-muted" />
                {industries.map((industry) => (
                  <button
                    key={industry.id}
                    type="button"
                    role="radio"
                    aria-checked={selectedIndustry === industry.id}
                    onClick={() => setSelectedIndustry(industry.id)}
                    className={cn(
                      'px-4 py-2 text-xs font-medium transition-all duration-300',
                      selectedIndustry === industry.id
                        ? 'bg-brand text-white'
                        : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary hover:text-ink'
                    )}
                  >
                    {industry.label}
                  </button>
                ))}
              </div>
            </motion.div>
          </div>

          {filteredCases.length > 0 ? (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary">
              {filteredCases.map((caseItem, i) => (
                <CaseCard key={caseItem.id} caseItem={caseItem} index={i} />
              ))}
            </div>
          ) : (
            <div className="text-center py-20">
              <p className="text-text-secondary text-lg">暂无该行业的案例</p>
            </div>
          )}
        </div>
      </section>

      {/* CTA Section */}
      <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.3, 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">
              您的成功故事，<br className="sm:hidden" />从这里开始
            </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="cases-bottom-primary-cta" className="min-h-[52px]">
                预约咨询
              </CTAButton>
              <CTAButton
                href="/services"
                variant="secondary"
                dataTestId="cases-bottom-secondary-cta"
                className="min-h-[52px]"
              >
                了解服务
              </CTAButton>
            </div>
          </motion.div>
        </div>
      </section>
    </div>
  );
}