import Link from "next/link";
import { Store, Star } from "lucide-react";

export function FooterCTA() {
  return (
    <section className="py-12 pb-24">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="relative overflow-hidden bg-gradient-to-r from-gray-50 to-violet-50/30 rounded-[2.5rem] border border-gray-100 p-8 lg:p-16 flex flex-col lg:flex-row items-center justify-between gap-12">
          
          {/* Content */}
          <div className="flex-1 max-w-xl relative z-10 text-center lg:text-left">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-gray-900 mb-4">
              Não encontrou o que procurava?
            </h2>
            <p className="text-lg text-gray-600 mb-8">
              Explore todas as lojas e descubra muito mais!
            </p>
            <Link 
              href="/lojas" 
              className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full border-2 border-violet-200 text-violet-600 font-bold text-lg hover:bg-violet-600 hover:text-white hover:border-violet-600 transition-all shadow-sm"
            >
              <Store className="w-5 h-5" />
              Explorar todas as lojas
            </Link>
          </div>

          {/* Illustrations / Floating elements */}
          <div className="flex-1 w-full relative h-[300px] hidden lg:block">
            {/* Bag illustration */}
            <div className="absolute bottom-0 right-1/4 w-48 h-56 bg-violet-600 rounded-t-xl rounded-b-md shadow-2xl rotate-[-5deg] z-10">
              <div className="absolute -top-8 left-1/2 -translate-x-1/2 w-16 h-12 border-4 border-violet-600 rounded-t-full border-b-0"></div>
            </div>
            <div className="absolute bottom-0 right-10 w-40 h-48 bg-pink-400 rounded-t-xl rounded-b-md shadow-xl rotate-[5deg]">
              <div className="absolute -top-6 left-1/2 -translate-x-1/2 w-12 h-10 border-4 border-pink-400 rounded-t-full border-b-0"></div>
            </div>

            {/* Review Bubbles */}
            <div className="absolute top-10 left-10 bg-white p-4 rounded-2xl shadow-xl border border-gray-100 rounded-bl-none z-20 animate-bounce" style={{ animationDuration: '3s' }}>
              <div className="flex items-center gap-3 mb-2">
                <div className="w-8 h-8 bg-gray-200 rounded-full overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=150&auto=format&fit=crop" alt="User" />
                </div>
                <div>
                  <div className="text-xs font-bold text-gray-900">Entrega rápida</div>
                  <div className="text-[10px] text-gray-500">Produto chegou antes do prazo!</div>
                </div>
              </div>
              <div className="flex gap-0.5">
                {[1,2,3,4,5].map(i => <Star key={i} className="w-3 h-3 fill-amber-400 text-amber-400" />)}
              </div>
            </div>

            <div className="absolute bottom-20 right-0 bg-white p-4 rounded-2xl shadow-xl border border-gray-100 rounded-br-none z-20 animate-bounce" style={{ animationDuration: '4s', animationDelay: '1s' }}>
              <div className="flex items-center gap-3 mb-2">
                <div className="w-8 h-8 bg-gray-200 rounded-full overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=150&auto=format&fit=crop" alt="User" />
                </div>
                <div>
                  <div className="text-xs font-bold text-gray-900">Qualidade incrível!</div>
                  <div className="text-[10px] text-gray-500">Material ótimo. Recomendo!</div>
                </div>
              </div>
              <div className="flex gap-0.5">
                {[1,2,3,4,5].map(i => <Star key={i} className="w-3 h-3 fill-amber-400 text-amber-400" />)}
              </div>
            </div>

          </div>

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