const Section = window.Section;

const Services = () => (
    <Section id="studio" className="min-h-screen md:h-screen md:max-h-none px-4 sm:px-8 md:px-16 bg-white border-y border-black/[0.03] flex flex-col py-10 md:py-0">
        <div className="pt-8 sm:pt-16 md:pt-24 pb-8 sm:pb-10 md:pb-12 flex justify-start shrink-0">
            <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black">Our Craft</h2>
        </div>
        <div className="flex-1 grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(22rem,1fr))] lg:grid-cols-[repeat(auto-fit,minmax(24rem,1fr))] gap-6 md:gap-8 w-full pb-10 md:pb-8 min-h-0">
            <div className="group border border-black/[0.05] px-6 sm:px-10 pt-10 pb-6 md:px-20 md:pt-20 md:pb-10 flex flex-col justify-end min-h-[22rem] md:min-h-0 md:h-full rounded-lg transition-all duration-700 hover:border-black/20 relative overflow-hidden">
                <div className="mb-8 sm:mb-12 transition-opacity duration-500 group-hover:opacity-0">
                    <h3 className="text-[clamp(2rem,3.8vw,4.5rem)] font-display font-medium mb-6 sm:mb-10 text-black leading-[1.02] text-left">Product UX & <br className="hidden md:block" /> Visual Design</h3>
                    <p className="text-[clamp(1.05rem,1.25vw,1.5rem)] opacity-40 leading-relaxed font-light text-black max-w-xl text-left">
                        For a combined 14+ years, we have designed products that feel as good as they look.
                    </p>
                </div>
                
                <div className="absolute inset-0 px-6 sm:px-10 pt-10 pb-6 md:px-20 md:pt-20 md:pb-10 flex flex-col justify-start pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p className="text-[clamp(1.6rem,3.2vw,3.5rem)] font-display font-medium opacity-30 leading-[1.05] text-black max-w-5xl">
                        Every interaction & pixel is crafted with usability and intention, turning complexity into experiences users love.
                    </p>
                </div>

                <div className="flex justify-between items-center pt-8 border-t border-transparent transition-colors duration-500 group-hover:border-black/[0.03]">
                    <span className="text-[10px] uppercase tracking-[0.2em] opacity-0 font-medium transition-opacity duration-500 group-hover:opacity-30">01 — Digital Product</span>
                    <a 
                        href="mailto:sedemoasis@gmail.com"
                        className="px-5 py-2.5 rounded-lg border border-black/[0.07] text-black text-[11px] font-medium tracking-wider opacity-0 group-hover:opacity-100 transition-all duration-700 translate-y-2 group-hover:translate-y-0 hover:bg-black/[0.07] active:bg-black/[0.15] active:scale-95 focus:outline-none focus:ring-2 focus:ring-black/5 pointer-events-auto"
                    >
                        contact for pricing
                    </a>
                </div>
            </div>
            <div className="group border border-black/[0.05] px-6 sm:px-10 pt-10 pb-6 md:px-20 md:pt-20 md:pb-10 flex flex-col justify-end min-h-[22rem] md:min-h-0 md:h-full rounded-lg transition-all duration-700 hover:border-black/20 relative overflow-hidden">
                <div className="mb-8 sm:mb-12 transition-opacity duration-500 group-hover:opacity-0">
                    <h3 className="text-[clamp(2rem,3.8vw,4.5rem)] font-display font-medium mb-6 sm:mb-10 text-black leading-[1.02] text-left">Brand Identity <br className="hidden md:block" /> & Strategy</h3>
                    <p className="text-[clamp(1.05rem,1.25vw,1.5rem)] opacity-40 leading-relaxed font-light text-black max-w-xl text-left">
                        We give your brand a voice, a look, and a direction that lasts long and connects with your audience.
                    </p>
                </div>

                <div className="absolute inset-0 px-6 sm:px-10 pt-10 pb-6 md:px-20 md:pt-20 md:pb-10 flex flex-col justify-start pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    <p className="text-[clamp(1.6rem,3.2vw,3.5rem)] font-display font-medium opacity-30 leading-[1.05] text-black max-w-5xl text-left">
                        Your brand is more than a logo. We build complete identities rooted in strategy, from visual language to positioning. 
                    </p>
                </div>

                <div className="flex justify-between items-center pt-8 border-t border-transparent transition-colors duration-500 group-hover:border-black/[0.03]">
                    <span className="text-[10px] uppercase tracking-[0.2em] opacity-0 font-medium transition-opacity duration-500 group-hover:opacity-30">02 — Strategy & Brand</span>
                    <a 
                        href="mailto:sedemoasis@gmail.com"
                        className="px-5 py-2.5 rounded-lg border border-black/[0.07] text-black text-[11px] font-medium tracking-wider opacity-0 group-hover:opacity-100 transition-all duration-700 translate-y-2 group-hover:translate-y-0 hover:bg-black/[0.07] active:bg-black/[0.15] active:scale-95 focus:outline-none focus:ring-2 focus:ring-black/5 pointer-events-auto"
                    >
                        contact for pricing
                    </a>
                </div>
            </div>
        </div>
    </Section>
);

window.Services = Services;