'use client';

import { motion } from 'framer-motion';
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
import { CheckCircle2, ChevronDown } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useState } from 'react';

export interface MethodologyLayer {
  title: string;
  description: string;
  items: string[];
}

export interface MethodologyFrameworkProps {
  title: string;
  subtitle?: string;
  layers: MethodologyLayer[];
  accentColor?: string;
}

export function MethodologyFramework({
  title,
  subtitle,
  layers,
  accentColor = '#C41E3A',
}: MethodologyFrameworkProps) {
  return (
    <section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
          <SectionLabel>Methodology</SectionLabel>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
            {title}
          </h2>
          {subtitle && (
            <p className="text-text-secondary leading-relaxed text-lg">
              {subtitle}
            </p>
          )}
        </ScrollReveal>

        <div className="relative">
          <StaggerReveal staggerDelay={0.1} delayChildren={0.05}>
            {layers.map((layer, index) => (
              <motion.div
                key={index}
                className="relative group"
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true, margin: '-50px' }}
                transition={{ duration: 0.6, delay: index * 0.08, ease: EASE_OUT }}
              >
                <div className="flex gap-6 lg:gap-10">
                  <div className="flex flex-col items-center">
                    <div
                      className="w-12 h-12 rounded-xl flex items-center justify-center text-white font-bold text-lg shrink-0"
                      style={{ backgroundColor: accentColor }}
                    >
                      {String(index + 1).padStart(2, '0')}
                    </div>
                    {index < layers.length - 1 && (
                      <div className="w-px flex-1 bg-gradient-to-b from-border-primary to-transparent mt-3" />
                    )}
                  </div>

                  <div className="flex-1 pb-12 lg:pb-16">
                    <h3 className="text-xl lg:text-2xl font-bold text-text-primary mb-3">
                      {layer.title}
                    </h3>
                    <p className="text-text-secondary leading-relaxed mb-5">
                      {layer.description}
                    </p>
                    <div className="grid sm:grid-cols-2 gap-3">
                      {layer.items.map((item, i) => (
                        <div key={i} className="flex items-start gap-3">
                          <CheckCircle2 className="w-5 h-5 shrink-0 mt-0.5" style={{ color: accentColor }} />
                          <span className="text-text-secondary text-sm leading-relaxed">
                            {item}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </StaggerReveal>
        </div>
      </div>
    </section>
  );
}

export interface TechStackCategory {
  name: string;
  items: string[];
}

export interface TechStackShowcaseProps {
  title: string;
  subtitle?: string;
  categories: TechStackCategory[];
}

export function TechStackShowcase({ title, subtitle, categories }: TechStackShowcaseProps) {
  return (
    <section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
          <SectionLabel>Tech Stack</SectionLabel>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
            {title}
          </h2>
          {subtitle && (
            <p className="text-text-secondary leading-relaxed text-lg">
              {subtitle}
            </p>
          )}
        </ScrollReveal>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
            {categories.map((category, index) => (
              <div
                key={index}
                className="group relative p-8 border border-border-primary bg-bg-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-500"
              >
                <div className="absolute top-0 left-0 h-1 w-0 group-hover:w-full transition-all duration-700 bg-brand" />
                <h3 className="text-lg font-bold text-text-primary mb-5">{category.name}</h3>
                <div className="flex flex-wrap gap-2">
                  {category.items.map((item, i) => (
                    <span
                      key={i}
                      className="px-3 py-1.5 text-xs font-medium bg-bg-secondary text-text-secondary border border-border-primary hover:border-brand/30 hover:text-brand transition-colors duration-300"
                    >
                      {item}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </StaggerReveal>
        </div>
      </div>
    </section>
  );
}

export interface TimelineStep {
  phase: string;
  title: string;
  description: string;
  duration: string;
  deliverables: string[];
}

export interface DeliveryTimelineProps {
  title: string;
  subtitle?: string;
  steps: TimelineStep[];
  accentColor?: string;
}

export function DeliveryTimeline({
  title,
  subtitle,
  steps,
  accentColor = '#C41E3A',
}: DeliveryTimelineProps) {
  return (
    <section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
          <SectionLabel>Delivery Process</SectionLabel>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
            {title}
          </h2>
          {subtitle && (
            <p className="text-text-secondary leading-relaxed text-lg">
              {subtitle}
            </p>
          )}
        </ScrollReveal>

        <div className="relative">
          <div className="absolute left-8 lg:left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-brand/50 via-border-primary to-brand/50" />

          <div className="space-y-12 lg:space-y-16">
            {steps.map((step, index) => (
              <ScrollReveal key={index} delay={index * 0.08}>
                <div className={cn(
                  'relative flex gap-8 lg:gap-12',
                  index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
                )}>
                  <div className="hidden lg:block lg:w-1/2" />

                  <div className="absolute left-8 lg:left-1/2 -translate-x-1/2 w-4 h-4 rounded-full border-2 z-10"
                    style={{ borderColor: accentColor, backgroundColor: '#ffffff' }}
                  />

                  <div className="lg:w-1/2 pl-16 lg:pl-0">
                    <div className={cn(
                      'p-8 lg:p-10 border border-border-primary bg-bg-secondary hover:border-border-secondary transition-all duration-500',
                      index % 2 === 0 ? 'lg:ml-12' : 'lg:mr-12'
                    )}>
                      <div className="flex items-center justify-between mb-4">
                        <span
                          className="text-xs font-bold tracking-[0.2em] uppercase"
                          style={{ color: accentColor }}
                        >
                          {step.phase}
                        </span>
                        <span className="text-sm text-text-muted">
                          {step.duration}
                        </span>
                      </div>
                      <h3 className="text-xl font-bold text-text-primary mb-3">{step.title}</h3>
                      <p className="text-text-secondary leading-relaxed mb-5">
                        {step.description}
                      </p>
                      <div className="pt-5 border-t border-border-primary">
                        <div className="text-xs text-text-muted mb-3 font-medium uppercase tracking-wider">
                          交付物
                        </div>
                        <div className="flex flex-wrap gap-2">
                          {step.deliverables.map((deliverable, i) => (
                            <span
                              key={i}
                              className="px-2.5 py-1 text-xs bg-bg-primary text-text-secondary border border-border-primary"
                            >
                              {deliverable}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export interface FAQItem {
  question: string;
  answer: string;
}

export interface FAQSectionProps {
  title: string;
  subtitle?: string;
  items: FAQItem[];
}

export function FAQSection({ title, subtitle, items }: FAQSectionProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  return (
    <section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-secondary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-20">
          <ScrollReveal className="lg:col-span-4">
            <SectionLabel>FAQ</SectionLabel>
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
              {title}
            </h2>
            {subtitle && (
              <p className="text-text-secondary leading-relaxed text-lg">
                {subtitle}
              </p>
            )}
          </ScrollReveal>

          <div className="lg:col-span-8 space-y-3">
            <StaggerReveal staggerDelay={0.06} delayChildren={0.05}>
              {items.map((item, index) => (
                <div
                  key={index}
                  className="border border-border-primary bg-bg-primary hover:border-border-secondary transition-colors duration-300"
                >
                  <button
                    onClick={() => setOpenIndex(openIndex === index ? null : index)}
                    className="w-full flex items-center justify-between gap-6 p-6 lg:p-7 text-left"
                  >
                    <span className="text-text-primary font-semibold text-base lg:text-lg">
                      {item.question}
                    </span>
                    <motion.div
                      animate={{ rotate: openIndex === index ? 180 : 0 }}
                      transition={{ duration: 0.3, ease: EASE_OUT }}
                      className="shrink-0"
                    >
                      <ChevronDown className="w-5 h-5 text-text-muted" />
                    </motion.div>
                  </button>
                  <motion.div
                    initial={false}
                    animate={{
                      height: openIndex === index ? 'auto' : 0,
                      opacity: openIndex === index ? 1 : 0,
                    }}
                    transition={{ duration: 0.4, ease: EASE_OUT }}
                    className="overflow-hidden"
                  >
                    <div className="px-6 lg:px-7 pb-7 pt-1 text-text-secondary leading-relaxed">
                      {item.answer}
                    </div>
                  </motion.div>
                </div>
              ))}
            </StaggerReveal>
          </div>
        </div>
      </div>
    </section>
  );
}

export interface DataMetric {
  value: string;
  label: string;
  description?: string;
  trend?: string;
  trendUp?: boolean;
}

export interface DataProofSectionProps {
  title: string;
  subtitle?: string;
  metrics: DataMetric[];
}

export function DataProofSection({ title, subtitle, metrics }: DataProofSectionProps) {
  return (
    <section className="relative py-20 sm:py-28 md:py-32 lg:py-40 overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
        <ScrollReveal className="mb-16 sm:mb-20 max-w-3xl">
          <SectionLabel>Proven Results</SectionLabel>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-ink tracking-tight leading-tight mb-6">
            {title}
          </h2>
          {subtitle && (
            <p className="text-text-secondary leading-relaxed text-lg">
              {subtitle}
            </p>
          )}
        </ScrollReveal>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary">
          <StaggerReveal staggerDelay={0.08} delayChildren={0.05}>
            {metrics.map((metric, index) => (
              <div
                key={index}
                className="group relative p-10 lg:p-12 bg-bg-secondary hover:bg-bg-secondary transition-all duration-500"
              >
                <div className="absolute top-0 left-0 h-1 w-0 group-hover:w-full transition-all duration-700 bg-brand" />
                <div className="relative z-10">
                  <div className="text-5xl lg:text-6xl font-bold tracking-tighter mb-4">
                    <span className="text-text-primary">{metric.value}</span>
                  </div>
                  <div className="text-lg font-semibold text-text-primary mb-2">
                    {metric.label}
                  </div>
                  {metric.description && (
                    <p className="text-sm text-text-muted leading-relaxed">
                      {metric.description}
                    </p>
                  )}
                  {metric.trend && (
                    <div className={cn(
                      'mt-4 inline-flex items-center gap-1.5 text-sm font-medium',
                      metric.trendUp ? 'text-success' : 'text-brand'
                    )}>
                      <span>{metric.trend}</span>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </StaggerReveal>
        </div>
      </div>
    </section>
  );
}