'use client';

import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef, useState, useEffect, useMemo } from 'react';
import { COMPANY_INFO, STATS } from '@/lib/constants';
import { Card, CardContent } from '@/components/ui/card';
import { PageHeader } from '@/components/ui/page-header';
import { FlipClock } from '@/components/ui/flip-clock';
import { Lightbulb, Users, Target, Award, MapPin, Mail } from 'lucide-react';

export function AboutClient() {
  const contentRef = useRef(null);
  const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
  const [operationTime, setOperationTime] = useState({ days: 0, months: 0, years: 0 });

  useEffect(() => {
    const foundingDate = new Date('2026-01-15');
    const calculateTime = () => {
      const now = new Date();
      const diff = now.getTime() - foundingDate.getTime();
      
      const totalDays = Math.floor(diff / (1000 * 60 * 60 * 24));
      const years = Math.floor(totalDays / 365);
      const months = Math.floor((totalDays % 365) / 30);
      const days = totalDays % 30;
      
      setOperationTime({ days, months, years });
    };

    calculateTime();
    const timer = setInterval(calculateTime, 60000);

    return () => clearInterval(timer);
  }, []);

  const values = useMemo(() => [
    {
      icon: Lightbulb,
      title: '创新驱动',
      description: '持续探索前沿技术，以创新思维解决业务挑战，为客户创造差异化价值',
    },
    {
      icon: Users,
      title: '客户至上',
      description: '深入理解客户需求，提供个性化解决方案，建立长期合作伙伴关系',
    },
    {
      icon: Target,
      title: '追求卓越',
      description: '以最高标准要求自己，持续优化产品和服务质量，超越客户期望',
    },
    {
      icon: Award,
      title: '诚信为本',
      description: '坚持透明沟通，信守承诺，以诚信赢得客户信任和尊重',
    },
  ], []);

  const milestones = useMemo(() => [
    {
      date: '2026年1月',
      title: '公司成立',
      description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立，专注于企业数字化转型解决方案',
    },
    {
      date: '2026年1月',
      title: '团队组建',
      description: '核心团队到位，技术团队拥有丰富的行业经验和专业技能',
    },
    {
      date: '2026年2月',
      title: '业务启动',
      description: '推出企业数字化转型解决方案，开始服务首批客户',
    },
    {
      date: '2026年2月',
      title: '产品发布',
      description: '自主研发的ERP、CRM等产品陆续上线，为客户提供一站式数字化服务',
    },
  ], []);

  return (
    <div className="min-h-screen bg-white">
      <PageHeader
        title="关于我们"
        description="了解睿新致远的品牌故事。我们不只是技术供应商，更是您数字化转型的成长伙伴。以智慧连接数字趋势，以伙伴身份陪您成长。"
      />

      <div ref={contentRef} className="container-wide py-12 md:py-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isContentInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="max-w-4xl mx-auto space-y-8"
        >
          <div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">睿新的选择</h2>
            <p className="text-[#5C5C5C] mb-6 leading-relaxed">
              所以我们选择了一条不同的路。
            </p>
            
            <div className="mb-6">
              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">智连未来</h3>
              <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。
              </p>
              <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                每一次方案，都源于对您业务场景的洞察；
              </p>
              <p className="text-[#5C5C5C] leading-relaxed">
                每一次连接，都为了让技术真正服务于您的未来。
              </p>
            </div>
            
            <div>
              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
              <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                我们不把&ldquo;项目交付&rdquo;当作终点。
              </p>
              <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                您的业务增长了吗？您的团队能力提升了吗？
              </p>
              <p className="text-[#5C5C5C] leading-relaxed">
                您下一次遇到难题时，还会第一个想到我们吗？
              </p>
              <p className="text-[#5C5C5C] mt-3 leading-relaxed">
                这些问题，比&ldquo;项目是否按时交付&rdquo;更让我们在意。
              </p>
            </div>
          </div>

          <div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">品牌承诺</h2>
            <p className="text-[#5C5C5C] mb-6 leading-relaxed">
              我们承诺：
            </p>
            <ul className="space-y-3 mb-6">
              <li className="flex items-start gap-3">
                <span className="text-green-600 font-bold">✅</span>
                <span className="text-[#5C5C5C]">不卖您用不上的技术</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-green-600 font-bold">✅</span>
                <span className="text-[#5C5C5C]">不说不懂业务的术语</span>
              </li>
              <li className="flex items-start gap-3">
                <span className="text-green-600 font-bold">✅</span>
                <span className="text-[#5C5C5C]">不做路过就忘的&ldquo;一锤子买卖&rdquo;</span>
              </li>
            </ul>
            <p className="text-[#5C5C5C] leading-relaxed font-medium">
              我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
            </p>
          </div>

          <FlipClock
            years={operationTime.years}
            months={operationTime.months}
            days={operationTime.days}
          />

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="grid grid-cols-2 md:grid-cols-4 gap-6"
          >
            {STATS.map((stat, idx) => (
              <Card key={idx} className="text-center border-[#E5E5E5]">
                <CardContent className="pt-6">
                  <div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
                  <div className="text-sm text-[#5C5C5C]">{stat.label}</div>
                </CardContent>
              </Card>
            ))}
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="mb-16"
          >
            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">核心价值观</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {values.map((value, idx) => (
                <motion.div
                  key={value.title}
                  initial={{ opacity: 0, y: 20 }}
                  animate={isContentInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
                  className="flex items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5] hover:border-[#1C1C1C] transition-all duration-300"
                >
                  <div className="w-12 h-12 rounded-lg bg-[#C41E3A] flex items-center justify-center shrink-0">
                    <value.icon className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg mb-2 text-[#1C1C1C]">{value.title}</h3>
                    <p className="text-[#5C5C5C] text-sm">{value.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.5 }}
            className="mb-16"
          >
            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">发展历程</h2>
            <div className="space-y-6">
              {milestones.map((milestone, idx) => (
                <motion.div
                  key={milestone.title}
                  initial={{ opacity: 0, x: -20 }}
                  animate={isContentInView ? { opacity: 1, x: 0 } : {}}
                  transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
                  className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5]"
                >
                  <div className="md:w-32 shrink-0">
                    <span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
                  </div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h3>
                    <p className="text-[#718096] text-sm">{milestone.description}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={isContentInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.7 }}
            className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]"
          >
            <h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">联系我们</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-white rounded-lg">
                  <MapPin className="w-5 h-5 text-[#C41E3A]" />
                </div>
                <div>
                  <p className="text-sm text-[#5C5C5C]">公司地址</p>
                  <p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.address}</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="p-2 bg-white rounded-lg">
                  <Mail className="w-5 h-5 text-[#C41E3A]" />
                </div>
                <div>
                  <p className="text-sm text-[#5C5C5C]">电子邮箱</p>
                  <p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.email}</p>
                </div>
              </div>

            </div>
          </motion.div>
        </motion.div>
      </div>
    </div>
  );
}