import Link from 'next/link'
import {
  Globe,
  Settings,
  BarChart3,
  Trophy,
  Users,
  ArrowRight,
  type LucideIcon,
} from 'lucide-react'
import { ScrollReveal } from '@/components/ui/scroll-reveal'

interface ServiceItem {
  icon: LucideIcon
  title: string
  description: string
  href: string
  color: 'blue' | 'cyan' | 'emerald' | 'violet' | 'amber'
  stats?: string
}

const services: ServiceItem[] = [
  {
    icon: Globe,
    title: 'Market Expansion Strategies',
    description:
      'Design and execute plans to explore new markets and foster strategic partnerships for sustained growth.',
    href: '/services/market-expansion',
    color: 'blue',
    stats: '150+ Markets',
  },
  {
    icon: Settings,
    title: 'Streamlining Operations',
    description:
      'Implement scalable and efficient processes to enhance productivity and improve profitability.',
    href: '/services/streamlining-operations',
    color: 'cyan',
    stats: '62% Efficiency Gain',
  },
  {
    icon: BarChart3,
    title: 'Data-Driven Insights',
    description:
      'Utilize analytics and market research to inform strategic decisions and identify emerging opportunities.',
    href: '/services/data-driven-insights',
    color: 'emerald',
    stats: '3.2x ROI',
  },
  {
    icon: Trophy,
    title: 'Brand & Competitive Positioning',
    description:
      'Develop strategies to strengthen the company\'s brand identity globally and maintain a competitive advantage.',
    href: '/services/brand-competitive-positioning',
    color: 'violet',
    stats: '78% Brand Lift',
  },
  {
    icon: Users,
    title: 'Client Retention & Growth',
    description:
      'Build long-lasting client relationships while identifying opportunities for cross-selling and upselling services.',
    href: '/services/client-retention-growth',
    color: 'amber',
    stats: '94% Retention',
  },
]

const colorMap = {
  blue: {
    bg: 'bg-blue-50',
    bgHover: 'group-hover:bg-blue-100/80',
    border: 'border-blue-100',
    borderHover: 'group-hover:border-blue-200',
    text: 'text-blue-600',
    shadow: 'group-hover:shadow-blue-100/40',
    hoverGradient: 'hover:bg-gradient-to-br hover:from-blue-500/5 hover:via-blue-500/[0.02] hover:to-transparent',
    cornerGlow: 'bg-gradient-to-bl from-blue-500/5 to-blue-600/5',
    badge: 'bg-blue-50 text-blue-600 border-blue-100',
  },
  cyan: {
    bg: 'bg-cyan-50',
    bgHover: 'group-hover:bg-cyan-100/80',
    border: 'border-cyan-100',
    borderHover: 'group-hover:border-cyan-200',
    text: 'text-cyan-600',
    shadow: 'group-hover:shadow-cyan-100/40',
    hoverGradient: 'hover:bg-gradient-to-br hover:from-cyan-500/5 hover:via-cyan-500/[0.02] hover:to-transparent',
    cornerGlow: 'bg-gradient-to-bl from-cyan-500/5 to-cyan-600/5',
    badge: 'bg-cyan-50 text-cyan-600 border-cyan-100',
  },
  emerald: {
    bg: 'bg-emerald-50',
    bgHover: 'group-hover:bg-emerald-100/80',
    border: 'border-emerald-100',
    borderHover: 'group-hover:border-emerald-200',
    text: 'text-emerald-600',
    shadow: 'group-hover:shadow-emerald-100/40',
    hoverGradient: 'hover:bg-gradient-to-br hover:from-emerald-500/5 hover:via-emerald-500/[0.02] hover:to-transparent',
    cornerGlow: 'bg-gradient-to-bl from-emerald-500/5 to-emerald-600/5',
    badge: 'bg-emerald-50 text-emerald-600 border-emerald-100',
  },
  violet: {
    bg: 'bg-violet-50',
    bgHover: 'group-hover:bg-violet-100/80',
    border: 'border-violet-100',
    borderHover: 'group-hover:border-violet-200',
    text: 'text-violet-600',
    shadow: 'group-hover:shadow-violet-100/40',
    hoverGradient: 'hover:bg-gradient-to-br hover:from-violet-500/5 hover:via-violet-500/[0.02] hover:to-transparent',
    cornerGlow: 'bg-gradient-to-bl from-violet-500/5 to-violet-600/5',
    badge: 'bg-violet-50 text-violet-600 border-violet-100',
  },
  amber: {
    bg: 'bg-amber-50',
    bgHover: 'group-hover:bg-amber-100/80',
    border: 'border-amber-100',
    borderHover: 'group-hover:border-amber-200',
    text: 'text-amber-600',
    shadow: 'group-hover:shadow-amber-100/40',
    hoverGradient: 'hover:bg-gradient-to-br hover:from-amber-500/5 hover:via-amber-500/[0.02] hover:to-transparent',
    cornerGlow: 'bg-gradient-to-bl from-amber-500/5 to-amber-600/5',
    badge: 'bg-amber-50 text-amber-600 border-amber-100',
  },
} as const

function ServiceCard({ service, index }: { service: ServiceItem; index: number }) {
  const Icon = service.icon
  const colors = colorMap[service.color]

  return (
    <ScrollReveal delay={index * 80} direction="up">
      <Link href={service.href} className="group block h-full">
        <div
          className={`relative h-full p-7 rounded-2xl border border-slate-200/80 bg-white
            ${colors.borderHover} ${colors.hoverGradient}
            transition-all duration-300 hover:shadow-xl ${colors.shadow} hover:-translate-y-1`}
        >
          {/* Subtle corner glow on hover */}
          <div
            className={`absolute -top-px -right-px w-24 h-24 ${colors.cornerGlow} rounded-tr-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none`}
          />

          {/* Icon */}
          <div
            className={`relative w-12 h-12 rounded-xl ${colors.bg} border ${colors.border}
              ${colors.bgHover} ${colors.borderHover} flex items-center justify-center mb-5
              group-hover:scale-110 transition-all duration-300`}
          >
            <Icon className={`w-5.5 h-5.5 ${colors.text}`} />
          </div>

          {/* Content */}
          <h3 className="text-[15px] font-bold text-[#081B33] mb-2 group-hover:text-[#081B33]">
            {service.title}
          </h3>
          <p className="text-[13px] text-slate-500 leading-relaxed mb-5 line-clamp-2">
            {service.description}
          </p>

          {/* Footer */}
          <div className="flex items-center justify-between mt-auto">
            <span
              className={`inline-flex items-center text-[11px] font-semibold ${colors.badge} border rounded-full px-2.5 py-0.5`}
            >
              {service.stats}
            </span>
            <span
              className={`inline-flex items-center gap-1 text-[12px] font-semibold ${colors.text}
                group-hover:gap-2 transition-all duration-300`}
            >
              Learn More
              <ArrowRight className="w-3.5 h-3.5" />
            </span>
          </div>
        </div>
      </Link>
    </ScrollReveal>
  )
}

export function ServicesSection() {
  return (
    <section id="services-preview" className="py-24 bg-slate-50">
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        {/* Header */}
        <ScrollReveal>
          <div className="max-w-2xl mb-14">
            <p className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">
              What We Do
            </p>
            <h2 className="text-3xl sm:text-4xl font-bold text-[#081B33] mb-4">
              Strategic Consulting That{' '}
              <span className="gradient-text">Drives Results</span>
            </h2>
            <p className="text-lg text-slate-500 leading-relaxed">
              From market expansion to client retention, we provide end-to-end strategic
              consulting services that help businesses grow, scale, and outperform
              their competition.
            </p>
          </div>
        </ScrollReveal>

        {/* Services Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, i) => (
            <ServiceCard key={service.href} service={service} index={i} />
          ))}
        </div>

        {/* View All CTA */}
        <ScrollReveal delay={400}>
          <div className="mt-12 text-center">
            <Link
              href="/services"
              className="inline-flex items-center gap-2 text-sm font-semibold text-blue-600 hover:text-blue-700 transition-colors group"
            >
              View All Services
              <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
            </Link>
          </div>
        </ScrollReveal>
      </div>
    </section>
  )
}