// Hero — radial gold glow background, display type, pulse badge, dual CTA
function Hero({ lang }) {
  const t = (de, pl) => lang === 'de' ? de : pl;
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  return (
    <section id="hero" style={{
      position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center',
      paddingTop: isMobile ? 96 : 84,
      paddingBottom: isMobile ? 32 : 0,
      overflow: 'hidden',
      background: `
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212,175,55,.12), transparent),
        radial-gradient(ellipse 60% 80% at 20% 80%, rgba(212,175,55,.06), transparent),
        radial-gradient(ellipse 50% 50% at 80% 20%, rgba(212,175,55,.05), transparent),
        #0A0A0A
      `
    }}>
      <div className="container" style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? 'minmax(0, 1fr)' : 'minmax(0, 1.2fr) minmax(0, 1fr)',
        gap: isMobile ? 20 : 48,
        alignItems: 'center',
        width: '100%'
      }}>
        <div style={{ order: isMobile ? 2 : 0 }}>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: isMobile ? 'clamp(40px, 11vw, 60px)' : 'clamp(52px, 6.5vw, 96px)',
            lineHeight: 1.02, letterSpacing: '-0.04em', fontWeight: 700,
            marginBottom: isMobile ? 20 : 28
          }}>
            {t('Social Media &','Social Media i')}<br/>
            <span style={{ display: 'inline-block', paddingRight: '0.08em', background: 'linear-gradient(135deg,#F0D060,#D4AF37)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{t('AI Automations','AI Automatyzacje')}</span><br/>
            <span style={{
              display: 'block',
              fontSize: isMobile ? 'clamp(17px, 4.5vw, 22px)' : 'clamp(22px, 2.6vw, 38px)',
              fontStyle: 'italic',
              fontWeight: 400,
              letterSpacing: '-0.01em',
              lineHeight: 1.2,
              color: 'rgba(255,255,255,.5)',
              marginTop: 8
            }}>{t('für lokale Unternehmen','dla lokalnych firm')}</span>
          </h1>
          <p style={{
            fontSize: isMobile ? 15 : 18,
            color: 'var(--text-2)',
            maxWidth: 540,
            marginBottom: isMobile ? 28 : 40,
            lineHeight: 1.7
          }}>
            {t('Mehr Sichtbarkeit, mehr Kunden, weniger Aufwand. Wir bauen dein Social Media auf und automatisieren deine Prozesse — in Gubin und Guben.',
               'Większa widoczność, więcej klientów, mniej pracy. Budujemy Twoje social media i automatyzujemy procesy — w Gubinie i Guben.')}
          </p>
          <div style={{ display: 'flex', gap: isMobile ? 10 : 14, flexWrap: 'wrap', flexDirection: 'row', alignItems: 'center' }}>
            <PremiumCTA href="#contact" label={t('Kostenlose Erstberatung','Bezpłatna konsultacja')} sublabel={t('100% unverbindlich · kein Risiko','100% bez zobowiązań · bez ryzyka')} compact={isMobile}/>
            <a href="#services" style={{
              padding: isMobile ? '11px 14px' : '17px 28px',
              borderRadius: 12, background: 'transparent', color: 'var(--text)',
              border: '1px solid rgba(212,175,55,.3)',
              fontFamily: 'var(--font-display)', fontSize: isMobile ? 13 : 15, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              transition: 'all .3s cubic-bezier(.16,1,.3,1)',
              whiteSpace: 'nowrap'
            }}
            onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(212,175,55,.6)';e.currentTarget.style.background='rgba(212,175,55,.04)'}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(212,175,55,.3)';e.currentTarget.style.background='transparent'}}
            >{t('Leistungen ansehen','Zobacz usługi')}</a>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: isMobile ? 16 : 48,
            marginTop: isMobile ? 44 : 64
          }}>
            {[['50+', t('Videos erstellt','Filmów stworzonych')],['200%',t('Mehr Reichweite','Większy zasięg')],['15+',t('Automations live','Aktywnych automatyzacji')]].map(([n,l])=>(
              <div key={n}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: isMobile ? 36 : 56, color: 'var(--gold)', lineHeight: 1, letterSpacing: '-.02em' }}>{n}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: isMobile ? 11 : 13, color: 'var(--text-2)', letterSpacing: '.12em', textTransform: 'uppercase', marginTop: 10, lineHeight: 1.3 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{
          position: 'relative',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'flex-start',
          order: isMobile ? 1 : 0,
          width: '100%',
          height: isMobile ? 760 : 'auto',
          overflow: 'visible'
        }}>
          {isMobile
            ? <IPhoneMobile lang={lang}/>
            : <IPhone lang={lang} isMobile={false}/>}
        </div>
      </div>
      <style>{`@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}`}</style>
    </section>
  );
}
window.Hero = Hero;