const {Button:HB}=window.OomphDesignSystem_8a1d49;
function Hero({onBook}){
  return <header style={{position:"relative"}}>
    <div className="heroGrid" style={{maxWidth:"var(--page-max)",margin:"0 auto",padding:"56px var(--page-pad) 40px",minHeight:"calc(92vh - 68px)",display:"grid",gridTemplateColumns:"minmax(460px,1fr) minmax(400px,540px)",alignItems:"center",gap:"48px",boxSizing:"border-box"}}>
      <div>
        <Reveal delay={0}><Eyebrow>Growth · Commerce · Performance</Eyebrow></Reveal>
        <h1 style={{fontFamily:"var(--font-display)",fontWeight:400,fontSize:"var(--text-hero)",lineHeight:"var(--leading-hero)",letterSpacing:"var(--tracking-display)",margin:"22px 0 0"}}>
          <Words text="Brands don't need another agency. They need oomph." start={120} step={75}/>
        </h1>
        <Reveal delay={550}><p style={{fontSize:"var(--text-lead)",lineHeight:"var(--leading-lead)",color:"var(--ink-2)",maxWidth:"480px",margin:"28px 0 0",textWrap:"pretty"}}>
          We are the embedded commercial partner behind emerging luxury and beauty brands. One operating model spanning brand, demand and commerce.
        </p></Reveal>
        <Reveal delay={700} style={{display:"flex",gap:"14px",marginTop:"36px",flexWrap:"wrap"}}>
          <Magnet><HB size="lg" onClick={onBook}>Book a strategy call</HB></Magnet>
          <Magnet><HB size="lg" variant="ghost" href="#model">See the model →</HB></Magnet>
        </Reveal>
        <Reveal delay={900} style={{display:"flex",alignItems:"center",gap:"14px",marginTop:"72px"}}>
          <span style={{fontFamily:"var(--font-mono)",fontSize:"11px",letterSpacing:".18em",color:"var(--ink-3)"}}>SCROLL</span>
          <span className="scue"></span>
        </Reveal>
      </div>
      <Reveal delay={300} className="heroOrbit"><OrbitSystem/></Reveal>
    </div>
    <Ticker/>
  </header>;
}
const TICK_ITEMS=["Brand strategy","Creative production","Meta advertising","Google Ads","TikTok Shop","Influencer & affiliate","Email & SMS","CRO","Marketplaces","Inventory planning","Commercial intelligence"];
function TickRow(){
  return <div className="tickrow" aria-hidden="true">{TICK_ITEMS.map((x,i)=><React.Fragment key={i}><span>{x}</span><span style={{color:"var(--ember)"}}>·</span></React.Fragment>)}</div>;
}
function Ticker(){
  return <div className="tick" style={{borderTop:"1px solid var(--hairline)",borderBottom:"1px solid var(--hairline)",overflow:"hidden",display:"flex",fontFamily:"var(--font-mono)",fontSize:"12px",letterSpacing:".14em",textTransform:"uppercase",color:"var(--ink-2)",whiteSpace:"nowrap"}}>
    <TickRow/><TickRow/>
  </div>;
}
Object.assign(window,{Hero,Ticker});