import Link from 'next/link';
import { Truck, CheckCircle, ShieldCheck } from 'lucide-react';

const CategoryBanner = () => {
    return (
        <section className="relative overflow-hidden rounded-xl md:rounded-2xl mx-0 md:mx-4 my-4 md:my-8 shadow-2xl bg-gradient-to-br from-blue-700 via-indigo-800 to-purple-900">
            {/* Background pattern */}
            <div className="absolute inset-0 opacity-10 bg-[url('/assets/pattern.svg')] bg-repeat" />
            <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />

            <div className="container mx-auto px-3 md:px-5 py-5 md:py-5 relative z-10">
                {/* Main CTA */}
                <div className="text-center mb-6 md:mb-5">
                    <span className="inline-block py-1 px-3 rounded-full bg-white/10 border border-white/20 !text-white text-[10px] md:text-sm font-medium backdrop-blur-md uppercase tracking-wider">
                        Exklusivt Utbud
                    </span>
                    <h2 className="text-2xl md:text-5xl font-bold !text-white mb-2 md:mb-4 drop-shadow-lg tracking-tight leading-tight px-2">
                        Hitta din stil – <span className="text-blue-200">Kvalitet för alla rum</span>
                    </h2>
                    <p className="!text-white/90 text-sm md:text-lg max-w-3xl mx-auto mb-5 md:mb-8 leading-relaxed px-4">
                        Vi gör det möjligt för alla att inreda sina hem och kontor med premiummöbler till en bråkdel av nypriset. Genom att handla från konkursbon och överskottslager hos oss får du högkvalitativa designmöbler samtidigt som vi tillsammans bidrar till en mer hållbar konsumtion.
                    </p>
                    <Link
                        href="/products"
                        className="inline-flex items-center justify-center px-8 py-3 md:px-10 md:py-4 bg-white !text-indigo-900 font-bold rounded-full text-xs md:text-base uppercase tracking-widest transition-all hover:bg-indigo-50 hover:shadow-xl hover:-translate-y-1 active:scale-95"
                    >
                        Utforska nu
                        <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                        </svg>
                    </Link>
                </div>

                {/* Info highlights - Improved for mobile */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-5 md:gap-10 pt-6 md:pt-10 border-t border-white/20">
                    <div className="flex flex-row md:flex-col items-center md:items-center text-left md:text-center gap-4 md:gap-4">
                        <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center !text-white border border-white/20 flex-shrink-0">
                            <Truck size={24} className="md:w-8 md:h-8" />
                        </div>
                        <div>
                            <h3 className="text-sm md:text-lg font-bold !text-white uppercase tracking-wide mb-1">Fri frakt</h3>
                            <p className="text-white/70 text-xs md:text-sm leading-snug">Gratis hemkörning i Stockholm och närliggande områden</p>
                        </div>
                    </div>

                    <div className="flex flex-row md:flex-col items-center md:items-center text-left md:text-center gap-4 md:gap-4">
                        <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center !text-white border border-white/20 flex-shrink-0">
                            <CheckCircle size={24} className="md:w-8 md:h-8" />
                        </div>
                        <div>
                            <h3 className="text-sm md:text-lg font-bold !text-white uppercase tracking-wide mb-1">Låga priser</h3>
                            <p className="text-white/70 text-xs md:text-sm leading-snug">Upp till 70% billigare än nypris på märkesmöbler.</p>
                        </div>
                    </div>

                    <div className="flex flex-row md:flex-col items-center md:items-center text-left md:text-center gap-4 md:gap-4">
                        <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center !text-white border border-white/20 flex-shrink-0">
                            <ShieldCheck size={24} className="md:w-8 md:h-8" />
                        </div>
                        <div>
                            <h3 className="text-sm md:text-lg font-bold !text-white uppercase tracking-wide mb-1">Kvalitetssäker</h3>
                            <p className="text-white/70 text-xs md:text-sm leading-snug">Alla varor kontrolleras och rekonditioneras av oss.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default CategoryBanner;
