'use client';

import { useRef } from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';
import { StaticLink } from '@/components/ui/static-link';
import { SectionHeader } from '@/components/sections/section-header';
import { ScrollReveal } from '@/components/ui/scroll-reveal';
import { ProductCard } from '@/components/sections/product-card';
import { QuestionCard } from '@/components/sections/question-card';
import { CaseCard } from '@/components/sections/case-card';
import { InsightCard } from '@/components/sections/insight-card';
import { StatsBar } from '@/components/sections/stats-bar';
import { IndustryGrid } from '@/components/sections/industry-grid';
import { CTASection } from '@/components/sections/cta-section';
import { ScrollProgress } from '@/components/ui/scroll-progress';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import {
  ArrowRight,
  BarChart3, Cpu, Globe, Factory, ShoppingCart, Stethoscope,
  GraduationCap, Building, Shield, Users,
  Database, LineChart, Cloud, Brain,
} from 'lucide-react';

// ============================================================
// Design Tokens
// ============================================================
const INK = '#0F1419';
const CREAM = '#F3F0EB';
const EASE = [0.22, 1, 0.36, 1] as const;

const SECTION = 'py-20 md:py-36 lg:py-44';
const CONTAINER = 'max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16';

// ============================================================
// Data
// ============================================================

const PRODUCTS = [
  { icon: <Database className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'ERP 管理系统', description: '覆盖财务、采购、销售、库存、生产全链路，支撑企业核心运营', href: '/products/erp', badge: '旗舰' },
  { icon: <Users className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'CRM 客户管理', description: '从线索到回款的全生命周期客户关系管理', href: '/products/crm', badge: '旗舰' },
  { icon: <LineChart className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'BI 数据平台', description: '让数据说话，从报表到预测辅助决策', href: '/products/bi' },
  { icon: <Globe className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'CMS 内容平台', description: '建站、运营、分发一体化内容管理', href: '/products/cms' },
  { icon: <Brain className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: 'AI 智能平台', description: '大模型驱动的企业级 AI 应用与自动化', href: '/products/ai', badge: '新品' },
  { icon: <Cloud className="w-5 h-5 sm:w-6 sm:h-6 text-[var(--color-brand)]" strokeWidth={1.8} />, title: '协同办公', description: '审批、公文、协作、知识管理一站式平台', href: '/products/oa' },
];

const STRATEGIC_QUESTIONS = [
  {
    question: '我们的数字化投入，是否真正带来了业务增长？',
    description: '许多企业在数字化上投入巨大，却难以量化 ROI。我们帮助您建立可衡量的数字化价值评估体系，让每一分投入都可见、可追踪、可优化。',
    href: '/services/consulting',
  },
  {
    question: '核心系统如何选型、落地与集成，才能支撑业务持续增长？',
    description: 'ERP、BI、CRM 等核心系统的评估、实施与无缝集成，确保技术架构稳健可扩展，避免"上线即落后"的困境。',
    href: '/products',
  },
  {
    question: '数据如何从成本中心转变为真正的企业资产？',
    description: '数据治理、商业智能分析与信息安全体系，让数据驱动决策而非成为风险。',
    href: '/solutions',
  },
  {
    question: '面对 AI 浪潮，我们的企业准备好了吗？',
    description: 'AI 不是选择题，而是必答题。我们从 AI 成熟度评估到场景落地，帮助您找到最适合的 AI 应用路径，避免盲目跟风。',
    href: '/services/ai',
  },
];

const CASE_STUDIES = [
  {
    industry: '智能制造',
    title: '某大型制造企业 ERP 全面升级',
    challenge: '原有系统无法支撑业务增长，数据孤岛严重，生产排程效率低下。',
    solution: '从选型到全模块上线仅 30 天，打通财务、生产、供应链全链路数据。',
    context: '原有系统无法支撑业务增长，数据孤岛严重，生产排程效率低下。从选型到全模块上线仅 30 天。',
    impact: [{ value: '40%', label: '生产效率提升' }, { value: '30天', label: '核心系统上线' }],
    quote: '睿新团队不仅完成了系统升级，更帮助我们建立了数据驱动的运营体系。',
    author: 'CTO，某上市制造企业',
  },
  {
    industry: '贸易零售',
    title: '连锁零售全渠道数字化升级',
    challenge: '线上线下数据割裂，库存管理混乱，会员体系无法统一。',
    solution: '打通全渠道数据，重构供应链与库存管理，统一会员运营体系。',
    context: '线上线下数据割裂，库存管理混乱，会员体系无法统一。打通全渠道数据，重构供应链与库存管理。',
    impact: [{ value: '25%', label: '营收增长' }, { value: '50%', label: '库存周转优化' }],
    quote: '从咨询到落地，睿新团队展现出了超出预期的专业能力和责任心。',
    author: 'CEO，某区域零售龙头',
  },
  {
    industry: '医疗健康',
    title: '三甲医院数据合规与患者服务',
    challenge: '在满足严格合规要求的同时优化患者服务体验，临床数据与运营数据割裂。',
    solution: '建立统一数据中台，打通临床与运营数据，构建合规数据治理体系。',
    context: '在满足严格合规要求的同时优化患者服务体验，打通临床数据与运营数据。',
    impact: [{ value: '100%', label: '合规达标' }, { value: '60%', label: '患者满意度提升' }],
    quote: '在医疗数据合规领域，睿新的专业度在行业中非常难得。',
    author: '信息科主任，某三甲医院',
  },
];

const INSIGHTS_FEATURED = [
  {
    tag: '白皮书',
    title: '2026 中国企业数字化转型趋势报告',
    desc: '基于 500+ 企业调研数据，深度解析制造、零售、医疗三大行业数字化成熟度与关键趋势。',
    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80',
  },
  {
    tag: '案例研究',
    title: '从数据孤岛到智能决策：一家制造企业的三年数字化之路',
    desc: '深度复盘某上市制造企业如何通过分阶段数字化实现 40% 效率提升。',
    image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
  },
];

const INSIGHTS_LIST = [
  { tag: '观点', title: 'AI 时代，中小企业如何避免"为了数字化而数字化"', desc: '从投入产出比出发，讨论中小企业在 AI 浪潮中的务实策略。', date: '2026-06-15' },
  { tag: '方法论', title: '数字化转型的四个阶段：评估、规划、实施、优化', desc: '我们总结的经过 500+ 项目验证的数字化转型方法论。', date: '2026-06-08' },
  { tag: '行业洞察', title: '制造业数字化转型的五大误区', desc: '避开常见陷阱，让数字化投入真正转化为业务价值。', date: '2026-05-28' },
];

const INDUSTRIES = [
  { icon: Factory, name: '智能制造', count: '120+ 案例' },
  { icon: ShoppingCart, name: '贸易零售', count: '80+ 案例' },
  { icon: Building, name: '金融业', count: '60+ 案例' },
  { icon: Stethoscope, name: '医疗健康', count: '40+ 案例' },
  { icon: Cpu, name: '汽车零部件', count: '45+ 案例' },
  { icon: BarChart3, name: '能源化工', count: '35+ 案例' },
  { icon: Shield, name: '物流供应链', count: '40+ 案例' },
  { icon: GraduationCap, name: '教育', count: '30+ 案例' },
];

const TRUST_STATS = [
  { number: '12', unit: '年', label: '行业深耕', desc: '核心团队平均从业经验 12 年以上' },
  { number: '500', unit: '+', label: '企业客户', desc: '覆盖制造、零售、医疗等多个行业' },
  { number: '98', unit: '%', label: '客户续约率', desc: '年度客户续约率行业领先' },
  { number: '150', unit: '+', label: '专业顾问', desc: '技术+业务复合型团队' },
  { number: '6', unit: '款', label: '自研产品', desc: '覆盖数据、协同、AI 等核心领域' },
  { number: '30', unit: '天', label: '平均交付周期', desc: '敏捷迭代，快速验证业务价值' },
];

// ============================================================
// Section 1: Hero — Deep Ink Background
// ============================================================
function HeroSection() {
  const shouldReduceMotion = useReducedMotion();
  const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: heroRef,
    offset: ['start start', 'end start'],
  });
  const opacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.6], [1, 0.95]);
  const y = useTransform(scrollYProgress, [0, 0.6], [0, 30]);

  const bgOrbY = useTransform(scrollYProgress, [0, 1], [0, 80]);
  const gridY = useTransform(scrollYProgress, [0, 1], [0, -40]);

  return (
    <section
      ref={heroRef}
      className="relative min-h-[100svh] flex items-center overflow-hidden"
      style={{ background: INK }}
    >
      {/* Atmosphere — subtle gradient orbs (parallax: slowest, moves down) */}
      <motion.div
        className="absolute inset-0 z-0 pointer-events-none"
        style={{ y: shouldReduceMotion ? 0 : bgOrbY }}
      >
        <div className="absolute w-[600px] md:w-[900px] h-[600px] md:h-[900px] rounded-full blur-[120px] md:blur-[140px] opacity-[0.12]"
          style={{
            background: 'radial-gradient(circle, rgba(196,30,58,0.4), transparent 70%)',
            top: '-30%', right: '-15%',
          }}
        />
        <div className="absolute w-[400px] md:w-[600px] h-[400px] md:h-[600px] rounded-full blur-[100px] md:blur-[120px] opacity-[0.06]"
          style={{
            background: 'radial-gradient(circle, rgba(10,14,20,0.3), transparent 70%)',
            bottom: '-20%', left: '-10%',
          }}
        />
      </motion.div>

      {/* Grid texture (parallax: medium speed, moves up) */}
      <motion.div
        className="absolute inset-0 z-[1] pointer-events-none opacity-[0.025]"
        style={{
          y: shouldReduceMotion ? 0 : gridY,
          backgroundImage: `linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)`,
          backgroundSize: '60px 60px',
          maskImage: 'radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 70%)',
        }}
      />

      {/* Content */}
      <motion.div
        className="relative z-10 w-full max-w-[1280px] mx-auto px-5 sm:px-8 lg:px-16 py-32 md:py-40 lg:py-48"
        style={{ opacity, scale, y }}
      >
        <div className="max-w-[720px]">
          {/* Eyebrow */}
          <motion.div
            className="text-[10px] sm:text-[11px] tracking-[4px] sm:tracking-[5px] uppercase font-medium mb-6 md:mb-8"
            style={{ color: 'var(--color-brand)' }}
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1, ease: EASE }}
          >
            企业数字化转型
          </motion.div>

          {/* Title */}
          <motion.h1
            className="font-sans text-[clamp(36px,10vw,88px)] font-black leading-[1.04] tracking-[-1.5px] sm:tracking-[-2.5px] text-white mb-6 md:mb-8"
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.2, ease: EASE }}
          >
            数字化转型<br />
            <span style={{ color: 'var(--color-brand)' }}>成功率提升 3 倍</span>
          </motion.h1>

          {/* Subtitle — answer-first: quantified results */}
          <motion.div
            className="flex flex-wrap gap-x-6 gap-y-2 mb-8 md:mb-10"
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.35, ease: EASE }}
          >
            <span className="text-[14px] sm:text-base font-medium" style={{ color: 'rgba(255,255,255,0.6)' }}>
              <span style={{ color: 'var(--color-brand)', fontWeight: 700 }}>500+</span> 企业验证
            </span>
            <span className="text-[14px] sm:text-base font-medium" style={{ color: 'rgba(255,255,255,0.6)' }}>
              <span style={{ color: 'var(--color-brand)', fontWeight: 700 }}>2.8x</span> 平均 ROI 提升
            </span>
            <span className="text-[14px] sm:text-base font-medium" style={{ color: 'rgba(255,255,255,0.6)' }}>
              <span style={{ color: 'var(--color-brand)', fontWeight: 700 }}>40%</span> 交付周期缩短
            </span>
          </motion.div>

          {/* Strategic question */}
          <motion.p
            className="font-sans text-[14px] sm:text-base italic mb-10 md:mb-12"
            style={{ color: 'rgba(255,255,255,0.4)' }}
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.45, ease: EASE }}
          >
            您的企业，准备好迎接下一阶段的增长了吗？
          </motion.p>

          {/* CTAs */}
          <motion.div
            className="flex flex-col sm:flex-row gap-3 sm:gap-5 items-start sm:items-center mb-12 md:mb-20"
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.55, ease: EASE }}
          >
            <StaticLink
              href="/contact"
              className="min-h-[44px] min-w-[44px] active:scale-[0.98] transition-transform duration-150 inline-flex items-center justify-center gap-2.5 px-6 sm:px-8 py-3.5 text-sm font-medium text-white rounded-sm transition-all duration-300 hover:-translate-y-0.5"
              style={{ background: 'var(--color-brand)' }}
            >
              预约咨询
              <ArrowRight className="w-4 h-4" />
            </StaticLink>
            <StaticLink
              href="/products"
              className="min-h-[44px] inline-flex items-center gap-2 text-sm font-normal transition-all duration-300 border-b hover:border-white/25"
              style={{ color: 'rgba(255,255,255,0.45)', borderColor: 'rgba(255,255,255,0.1)', padding: '12px 0' }}
            >
              探索产品矩阵
            </StaticLink>
          </motion.div>

          {/* Metrics row */}
          <motion.div
            className="flex gap-8 md:gap-16 flex-wrap"
            initial={shouldReduceMotion ? {} : { opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.7, ease: EASE }}
          >
            {[
              { value: '12', unit: '', label: '年行业深耕' },
              { value: '500', unit: '+', label: '企业客户信任' },
              { value: '98', unit: '%', label: '客户年度续约率' },
            ].map(item => (
              <div key={item.label} className="flex flex-col">
                <div className="font-sans tabular-nums text-[28px] sm:text-[32px] md:text-[36px] font-bold text-white leading-none mb-1 tracking-[-1px]">
                  {item.value}
                  <span style={{ color: 'var(--color-brand)', fontSize: '0.5em' }}>{item.unit}</span>
                </div>
                <div className="text-[10px] sm:text-[11px] tracking-[1px] text-white/25">
                  {item.label}
                </div>
              </div>
            ))}
          </motion.div>
        </div>
      </motion.div>

      {/* Scroll indicator — desktop only */}
      <div className="absolute bottom-8 md:bottom-10 left-1/2 -translate-x-1/2 z-10 hidden md:flex flex-col items-center gap-2.5">
        <div className="w-px h-10 relative overflow-hidden bg-white/[0.06]">
          <motion.div
            className="absolute top-0 left-0 w-full h-[20%] bg-white/20"
            animate={{ y: [0, 30, 0] }}
            transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
          />
        </div>
        <span className="text-[9px] tracking-[4px] text-white/10">SCROLL</span>
      </div>
    </section>
  );
}

// ============================================================
// Section 2: Product Matrix — Paper White Background
// ============================================================
function ProductMatrixSection() {
  return (
    <section className={SECTION} style={{ background: 'var(--color-bg-primary)' }}>
      <div className={CONTAINER}>
        <SectionHeader
          label="Products"
          title="覆盖数字化"
          highlight="全生命周期"
          desc="6 款自研产品，支撑企业核心业务场景"
        />
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
          {PRODUCTS.map((product, i) => (
            <ScrollReveal key={i} delay={i * 0.06}>
              <ProductCard {...product} />
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Section 3: Strategic Questions — Cream Background [Porsche-style]
// ============================================================
function StrategicQuestionsSection() {
  return (
    <section className={SECTION} style={{ background: CREAM }}>
      <div className={CONTAINER}>
        <SectionHeader
          label="Strategic Questions"
          title="先问对问题"
          highlight="再做对事"
          desc="在启动任何数字化项目之前，先找到正确的方向"
        />
        <div>
          {STRATEGIC_QUESTIONS.map((item, i) => (
            <ScrollReveal key={i} delay={i * 0.08}>
              <QuestionCard
                question={item.question}
                description={item.description}
                href={item.href}
              />
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Section 4: Client Results — Deep Ink Background [Bain-style]
// ============================================================
function CaseStudiesSection() {
  return (
    <section className={SECTION} style={{ background: INK }}>
      <div className={CONTAINER}>
        <SectionHeader
          label="Client Results"
          title="500+ 企业的"
          highlight="增长实践"
          desc="不以项目上线为终点，以客户业务改善为衡量标准"
          light
        />
        <div className="grid lg:grid-cols-3 gap-px rounded-sm overflow-hidden"
          style={{ background: 'rgba(255,255,255,0.03)' }}>
          {CASE_STUDIES.map((cs, i) => (
            <ScrollReveal key={i} delay={i * 0.1}>
              <CaseCard {...cs} />
            </ScrollReveal>
          ))}
        </div>
        <ScrollReveal delay={0.3}>
          <div className="text-center mt-8 md:mt-12">
            <StaticLink
              href="/solutions"
              className="min-h-[44px] inline-flex items-center gap-2 text-[13px] font-medium transition-colors duration-300 text-white/50 hover:text-white group"
            >
              查看全部案例
              <ArrowRight className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-1" />
            </StaticLink>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
}

// ============================================================
// Section 5: Insights — Paper White Background [Accenture-style]
// ============================================================
function InsightsSection() {
  return (
    <section className={SECTION} style={{ background: 'var(--color-bg-primary)' }}>
      <div className={CONTAINER}>
        <SectionHeader
          label="Insights"
          title="把握数字化"
          highlight="前沿趋势"
          desc="基于 500+ 项目实践的研究成果与行业观点"
        />

        {/* Featured insights — 2 large cards */}
        <div className="grid md:grid-cols-2 gap-4 sm:gap-6 mb-6 md:mb-8">
          {INSIGHTS_FEATURED.map((insight, i) => (
            <ScrollReveal key={i} delay={i * 0.1}>
              <InsightCard featured {...insight} />
            </ScrollReveal>
          ))}
        </div>

        {/* Secondary insights — 3 small cards */}
        <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-px rounded-sm overflow-hidden"
          style={{ background: 'var(--color-border-primary)' }}>
          {INSIGHTS_LIST.map((insight, i) => (
            <ScrollReveal key={i} delay={i * 0.06}>
              <InsightCard {...insight} />
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Section 6: Industry Selector — Paper White Background
// ============================================================
function IndustrySelectorSection() {
  return (
    <section className={SECTION} style={{ background: CREAM }}>
      <div className={CONTAINER}>
        <SectionHeader
          label="Industries"
          title="8 大行业"
          highlight="深度实践"
          desc="深入行业场景，理解业务逻辑，提供真正落地的解决方案"
        />
        <ScrollReveal delay={0.1}>
          <p className="font-sans text-[18px] sm:text-[20px] md:text-[22px] font-semibold mb-8 md:mb-10 leading-relaxed text-[var(--color-text-primary)]">
            选择您的行业，<span style={{ color: 'var(--color-brand)' }}>查看相关案例与解决方案</span>
          </p>
        </ScrollReveal>
        <ScrollReveal delay={0.15}>
          <IndustryGrid items={INDUSTRIES} />
        </ScrollReveal>
      </div>
    </section>
  );
}

// ============================================================
// Section 7: Trust Proof — Paper White Background
// ============================================================
function TrustSection() {
  return (
    <section className={SECTION} style={{ background: 'var(--color-bg-primary)' }}>
      <div className={CONTAINER}>
        <SectionHeader
          label="Trust"
          title="98% 客户"
          highlight="续约率"
          desc="数字会说话，信任是合作的基础"
        />
        <StatsBar items={TRUST_STATS} />
      </div>
    </section>
  );
}

// ============================================================
// Main Export
// ============================================================
export default function HomeContent() {
  return (
    <main className="min-h-screen">
      <ScrollProgress />
      <HeroSection />
      <ProductMatrixSection />
      <StrategicQuestionsSection />
      <CaseStudiesSection />
      <InsightsSection />
      <IndustrySelectorSection />
      <TrustSection />
      <CTASection />
    </main>
  );
}