'use client';

import { Target, Eye, TrendingUp, Shield, Zap, Users } from 'lucide-react';
import { MissionVisionSectionProps, MissionData, VisionData } from '@/lib/page-builder/types';

// ✅ Move InfoCard OUTSIDE the main component (as a separate component)
const InfoCard = ({ 
  data, 
  type 
}: { 
  data: MissionData | VisionData; 
  type: 'mission' | 'vision' 
}) => {
  const isMission = type === 'mission';
  
  // Icon mapping function inside InfoCard
  const getIcon = (iconName: string) => {
    const icons: Record<string, React.ReactNode> = {
      Target: <Target className="w-8 h-8" />,
      Eye: <Eye className="w-8 h-8" />,
      TrendingUp: <TrendingUp className="w-8 h-8" />,
      Shield: <Shield className="w-8 h-8" />,
      Zap: <Zap className="w-8 h-8" />,
      Users: <Users className="w-8 h-8" />
    };
    return icons[iconName] || <Target className="w-8 h-8" />;
  };

  const gradientBg = isMission 
    ? 'bg-gradient-to-br from-blue-50 to-white'
    : 'bg-gradient-to-br from-orange-50 to-white';
  const borderColor = isMission 
    ? 'border-blue-200'
    : 'border-orange-200';
  const iconBgGradient = isMission
    ? 'bg-gradient-to-br from-[#0066FF] to-[#00D4FF]'
    : 'bg-gradient-to-br from-[#FF6B35] to-[#FF8C5A]';

  return (
    <div 
      className={`${gradientBg} border ${borderColor} rounded-2xl p-8 hover:shadow-xl transition-all duration-300 hover:-translate-y-1`}
    >
      {/* Icon */}
      <div className="mb-6">
        <div className={`w-16 h-16 ${iconBgGradient} rounded-2xl flex items-center justify-center shadow-lg`}>
          <div className="text-white">
            {getIcon(data.icon)}
          </div>
        </div>
      </div>

      {/* Title */}
      <h3 className="text-2xl md:text-3xl font-bold mb-4 text-[#1A1F36]">
        {data.title}
      </h3>

      {/* Description */}
      <p className="text-[#475569] leading-relaxed mb-6">
        {data.description}
      </p>

      {/* Key Points */}
      {data.points && data.points.length > 0 && (
        <div className="space-y-3">
          <h4 className="font-semibold text-[#1A1F36] text-sm uppercase tracking-wide">
            Key Focus Areas
          </h4>
          <ul className="space-y-2">
            {data.points.map((point, index) => (
              <li key={index} className="flex items-start gap-2 text-[#475569]">
                <div className="mt-1">
                  <div className={`w-1.5 h-1.5 rounded-full mt-1.5 ${
                    isMission ? 'bg-[#0066FF]' : 'bg-[#FF6B35]'
                  }`} />
                </div>
                <span className="text-sm">{point}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default function MissionVisionSection({
  mission = {
    title: 'Our Mission',
    description: 'To empower businesses with high-quality guest posting services that drive real SEO results and sustainable growth.',
    icon: 'Target',
    points: [
      'Deliver measurable SEO improvements',
      'Build authentic, lasting backlinks',
      'Provide transparent reporting'
    ]
  },
  vision = {
    title: 'Our Vision',
    description: 'To become the world\'s most trusted guest posting platform, connecting brands with premium publishing opportunities globally.',
    icon: 'Eye',
    points: [
      'Global publishing network expansion',
      'Industry-first quality standards',
      'AI-powered content matching'
    ]
  },
  layout = 'side-by-side',
  className = '',
  id
}: MissionVisionSectionProps) {
  
  const getLayoutClass = () => {
    if (layout === 'stacked') {
      return 'flex flex-col gap-12';
    }
    return 'grid md:grid-cols-2 gap-8 lg:gap-12';
  };

  return (
    <section id={id || "mission-vision"} className={`py-20 px-4 ${className}`}>
      <div className="max-w-7xl mx-auto">
        {/* Section Header */}
        <div className="text-center mb-12 md:mb-16">
          <span className="inline-block px-4 py-1.5 bg-linear-to-r from-blue-50 to-orange-50 rounded-full text-sm font-medium text-[#0066FF] mb-4">
            Who We Are
          </span>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#1A1F36] mb-4">
            Our <span className="text-gradient">Mission & Vision</span>
          </h2>
          <p className="text-lg text-[#475569] max-w-2xl mx-auto">
            Driven by purpose, guided by values — here`s what sets us apart
          </p>
        </div>

        {/* Mission & Vision Cards */}
        <div className={getLayoutClass()}>
          <InfoCard data={mission} type="mission" />
          <InfoCard data={vision} type="vision" />
        </div>

        {/* Separator */}
        <div className="mt-12 text-center">
          <div className="inline-flex items-center gap-4 text-sm text-[#475569]">
            <div className="w-12 h-px bg-linear-to-r from-transparent to-[#0066FF]" />
            <span>Where purpose meets action</span>
            <div className="w-12 h-px bg-linear-to-l from-transparent to-[#FF6B35]" />
          </div>
        </div>
      </div>

      {/* Global Styles */}
      <style>
        {`
          .text-gradient {
            background: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
          }
        `}
      </style>
    </section>
  );
}