import React from 'react';
import { motion } from 'motion/react';

const modules = [
  {
    step: "1",
    title: "Marketing Intelligence",
    items: [
      "브랜딩, 마케팅 현황 분석",
      "타겟 고객 분석",
      "키워드 분석",
      "경쟁 및 포지셔닝 분석",
      "SEO 전략 & 채널별 콘텐츠 기획"
    ],
    highlight: "AI 기반 시장 통찰력 도출",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  },
  {
    step: "2",
    title: "Content Creation",
    items: [
      "블로그 콘텐츠 생성",
      "SEO 콘텐츠 생성",
      "SNS 콘텐츠 생성",
      "마케팅 카피 생성",
      "Human-in-the loop 프로세스"
    ],
    highlight: "고품질 맞춤형 콘텐츠 자동화",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  },
  {
    step: "3",
    title: "Video Automation",
    items: [
      "블로그 → 영상 변환",
      "숏폼 콘텐츠 생성",
      "유튜브 콘텐츠 제작",
      "SNS 영상 제작",
      "멀티모달 AI 엔진: 영상 + 음악 + 카피"
    ],
    highlight: "원클릭 영상 제작 시스템",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  },
  {
    step: "4",
    title: "Distribution Engine",
    items: [
      "블로그 게시",
      "SNS 자동 게시",
      "유튜브 업로드",
      "콘텐츠 일정 관리",
      "SEO, AEO 자동 최적화"
    ],
    highlight: "전 채널 통합 배포 및 최적화",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  },
  {
    step: "5",
    title: "Performance Intelligence",
    items: [
      "SEO 성과 분석",
      "콘텐츠 성과 분석",
      "채널 성과 분석",
      "AI 콘텐츠 개선 전략 추천",
      "데이터 기반 효과 검증"
    ],
    highlight: "실시간 성과 추적 및 개선",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  }
];

const Flywheel = () => (
  <div className="relative w-72 h-72 md:w-[400px] md:h-[400px] flex items-center justify-center">
    {/* Center Content */}
    <div className="absolute inset-0 flex flex-col items-center justify-center text-center z-10">
      <h3 className="text-[26px] md:text-[31px] font-serif font-bold text-slate-800 leading-tight">
        Self-Improving<br/>Growth Engine
      </h3>
    </div>
  </div>
);

const ModuleCard: React.FC<{ mod: any, className?: string }> = ({ mod, className }) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.6 }}
    className={`bg-white rounded-2xl p-5 md:p-6 shadow-xl shadow-slate-200/50 border border-slate-100 flex flex-col ${className}`}
  >
    <div className="flex items-center gap-3 mb-5">
      <div className={`w-10 h-10 shrink-0 rounded-xl flex items-center justify-center text-white font-bold text-lg ${mod.color}`}>
        {mod.step}
      </div>
      <h3 className="text-lg md:text-xl font-bold text-slate-800 leading-tight tracking-tight">{mod.title}</h3>
    </div>
    
    <ul className="space-y-3 mb-6 flex-grow">
      {mod.items.map((item: string, i: number) => (
        <li key={i} className="text-slate-600 text-sm md:text-base leading-relaxed break-keep">
          {item}
        </li>
      ))}
    </ul>
    
    <div className={`mt-auto pt-4 border-t border-slate-100 font-bold text-sm md:text-base tracking-tight ${mod.textColor}`}>
      {mod.highlight}
    </div>
  </motion.div>
);

export default function Modules() {
  return (
    <section id="modules" className="py-24 md:py-32 bg-white px-6 overflow-hidden relative">
      {/* Animated Background Blobs */}
      <div className="absolute top-[-10%] left-[-10%] w-[50vw] h-[50vw] min-w-[600px] min-h-[600px] rounded-full bg-[#fff3eb] opacity-80 blur-[120px] animate-blob-large pointer-events-none"></div>
      <div className="absolute top-[20%] right-[-10%] w-[40vw] h-[40vw] min-w-[500px] min-h-[500px] rounded-full bg-[#e4cfff] opacity-40 blur-[120px] animate-blob-large animation-delay-7000 pointer-events-none"></div>
      <div className="absolute bottom-[-10%] left-[20%] w-[60vw] h-[60vw] min-w-[700px] min-h-[700px] rounded-full bg-[#f5f9ff] opacity-80 blur-[120px] animate-blob-large animation-delay-14000 pointer-events-none"></div>

      <div className="max-w-7xl mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16 md:mb-24"
        >
          <h2 className="text-4xl md:text-5xl font-serif font-bold text-primary-900 mb-6">
            Core Modules
          </h2>
          <p className="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto">
            성능 개선 반영 자율 순환 마케팅 시스템
          </p>
        </motion.div>

        {/* Desktop Layout — Pentagon around Flywheel */}
        <div className="hidden lg:block relative max-w-[1200px] mx-auto mt-10" style={{ height: '960px' }}>
          {/* Center flywheel */}
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
            <Flywheel />
          </div>

          {/* Pentagon: 5 cards around center, all same width */}
          {/* 1. Top center */}
          <div className="absolute left-1/2 -translate-x-1/2" style={{ top: '0px' }}>
            <ModuleCard mod={modules[0]} className="w-[300px]" />
          </div>

          {/* 2. Upper right */}
          <div className="absolute" style={{ right: '20px', top: '130px' }}>
            <ModuleCard mod={modules[1]} className="w-[300px]" />
          </div>

          {/* 3. Lower right */}
          <div className="absolute" style={{ right: '80px', bottom: '30px' }}>
            <ModuleCard mod={modules[2]} className="w-[300px]" />
          </div>

          {/* 4. Lower left */}
          <div className="absolute" style={{ left: '80px', bottom: '30px' }}>
            <ModuleCard mod={modules[3]} className="w-[300px]" />
          </div>

          {/* 5. Upper left */}
          <div className="absolute" style={{ left: '20px', top: '130px' }}>
            <ModuleCard mod={modules[4]} className="w-[300px]" />
          </div>
        </div>

        {/* Mobile/Tablet Layout (Flex Column) */}
        <div className="lg:hidden flex flex-col gap-8 items-center">
          <Flywheel />
          <div className="w-full grid md:grid-cols-2 gap-6 mt-8">
            {modules.map((mod, idx) => (
              <ModuleCard key={idx} mod={mod} className="w-full" />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
