import React from 'react';
import { motion } from 'motion/react';
import { PageContainer } from '@/shared/ui/page-container';

// PART II 피봇: 1·5번은 Product 1.0 Available, 2·3·4는 Coming Soon.
// 카피는 Intelligence + Planning 중심으로 조정 (구조 5개 카드는 유지).
const modules = [
  {
    step: "1",
    title: "Marketing Intelligence",
    items: [
      "브랜드·온라인 프레즌스 진단",
      "유튜브·인스타·네이버·강남언니 실측",
      "경쟁 병원 벤치마크 (최대 10곳)",
      "키워드·해시태그 트렌드 분석",
      "Vision AI 기반 의료진·슬로건 추출",
    ],
    highlight: "10분 진단 → 전략 기획의 출발점",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  },
  {
    step: "2",
    title: "Strategic Planning",
    items: [
      "12개월 마케팅 로드맵",
      "4~8주 콘텐츠 캘린더 + 필러 5종",
      "KPI 대시보드 (3·12개월 목표)",
      "주간 KPI 달성도 → 전략 조정 제안",
      "브랜드 가이드 (톤·컬러·로고) 자동 추출",
    ],
    highlight: "관찰을 실행 가능한 전략으로 전환",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  },
  {
    step: "3",
    title: "Content Creation",
    items: [
      "블로그·SEO·SNS 카피 자동 생성",
      "브랜드 톤 일관성 보장",
      "Human-in-the-loop 편집 워크플로우",
      "콘텐츠 필러·시즌별 테마 매핑",
      "Coming Soon · Q4 2026",
    ],
    highlight: "전략을 실행 가능한 콘텐츠로",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  },
  {
    step: "4",
    title: "Video Automation",
    items: [
      "블로그 → 숏폼·유튜브 영상 변환",
      "Creatomate 기반 자동 렌더링",
      "음악·자막·썸네일 AI 생성",
      "시즌별 템플릿 + 병원 CI 반영",
      "Coming Soon · Q4 2026",
    ],
    highlight: "영상 제작 리소스 부담 해소",
    color: "bg-[#021341]",
    textColor: "text-indigo-600"
  },
  {
    step: "5",
    title: "Distribution & Performance",
    items: [
      "멀티 채널 자동 게시 (블로그·SNS·유튜브)",
      "SEO·AEO 자동 최적화",
      "실시간 성과 트래킹 + 리포트",
      "KPI 달성 → 다음 주기 전략 피드백",
      "Coming Soon · Q4 2026",
    ],
    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>

      <PageContainer className="relative z-10 px-0">
        <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>
          {/* PART II 피봇: "자율 순환 마케팅 시스템" → 실제 Phase 1-4 구현 범위로 정직하게 조정.
              Product 1.0 Available 모듈 2개(Marketing Intelligence + Strategic Planning)와
              Coming Soon 모듈 3개(Content/Video/Distribution)로 완성도 신호를 분명히. */}
          <p className="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto break-keep">
            진단부터 전략 설계까지 <strong className="text-primary-900">Product 1.0 으로 출시된 모듈</strong>과 콘텐츠 실행을 위한 후속 로드맵입니다.
          </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>
      </PageContainer>
    </section>
  );
}
