import { useNavigate } from 'react-router';
import { motion } from 'motion/react';
import { PrismFilled } from './icons/FilledIcons';
import MultiChannelInput, { type AnalyzePayload } from './MultiChannelInput';

export default function Hero() {
  const navigate = useNavigate();

  const handleAnalyze = (payload: AnalyzePayload) => {
    navigate('/report/loading', {
      state: {
        url: payload.primaryUrl,
        manualChannels: payload.manualChannels,
      },
    });
  };

  return (
    <section className="relative pt-28 pb-12 md:pt-36 md:pb-16 overflow-hidden flex flex-col items-center justify-center text-center px-6">
      {/* Background Gradient */}
      <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-100 via-purple-50 to-pink-50 opacity-70"></div>
      
      <div className="max-w-4xl mx-auto relative isolate">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/40 shadow-sm mb-8"
        >
          <PrismFilled size={16} className="text-accent" />
          <span className="text-sm font-medium text-slate-700">AI Marketing Strategist · Built for Premium Clinics</span>
        </motion.div>

        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className="text-5xl md:text-7xl font-serif font-bold text-primary-900 leading-[1.1] tracking-[-0.02em] mb-6"
        >
          <span className="tracking-[0.05em]">In<span className="ml-[-0.04em]">f</span><span className="ml-[-0.04em]">inite</span></span> Growth <br className="hidden md:block" />
          <span className="text-gradient">Marketing Engine.</span>
        </motion.h1>

        {/* 서브 카피 — PART II 피봇: Strategic Planner 포지셔닝
            ▸ 이전 "Marketing that learns... 쓸수록 더 정교해지는..." 은 풀스택 자동화 약속이
              Generation/Distribution Mock 상태와 맞지 않았음.
            ▸ Phase 1-4 (Discover→Collect→Report→Plan) 실제 구현 범위에 정직하게 일치시킴. */}
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="text-lg md:text-xl text-slate-600 mb-10 max-w-3xl mx-auto leading-relaxed"
        >
          The Strategic Planner for Premium Medical Marketing. <br className="hidden md:block" />
          <span className="whitespace-nowrap">유튜브·인스타·네이버·강남언니를</span>{' '}
          <span className="whitespace-nowrap">10분 만에 진단하고,</span>{' '}
          <span className="whitespace-nowrap">병원의 12개월 마케팅 전략을</span>{' '}
          <span className="whitespace-nowrap">설계합니다.</span>
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3 }}
          className="w-full"
        >
          <MultiChannelInput variant="hero" onAnalyze={handleAnalyze} />
        </motion.div>
      </div>

      {/* Decorative elements — isolate prevents mix-blend-multiply from bleeding into content */}
      <div className="absolute inset-0 -z-[5] isolate pointer-events-none">
        <div className="absolute top-1/4 left-10 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
        <div className="absolute top-1/3 right-10 w-64 h-64 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
        <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-64 h-64 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
      </div>
    </section>
  );
}