import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Handshake } from "lucide-react";
import { useSponsors } from "@/contexts/SponsorsContext";

const SponsorsSection = () => {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-100px" });
  const { sponsors } = useSponsors();

  return (
    <section className="section-padding gradient-dark" ref={ref}>
      <div className="container mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={inView ? { scale: 1 } : {}}
            transition={{ duration: 0.5, type: "spring" }}
            className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-6"
          >
            <Handshake className="w-8 h-8 text-primary" />
          </motion.div>
          <h2 className="font-display text-4xl md:text-5xl font-bold tracking-wider text-dark-surface-foreground mb-4">
            NOSSOS <span className="text-primary">PATROCINADORES</span>
          </h2>
          <div className="w-20 h-1 bg-primary mx-auto mb-6" />
        </motion.div>

        <div className={`grid gap-6 ${sponsors.length >= 4 ? 'sm:grid-cols-2 lg:grid-cols-4' : sponsors.length === 3 ? 'sm:grid-cols-2 lg:grid-cols-3 max-w-4xl mx-auto' : sponsors.length === 2 ? 'sm:grid-cols-2 max-w-2xl mx-auto' : 'max-w-sm mx-auto'}`}>
          {sponsors.map((s, i) => (
            <motion.a
              key={s.id}
              href={s.link || "#"}
              target="_blank"
              rel="noopener noreferrer"
              initial={{ opacity: 0, y: 20 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="bg-secondary/50 border border-border/10 rounded-xl p-6 text-center card-hover block group"
            >
              <div className="text-5xl mb-4 group-hover:scale-110 transition-transform duration-300">{s.logo}</div>
              <h3 className="font-display text-lg font-semibold text-dark-surface-foreground mb-1">{s.name}</h3>
              <p className="text-sm text-dark-surface-foreground/50">{s.description}</p>
            </motion.a>
          ))}
        </div>

        {sponsors.length === 0 && (
          <p className="text-center text-dark-surface-foreground/40 py-12">Nenhum patrocinador cadastrado.</p>
        )}
      </div>
    </section>
  );
};

export default SponsorsSection;