"use client";

import { useEffect, useState } from "react";
import { Zap, Clock, ShieldAlert, Award } from "lucide-react";
import { motion } from "framer-motion";

export default function FlashDrops() {
  const [timeLeft, setTimeLeft] = useState(7920); // 2 hours 12 minutes in seconds

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 7920));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const formatTime = (secs: number) => {
    const h = Math.floor(secs / 3600);
    const m = Math.floor((secs % 3600) / 60);
    const s = secs % 60;
    return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
  };

  const drops = [
    {
      brand: "Starbucks Concert",
      detail: "VIP Pass Ticket Drop",
      cost: "800 LYTs",
      locked: true,
      time: "2h 12m",
    },
    {
      brand: "Nike Air Jordan",
      detail: "$100 Gift Voucher Drop",
      cost: "1200 LYTs",
      locked: true,
      time: "5h 40m",
    },
  ];

  return (
    <section className="py-24 bg-dark relative overflow-hidden">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        <div className="glassmorphism rounded-3xl p-8 sm:p-12 border border-accent-lime/10 shadow-[0_0_50px_rgba(200,255,55,0.05)]">
          <div className="text-center space-y-6 max-w-xl mx-auto mb-10">
            <div className="w-12 h-12 rounded-2xl bg-accent-lime/10 border border-accent-lime/20 flex items-center justify-center text-accent-lime mx-auto">
              <Clock className="w-6 h-6 animate-pulse" />
            </div>

            <div className="space-y-2">
              <span className="text-accent-lime font-bold text-xs uppercase tracking-wider">Section 12 • Flash Drops</span>
              <h3 className="text-2xl sm:text-4xl font-extrabold font-sora text-white">
                Ultra-Rare <br />
                <span className="text-glow-yellow text-primary">Limited Vouchers</span>
              </h3>
              <p className="text-white/60 text-sm leading-relaxed">
                Check back periodically. High-value partner rewards drop at set intervals. When the timer hits zero, vouchers unlock for instant claims. First come, first served.
              </p>
            </div>
          </div>

          {/* Time & Drops display */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
            
            {/* Timer card */}
            <div className="bg-[#0b0b0b] border border-white/5 rounded-2xl p-6 flex flex-col justify-center items-center text-center space-y-4">
              <span className="text-white/40 text-[10px] font-bold tracking-widest uppercase block">Next Secret Drop Unlocks In:</span>
              <span className="text-3xl sm:text-4xl font-mono font-black text-accent-lime tracking-widest">
                {formatTime(timeLeft)}
              </span>
              <div className="flex items-center space-x-1.5 text-xs text-white/50 bg-white/5 border border-white/10 px-3 py-1 rounded-full">
                <Zap className="w-3.5 h-3.5 text-accent-lime fill-current" />
                <span>Notify me when drops open</span>
              </div>
            </div>

            {/* Locked drops listing */}
            <div className="space-y-3">
              {drops.map((drop, idx) => (
                <div key={idx} className="bg-white/3 border border-white/5 p-4 rounded-xl flex items-center justify-between opacity-80 hover:opacity-100 transition-opacity">
                  <div className="space-y-1">
                    <span className="text-sm font-bold text-white block">{drop.brand}</span>
                    <span className="text-[10px] text-white/40 block">{drop.detail}</span>
                  </div>

                  <div className="text-right space-y-1">
                    <span className="text-xs font-mono font-bold text-white/50 bg-white/5 px-2 py-0.5 rounded border border-white/10 block">
                      Locked
                    </span>
                    <span className="text-[9px] text-accent-lime font-bold block">Cost: {drop.cost}</span>
                  </div>
                </div>
              ))}
            </div>

          </div>
        </div>

      </div>
    </section>
  );
}
