const Section = window.Section;

const Hero = () => (
    <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="max-w-7xl w-full mb-16 sm:mb-24 md:mb-32">
            <h1 className="text-[clamp(2rem,9vw,5.625rem)] sm:text-5xl md:text-[90px] font-display font-medium leading-[0.92] sm:leading-[0.9] tracking-tighter mb-8 sm:mb-10 md:mb-12">
                I am sedem oasis.<br />
                <span className="opacity-10">The creative studio for your brand.</span>
            </h1>
            <p className="text-base sm:text-lg md:text-xl max-w-2xl leading-relaxed opacity-40 font-light">
                We lead with strategic foresight, innovation and usability to craft intuitive products that move brands forward.
            </p>
        </div>
        <div className="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-end pb-8 sm:pb-12 pt-6 sm:pt-10">
            <div className="text-[10px] opacity-50 uppercase tracking-[0.2em] font-medium max-w-[20rem] sm:max-w-none leading-relaxed">New York — Toronto — San Francisco</div>
            <div className="text-[10px] opacity-50 uppercase tracking-[0.2em] font-medium animate-pulse shrink-0">Scroll to explore</div>
        </div>
    </Section>
);

window.Hero = Hero;