import { ScrollReveal } from '@/components/ui/scroll-reveal'
import {
  Heart, ShoppingCart, Landmark, Building2, Factory, Plane,
  GraduationCap, Music, type LucideIcon,
} from 'lucide-react'

interface Industry {
  icon: LucideIcon
  name: string
  description: string
}

const defaultIndustries: Industry[] = [
  { icon: Heart, name: 'Healthcare', description: 'Digital transformation for hospitals, clinics, and health tech.' },
  { icon: Landmark, name: 'FinTech', description: 'Strategic growth for banking, payments, and financial services.' },
  { icon: ShoppingCart, name: 'Retail & E-Commerce', description: 'Market expansion and brand positioning for retail brands.' },
  { icon: Building2, name: 'SaaS', description: 'Growth strategies for software-as-a-service companies.' },
  { icon: Factory, name: 'Manufacturing', description: 'Operational optimization and supply chain transformation.' },
  { icon: Plane, name: 'Logistics', description: 'Efficiency gains and market expansion for logistics firms.' },
  { icon: GraduationCap, name: 'Education', description: 'Digital strategy for EdTech and educational institutions.' },
  { icon: Music, name: 'Media & Entertainment', description: 'Brand and competitive positioning for media companies.' },
]

export function IndustriesSection({ industries = defaultIndustries }: { industries?: Industry[] }) {
  return (
    <section className="py-24 bg-slate-50">
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        <ScrollReveal>
          <div className="text-center max-w-2xl mx-auto mb-16">
            <p className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">Industries We Serve</p>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#081B33] mb-5">
              Trusted Across <span className="gradient-text">25+ Industries</span>
            </h2>
            <p className="text-lg text-slate-500 leading-relaxed">
              Our cross-industry expertise brings best practices from diverse sectors to solve your unique challenges.
            </p>
          </div>
        </ScrollReveal>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {industries.map((industry, i) => {
            const Icon = industry.icon
            return (
              <ScrollReveal key={i} delay={i * 60}>
                <div className="group p-6 rounded-2xl border border-slate-200/80 bg-white hover:border-blue-200 hover:shadow-xl hover:shadow-blue-50 transition-all duration-300 hover:-translate-y-1">
                  <div className="w-12 h-12 rounded-xl bg-blue-50 border border-blue-100 flex items-center justify-center mb-4 group-hover:bg-blue-100 group-hover:scale-110 transition-all duration-300">
                    <Icon className="w-5 h-5 text-blue-600" />
                  </div>
                  <h3 className="text-base font-bold text-[#081B33] mb-1.5">{industry.name}</h3>
                  <p className="text-xs text-slate-500 leading-relaxed">{industry.description}</p>
                </div>
              </ScrollReveal>
            )
          })}
        </div>
      </div>
    </section>
  )
}