'use client';

import { SERVICES } from '@/lib/constants';
import { StaticLink } from '@/components/ui/static-link';
import { Button } from '@/components/ui/button';
import { ArrowRight, ArrowUpRight } from 'lucide-react';
import { motion } from 'framer-motion';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { PageNav } from '@/components/layout/page-nav';

export default function ServicesPage() {
  const shouldReduceMotion = useReducedMotion();
  const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
  return (
    <div className="min-h-screen bg-[var(--color-bg-primary)]">
      <section className="pt-32 pb-16">
        <div className="container-wide">
          <PageNav items={[{ label: '服务' }]} />
          <motion.div
            {...fadeUp}
            animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="max-w-3xl"
          >
            <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">
              服务
            </h1>
            <p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
              专业技术团队，为您提供全方位的数字化解决方案
            </p>
          </motion.div>
        </div>
      </section>

      <section className="pb-20">
        <div className="container-wide">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {SERVICES.map((service, index) => (
              <motion.div
                key={service.id}
                {...fadeUp}
                whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
              >
                <StaticLink
                  href={`/services/${service.id}`}
                  className="group block p-6 rounded-xl border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] hover:border-[var(--color-brand-primary)]/40 hover:shadow-lg transition-all duration-300 h-full"
                >
                  <div className="flex items-start justify-between mb-4">
                    <span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-sm font-bold">
                      {String(index + 1).padStart(2, '0')}
                    </span>
                    <ArrowUpRight className="w-5 h-5 text-[var(--color-text-muted)] group-hover:text-[var(--color-brand-primary)] transition-colors" />
                  </div>
                  <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
                    {service.title}
                  </h3>
                  <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-4">
                    {service.description}
                  </p>
                  <div className="flex flex-wrap gap-1.5">
                    {service.features.slice(0, 3).map((feature, idx) => (
                      <span
                        key={idx}
                        className="inline-flex items-center text-xs px-2 py-1 bg-[var(--color-bg-tertiary)] text-[var(--color-text-muted)] rounded"
                      >
                        {feature.split('：')[0]}
                      </span>
                    ))}
                  </div>
                </StaticLink>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-[var(--color-bg-tertiary)] py-20">
        <div className="container-wide text-center">
          <h2 className="text-3xl font-bold text-[var(--color-text-primary)] mb-6">
            准备开始您的数字化转型之旅？
          </h2>
          <p className="text-lg text-[var(--color-text-muted)] mb-8 max-w-2xl mx-auto">
            让我们与您同行，共创美好未来
          </p>
          <Button
            size="lg"
            className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white"
            asChild
          >
            <StaticLink href="/contact">
              立即咨询
              <ArrowRight className="ml-2 w-4 h-4" />
            </StaticLink>
          </Button>
        </div>
      </section>
    </div>
  );
}