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

const Partners = () => (
    <Section className="min-h-screen px-4 sm:px-8 md:px-16 bg-white border-b border-black/[0.03] flex flex-col justify-between py-16 sm:py-20 md:py-24 relative overflow-hidden">
        <div className="max-w-7xl w-full">
            <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black mb-8 sm:mb-12">Our Studio</h2>
            <div className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-16 lg:gap-20 items-start md:items-end">
                <h3 className="md:col-span-7 text-3xl sm:text-4xl md:text-7xl font-display font-medium leading-[1.05] md:leading-tight text-black tracking-tighter">
                    A collective of designers, thinkers, and dreamers.
                </h3>
                <div className="md:col-span-5">
                    <p className="text-lg sm:text-xl md:text-2xl opacity-40 leading-relaxed font-light text-black max-w-xl pb-2">
                        We operate at the intersection of strategy and design. From early-stage startups to global enterprises, we help brands move through the digital world with clarity and purpose.
                    </p>
                </div>
            </div>
        </div>

        <JourneysInLogos wrapperClassName="w-full mt-16 sm:mt-24 md:mt-32" />
    </Section>
);

window.Partners = Partners;