'use client';

import { motion } from 'framer-motion';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { Button } from '@/components/ui/button';
import { ArrowRight, Shield, Building2, Users, Code, Target, Layers, BookOpen, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';

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

function GrainOverlay() {
  return (
    <div
      className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
      style={{
        backgroundImage:
          "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
      }}
    />
  );
}

function SectionLabel({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={cn('flex items-center gap-5 mb-7', className)}>
      <div className="w-14 h-px bg-brand" />
      <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
        {children}
      </span>
      <div className="w-14 h-px bg-brand" />
    </div>
  );
}

const TEAM_STRENGTHS = [
  {
    icon: Shield,
    number: '01',
    title: '12 年+ 行业深耕',
    description: '核心团队长期从事技术咨询、企业数字化等领域，服务覆盖金融、制造、零售、政务、农业等多个行业。',
  },
  {
    icon: Building2,
    number: '02',
    title: '大型 IT 企业背景',
    description: '开发团队成员来自多个大型传统 IT 企业，具备扎实的工程能力、规范化的交付流程和严格的质量意识。',
  },
  {
    icon: Users,
    number: '03',
    title: '复合型技术团队',
    description: '既懂技术又懂业务，能够深入理解客户的真实场景和痛点，提供真正可落地的解决方案。',
  },
  {
    icon: Code,
    number: '04',
    title: '全栈技术能力',
    description: '从前端到后端、从云原生到数据智能、从移动端到物联网——应对各种复杂技术挑战。',
  },
  {
    icon: Target,
    number: '05',
    title: '结果导向交付',
    description: '不以"项目上线"为终点，以"客户业务是否真正改善"为衡量标准。每一个交付成果都追求可量化的业务价值。',
  },
];

const TEAM_CULTURE = [
  {
    icon: Layers,
    number: '01',
    title: '扁平化协作',
    description: '没有冗长的汇报链条，每个人都有机会直接参与决策。信息透明，沟通高效。',
  },
  {
    icon: BookOpen,
    number: '02',
    title: '持续学习',
    description: '技术日新月异，我们保持对新技术的好奇。内部分享、技术沙龙、外部培训——学习是日常的一部分。',
  },
  {
    icon: Sparkles,
    number: '03',
    title: '客户成功',
    description: '我们的成就感来自客户的成功。客户的业务增长，就是我们最好的成绩单。',
  },
];

export default function TeamContentV1() {
  return (
    <div className="min-h-screen bg-ink text-white overflow-x-hidden">
      {/* Hero Section */}
      <section className="relative pt-32 pb-24 lg:pt-40 lg:pb-32 overflow-hidden">
        <GrainOverlay />
        
        <div className="absolute inset-0 bg-gradient-to-b from-ink-light/50 to-ink pointer-events-none" />
        
        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <ScrollReveal>
            <SectionLabel>
              <div className="flex items-center gap-5">
                <div className="w-14 h-px bg-brand" />
                <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
                  Our Team
                </span>
                <div className="w-14 h-px bg-brand" />
              </div>
            </SectionLabel>
          </ScrollReveal>

          <ScrollReveal delay={0.1}>
            <h1 className="mt-8 text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1]">
              既懂技术又懂业务的
              <span className="block mt-2 text-brand">复合型团队</span>
            </h1>
          </ScrollReveal>

          <ScrollReveal delay={0.2}>
            <p className="mt-8 text-lg md:text-xl text-white/60 max-w-2xl leading-relaxed">
              我们的成员不只是写代码的工程师——我们是能理解您业务场景、能和您一起想清楚问题的合作伙伴。
            </p>
          </ScrollReveal>

          <ScrollReveal delay={0.3}>
            <div className="mt-12 flex flex-wrap gap-4">
              <Button size="lg" asChild>
                <a href="/contact">
                  与我们交流
                  <ArrowRight className="w-4 h-4 ml-2" />
                </a>
              </Button>
              <Button size="lg" variant="outline" asChild>
                <a href="/about">了解公司</a>
              </Button>
            </div>
          </ScrollReveal>

          <ScrollReveal delay={0.4}>
            <div className="mt-20 grid grid-cols-3 gap-8 md:gap-12 max-w-2xl">
              <div className="text-center md:text-left">
                <div className="text-4xl md:text-5xl font-bold text-brand">12+</div>
                <div className="mt-2 text-sm text-white/50 tracking-wide">年行业经验</div>
              </div>
              <div className="text-center">
                <div className="text-4xl md:text-5xl font-bold text-white">10+</div>
                <div className="mt-2 text-sm text-white/50 tracking-wide">核心成员</div>
              </div>
              <div className="text-center md:text-right">
                <div className="text-4xl md:text-5xl font-bold text-white">5+</div>
                <div className="mt-2 text-sm text-white/50 tracking-wide">行业覆盖</div>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Team Strengths Section */}
      <section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
        <GrainOverlay />

        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
            <SectionLabel className="justify-center">
              <div className="flex items-center gap-5">
                <div className="w-14 h-px bg-brand" />
                <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
                  Team Strengths
                </span>
                <div className="w-14 h-px bg-brand" />
              </div>
            </SectionLabel>
            <h2 className="mt-6 text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
              我们的底气，从何而来
            </h2>
            <p className="mt-6 text-lg text-white/60 leading-relaxed">
              不是自吹自擂，而是多年实战积累的真实能力
            </p>
          </ScrollReveal>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
              {TEAM_STRENGTHS.map((strength) => {
                const Icon = strength.icon;
                return (
                  <motion.div
                    key={strength.title}
                    className="group relative p-8 lg:p-10 border border-white/10 hover:border-brand/30 bg-ink/50 transition-all duration-500"
                    whileHover={{ y: -6 }}
                    transition={{ duration: 0.4, ease: EASE_OUT }}
                  >
                    <div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
                    
                    <div className="flex items-center gap-4 mb-6">
                      <div className="w-12 h-12 flex items-center justify-center border border-brand/30 bg-brand/10 text-brand">
                        <Icon className="w-5 h-5" />
                      </div>
                      <span className="text-4xl font-bold text-white/10 font-mono">{strength.number}</span>
                    </div>
                    
                    <h3 className="text-xl font-bold mb-3">{strength.title}</h3>
                    <p className="text-white/60 text-sm leading-relaxed">{strength.description}</p>
                  </motion.div>
                );
              })}
            </StaggerReveal>
          </div>
        </div>
      </section>

      {/* Team About Section */}
      <section className="relative py-24 lg:py-32 overflow-hidden">
        <GrainOverlay />

        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <ScrollReveal>
            <div className="max-w-4xl mx-auto p-10 lg:p-16 border border-white/10 bg-ink-light/50">
              <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">关于我们的团队</h2>
              <div className="space-y-6 max-w-3xl mx-auto text-center">
                <p className="text-white/70 leading-relaxed text-lg">
                  我们的核心团队长期从事<span className="text-brand font-semibold">技术咨询</span>、<span className="text-brand font-semibold">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
                </p>
                <p className="text-white/70 leading-relaxed text-lg">
                  开发团队成员来自于多个<span className="text-brand font-semibold">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
                </p>
                <p className="text-white/70 leading-relaxed text-lg">
                  我们相信，优秀的技术咨询不仅需要过硬的技术能力，更需要深入理解客户的业务场景和真实需求。
                  每一位成员都是既懂技术又懂业务的复合型人才。
                </p>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Team Culture Section */}
      <section className="relative py-24 lg:py-32 overflow-hidden bg-ink-light">
        <GrainOverlay />

        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <ScrollReveal className="text-center max-w-3xl mx-auto mb-20">
            <SectionLabel className="justify-center">
              <div className="flex items-center gap-5">
                <div className="w-14 h-px bg-brand" />
                <span className="text-[11px] tracking-[0.4em] uppercase font-bold text-brand">
                  Team Culture
                </span>
                <div className="w-14 h-px bg-brand" />
              </div>
            </SectionLabel>
            <h2 className="mt-6 text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
              我们怎样工作
            </h2>
            <p className="mt-6 text-lg text-white/60 leading-relaxed">
              好的团队文化，最终体现在为客户创造的价值上
            </p>
          </ScrollReveal>

          <div className="grid md:grid-cols-3 gap-8">
            <StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
              {TEAM_CULTURE.map((culture) => {
                const Icon = culture.icon;
                return (
                  <motion.div
                    key={culture.title}
                    className="group relative p-10 lg:p-12 border border-white/10 hover:border-brand/30 bg-ink/50 transition-all duration-500 text-center"
                    whileHover={{ y: -8 }}
                    transition={{ duration: 0.4, ease: EASE_OUT }}
                  >
                    <div className="absolute top-0 left-0 right-0 h-1 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
                    
                    <div className="w-16 h-16 mx-auto mb-6 flex items-center justify-center border border-brand/30 bg-brand/10 text-brand">
                      <Icon className="w-7 h-7" />
                    </div>
                    
                    <span className="block text-6xl font-bold text-white/10 font-mono mb-4">{culture.number}</span>
                    
                    <h3 className="text-2xl font-bold mb-4">{culture.title}</h3>
                    <p className="text-white/60 leading-relaxed">{culture.description}</p>
                  </motion.div>
                );
              })}
            </StaggerReveal>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative py-24 lg:py-32 overflow-hidden">
        <GrainOverlay />
        
        <div className="absolute inset-0 bg-gradient-to-b from-ink to-ink-light pointer-events-none" />

        <div className="max-w-container mx-auto px-6 lg:px-10 relative z-10">
          <ScrollReveal className="text-center max-w-3xl mx-auto">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-tight">
              想成为我们的一员？
            </h2>
            <p className="mt-6 text-lg text-white/60 leading-relaxed">
              我们始终在寻找既懂技术又热爱业务的伙伴。如果您认同我们的理念，欢迎聊聊。
            </p>
            <div className="mt-12 flex flex-wrap justify-center gap-4">
              <Button size="lg" asChild>
                <a href="/contact">
                  联系我们
                  <ArrowRight className="w-4 h-4 ml-2" />
                </a>
              </Button>
              <Button size="lg" variant="outline" asChild>
                <a href="/about">了解公司</a>
              </Button>
            </div>
          </ScrollReveal>
        </div>
      </section>
    </div>
  );
}