// Home page (`/`) — Direction C "Crew/ticket" energy, three phones in a
// dark hero strip at the bottom (per the user's screenshot).

function HomePage() {
  return (
    <SiteShell route="home">
      {/* hero — orange "ticket" */}
      <div style={{ padding: '40px' }}>
        <div style={{
          background: ORANGE, borderRadius: 28, padding: '56px 56px 64px',
          position: 'relative', overflow: 'hidden', minHeight: 720,
        }}>
          <div style={{
            position: 'absolute', right: -120, top: -120, width: 480, height: 480,
            borderRadius: '50%', background: 'rgba(255,255,255,0.08)',
          }}/>
          <div style={{
            position: 'absolute', right: -200, bottom: -200, width: 520, height: 520,
            borderRadius: '50%', border: '2px dashed rgba(255,255,255,0.18)',
          }}/>

          <div style={{ display: 'flex', justifyContent: 'space-between',
            alignItems: 'flex-start', position: 'relative' }}>
            <div style={{
              padding: '8px 14px', background: 'rgba(0,0,0,0.18)', borderRadius: 999,
              fontSize: 12, fontWeight: 700, fontFamily: 'ui-monospace, Menlo, monospace',
              letterSpacing: '0.08em', textTransform: 'uppercase',
            }}>
              {t('home.hero.badge')}
            </div>
            <div style={{
              fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11,
              opacity: 0.7, letterSpacing: '0.08em', textAlign: 'right',
            }}>
              {t('home.hero.ticketNumber')}<br/>{t('home.hero.ticketRoute')}
            </div>
          </div>

          <h1 style={{
            fontSize: 156, lineHeight: 0.86, fontWeight: 800,
            letterSpacing: '-0.05em', margin: '40px 0 0', position: 'relative',
            color: '#fff',
          }}>
            {t('home.hero.line1')}<br/>
            {t('home.hero.line2')}<br/>
            <span style={{ fontStyle: 'italic', fontFamily: '"Fraunces", serif', fontWeight: 500 }}>
              {t('home.hero.line3')}
            </span>
          </h1>

          <div style={{
            position: 'absolute', bottom: 56, left: 56, right: 56,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          }}>
            <div style={{ maxWidth: 460, fontSize: 18, lineHeight: 1.5,
              color: 'rgba(255,255,255,0.92)' }}>
              {t('home.hero.subtitle')}
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <StoreBadge type="apple" onDark/>
              <StoreBadge type="google" onDark/>
            </div>
          </div>
        </div>
      </div>

      {/* chip strip */}
      <div style={{ padding: '20px 40px 60px' }}>
        <div style={{
          fontSize: 12, fontFamily: 'ui-monospace, Menlo, monospace',
          color: 'var(--fg-mute)', letterSpacing: '0.1em',
          marginBottom: 16,
        }}>{t('home.chips.sectionLabel')}</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          {t('home.chips.items').map((l, i) => (
            <div key={i} style={{
              padding: '12px 18px', borderRadius: 999,
              background: i === 0 ? ORANGE : 'var(--bg-soft)',
              border: i === 0 ? 'none' : '1px solid var(--hairline)',
              fontSize: 16, fontWeight: 600,
              display: 'flex', alignItems: 'center', gap: 8,
              color: i === 0 ? '#fff' : 'var(--fg)',
            }}>
              {l}
            </div>
          ))}
        </div>
      </div>

      {/* receipt + plan phone */}
      <div style={{ padding: '60px 40px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div>
          <div style={{
            fontSize: 12, fontFamily: 'ui-monospace, Menlo, monospace',
            color: ORANGE, letterSpacing: '0.1em', marginBottom: 12,
          }}>{t('home.how.sectionLabel')}</div>
          <h2 style={{
            fontSize: 88, lineHeight: 0.92, fontWeight: 800,
            letterSpacing: '-0.04em', margin: 0, color: 'var(--fg)',
          }}>
            {t('home.how.h2line1')}<br/>{t('home.how.h2line2')}
          </h2>
          <div style={{
            marginTop: 40, fontFamily: 'ui-monospace, Menlo, monospace',
            fontSize: 14, lineHeight: 2.2, color: 'var(--fg-soft)',
          }}>
            {t('home.how.rows').map(([l, r], i) => (
              <ReceiptRow key={i} l={l} r={r}/>
            ))}
            <div style={{
              borderTop: '1px dashed var(--hairline-strong)',
              borderBottom: '1px dashed var(--hairline-strong)',
              padding: '8px 0', marginTop: 12,
              display: 'flex', justifyContent: 'space-between',
              fontWeight: 700, color: 'var(--fg)',
            }}>
              <span>{t('home.how.totalLabel')}</span><span>{t('home.how.totalValue')}</span>
            </div>
          </div>
          <div style={{
            marginTop: 40, padding: 24, background: 'var(--bg-soft)',
            border: '1px dashed var(--hairline-strong)', borderRadius: 16,
          }}>
            <div style={{ fontSize: 14, lineHeight: 1.5,
              color: 'var(--fg-soft)' }}>
              <span style={{ color: ORANGE, fontWeight: 700 }}>{t('home.how.promiseLabel')}</span> {t('home.how.promiseBody')}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneFrame screen={<PhonePlan/>}/>
        </div>
      </div>

      {/* THREE PHONES at bottom — matches user's screenshot */}
      <div style={{ padding: '80px 0 0', overflow: 'hidden' }}>
        <div style={{
          fontSize: 12, fontFamily: 'ui-monospace, Menlo, monospace',
          color: ORANGE, letterSpacing: '0.1em', textAlign: 'center',
          marginBottom: 40,
        }}>{t('home.app.sectionLabel')}</div>
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 24,
          alignItems: 'flex-end', padding: '0 40px',
          marginBottom: -200, // crop the bottom of phones for the strip look
        }}>
          <div style={{ marginBottom: 30 }}>
            <PhoneFrame screen={<PhoneSplash/>} small/>
          </div>
          <PhoneFrame screen={<PhoneHome/>}/>
          <div style={{ marginBottom: 30 }}>
            <PhoneFrame screen={<PhoneDiscover/>} small/>
          </div>
        </div>
        {/* strip floor — matches the photo */}
        <div style={{
          marginTop: 200, height: 12, background: 'var(--hairline-strong)',
          borderTop: '1px solid var(--hairline)',
        }}/>
      </div>

      {/* big CTA */}
      <div style={{ padding: '80px 40px', background: 'var(--bg)' }}>
        <div style={{
          padding: '88px 56px', borderRadius: 28,
          border: '2px dashed var(--hairline-strong)',
          background: 'var(--bg-soft)',
          textAlign: 'center',
        }}>
          <div style={{
            fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 13,
            color: ORANGE, letterSpacing: '0.12em', marginBottom: 16,
          }}>{t('home.cta.tearLabel')}</div>
          <h2 style={{
            fontSize: 96, lineHeight: 0.92, fontWeight: 800,
            letterSpacing: '-0.04em', margin: 0, color: 'var(--fg)',
          }}>
            {t('home.cta.line1')}<br/>
            <span style={{ color: ORANGE, fontStyle: 'italic',
              fontFamily: '"Fraunces", serif', fontWeight: 500 }}>
              {t('home.cta.line2')}
            </span>
          </h2>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center',
            marginTop: 40 }}>
            <StoreBadge type="apple"/>
            <StoreBadge type="google"/>
          </div>
        </div>
      </div>
    </SiteShell>
  );
}

function ReceiptRow({ l, r }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between',
      borderBottom: '1px dashed var(--hairline)' }}>
      <span>{l}</span><span style={{ color: 'var(--fg-mute)' }}>{r}</span>
    </div>
  );
}

function PhoneFrame({ screen, small = false, accent = false }) {
  const w = small ? 240 : 360;
  const h = small ? 510 : 760;
  return (
    <div style={{
      width: w, height: h, padding: 8, borderRadius: 44,
      background: '#1a1a1c',
      boxShadow: accent
        ? '0 30px 80px rgba(232,99,58,0.25), 0 0 0 1px rgba(255,255,255,0.06)'
        : '0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06)',
      position: 'relative',
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 36,
        overflow: 'hidden', background: '#000',
      }}>{screen}</div>
      <div style={{
        position: 'absolute', top: 18, left: '50%', transform: 'translateX(-50%)',
        width: small ? 76 : 96, height: small ? 22 : 28, background: '#000',
        borderRadius: 999, zIndex: 2,
      }}/>
    </div>
  );
}

Object.assign(window, { HomePage, ReceiptRow, PhoneFrame });