/* global React, useReveal, useLocale */
// Jullia — Home Audio. The productized line is not launched yet. One quiet
// statement, nothing more — no tiles, no commissions, until there is something
// real to show.

function HomeAudio() {
  const { Eyebrow } = window.JulliaDesignSystem_b654aa;
  const { t } = useLocale();
  const ref = useReveal();

  return (
    <div ref={ref} style={{ background: 'var(--canvas)' }}>
      <section style={{ minHeight: '86vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 var(--margin-page)' }}>
        <div data-reveal>
          <Eyebrow index={t('nav.homeAudio')} style={{ marginBottom: 'var(--space-7)' }}>{t('homeAudio.eyebrow')}</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(56px, 10vw, 132px)', lineHeight: 0.96, letterSpacing: '-0.03em', color: 'var(--text-emphasis)', margin: '0 0 var(--space-7)' }}>
            {t('homeAudio.comingSoon')}
          </h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: 460, margin: 0 }}>
            {t('homeAudio.sub')}
          </p>
        </div>
      </section>
    </div>
  );
}

window.HomeAudio = HomeAudio;