"use client";

import { motion } from "framer-motion";
import {
  Sun,
  Zap,
  CreditCard,
  Star,
  Check,
  ArrowRight,
  Phone,
  MessageSquare,
} from "lucide-react";
import { staggerContainer, fadeInUp } from "../lib/animations";

export default function TodaysDealSection() {
  const deals = [
    {
      title: "Solar EPC Project Deal",
      discount: "20% OFF",
      description: "Free consultation + exclusive discounts on solar EPC projects signed today!",
      icon: Sun,
      color: "from-solar-500 to-solar-600",
      features: ["Free Site Survey", "Same Day Quote", "Easy EMI Options"]
    },
    {
      title: "EV Charging Infrastructure",
      discount: "15% OFF",
      description: "Complete EV charging setup with installation and 1-year AMC included!",
      icon: Zap,
      color: "from-primary-500 to-primary-600",
      features: ["Free Installation", "1 Year AMC", "Pan-India Support"]
    },
    {
      title: "Business Finance Loan",
      discount: "Low Interest",
      description: "Quick approval business loans for solar & green energy projects!",
      icon: CreditCard,
      color: "from-ocean-500 to-ocean-600",
      features: ["Quick Approval", "Minimal Documentation", "Flexible Tenure"]
    }
  ];

  return (
    <section className="py-20 relative overflow-hidden bg-theme-section-dark-gradient">
      <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-12"
        >
          <motion.div variants={fadeInUp} className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-solar-500/10 border border-solar-500/20 mb-4">
            <Star className="w-4 h-4 text-solar-400" />
            <span className="text-solar-400 text-sm font-medium">Limited Time Offers</span>
          </motion.div>
          <motion.h2 variants={fadeInUp} className="text-3xl sm:text-4xl font-bold text-theme-primary mb-4">
            Today&apos;s <span className="text-gradient-solar">Hot Deals</span>
          </motion.h2>
          <motion.p variants={fadeInUp} className="text-theme-secondary max-w-2xl mx-auto">
            Grab exclusive offers on green energy products and services. Don&apos;t miss out on these amazing deals!
          </motion.p>
        </motion.div>

        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
          className="grid md:grid-cols-3 gap-6"
        >
          {deals.map((deal) => (
            <motion.div
              key={deal.title}
              variants={fadeInUp}
              className="glass-card glass-card-hover p-6 relative overflow-hidden group"
            >
              {/* Discount Badge */}
              <div className="absolute top-4 right-4 px-3 py-1 rounded-full bg-solar-500 text-dark-900 text-sm font-bold">
                {deal.discount}
              </div>

              {/* Icon */}
              <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${deal.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                <deal.icon className="w-8 h-8 text-white" />
              </div>

              <h3 className="text-xl font-bold card-title mb-2">{deal.title}</h3>
              <p className="card-text text-sm mb-4">{deal.description}</p>

              {/* Features */}
              <ul className="space-y-2 mb-6">
                {deal.features.map((feature) => (
                  <li key={feature} className="flex items-center gap-2 text-sm card-text-muted">
                    <Check className="w-4 h-4 text-primary-400" />
                    {feature}
                  </li>
                ))}
              </ul>

              <button className="w-full btn-primary justify-center">
                Claim Offer
                <ArrowRight className="w-4 h-4" />
              </button>

              {/* Hover Glow */}
              <div className="absolute inset-0 bg-gradient-to-t from-primary-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
            </motion.div>
          ))}
        </motion.div>

        {/* CTA */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mt-10"
        >
          <p className="text-theme-secondary mb-4">Need something specific? Contact us for custom quotes!</p>
          <div className="flex flex-wrap justify-center gap-4">
            <a href="tel:+919999999999" className="btn-solar">
              <Phone className="w-5 h-5" />
              Call Now
            </a>
            <a href="#contact" className="btn-secondary">
              <MessageSquare className="w-5 h-5" />
              WhatsApp
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}