const {Button}=window.OomphDesignSystem_8a1d49;
function Wordmark({inverse=false,size=26}){
  return <a href="#top" style={{display:"flex",alignItems:"center",gap:"10px",textDecoration:"none",color:inverse?"var(--paper-1)":"var(--ink-1)"}}>
    <svg viewBox="0 0 104 64" fill="none" style={{width:size*1.55,flex:"none"}}><circle cx="30" cy="32" r="24" stroke="currentColor" strokeWidth="9"/><circle cx="66" cy="32" r="24" stroke="var(--ember)" strokeWidth="9"/></svg>
    <span style={{fontFamily:"var(--font-display)",fontSize:size,lineHeight:1}}>Oomph</span>
    <span style={{fontSize:size*.42,letterSpacing:".32em",fontWeight:600,marginTop:"2px"}}>STUDIO</span>
  </a>;
}
function Nav({onBook}){
  const [sc,setSc]=React.useState(false);
  React.useEffect(()=>{
    const on=()=>setSc(window.scrollY>10);
    on();window.addEventListener("scroll",on,{passive:true});
    return()=>window.removeEventListener("scroll",on);
  },[]);
  return <nav style={{position:"sticky",top:0,zIndex:40,background:sc?"rgba(250,246,239,.8)":"rgba(250,246,239,0)",backdropFilter:sc?"blur(16px) saturate(1.15)":"none",WebkitBackdropFilter:sc?"blur(16px) saturate(1.15)":"none",borderBottom:"1px solid "+(sc?"var(--hairline)":"transparent"),transition:"background .4s var(--ease-out),border-color .4s var(--ease-out)"}}>
    <div style={{maxWidth:"var(--page-max)",margin:"0 auto",padding:"0 var(--page-pad)",height:"68px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:"24px"}}>
      <Wordmark/>
      <div style={{display:"flex",alignItems:"center",gap:"28px"}}>
        {[["The model","#model"],["Channels","#channels"],["How we engage","#process"]].map(([t,h])=>
          <a key={t} className="nlink" href={h}>{t}</a>)}
        <Button size="sm" onClick={onBook}>Book a call</Button>
      </div>
    </div>
  </nav>;
}
function Eyebrow({children,ember=true,style}){
  return <div style={{fontSize:"var(--text-label)",letterSpacing:"var(--tracking-label)",textTransform:"uppercase",fontWeight:600,color:ember?"var(--ember)":"var(--ink-3)",...style}}>{children}</div>;
}
function SectionHead({index,title,children,inverse=false,style}){
  return <div style={{display:"flex",flexDirection:"column",gap:"16px",maxWidth:"640px",...style}}>
    <div style={{display:"flex",alignItems:"baseline",gap:"14px"}}>
      <span style={{fontFamily:"var(--font-mono)",fontSize:"13px",color:"var(--ember)"}}>{index}</span>
      <Eyebrow ember={false} style={inverse?{color:"var(--hairline-dark)"}:null}>{title}</Eyebrow>
    </div>
    <h2 style={{fontFamily:"var(--font-display)",fontSize:"var(--text-h2)",lineHeight:"var(--leading-h2)",fontWeight:400,margin:0,color:inverse?"var(--paper-1)":"var(--ink-1)"}}>{children}</h2>
  </div>;
}
Object.assign(window,{Wordmark,Nav,Eyebrow,SectionHead});