const Section = ({ image, title, children, reverse, dark }) => (
    <section className={`py-20 md:py-32 overflow-hidden ${dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-800'}`}>
        <div className="max-w-7xl mx-auto px-6">
            <div className={`flex flex-col md:flex-row items-center gap-12 md:gap-20 ${reverse ? 'md:flex-row-reverse' : ''}`}>

                {/* Image Side */}
                <div className="w-full md:w-1/2 relative group">
                    <div className={`absolute inset-0 bg-brand-primary/10 transform translate-x-4 translate-y-4 rounded-3xl -z-10 transition-transform duration-500 group-hover:translate-x-6 group-hover:translate-y-6 ${dark ? 'opacity-20' : ''}`}></div>
                    <div className="rounded-3xl overflow-hidden shadow-2xl h-[400px] md:h-[500px]">
                        <img
                            src={image}
                            alt={title}
                            className="w-full h-full object-cover transform hover:scale-110 transition-transform duration-700"
                        />
                    </div>
                </div>

                {/* Content Side */}
                <div className="w-full md:w-1/2">
                    <h2 className={`text-3xl md:text-5xl font-bold mb-8 leading-tight ${dark ? 'text-white' : 'text-slate-800'}`}>
                        {title}
                    </h2>
                    <div className={`text-lg leading-relaxed ${dark ? 'text-slate-400' : 'text-slate-600'}`}>
                        {children}
                    </div>
                </div>

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

window.App.Components.Section = Section;