"use client";

import { motion } from "framer-motion";
import {
  Factory,
  Handshake,
  TrendingUp,
  Users,
  Award,
  Gauge,
  ArrowRight,
  Download,
} from "lucide-react";
import { staggerContainer, fadeInUp, scaleIn } from "../lib/animations";

export default function PartnersSection() {
  const partnerTypes = [
    {
      icon: Factory,
      title: "Material Suppliers",
      description: "Supply solar panels, inverters, batteries and accessories to our marketplace"
    },
    {
      icon: Handshake,
      title: "Business Partners",
      description: "Expand with us in solar, EV and sustainable energy projects"
    },
    {
      icon: TrendingUp,
      title: "Investor Partners",
      description: "Secure high-ROI investment opportunities in renewable infrastructure"
    },
    {
      icon: Users,
      title: "JV Partners",
      description: "Collaborate on EPC, Solar Park and EV Charging infrastructure projects"
    },
    {
      icon: Award,
      title: "Installer / Manpower",
      description: "Skilled workforce and installation teams for ongoing projects"
    },
    {
      icon: Gauge,
      title: "Machinery Partners",
      description: "Supply or lease solar, EV and renewable machinery"
    }
  ];

  return (
    <section id="partners" className="py-20 relative">
      <div className="absolute inset-0 bg-grid-pattern opacity-30" />
      
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="text-center mb-16"
        >
          <motion.div variants={fadeInUp} className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-500/10 border border-primary-500/20 mb-4">
            <Handshake className="w-4 h-4 text-primary-400" />
            <span className="text-primary-400 text-sm font-medium">Partnership Opportunities</span>
          </motion.div>
          <motion.h2 variants={fadeInUp} className="text-3xl sm:text-4xl font-bold text-theme-primary mb-4">
            Join India&apos;s Fastest Growing <span className="text-gradient-green">Renewable Network</span>
          </motion.h2>
          <motion.p variants={fadeInUp} className="text-theme-secondary max-w-2xl mx-auto">
            We invite dynamic partners and professionals to collaborate in the booming green energy sector.
          </motion.p>
        </motion.div>

        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
        >
          {partnerTypes.map((partner) => (
            <motion.div
              key={partner.title}
              variants={scaleIn}
              className="glass-card glass-card-hover p-6 text-center group"
            >
              <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500/20 to-primary-500/5 border border-primary-500/20 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <partner.icon className="w-8 h-8 text-primary-500" />
              </div>
              <h3 className="text-lg font-bold card-title mb-2">{partner.title}</h3>
              <p className="card-text text-sm">{partner.description}</p>
            </motion.div>
          ))}
        </motion.div>

        {/* CTA Card */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mt-12 gradient-border p-8 text-center"
        >
          <h3 className="text-2xl font-bold text-theme-primary mb-4">
            Together, we can power a sustainable future
          </h3>
          <p className="text-theme-secondary mb-6 max-w-xl mx-auto">
            Fill out our partnership form and join the green energy revolution. Let&apos;s build a cleaner tomorrow together.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <button className="btn-primary">
              Become a Partner
              <ArrowRight className="w-5 h-5" />
            </button>
            <button className="btn-secondary">
              Download Brochure
              <Download className="w-5 h-5" />
            </button>
          </div>
        </motion.div>
      </div>
    </section>
  );
}