"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import Image from "next/image"

// Placeholder logos - in a real implementation, these would be actual partner logos
const logos = [
  { name: "Bank 1", src: "/placeholder.svg?height=60&width=120" },
  { name: "Bank 2", src: "/placeholder.svg?height=60&width=120" },
  { name: "Bank 3", src: "/placeholder.svg?height=60&width=120" },
  { name: "Bank 4", src: "/placeholder.svg?height=60&width=120" },
  { name: "Bank 5", src: "/placeholder.svg?height=60&width=120" },
]

export default function SocialProof() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })

  return (
    <section id="social-proof" className="container py-12 sm:py-16" ref={ref}>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
        transition={{ duration: 0.5 }}
        className="mx-auto max-w-4xl text-center"
      >
        <h2 className="text-xl font-medium text-muted-foreground">Trusted by leading financial institutions</h2>

        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
          {logos.map((logo, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0 }}
              animate={isInView ? { opacity: 0.5 } : { opacity: 0 }}
              whileHover={{ opacity: 0.8 }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
              className="flex h-16 items-center justify-center"
            >
              <Image
                src={logo.src || "/placeholder.svg"}
                alt={logo.name}
                width={120}
                height={60}
                className="h-auto max-h-12 w-auto max-w-[120px] grayscale transition-all"
              />
            </motion.div>
          ))}
        </div>

        <p className="mt-6 text-sm text-muted-foreground">
          * Placeholder logos to be replaced with actual partners after MoUs are signed
        </p>
      </motion.div>
    </section>
  )
}
