'use client';

import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { METHODOLOGY } from '@/lib/constants/methodology';
import { CheckCircle2 } from 'lucide-react';
import { Card } from '@/components/ui/card';

const phaseBgOpacities = [0.1, 0.08, 0.12, 0.06];

export function MethodologySection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });

  return (
    <section id="methodology" role="region" aria-labelledby="methodology-heading" className="py-20 md:py-28 bg-[var(--color-bg-section)]" ref={ref}>
      <div className="container-wide">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
          className="text-center max-w-3xl mx-auto mb-14"
        >
          <h2 id="methodology-heading" className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
            实施<span className="text-[var(--color-brand)]">方法论</span>
          </h2>
          <p className="text-base text-[var(--color-text-muted)]">
            经过核心团队实践打磨的四阶段模型，确保每个项目都能科学推进、高效落地
          </p>
        </motion.div>

        <div className="relative">
          <div className="hidden lg:block absolute top-16 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-[var(--color-border-primary)] to-transparent" />
          <div className="hidden md:block lg:hidden absolute left-[calc(50%+0.375rem)] top-0 bottom-0 w-px bg-[var(--color-border-primary)]" />

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
            {METHODOLOGY.map((phase, idx) => {
              const bgOpacity = phaseBgOpacities[idx % phaseBgOpacities.length];
              return (
                <Card
                  key={phase.id}
                  className="relative overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
                >
                  <div className="p-6 md:p-8">
                    <div
                      className="w-10 h-10 rounded-full flex items-center justify-center mb-5 text-sm font-bold"
                      style={{ backgroundColor: `rgba(var(--color-brand-rgb), ${bgOpacity})`, color: 'var(--color-brand)' }}
                    >
                      {phase.number}
                    </div>

                    <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-1">{phase.title}</h3>
                    <p className="text-xs text-[var(--color-brand)] font-medium mb-3">{phase.subtitle}</p>
                    <p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-5">{phase.description}</p>

                    <div className="mb-4">
                      <p className="text-xs font-semibold text-[var(--color-text-primary)] mb-2 tracking-wide">核心活动</p>
                      <ul className="space-y-1.5">
                        {phase.activities.map((activity, i) => (
                          <li key={i} className="flex items-start gap-2 text-xs text-[var(--color-text-muted)]">
                            <CheckCircle2 className="w-3.5 h-3.5 text-[var(--color-brand)] mt-0.5 shrink-0" />
                            {activity}
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div>
                      <p className="text-xs font-semibold text-[var(--color-text-primary)] mb-2 tracking-wide">交付物</p>
                      <ul className="space-y-1.5">
                        {phase.deliverables.map((deliverable, i) => (
                          <li key={i} className="flex items-start gap-2 text-xs text-[var(--color-text-subtle)]">
                            <span className="w-1.5 h-1.5 bg-[var(--color-brand)]/40 rounded-full mt-1.5 shrink-0" />
                            {deliverable}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}