"use client";

import { Store, ShieldCheck, Truck, Headphones } from "lucide-react";
import { SearchBar } from "./SearchBar";

export function Hero() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-b from-violet-50/50 to-white pt-12 pb-16 lg:pt-20 lg:pb-24">
      {/* Decorative background elements */}
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden -z-10">
        <div className="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] rounded-full bg-violet-200/40 blur-3xl opacity-60"></div>
        <div className="absolute bottom-[-10%] left-[-5%] w-[400px] h-[400px] rounded-full bg-blue-100/40 blur-3xl opacity-60"></div>
      </div>

      <div className="container mx-auto px-4 lg:px-8">
        <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-8">
          
          {/* Left Content */}
          <div className="flex-1 max-w-2xl">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-violet-100 text-violet-800 text-sm font-medium mb-6">
              <span>Tudo que você imagina, em um só lugar</span>
              <span>✨</span>
            </div>
            
            <h1 className="text-4xl lg:text-5xl xl:text-6xl font-extrabold text-gray-900 tracking-tight leading-[1.1] mb-6">
              Encontre produtos <br className="hidden lg:block" />
              incríveis de <span className="text-violet-600">várias lojas</span>
            </h1>
            
            <p className="text-lg text-gray-600 mb-8 max-w-lg">
              Apoie nossos assinantes e receba produtos personalizados com qualidade.
            </p>

            <div className="grid grid-cols-2 gap-4 mb-10 max-w-lg">
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-violet-50 text-violet-600">
                  <Store className="w-5 h-5" />
                </div>
                <span className="text-sm font-medium text-gray-700 leading-tight">Diversas lojas<br/>confiáveis</span>
              </div>
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-blue-50 text-blue-600">
                  <ShieldCheck className="w-5 h-5" />
                </div>
                <span className="text-sm font-medium text-gray-700 leading-tight">Pagamento<br/>100% seguro</span>
              </div>
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-emerald-50 text-emerald-600">
                  <Truck className="w-5 h-5" />
                </div>
                <span className="text-sm font-medium text-gray-700 leading-tight">Entrega rápida<br/>para todo o Brasil</span>
              </div>
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-indigo-50 text-indigo-600">
                  <Headphones className="w-5 h-5" />
                </div>
                <span className="text-sm font-medium text-gray-700 leading-tight">Suporte sempre<br/>que precisar</span>
              </div>
            </div>

            <div className="relative max-w-lg">
              <SearchBar variant="hero" />
            </div>
          </div>

          {/* Right Image */}
          <div className="flex-1 w-full relative lg:h-[500px] flex items-center justify-center">
            {/* Using a placeholder composition that matches the vibe */}
            <div className="relative w-full max-w-[600px] aspect-[4/3] rounded-3xl overflow-hidden bg-white shadow-2xl p-4 border border-white/50">
              <img 
                src="https://images.unsplash.com/photo-1620668021074-b63e52e90c8e?q=80&w=1200&auto=format&fit=crop" 
                alt="Produtos personalizados" 
                className="w-full h-full object-cover rounded-2xl"
              />
              
              {/* Floating badges to simulate the design */}
              <div className="absolute top-10 -right-4 bg-violet-600 text-white font-bold py-3 px-6 rounded-full rotate-12 shadow-xl border-4 border-white text-lg">
                Sua marca <br/> aqui!
              </div>
              <div className="absolute bottom-10 left-10 bg-white/90 backdrop-blur-sm text-gray-900 font-bold py-2 px-6 rounded-2xl shadow-lg border border-white/50 flex items-center gap-2">
                <span className="w-3 h-3 rounded-full bg-violet-500"></span>
                Sua arte aqui
              </div>
            </div>
          </div>

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