function Hero() {
  const { Button, Tag } = window.MarianaFranADesignSystem_8735af;
  return (
    <section id="inicio" style={{
      position: 'relative',
      background: 'linear-gradient(180deg, rgba(61,107,93,0.07) 0%, rgba(255,255,255,0) 55%)',
      padding: 'var(--space-9) var(--container-padding-x) var(--space-8)',
      overflow: 'hidden',
    }}>
      <img src="assets/illustration/elemento-visual-linha.png" alt="" aria-hidden="true" style={{
        position: 'absolute', top: -60, left: -140, width: 480, opacity: 0.06, pointerEvents: 'none',
      }} />
      <div style={{
        position: 'relative', maxWidth: 'var(--container-width)', margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-8)', alignItems: 'center',
      }}
      className="hero-grid"
      >
        <div data-reveal className="reveal-up" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <span style={{
            font: 'var(--text-caption)', letterSpacing: 'var(--letter-spacing-caption)', textTransform: 'uppercase',
            color: 'var(--color-brand-secondary)',
          }}>Movimento é Vida</span>
          <h1 style={{ font: 'var(--text-display)', color: 'var(--color-text-heading)', margin: 0, textWrap: 'balance' }}>
            Recupere sua liberdade de movimento
          </h1>
          <p style={{ font: 'var(--text-body-lg)', color: 'var(--color-text-primary)', margin: 0, maxWidth: '50ch' }}>
            Fisioterapia especializada em saúde do idoso, com foco em traumato-ortopedia e reabilitação hospitalar.
            Mariana França leva o tratamento até você, em Paulista e proximidades.
          </p>
          <div className="cta-row" style={{ display: 'flex', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" as="a" href="https://wa.me/5581997500346">Agende Sua Avaliação</Button>
            <Button variant="secondary" size="lg" as="a" href="#sobre">Saiba Mais</Button>
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', marginTop: 'var(--space-2)' }}>
            <Tag tone="mint">CREFITO 320609-F</Tag>
            <Tag tone="neutral">Traumato-Ortopedia</Tag>
            <Tag tone="lime">Atendimento domiciliar</Tag>
          </div>
        </div>
        <div data-reveal data-reveal-delay="80" className="reveal-up" style={{
          position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)',
          aspectRatio: '4/5',
        }}>
          <img src="assets/photos/mariana-03-crop.jpeg" alt="Mariana França, fisioterapeuta especializada em saúde do idoso"
            style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 15%' }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(26,41,36,0) 55%, rgba(26,41,36,0.55) 100%)',
          }} />
          <div style={{ position: 'absolute', left: 'var(--space-5)', right: 'var(--space-5)', bottom: 'var(--space-5)' }}>
            <p style={{ font: 'var(--text-h4)', color: 'var(--white)', margin: 0 }}>Mariana França</p>
            <p style={{ font: 'var(--text-small)', color: 'rgba(255,255,255,0.85)', margin: '2px 0 0' }}>
              Fisioterapeuta • Traumato-Ortopedia &amp; Saúde do Idoso
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;