o2o-infinith-demo/src/components/Solution.tsx

import { motion } from 'motion/react';
import { Sparkles, ArrowRight } from 'lucide-react';

export default function Solution() {
  return (
    <section id="solution" className="py-32 bg-primary-900 text-white px-6 relative overflow-hidden">
      {/* Background Glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent/20 rounded-full blur-[120px] pointer-events-none"></div>
      
      <div className="max-w-4xl mx-auto text-center relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-8"
        >
          <Sparkles className="w-4 h-4 text-purple-300" />
          <span className="text-sm font-medium text-purple-100">Strategic Planning Engine</span>
        </motion.div>

        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className="text-4xl md:text-6xl font-serif font-bold mb-6 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff]"
        >
          The Strategic Planning Engine
        </motion.h2>

        {/* PART II 피봇: "관찰이 아닌 실행 가능한 전략을 출력하는 AI 플래너"
            AGDP 키워드는 유지하되 의미를 전략 설계 중심으로 재해석. */}
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="text-xl md:text-2xl text-slate-300 mb-12 max-w-3xl mx-auto leading-relaxed font-light break-keep"
        >
          <span className="font-medium text-white">관찰이 아닌, 실행 가능한 전략을 출력합니다.</span>
          <br className="hidden md:block" />
          INFINITH는 <strong className="text-white font-medium">Audit → Generation → Direction → Planning</strong>의 AGDP 루프로 병원의 마케팅 의사결정을 설계합니다. 유튜브·인스타·네이버·강남언니 실측 데이터를 기반으로 12개월 전략과 주간 KPI 조정까지.
        </motion.p>

        {/* Circular Loop Diagram */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.3 }}
          className="relative w-full max-w-[320px] md:max-w-[500px] aspect-square mx-auto mt-16 mb-24 md:mb-32"
        >
          {/* Static Inner Ring */}
          <div className="absolute top-[20%] left-[20%] right-[20%] bottom-[20%] rounded-full border border-white/5 shadow-[0_0_40px_rgba(255,255,255,0.02)_inset]"></div>
          
          {/* Animated Glowing Ring */}
          <svg className="absolute inset-0 w-full h-full animate-[spin_20s_linear_infinite]" viewBox="0 0 100 100">
            <defs>
              <linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#a78bfa" stopOpacity="0.1" />
                <stop offset="50%" stopColor="#c084fc" stopOpacity="0.5" />
                <stop offset="100%" stopColor="#e879f9" stopOpacity="0.1" />
              </linearGradient>
            </defs>
            <circle cx="50" cy="50" r="30" fill="none" stroke="url(#ringGrad)" strokeWidth="0.5" strokeDasharray="2 2" />
          </svg>

          {/* Center Orb */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
            <div className="w-40 h-40 md:w-56 md:h-56 rounded-full bg-primary-900/90 backdrop-blur-xl border border-white/5 flex flex-col items-center justify-center shadow-[0_0_60px_rgba(167,139,250,0.1)]">
              <span className="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff] mb-2">AGDP</span>
              <h3 className="text-xl md:text-3xl font-serif font-bold text-white text-center leading-tight">Strategic<br/>Planning</h3>
            </div>
          </div>

          {/* Node A: Audit (Left) — 구 Analysis. 병원·채널 진단 리포트 */}
          <div className="absolute top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4">
            <div className="w-16 h-16 md:w-20 md:h-20 rounded-full border border-purple-500/30 bg-primary-900/80 backdrop-blur-sm flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.15)]">
              <span className="text-3xl md:text-4xl font-bold text-purple-300">A</span>
            </div>
            <div className="text-center">
              <span className="block text-lg md:text-2xl font-medium text-purple-200 leading-tight">Audit</span>
            </div>
          </div>

          {/* Node G: Generation (Top) — 전략·로드맵 문서 생성 (AI 콘텐츠 생성 아님) */}
          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4">
            <div className="w-16 h-16 md:w-20 md:h-20 rounded-full border border-purple-500/30 bg-primary-900/80 backdrop-blur-sm flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.15)]">
              <span className="text-3xl md:text-4xl font-bold text-purple-300">G</span>
            </div>
            <div className="text-center">
              <span className="block text-lg md:text-2xl font-medium text-purple-200 leading-tight">Generation</span>
            </div>
          </div>

          {/* Node D: Direction (Right) — 구 Distribution. 채널별 전략·우선순위 설계 */}
          <div className="absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4">
            <div className="w-16 h-16 md:w-20 md:h-20 rounded-full border border-purple-500/30 bg-primary-900/80 backdrop-blur-sm flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.15)]">
              <span className="text-3xl md:text-4xl font-bold text-purple-300">D</span>
            </div>
            <div className="text-center">
              <span className="block text-lg md:text-2xl font-medium text-purple-200 leading-tight">Direction</span>
            </div>
          </div>

          {/* Node P: Planning (Bottom) — 구 Performance. KPI 목표 설정 + 주간 조정 */}
          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4">
            <div className="w-16 h-16 md:w-20 md:h-20 rounded-full border border-purple-500/30 bg-primary-900/80 backdrop-blur-sm flex items-center justify-center shadow-[0_0_20px_rgba(168,85,247,0.15)]">
              <span className="text-3xl md:text-4xl font-bold text-purple-300">P</span>
            </div>
            <div className="text-center">
              <span className="block text-lg md:text-2xl font-medium text-purple-200 leading-tight">Planning</span>
            </div>
          </div>
          
          {/* Reward Signal Curved Text (P to A) */}
          <svg className="absolute inset-0 w-full h-full pointer-events-none z-20" viewBox="0 0 100 100">
            <defs>
              <path id="rewardPath" d="M 10.6 56.9 A 40 40 0 0 0 43.1 89.4" fill="none" />
            </defs>
            {/* 구 "Reward Signal" → "KPI Feedback" 로 피봇.
                주간 KPI 달성도가 전략 재조정의 입력 시그널이 된다는 의미. */}
            <text fontSize="3.5" className="font-medium uppercase tracking-widest" fill="#d8b4fe" opacity="0.8">
              <textPath href="#rewardPath" startOffset="50%" textAnchor="middle">
                ← KPI FEEDBACK
              </textPath>
            </text>
          </svg>
        </motion.div>
        
        {/* AGDP Cycle Description */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.5 }}
          className="max-w-3xl mx-auto mt-12 text-center"
        >
          <div className="inline-block bg-white/5 border border-white/10 rounded-2xl px-6 py-4 backdrop-blur-sm">
            <p className="text-sm md:text-base text-slate-300 break-keep">
              <span className="font-bold text-purple-300">AGDP Cycle:</span> 진단(Audit) → 전략 생성(Generation) → 채널 방향성(Direction) → KPI 계획(Planning)의 무한 루프로 <span className="text-white font-medium">주간 KPI 달성도 → 전략 재조정</span>을 자율 반복합니다.
            </p>
          </div>
        </motion.div>
      </div>
    </section>
  );
}