const {Card:SCard}=window.OomphDesignSystem_8a1d49;
const wrap={maxWidth:"var(--page-max)",margin:"0 auto",padding:"96px var(--page-pad)"};
function ModelSection(){
  const cols=[
    ["Brand","Strategy, positioning and creative production built for the feeds your customers actually live in.",["Brand strategy","Creative production","Content amplification"]],
    ["Demand","Full funnel acquisition, run in house across every paid and owned channel.",["Meta & Google Ads","TikTok Shop & creators","Influencer & affiliate","Email & SMS","CRO & retargeting"]],
    ["Commerce","The operational spine: storefronts, marketplaces, inventory and the numbers behind them.",["Ecommerce operations","Marketplace management","Inventory planning","Commercial intelligence"]],
  ];
  return <section id="model" style={{borderTop:"1px solid var(--hairline)"}}>
    <div style={wrap}>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-end",gap:"32px",flexWrap:"wrap"}}>
        <Reveal><SectionHead index="01" title="The model">One accountable partner, from first impression to repeat purchase.</SectionHead></Reveal>
        <Reveal delay={140}><p style={{fontSize:"15px",color:"var(--ink-2)",maxWidth:"340px",margin:0,textWrap:"pretty"}}>Not a traditional agency. We embed inside your commercial operation and align our economics with your growth.</p></Reveal>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:"20px",marginTop:"48px"}}>
        {cols.map(([t,d,items],i)=><Reveal key={t} delay={i*110}><div className="mcard" style={{height:"100%"}}><SCard pad="28px" style={{display:"flex",flexDirection:"column",gap:"14px",height:"100%",boxSizing:"border-box"}}>
          <span style={{fontFamily:"var(--font-mono)",fontSize:"12px",color:"var(--ember)"}}>{"0"+(i+1)}</span>
          <h3 style={{fontFamily:"var(--font-display)",fontSize:"var(--text-h3)",fontWeight:400,margin:0}}>{t}</h3>
          <p style={{margin:0,fontSize:"14.5px",color:"var(--ink-2)",textWrap:"pretty"}}>{d}</p>
          <div style={{display:"flex",flexDirection:"column",gap:0,marginTop:"6px"}}>
            {items.map(x=><span key={x} style={{fontSize:"13.5px",padding:"9px 0",borderTop:"1px solid var(--hairline)"}}>{x}</span>)}
          </div>
        </SCard></div></Reveal>)}
      </div>
    </div>
  </section>;
}
function ChannelsSection(){
  const rows=[
    ["Meta advertising","Prospecting, retargeting and creative testing at scale","Paid social"],
    ["Google Ads","Search, Shopping and PMax defence of brand demand","Paid search"],
    ["TikTok Shop","Shop operations and Creator Marketplace programs","Social commerce"],
    ["Influencer & affiliate","Seeded, paid and commission programs","Earned & paid"],
    ["Email & SMS","Lifecycle flows, campaigns and retention segments","Retention"],
    ["CRO","Landing pages, PDP testing and checkout optimisation","Experimentation"],
  ];
  return <section id="channels" style={{background:"var(--surface-ink)",color:"var(--text-inverse)"}}>
    <div style={wrap}>
      <Reveal><SectionHead index="02" title="Channels" inverse>The full journey, run in one place.</SectionHead></Reveal>
      <div style={{marginTop:"48px"}}>
        {rows.map(([c,d,tag],i)=><Reveal key={c} delay={i*70} className="chrow" style={{display:"grid",gridTemplateColumns:"minmax(220px,260px) 1fr auto",gap:"24px",alignItems:"baseline",padding:"20px 0",borderTop:"1px solid var(--hairline-dark)"}}>
          <span className="chname" style={{fontFamily:"var(--font-display)",fontSize:"19px",transition:"color .35s var(--ease-out),transform .35s var(--e-rev)",display:"inline-block"}}>{c}</span>
          <span style={{fontSize:"14px",color:"rgba(250,246,239,.62)"}}>{d}</span>
          <span style={{fontFamily:"var(--font-mono)",fontSize:"11px",letterSpacing:".16em",textTransform:"uppercase",color:"var(--ember)"}}>{tag}</span>
        </Reveal>)}
      </div>
      <Reveal delay={200}><p style={{marginTop:"28px",fontSize:"13px",color:"rgba(250,246,239,.45)"}}>Online and digital commerce only, from awareness to conversion, repeat purchase and international expansion.</p></Reveal>
    </div>
  </section>;
}
function Manifesto(){
  return <section id="difference" style={{borderTop:"1px solid var(--hairline)"}}>
    <div style={{maxWidth:"var(--page-max)",margin:"0 auto",padding:"140px var(--page-pad)",display:"flex",flexDirection:"column",alignItems:"center",gap:"28px",textAlign:"center"}}>
      <Reveal style={{display:"flex",alignItems:"baseline",gap:"14px",justifyContent:"center"}}>
        <span style={{fontFamily:"var(--font-mono)",fontSize:"13px",color:"var(--ember)"}}>03</span>
        <Eyebrow ember={false}>The difference</Eyebrow>
      </Reveal>
      <Scrub style={{fontFamily:"var(--font-display)",fontWeight:400,fontSize:"clamp(28px,3.2vw,42px)",lineHeight:1.35,maxWidth:"880px",margin:0,textWrap:"pretty"}}
        text="Most agencies sell hours. We sell growth. Strategy, creative, media and operations work as one team inside your business, accountable to one plan and one number. No handoffs, no finger pointing, no decks about decks. When every decision answers to the same outcome, growth stops being a campaign and becomes a habit."/>
    </div>
  </section>;
}
function ProcessSection(){
  const steps=[
    ["Audit","A commercial teardown of your funnel, unit economics and channel mix. Two weeks, no obligation."],
    ["Plan","One growth plan across brand, demand and commerce, with the targets we sign up to."],
    ["Operate","Our team embeds in yours. Creative, media, storefronts and inventory run as one system."],
    ["Scale","New channels and new markets, sequenced by contribution margin, not vanity reach."],
  ];
  return <section id="process" style={{borderTop:"1px solid var(--hairline)",background:"var(--paper-2)"}}>
    <div style={wrap}>
      <Reveal><SectionHead index="04" title="How we engage">Four steps from brief to embedded.</SectionHead></Reveal>
      <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:"20px",marginTop:"48px"}}>
        {steps.map(([t,d],i)=><Reveal key={t} delay={i*110} className="pstep" style={{display:"flex",flexDirection:"column",gap:"12px",borderTop:"1px solid var(--ink-1)",paddingTop:"16px"}}>
          <span style={{fontFamily:"var(--font-mono)",fontSize:"13px",color:"var(--ember)"}}>{"0"+(i+1)}</span>
          <span style={{fontFamily:"var(--font-display)",fontSize:"22px"}}>{t}</span>
          <p style={{margin:0,fontSize:"14px",color:"var(--ink-2)",textWrap:"pretty"}}>{d}</p>
        </Reveal>)}
      </div>
    </div>
  </section>;
}
Object.assign(window,{ModelSection,ChannelsSection,Manifesto,ProcessSection});