"use client"

import { motion } from "framer-motion"
import { Code2, Database, MessageSquare, Zap } from "lucide-react"

export function IntegrationsSection() {
  const integrations = [
    {
      icon: Code2,
      title: "API Integration",
      description: "Connect with your favorite tools to streamline workflows",
    },
    {
      icon: Database,
      title: "Data Sync",
      description: "Seamless data synchronization across platforms",
    },
    {
      icon: Zap,
      title: "Automation",
      description: "Automate repetitive tasks with intelligent workflows",
    },
    {
      icon: MessageSquare,
      title: "Communication",
      description: "Real-time notifications and updates",
    },
  ]

  return (
    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white border-b-2 border-gray-200">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          viewport={{ once: true }}
        >
          <div className="inline-block mb-4 px-3 py-1.5 border-2 border-primary bg-green-50">
            <span className="text-sm font-bold text-primary">INTEGRATIONS</span>
          </div>
          <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
            Seamless{" "}
            <span className="text-primary">
              Integrations
            </span>
          </h2>
          <p className="text-base text-gray-600">Connect with your favorite tools to streamline workflows</p>
        </motion.div>

        {/* Integration Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {integrations.map((integration, index) => {
            const Icon = integration.icon
            return (
              <motion.div
                key={index}
                className="flex flex-col items-center text-center"
                initial={{ opacity: 0, scale: 0.8 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                viewport={{ once: true }}
              >
                <div className="w-20 h-20 bg-primary border-2 border-primary flex items-center justify-center mb-4">
                  <Icon className="w-10 h-10 text-white" />
                </div>
                <h3 className="font-bold text-base mb-2 text-gray-900">{integration.title}</h3>
                <p className="text-sm text-gray-600 leading-relaxed">{integration.description}</p>
              </motion.div>
            )
          })}
        </div>
      </div>
    </section>
  )
}