import { Waves, Utensils, Zap, CreditCard, ArrowRight } from 'lucide-react';
import { Button } from '../ui/Button';
import { motion } from 'motion/react';
import { DigitalCard } from '../partnership/DigitalCard';

interface PartnershipSectionProps {
  onJoin: () => void;
  onViewMore: () => void;
}

export function PartnershipSection({ onJoin, onViewMore }: PartnershipSectionProps) {
  const teaserBenefits = [
    { icon: Waves, text: 'Piscina' },
    { icon: Utensils, text: 'Churrasco' },
    { icon: Zap, text: 'Futebol de Sabão' },
    { icon: CreditCard, text: 'Carteirinha Digital' },
  ];

  // Mock partner for teaser simulation
  const mockPartner = {
    id: 'P-882941',
    name: 'SÓCIO GALPÃO IMPERIAL',
    whatsapp: '27 99999-9999',
    cpf: '000.000.000-00',
    birthDate: '1990-01-01',
    planId: 'monthly',
    startDate: new Date(),
    expiryDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
    status: 'active' as const,
  };

  return (
    <section className="py-24 relative overflow-hidden bg-white/[0.01] border-y border-white/5" id="parceiros">
      <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-brand-wine/5 blur-[120px] rounded-full pointer-events-none" />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-8">
        <div className="flex flex-col lg:flex-row gap-16 items-center">
          
          {/* Card Side (Simulation) */}
          <div className="w-full lg:w-1/2 flex justify-center lg:justify-start order-2 lg:order-1 mt-12 lg:mt-0">
             <motion.div
               initial={{ opacity: 0, scale: 0.8, rotate: -5 }}
               whileInView={{ opacity: 1, scale: 1, rotate: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.8, ease: "easeOut" }}
               className="relative"
             >
                <div className="absolute -inset-10 bg-brand-wine/20 blur-[100px] rounded-full opacity-60 animate-pulse" />
                <DigitalCard partner={mockPartner} />
                <div className="absolute -bottom-6 -right-6 glass p-4 rounded-2xl border-white/10 flex items-center gap-3 animate-bounce">
                   <div className="w-3 h-3 rounded-full bg-green-500" />
                   <span className="text-[9px] font-black text-white uppercase tracking-widest">Validada 2026</span>
                </div>
             </motion.div>
          </div>

          {/* Content Side (Objective) */}
          <div className="flex-1 space-y-8 text-center lg:text-left order-1 lg:order-2">
            <div className="space-y-4">
              <span className="text-brand-gold text-[10px] font-black uppercase tracking-[0.4em] block">Clube de Vantagens</span>
              <h2 className="text-4xl md:text-5xl font-display font-black text-white uppercase tracking-tighter leading-tight">
                Seja parceiro <br /> <span className="text-brand-wine">do Galpão Imperial</span>
              </h2>
              <p className="text-gray-500 text-xs font-bold uppercase leading-relaxed tracking-widest max-w-xl mx-auto lg:mx-0">
                Tenha sua carteirinha mensal e aproveite os dias de lazer no Galpão Imperial com piscina, churrasco, futebol de sabão e programação especial para parceiros.
              </p>
            </div>

            <div className="flex flex-wrap justify-center lg:justify-start gap-6">
              {teaserBenefits.map((item, i) => (
                <div key={i} className="flex items-center gap-2 text-white/50 group">
                  <item.icon className="w-4 h-4 text-brand-gold group-hover:scale-110 transition-transform" />
                  <span className="text-[9px] font-black uppercase tracking-widest">{item.text}</span>
                </div>
              ))}
            </div>

            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4">
              <Button 
                variant="primary" 
                className="w-full sm:w-auto rounded-xl px-10 py-5 text-[10px] font-black tracking-widest shadow-xl"
                onClick={onJoin}
              >
                FAZER MINHA CARTEIRINHA
              </Button>
              <Button 
                variant="outline" 
                className="w-full sm:w-auto rounded-xl px-10 py-5 text-[10px] font-black tracking-widest border-white/10"
                onClick={onViewMore}
              >
                VER MAIS <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}
