// Section: Hero
const HeroVariantA = () => (
  <section className="hero" id="home">
    <div className="hero-bg-field">
      <div style={{
        position:'absolute', right:'-15%', top:'-20%',
        width:'70vw', height:'70vw', maxWidth: '900px', maxHeight: '900px',
        borderRadius:'50%',
        background: 'radial-gradient(circle at 30% 30%, rgba(104,138,155,0.35), rgba(218,217,212,0.2) 40%, transparent 65%)',
        filter:'blur(20px)',
      }}/>
      <div style={{
        position:'absolute', left:'-10%', bottom:'-30%',
        width:'60vw', height:'60vw', maxWidth: '700px', maxHeight: '700px',
        background: 'radial-gradient(circle, rgba(60,81,93,0.15), transparent 70%)',
        filter:'blur(40px)',
      }}/>
    </div>

    <div className="hero-content">
      <div className="hero-meta reveal in">
        <div><span className="eyebrow"><span className="dot"/>Belo Horizonte · 2026</span></div>
        <div className="eyebrow">Saúde &amp; Performance</div>
      </div>

      <h1 className="hero-headline reveal in">
        <SplitText>Saúde em</SplitText><br/>
        <SplitText className="delay-1">sua <em>potência</em>.</SplitText>
      </h1>
    </div>

    <div className="hero-tail reveal delay-2">
      <p className="hero-lede">
        Um espaço físico dedicado à promoção integral da saúde, com foco no bem-estar e na alta performance — feito para quem enxerga a longevidade como o investimento mais importante de uma vida.
      </p>
      <div style={{display:'flex', gap: 12, flexWrap:'wrap'}}>
        <a href="#contato" className="btn btn-primary">
          Fale conosco <span className="arrow">→</span>
        </a>
        <a href="#metodo" className="btn btn-ghost">Conheça o método</a>
      </div>
    </div>
  </section>
);

const HeroVariantB = () => (
  <section className="hero" id="home" style={{justifyContent:'center'}}>
    <div className="hero-bg-field">
      <Field palette="glow" style={{position:'absolute', inset:'10% -5% 10% -5%', borderRadius: '50%', filter:'blur(30px)', opacity: 0.55}}/>
    </div>
    <div className="hero-content" style={{textAlign:'center', maxWidth: '1200px', margin: '0 auto'}}>
      <div className="reveal in" style={{marginBottom: 40}}>
        <span className="eyebrow"><span className="dot"/>Persera Wellness · Belo Horizonte</span>
      </div>
      <h1 className="hero-headline reveal in" style={{textAlign:'center', fontSize:'clamp(56px, 11vw, 180px)'}}>
        <SplitText>A nova era do</SplitText><br/>
        <SplitText className="delay-1"><em>cuidado</em> humano.</SplitText>
      </h1>
      <p className="hero-lede reveal delay-2" style={{maxWidth: 560, margin:'48px auto 0', textAlign:'center'}}>
        Ciência, técnica e presença reunidas em um só lugar — para que cada pessoa viva melhor, em alta performance e alinhada aos seus objetivos de vida.
      </p>
      <div className="reveal delay-3" style={{marginTop: 40, display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap'}}>
        <a href="#contato" className="btn btn-primary">Fale conosco <span className="arrow">→</span></a>
        <a href="#espaco" className="btn btn-ghost">Conheça o espaço</a>
      </div>
    </div>
  </section>
);

const HeroVariantC = () => (
  <section className="hero" id="home" style={{paddingTop: 120}}>
    <div className="hero-content" style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 64, alignItems:'center', flex:1}}>
      <div>
        <div className="reveal in" style={{marginBottom: 32}}>
          <span className="eyebrow"><span className="dot"/>Saúde · Performance · Longevidade</span>
        </div>
        <h1 className="hero-headline reveal in" style={{fontSize:'clamp(56px, 9vw, 152px)'}}>
          <SplitText>Sua nova</SplitText><br/>
          <SplitText className="delay-1"><em>era</em> tem nome.</SplitText>
        </h1>
        <p className="hero-lede reveal delay-2" style={{marginTop: 48, maxWidth: 520}}>
          Cuidado com método. Resultado com ciência. Persera reúne treino inteligente, fisioterapia, recuperação e tecnologia em um único ecossistema dedicado à sua evolução.
        </p>
        <div className="reveal delay-3" style={{marginTop: 40, display:'flex', gap: 12, flexWrap:'wrap'}}>
          <a href="#contato" className="btn btn-primary">Fale conosco <span className="arrow">→</span></a>
          <a href="#metodo" className="btn btn-ghost">Conheça o método</a>
        </div>
      </div>
      <div className="reveal delay-2">
        <Field palette="blueWarm" style={{aspectRatio:'4/5', borderRadius: 4}} label="Wellness Suite · 01"/>
      </div>
    </div>
  </section>
);

window.HeroVariantA = HeroVariantA;
window.HeroVariantB = HeroVariantB;
window.HeroVariantC = HeroVariantC;