/* global React, Media, MusicBackground, useReveal, useLocale */
// Jullia — Home. The first and main tab: a single arresting statement,
// a generative music-reactive trace as its backdrop, the belief, the two
// domains, one real image moment, the quiet rebellion, the invitation.

function Home({ onEnterCar, onEnterHome }) {
  const { Eyebrow, Button, Divider } = window.JulliaDesignSystem_b654aa;
  const { t } = useLocale();
  const ref = useReveal();

  const domains = [
    { i: '01', t: t('home.domainCarTitle'), c: t('home.domainCarBody'), go: onEnterCar },
    { i: '02', t: t('home.domainHomeTitle'), c: t('home.domainHomeBody'), go: onEnterHome },
  ];

  return (
    <div ref={ref} style={{ background: 'var(--canvas)' }}>

      {/* Hero — one idea, a generative music-reactive trace as its backdrop */}
      <section style={{ minHeight: '86vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'var(--space-9) var(--margin-page) var(--space-8)', position: 'relative', overflow: 'hidden' }}>
        <MusicBackground />
        <span className="jx-corner jx-corner-tl" aria-hidden="true" />
        <span className="jx-corner jx-corner-br" aria-hidden="true" />
        <div data-reveal style={{ maxWidth: 1100, position: 'relative' }}>
          <Eyebrow accent style={{ marginBottom: 'var(--space-6)' }}>{t('home.eyebrow')}</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 'clamp(64px, 12vw, 152px)', lineHeight: 0.96,
            letterSpacing: '-0.03em', color: 'var(--text-emphasis)', margin: 0,
          }}>
            {t('home.heroTitle')}
          </h1>
        </div>
        <div data-reveal style={{ marginTop: 'var(--space-8)', display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-end', position: 'relative' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>{t('home.scrollHint')}</span>
        </div>
      </section>

      {/* The belief */}
      <section style={{ padding: 'var(--section-gap) var(--margin-page)', maxWidth: 980 }}>
        <div data-reveal>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(30px, 4.5vw, 54px)', lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--text-primary)', margin: 0 }}>
            {t('home.belief')}
          </p>
        </div>
      </section>

      {/* Two domains */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal style={{ marginBottom: 'var(--space-8)' }}>
          <Divider label={t('home.domainsLabel')} />
        </div>
        <div className="jx-grid-reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', gap: 'var(--space-8)' }}>
          {domains.map((d) => (
            <article data-reveal key={d.t} style={{ borderTop: '1px solid var(--hairline)', paddingTop: 'var(--space-6)' }}>
              <Eyebrow index={d.i} style={{ marginBottom: 'var(--space-7)' }}>{d.t}</Eyebrow>
              <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', margin: '0 0 var(--space-7)', maxWidth: 440 }}>{d.c}</p>
              <Button variant="line" trailing="→" onClick={d.go}>{t('home.enterCta')}</Button>
            </article>
          ))}
        </div>
      </section>

      {/* A single image moment — the listening */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal>
          <Media
            ratio="21 / 9"
            src="assets/img/listening-moment.jpg"
            alt={t('home.listeningAlt')}
            caption={t('home.listeningCaption')}
          />
        </div>
      </section>

      {/* The enemy, stated quietly */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)', maxWidth: 820 }}>
        <div data-reveal>
          <Eyebrow style={{ marginBottom: 'var(--space-6)' }}>{t('home.rebellionEyebrow')}</Eyebrow>
          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-xl)', lineHeight: 1.5, letterSpacing: '-0.01em', color: 'var(--text-primary)', margin: 0 }}>
            {t('home.rebellionBody')}
          </p>
        </div>
      </section>

      {/* Invitation — the strongest CTA is restraint */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)', display: 'flex', justifyContent: 'center' }}>
        <div data-reveal style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-7)' }}>
          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(28px,4vw,44px)', letterSpacing: '-0.02em', color: 'var(--text-emphasis)', margin: 0 }}>
            {t('home.invitationLine')}
          </p>
          <Button variant="solid" size="lg">{t('home.invitationCta')}</Button>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>{t('home.invitationNote')}</span>
        </div>
      </section>
    </div>
  );
}

window.Home = Home;