'use client';

import { CheckCircle, Shield, Zap, Clock, Award, Users, TrendingUp, Star, Heart, ThumbsUp, Lock, Globe } from 'lucide-react';
import { WhyChooseUsSectionProps } from '@/lib/page-builder/types';

export default function WhyChooseUsSection({
  title = "Why Choose Us",
  highlightedText = "Choose Us",
  description = "What makes us different from the competition",
  badgeText = "Our Advantages",
  showBadge = true,
  points = [
    {
      id: '1',
      icon: 'Shield',
      title: 'Premium Quality Guaranteed',
      description: 'All our guest posts are published on DA 50+ websites with guaranteed indexing.',
      highlight: true
    },
    {
      id: '2',
      icon: 'Zap',
      title: 'Fast Turnaround Time',
      description: 'Get your posts published within 3-5 business days, never miss a deadline.',
      highlight: false
    },
    {
      id: '3',
      icon: 'Award',
      title: 'Industry Experts',
      description: 'Our team has 10+ years of SEO experience and thousands of successful campaigns.',
      highlight: false
    },
    {
      id: '4',
      icon: 'Users',
      title: '500+ Happy Clients',
      description: 'Trusted by businesses worldwide from startups to Fortune 500 companies.',
      highlight: false
    },
    {
      id: '5',
      icon: 'Clock',
      title: '24/7 Support',
      description: 'Dedicated account manager and round-the-clock customer support.',
      highlight: false
    },
    {
      id: '6',
      icon: 'TrendingUp',
      title: 'Measurable Results',
      description: 'Detailed reports and analytics showing your SEO improvement.',
      highlight: false
    }
  ],
  layout = 'grid',
  columns = 3,
  showHighlightCard = true,
  highlightCardPosition = 'first',
  showCTA = true,
  ctaText = 'Start Growing Today',
  ctaLink = '/contact',
  className = "",
  id
}: WhyChooseUsSectionProps) {
  
  // Icon mapping
  const getIcon = (iconName: string) => {
    const icons: Record<string, React.ReactNode> = {
      CheckCircle: <CheckCircle className="w-6 h-6" />,
      Shield: <Shield className="w-6 h-6" />,
      Zap: <Zap className="w-6 h-6" />,
      Clock: <Clock className="w-6 h-6" />,
      Award: <Award className="w-6 h-6" />,
      Users: <Users className="w-6 h-6" />,
      TrendingUp: <TrendingUp className="w-6 h-6" />,
      Star: <Star className="w-6 h-6" />,
      Heart: <Heart className="w-6 h-6" />,
      ThumbsUp: <ThumbsUp className="w-6 h-6" />,
      Lock: <Lock className="w-6 h-6" />,
      Globe: <Globe className="w-6 h-6" />
    };
    return icons[iconName] || <CheckCircle className="w-6 h-6" />;
  };

  // Get grid class
  const getGridClass = () => {
    if (layout === 'list') return 'space-y-4';
    
    switch (columns) {
      case 2:
        return "grid md:grid-cols-2 gap-6 lg:gap-8";
      case 3:
        return "grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8";
      case 4:
        return "grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8";
      default:
        return "grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8";
    }
  };

  // Render title with gradient
  const renderTitle = () => {
    if (!highlightedText || !title.includes(highlightedText)) {
      return <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#1A1F36] mb-4">{title}</h2>;
    }

    const parts = title.split(highlightedText);
    return (
      <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#1A1F36] mb-4">
        {parts[0]}
        <span className="text-gradient">{highlightedText}</span>
        {parts[1]}
      </h2>
    );
  };

  // Sort points based on highlight card position
  const getSortedPoints = () => {
    if (!showHighlightCard) return points;
    
    const highlightPoint = points.find(p => p.highlight === true);
    const regularPoints = points.filter(p => p.highlight !== true);
    
    if (!highlightPoint) return points;
    
    if (highlightCardPosition === 'first') {
      return [highlightPoint, ...regularPoints];
    } else if (highlightCardPosition === 'last') {
      return [...regularPoints, highlightPoint];
    } else if (highlightCardPosition === 'center') {
      const midIndex = Math.floor(regularPoints.length / 2);
      return [
        ...regularPoints.slice(0, midIndex),
        highlightPoint,
        ...regularPoints.slice(midIndex)
      ];
    }
    
    return points;
  };

  const sortedPoints = getSortedPoints();

  return (
    <section 
      id={id || "why-choose-us"} 
      className={`py-16 md:py-20 px-4 bg-linear-to-b from-white to-[#F8FAFF] ${className}`}
    >
      <div className="max-w-7xl mx-auto">
        {/* Section Header */}
        <div className="text-center mb-12 md:mb-16">
          {showBadge && badgeText && (
            <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">
              {badgeText}
            </span>
          )}
          
          {renderTitle()}
          
          {description && (
            <p className="text-lg text-[#475569] max-w-2xl mx-auto">
              {description}
            </p>
          )}
        </div>

        {/* Points Grid */}
        <div className={getGridClass()}>
          {sortedPoints.map((point, index) => {
            const isHighlight = point.highlight === true && showHighlightCard;
            
            return (
              <div
                key={point.id}
                className={`
                  group rounded-2xl p-6 transition-all duration-300
                  ${isHighlight 
                    ? 'bg-linear-to-br from-[#0066FF] to-[#00D4FF] text-white shadow-xl hover:shadow-2xl hover:-translate-y-2' 
                    : 'bg-white border border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-1'
                  }
                `}
                style={{
                  animation: `fadeInUp 0.5s ease-out ${index * 0.1}s forwards`,
                  opacity: 0,
                  transform: 'translateY(20px)'
                }}
              >
                {/* Icon */}
                <div className={`
                  w-14 h-14 rounded-xl flex items-center justify-center mb-5
                  transition-transform duration-300 group-hover:scale-110
                  ${isHighlight 
                    ? 'bg-white/20 backdrop-blur-sm' 
                    : 'bg-linear-to-br from-[#0066FF]/10 to-[#00D4FF]/10'
                  }
                `}>
                  <div className={isHighlight ? 'text-white' : 'text-[#0066FF]'}>
                    {getIcon(point.icon)}
                  </div>
                </div>

                {/* Title */}
                <h3 className={`
                  text-xl font-bold mb-3
                  ${isHighlight ? 'text-white' : 'text-[#1A1F36]'}
                `}>
                  {point.title}
                </h3>

                {/* Description */}
                <p className={`
                  leading-relaxed
                  ${isHighlight ? 'text-white/90' : 'text-[#475569]'}
                `}>
                  {point.description}
                </p>

                {/* Optional: Checkmark for highlight card */}
                {isHighlight && (
                  <div className="mt-4 flex items-center gap-2 text-sm text-white/80">
                    <CheckCircle className="w-4 h-4" />
                    <span>Our #1 Priority</span>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* CTA Button */}
        {showCTA && ctaText && (
          <div className="text-center mt-12">
            <a
              href={ctaLink}
              className="inline-flex items-center gap-2 px-8 py-3 bg-linear-to-r from-[#0066FF] to-[#00D4FF] text-white font-semibold rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-300"
            >
              {ctaText}
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        )}
      </div>

      {/* Global Styles */}
      <style>
        {`
          @keyframes fadeInUp {
            from {
              opacity: 0;
              transform: translateY(20px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
          
          .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>
  );
}