const Section = window.Section;
const JourneysInLogos = window.JourneysInLogos;

const Studio = () => (
    <div className="bg-white">
        {/* Section 1: About Us */}
        <Section className="min-h-[100svh] min-h-screen px-4 sm:px-8 md:px-16 flex flex-col justify-end pb-[max(1.5rem,env(safe-area-inset-bottom,0px))]">
            <div className="w-full mb-12 sm:mb-16">
                <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black mb-8 sm:mb-12">About Us</h2>
                <h3 className="text-[clamp(2rem,8vw,5.625rem)] sm:text-5xl md:text-[90px] font-display font-medium leading-[0.92] sm:leading-[0.9] text-black tracking-tighter mb-8 sm:mb-12">
                    We are architects<br />
                    <span className="opacity-10">of a digital renaissance.</span>
                </h3>
                <p className="text-base sm:text-lg md:text-xl max-w-2xl leading-relaxed opacity-40 font-light text-black">
                    Sedem Oasis is a New York-born creative studio operating at the intersection of strategy, design, and technology.<br />
                    <span className="block mt-4">We are a collective of designers, thinkers, and dreamers helping early stage startups and global enterprises craft the experiences, identities, and products that define their next chapter.</span>
                </p>
            </div>
            <div className="flex flex-col sm:flex-row sm:justify-between sm:items-end gap-4 pb-8 sm:pb-12 pt-6 sm:pt-10">
                <div className="text-[10px] opacity-50 uppercase tracking-[0.2em] font-medium text-black max-w-[20rem] sm:max-w-none leading-relaxed">New York — Toronto — San Francisco</div>
            </div>
        </Section>

        {/* Section 2: Our Capabilities */}
        <Section className="min-h-screen md:h-screen px-4 sm:px-8 md:px-16 flex flex-col justify-start md:justify-center border-t border-black/[0.03] py-16 md:py-0">
            <div className="w-full">
                <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black mb-10 sm:mb-14 md:mb-16">Our Capabilities</h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-[repeat(auto-fit,minmax(18rem,1fr))] lg:grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-5 sm:gap-6 md:gap-8">
                    {/* 01: Product Design */}
                    <div className="group border border-black/[0.05] p-8 sm:p-10 md:p-12 rounded-lg transition-all duration-700 hover:border-black/20 min-h-[20rem] sm:min-h-[22rem] md:h-[450px] md:min-h-0 flex flex-col justify-between">
                        <h4 className="text-[clamp(1.6rem,2.4vw,3rem)] font-display font-medium text-black leading-[0.98]">UX Design</h4>
                        
                        <div className="space-y-8">
                            <p className="text-[clamp(0.95rem,1.05vw,1.125rem)] leading-relaxed font-light text-black">
                                We transform complex problems into seamless experiences; designing the moments that keep users coming back
                            </p>
                            <div className="pt-8 border-t border-black/[0.03] flex justify-between items-center">
                                <span className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-30">01</span>
                                <span className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-30">Experience</span>
                            </div>
                        </div>
                    </div>

                    {/* 02: Visual Design */}
                    <div className="group border border-black/[0.05] p-8 sm:p-10 md:p-12 rounded-lg transition-all duration-700 hover:border-black/20 min-h-[20rem] sm:min-h-[22rem] md:h-[450px] md:min-h-0 flex flex-col justify-between">
                        <h4 className="text-[clamp(1.6rem,2.4vw,3rem)] font-display font-medium text-black leading-[0.98]">Visual Design</h4>
                        
                        <div className="space-y-8">
                            <p className="text-[clamp(0.95rem,1.05vw,1.125rem)] leading-relaxed font-light text-black">
                                Every detail is deliberate. We craft visual languages that command attention and build lasting brand equity.
                            </p>
                            <div className="pt-8 border-t border-black/[0.03] flex justify-between items-center">
                                <span className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-30">02</span>
                                <span className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-30">Aesthetic</span>
                            </div>
                        </div>
                    </div>

                    {/* 03: Strategy */}
                    <div className="group border border-black/[0.05] p-8 sm:p-10 md:p-12 rounded-lg transition-all duration-700 hover:border-black/20 min-h-[20rem] sm:min-h-[22rem] md:h-[450px] md:min-h-0 flex flex-col justify-between">
                        <h4 className="text-[clamp(1.6rem,2.4vw,3rem)] font-display font-medium text-black leading-[0.98]">Strategy</h4>
                        
                        <div className="space-y-8">
                            <p className="text-[clamp(0.95rem,1.05vw,1.125rem)] leading-relaxed font-light text-black">
                                We cut through noise with research-backed positioning; giving your product a clear, defensible place in the market.
                            </p>
                            <div className="pt-8 border-t border-black/[0.03] flex justify-between items-center">
                                <span className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-30">03</span>
                                <span className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-30">Foresight</span>
                            </div>
                        </div>
                    </div>

                    {/* 04: Brand */}
                    <div className="group border border-black/[0.05] p-8 sm:p-10 md:p-12 rounded-lg transition-all duration-700 hover:border-black/20 min-h-[20rem] sm:min-h-[22rem] md:h-[450px] md:min-h-0 flex flex-col justify-between">
                        <h4 className="text-[clamp(1.6rem,2.4vw,3rem)] font-display font-medium text-black leading-[0.98]">Brand</h4>
                        
                        <div className="space-y-8">
                            <p className="text-[clamp(0.95rem,1.05vw,1.125rem)] leading-relaxed font-light text-black">
                                Identity is more than a mark. We build cohesive systems; visual and verbal, that make your brand impossible to ignore.
                            </p>
                            <div className="pt-8 border-t border-black/[0.03] flex justify-between items-center">
                                <span className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-30">04</span>
                                <span className="text-[10px] uppercase tracking-[0.2em] font-medium text-black opacity-30">Identity</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Section>

        {/* Section 3: Our Services */}
        <Section className="min-h-screen md:h-screen px-4 sm:px-8 md:px-16 flex flex-col justify-start md:justify-center border-t border-black/[0.03] py-16 md:py-0">
            <div className="w-full">
                <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black mb-10 sm:mb-14 md:mb-16">Our Services</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 lg:gap-x-16 xl:gap-x-32 gap-y-12 md:gap-y-16">
                    {/* Design Pillar */}
                    <div className="space-y-10">
                        <div className="border-b border-black/[0.05] pb-4">
                            <h3 className="text-[16px] tracking-tight opacity-50 font-medium text-black">Design</h3>
                        </div>
                        <ul className="space-y-4">
                            {[
                                { name: "UX & UI design", info: "Interfaces" },
                                { name: "Product concepting", info: "MVP / Strategy" },
                                { name: "Rapid prototyping", info: "Validation" },
                                { name: "Design systems", info: "Scalability" },
                                { name: "Information architecture", info: "Structure" },
                                { name: "User Research & Testing", info: "Insights" }
                            ].map((service) => (
                                <li key={service.name} className="group flex flex-col sm:flex-row sm:justify-between sm:items-baseline gap-1 sm:gap-0 py-2 sm:py-1">
                                    <span className="text-xl sm:text-2xl md:text-4xl font-display font-medium text-black tracking-tighter block cursor-default transition-opacity duration-500 group-hover:opacity-20">
                                        {service.name}
                                    </span>
                                    <span className="text-[10px] uppercase tracking-[0.2em] opacity-60 sm:opacity-0 group-hover:opacity-100 transition-all duration-500 sm:translate-x-2 sm:group-hover:translate-x-0 font-medium text-black text-left sm:text-right sm:pl-4">
                                        {service.info}
                                    </span>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Brand Strategy Pillar */}
                    <div className="space-y-10">
                        <div className="border-b border-black/[0.05] pb-4">
                            <h3 className="text-[16px] tracking-tight opacity-50 font-medium text-black">Brand</h3>
                        </div>
                        <ul className="space-y-4">
                            {[
                                { name: "Brand identity", info: "Visual Voice" },
                                { name: "Logo & Visual Language", info: "Identity" },
                                { name: "Brand Guidelines", info: "Systems" },
                                { name: "Tone of Voice & Messaging", info: "Verbal" },
                                { name: "Campaign Creative", info: "Direction" },
                                { name: "Art Direction", info: "Curation" }
                            ].map((service) => (
                                <li key={service.name} className="group flex flex-col sm:flex-row sm:justify-between sm:items-baseline gap-1 sm:gap-0 py-2 sm:py-1">
                                    <span className="text-xl sm:text-2xl md:text-4xl font-display font-medium text-black tracking-tighter block cursor-default transition-opacity duration-500 group-hover:opacity-20">
                                        {service.name}
                                    </span>
                                    <span className="text-[10px] uppercase tracking-[0.2em] opacity-60 sm:opacity-0 group-hover:opacity-100 transition-all duration-500 sm:translate-x-2 sm:group-hover:translate-x-0 font-medium text-black text-left sm:text-right sm:pl-4">
                                        {service.info}
                                    </span>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </div>
        </Section>

        {/* Section 4: JourneysInLogos */}
        <Section className="py-16 sm:py-24 md:py-32 px-4 sm:px-8 md:px-16 border-t border-black/[0.03] relative overflow-hidden">
             <JourneysInLogos wrapperClassName="w-full" />
        </Section>
    </div>
);

window.Studio = Studio;