function Hero({ variant = "imageOverlay" }) {
  if (variant === "typeLed") return <HeroTypeLed />;
  if (variant === "splitFounder") return <HeroSplitFounder />;
  return <HeroImageOverlay />;
}

function HeroImageOverlay() {
  return (
    <section id="top" style={{position:'relative', minHeight:'88vh', display:'flex', alignItems:'stretch', background:'var(--ivory)'}}>
      <div style={{position:'absolute', inset:0, overflow:'hidden'}}>
        <ImgPh label="editorial hero photo — women in conversation, natural light" aspect="auto" style={{width:'100%', height:'100%'}} />
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(42,34,32,.15) 0%, rgba(42,34,32,.55) 100%)'}} />
      </div>
      <div className="wrap" style={{position:'relative', zIndex:2, display:'flex', flexDirection:'column', justifyContent:'flex-end', paddingBottom:'clamp(48px, 8vw, 120px)', paddingTop:'clamp(120px, 15vw, 200px)', width:'100%'}}>
        <div style={{marginBottom:24, display:'flex', alignItems:'center', gap:12}}>
          <span style={{width:28, height:1, background:'var(--paper)', display:'inline-block', opacity:.7}} />
          <span style={{color:'var(--paper)', fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', opacity:.85}}>Strategic Transformation & Women's Advancement</span>
        </div>
        <h1 style={{color:'var(--paper)', maxWidth:1100, fontWeight:300}}>
          We guide complex organisational <span className="italic">transformation</span> while building communities that <span className="italic">elevate women</span> in their careers.
        </h1>
        <p style={{color:'color-mix(in oklab, var(--paper) 88%, transparent)', fontSize:'clamp(16px,1.4vw,19px)', maxWidth:640, marginTop:28, lineHeight:1.6}}>
          From boardroom strategy to mentoring, events and career resources — CASC Global creates lasting change at every level of the organisation.
        </p>
        <div style={{marginTop:40, display:'flex', gap:14, flexWrap:'wrap'}}>
          <a href="#services" className="btn" style={{background:'var(--paper)', color:'var(--charcoal)'}}>Work with us <span>→</span></a>
          <a href="#community" className="btn btn-ghost" style={{color:'var(--paper)', borderColor:'var(--paper)'}}>Join the community</a>
        </div>
      </div>
      <div style={{position:'absolute', bottom:24, right:'var(--pad-x)', color:'var(--paper)', fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', opacity:.7, display:'flex', alignItems:'center', gap:10}}>
        <span style={{width:24, height:1, background:'var(--paper)', display:'inline-block'}} /> Est. 2005
      </div>
    </section>
  );
}

function HeroTypeLed() {
  return (
    <section id="top" style={{background:'var(--ivory)', paddingTop:'clamp(80px, 14vw, 180px)', paddingBottom:'clamp(60px, 10vw, 120px)'}}>
      <div className="wrap">
        <div style={{marginBottom:36}}><Eyebrow>A consulting practice · Est. 2005</Eyebrow></div>
        <h1 style={{fontWeight:300, maxWidth:1200}}>
          <span className="italic">Champion</span> your value.<br/>
          <span className="italic">Advance</span> your goals.<br/>
          <span className="italic">Strengthen</span> your skills.<br/>
          <span className="italic">Change</span> your trajectory.
        </h1>
        <div style={{marginTop:48, display:'grid', gridTemplateColumns:'1fr auto', gap:40, alignItems:'end', maxWidth:1100}}>
          <p style={{color:'var(--muted)', fontSize:19, lineHeight:1.6, maxWidth:640}}>
            We guide complex organisational transformation while building communities that elevate women in their careers — from boardroom strategy to mentoring, events and career resources.
          </p>
          <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
            <a href="#services" className="btn btn-primary">Work with us <span>→</span></a>
            <a href="#community" className="btn btn-ghost">Join the community</a>
          </div>
        </div>
      </div>
      <div className="wrap" style={{marginTop:'clamp(60px, 8vw, 100px)'}}>
        <ImgPh label="editorial photograph — full bleed" aspect="21 / 9" />
      </div>
    </section>
  );
}

function HeroSplitFounder() {
  return (
    <section id="top" style={{background:'var(--ivory)', paddingTop:'clamp(60px, 8vw, 120px)', paddingBottom:'clamp(60px, 8vw, 100px)'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:'clamp(32px, 5vw, 80px)', alignItems:'center'}}>
        <div>
          <div style={{marginBottom:28}}><Eyebrow>Strategic Transformation Excellence</Eyebrow></div>
          <h1 style={{fontWeight:300}}>
            Real change happens when you understand <span className="italic">both sides</span> of the equation.
          </h1>
          <p style={{color:'var(--muted)', fontSize:18, lineHeight:1.65, maxWidth:560, marginTop:28}}>
            CASC Global works at the intersection of corporate strategy and individual career development — partnering with organisations on transformation while equipping professional women with the tools to advance.
          </p>
          <div style={{marginTop:36, display:'flex', gap:12, flexWrap:'wrap'}}>
            <a href="#services" className="btn btn-primary">Work with us <span>→</span></a>
            <a href="#about" className="btn btn-ghost">Meet the founder</a>
          </div>
        </div>
        <div style={{position:'relative'}}>
          <ImgPh label="founder portrait" aspect="4 / 5" />
          <div style={{position:'absolute', bottom:-24, left:-24, background:'var(--paper)', padding:'18px 22px', border:'1px solid var(--rule)', maxWidth:260}}>
            <div className="eyebrow" style={{marginBottom:6}}>Founder</div>
            <div style={{fontFamily:'var(--heading-font)', fontStyle:'italic', fontSize:22}}>Two decades guiding transformation.</div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });