import { motion } from 'motion/react';
import { CalendarFilled, GlobeFilled } from '@/shared/icons/FilledIcons';

function formatDate(raw: string): string {
  try {
    return new Date(raw).toLocaleDateString('ko-KR', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  } catch {
    return raw;
  }
}

interface PlanHeaderProps {
  clinicName: string;
  clinicNameEn: string;
  date: string;
  targetUrl: string;
}

export default function PlanHeader({
  clinicName,
  clinicNameEn,
  date,
  targetUrl,
}: PlanHeaderProps) {
  return (
    <section className="relative overflow-hidden bg-[radial-gradient(ellipse_at_top_left,#e0e7ff,transparent_50%),radial-gradient(ellipse_at_bottom_right,#fce7f3,transparent_50%),radial-gradient(ellipse_at_center,#f5f3ff,transparent_60%)] py-20 md:py-28 px-6">
      {/* Animated blobs — position only, no opacity */}
      <motion.div
        className="absolute top-10 left-10 w-72 h-72 rounded-full bg-[#6C5CE7]/10 blur-3xl"
        animate={{ x: [0, 30, 0], y: [0, -20, 0] }}
        transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
      />
      <motion.div
        className="absolute bottom-10 right-10 w-96 h-96 rounded-full bg-[#D5CDF5]/30 blur-3xl"
        animate={{ x: [0, -20, 0], y: [0, 30, 0] }}
        transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
      />
      <motion.div
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full bg-[#6C5CE7]/8 blur-3xl"
        animate={{ scale: [1, 1.1, 1] }}
        transition={{ duration: 6, repeat: Infinity, ease: 'easeInOut' }}
      />

      <div className="relative max-w-7xl mx-auto">
        <div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-10">
          {/* Left: Text content — plain div, no opacity animation */}
          <div className="flex-1 text-center md:text-left">
            <p className="text-xs font-semibold text-[#6C5CE7] mb-4 tracking-widest uppercase">
              Marketing Execution Plan
            </p>

            <h1 className="font-serif text-4xl md:text-5xl font-bold text-[#0A1128] mb-3">
              {clinicName}
            </h1>

            <p className="text-xl text-slate-600 mb-8">
              {clinicNameEn}
            </p>

            <div className="flex flex-wrap gap-3 justify-center md:justify-start">
              <span className="inline-flex items-center gap-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/40 px-3 py-1 text-sm font-medium text-slate-700">
                <CalendarFilled size={14} className="text-slate-400" />
                {formatDate(date)}
              </span>
              <span className="inline-flex items-center gap-2 rounded-full bg-white/60 backdrop-blur-sm border border-white/40 px-3 py-1 text-sm font-medium text-slate-700">
                <GlobeFilled size={14} className="text-slate-400" />
                {targetUrl}
              </span>
            </div>
          </div>

          {/* Right: 90 Days badge */}
          <div className="shrink-0">
            <div className="w-32 h-32 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] flex flex-col items-center justify-center shadow-lg">
              <span className="text-4xl font-bold text-white leading-none">
                90
              </span>
              <span className="text-sm text-white/60">Days</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}