const {Button:FB,Input:FInput,Select:FSelect,Dialog:FDialog,Toast:FToast}=window.OomphDesignSystem_8a1d49;
function CtaBand({onBook}){
  return <section style={{background:"var(--surface-ink)",color:"var(--text-inverse)",position:"relative",overflow:"hidden"}}>
    <svg aria-hidden="true" viewBox="0 0 600 600" style={{position:"absolute",left:"50%",top:"50%",width:"620px",height:"620px",transform:"translate(-50%,-50%)",opacity:.5,pointerEvents:"none"}}>
      <g className="ctaring"><circle cx="300" cy="300" r="285" stroke="color-mix(in oklab, var(--ember) 38%, transparent)" strokeWidth="1.5" strokeDasharray="3 12" fill="none"></circle><circle cx="300" cy="15" r="4" fill="var(--ember)"></circle></g>
      <circle cx="300" cy="300" r="218" stroke="var(--hairline-dark)" strokeWidth="1" fill="none"></circle>
    </svg>
    <div style={{position:"relative",zIndex:1,maxWidth:"var(--page-max)",margin:"0 auto",padding:"110px var(--page-pad)",display:"flex",flexDirection:"column",alignItems:"center",gap:"28px",textAlign:"center"}}>
      <Reveal><span style={{fontFamily:"var(--font-mono)",fontSize:"13px",color:"var(--ember)"}}>05</span></Reveal>
      <Reveal delay={100}><h2 style={{fontFamily:"var(--font-display)",fontWeight:400,fontSize:"var(--text-h1)",lineHeight:"var(--leading-h1)",margin:0,maxWidth:"720px"}}>Ready to find out what your brand does at full throttle?</h2></Reveal>
      <Reveal delay={220}><p style={{margin:0,fontSize:"var(--text-lead)",color:"rgba(250,246,239,.62)",maxWidth:"460px",textWrap:"pretty"}}>45 minutes with a growth lead. We come prepared with a teardown of your current funnel.</p></Reveal>
      <Reveal delay={340} style={{display:"flex",gap:"14px",flexWrap:"wrap",justifyContent:"center"}}>
        <Magnet><FB size="lg" variant="ember" onClick={onBook}>Book a strategy call</FB></Magnet>
        <Magnet><FB size="lg" variant="inverse" href="#process">How we engage →</FB></Magnet>
      </Reveal>
    </div>
  </section>;
}
function CityClock({city,tz}){
  const fmt=()=>{try{return new Intl.DateTimeFormat("en-GB",{hour:"2-digit",minute:"2-digit",timeZone:tz}).format(new Date());}catch(e){return"";}};
  const [t,setT]=React.useState(fmt);
  React.useEffect(()=>{const id=setInterval(()=>setT(fmt()),30000);return()=>clearInterval(id);},[]);
  return <span>{city} {t}</span>;
}
function Footer(){
  const col={display:"flex",flexDirection:"column",gap:"12px"};
  const lnk={fontSize:"14px",color:"var(--ink-2)",textDecoration:"none"};
  const head={fontSize:"var(--text-label)",letterSpacing:"var(--tracking-label)",textTransform:"uppercase",fontWeight:600,color:"var(--ink-3)"};
  return <footer style={{borderTop:"1px solid var(--hairline)"}}>
    <div style={{maxWidth:"var(--page-max)",margin:"0 auto",padding:"64px var(--page-pad) 40px"}}>
      <div style={{display:"grid",gridTemplateColumns:"2fr 1fr 1fr",gap:"32px"}}>
        <div style={{display:"flex",flexDirection:"column",gap:"16px"}}>
          <Wordmark size={22}/>
          <p style={{margin:0,fontSize:"13.5px",color:"var(--ink-2)",maxWidth:"280px",textWrap:"pretty"}}>The embedded commercial partner for emerging luxury, beauty and niche brands.</p>
        </div>
        <div style={col}><span style={head}>Studio</span><a style={lnk} href="#model">The model</a><a style={lnk} href="#channels">Channels</a><a style={lnk} href="#process">How we engage</a></div>
        <div style={col}><span style={head}>Contact</span><a style={lnk} href="mailto:hello@oomph.studio">hello@oomph.studio</a></div>
      </div>
      <div style={{display:"flex",justifyContent:"space-between",gap:"24px",borderTop:"1px solid var(--hairline)",marginTop:"48px",paddingTop:"20px",fontFamily:"var(--font-mono)",fontSize:"11.5px",color:"var(--ink-3)"}}>
        <span>© 2026 Oomph Studio</span>
        <span style={{display:"flex",gap:"18px"}}><CityClock city="London" tz="Europe/London"/><CityClock city="Dubai" tz="Asia/Dubai"/></span>
      </div>
    </div>
  </footer>;
}
function BookingDialog({open,onClose,onSent}){
  return <FDialog open={open} title="Book a strategy call" onClose={onClose}
    actions={<React.Fragment><FB variant="ghost" onClick={onClose}>Cancel</FB><FB onClick={onSent}>Send brief</FB></React.Fragment>}>
    <div style={{display:"flex",flexDirection:"column",gap:"16px",marginTop:"4px"}}>
      <FInput label="Work email" placeholder="you@brand.com"/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"16px"}}>
        <FSelect label="Category" options={["Beauty","Fragrance","Skincare","Wellness","Other"]}/>
        <FInput label="Monthly ad spend" placeholder="$50,000"/>
      </div>
      <FInput label="Where do you want to grow?" multiline hint="A few sentences is plenty"/>
    </div>
  </FDialog>;
}
function ToastHost({toast,onDismiss}){
  if(!toast)return null;
  return <div style={{position:"fixed",bottom:"28px",left:"50%",transform:"translateX(-50%)",zIndex:200}}>
    <FToast tone="moss" onDismiss={onDismiss}>{toast}</FToast>
  </div>;
}
Object.assign(window,{CtaBand,Footer,BookingDialog,ToastHost});