const Offer = () => {
    const items = [
        "Revisamos tu situación inicial de forma personalizada.",
        "Te explicamos con claridad los posibles caminos laborales.",
        "Evaluamos si puedes encajar en el sector de las residencias.",
        "Te informamos sobre formación habilitante y becas disponibles.",
        "Acompañamiento constante por parte de nuestro equipo experto."
    ];

    return (
        <section className="py-40 relative overflow-hidden mx-6">
            <div className="absolute inset-0 bg-atu-blue-deep rounded-[5rem] overflow-hidden">
                {/* Creative background accents */}
                <div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(#2440CF_1px,transparent_1px)] [background-size:40px_40px] opacity-10"></div>
                <div className="absolute -top-24 -right-24 w-96 h-96 bg-atu-blue-vibrant rounded-full blur-[120px] opacity-20"></div>
                <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-atu-blue-bright rounded-full blur-[120px] opacity-20"></div>
            </div>
                      <div className="container mx-auto px-10 relative z-20">
                <div className="grid lg:grid-cols-12 gap-16 xl:gap-24 items-center">
                    <div className="lg:col-span-7 reveal-on-scroll z-30">
                        <div className="inline-block px-4 py-1.5 bg-white/10 backdrop-blur-md rounded-full mb-8 border border-white/10">
                            <p className="text-[10px] font-black text-atu-blue-bright uppercase tracking-[0.3em]">Ventajas Exclusivas</p>
                        </div>
                        <h2 className="text-6xl md:text-8xl font-black text-white mb-12 leading-[0.9] tracking-tighter">
                            Lo que <br />
                            <span className="text-gradient italic relative inline-block">
                                te ofrecemos
                                <svg className="absolute -bottom-2 left-0 w-full h-4 text-atu-blue-bright/50" viewBox="0 0 200 20" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 15 Q 50 5 100 15 T 200 15" stroke="currentColor" strokeWidth="8" fill="none" strokeLinecap="round" />
                                </svg>
                            </span>
                        </h2>
                        <div className="space-y-10">
                            {items.map((item, idx) => (
                                <div key={idx} className="flex gap-8 items-start group">
                                    <div className="mt-1 flex-shrink-0 w-10 h-10 bg-white/10 backdrop-blur-md text-white rounded-2xl flex items-center justify-center border border-white/20 group-hover:bg-atu-blue-bright group-hover:border-atu-blue-bright transition-all duration-500 group-hover:scale-110 group-hover:rotate-12">
                                        <Icon name="check" className="w-6 h-6" />
                                    </div>
                                    <p className="text-2xl text-white/80 font-medium group-hover:text-white transition-colors leading-snug">{item}</p>
                                </div>
                            ))}
                        </div>
                        <div className="mt-20">
                            <a href="#form-section" className="inline-flex items-center gap-4 px-12 py-6 bg-white text-atu-blue-deep rounded-[2.5rem] font-black hover:bg-atu-blue-bright hover:text-white transition-all group shadow-2xl hover:scale-105 active:scale-95 text-xl">
                                Solicitar mi plaza gratuita
                                <Icon name="arrow-right" className="w-7 h-7 group-hover:translate-x-2 transition-transform" />
                            </a>
                        </div>
                    </div>
                    
                    <div className="lg:col-span-5 relative reveal-on-scroll hidden lg:block" style={{ transitionDelay: '300ms' }}>
                        <div className="relative z-10 rounded-[4.5rem] overflow-hidden shadow-[0_40px_100px_rgba(0,0,0,0.4)] border-[16px] border-white/5 aspect-[4/5] premium-card">
                            <img 
                                src="https://images.unsplash.com/photo-1516733725897-1aa73b87c8e8?auto=format&fit=crop&q=80&w=1000" 
                                alt="Equipo de trabajo premium" 
                                className="w-full h-full object-cover"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-atu-blue-deep/80 via-transparent to-transparent"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};