const NS = () => window.ZelgerOsteopathieDesignSystem_4d713d;
const Ic = ({ n, s = 22 }) => <i data-lucide={n} style={{ width: s, height: s }}></i>;

function Hero({ onNav }) {
  const { Button, Badge } = NS();
  const isMobile = window.useIsMobile(860);
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(160deg, var(--warm-50) 0%, var(--warm-100) 55%, #F6E2CC 100%)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'clamp(48px, 9vw, 96px) clamp(20px, 5vw, 40px) clamp(56px, 10vw, 104px)', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.05fr 0.95fr', gap: isMobile ? '40px' : '56px', alignItems: 'center' }}>
        <div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(2.5rem, 9vw, 4rem)', lineHeight: 1.08, letterSpacing: 'var(--tracking-tight)', color: 'var(--text-strong)', margin: 0 }}>
            Der Ort, an dem<br />dein Körper<br /><em style={{ fontStyle: 'normal', color: 'var(--accent)' }}>zur Ruhe</em> kommt.
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', lineHeight: 1.7, color: 'var(--text-muted)', maxWidth: '460px', margin: isMobile ? '24px 0 28px' : '24px 0 36px' }}>
            Herzlich willkommen in meiner osteopathischen Praxis. Ganzheitlich, sanft und ganz ohne Medikamente. Ich unterstütze deinen Körper dabei, wieder in Balance zu kommen.
          </p>
          {isMobile && (
            <div style={{ margin: '0 0 28px' }}>
              <HeroVideoImage src="../../assets/willkommen.mp4" poster="../../assets/praxis-hero.jpg" alt="Silvia Zelger in ihrer Praxis" caption="Willkommensvideo ansehen" />
            </div>
          )}
          <div style={{ display: 'flex', gap: '14px', flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" full={isMobile} onClick={() => onNav('kontakt')}>Termin vereinbaren</Button>
            <Button variant="secondary" size="lg" full={isMobile} onClick={() => onNav('osteopathie')}>Wie es wirkt</Button>
          </div>
        </div>
        {!isMobile && (
          <HeroVideoImage src="../../assets/willkommen.mp4" poster="../../assets/praxis-hero.jpg" alt="Silvia Zelger in ihrer Praxis" caption="Willkommensvideo ansehen" />
        )}
      </div>
    </section>
  );
}