// =====================================================
// HOME PAGE — single-advisor practice
// =====================================================

function HomePage({ t, lang, onNavigate }) {
  return (
    <div className="vh-page">
      {/* HERO */}
      <section style={{ padding: 'calc(var(--vh-section-y) * 0.9) 0 var(--vh-section-y)', position: 'relative', overflow: 'hidden' }}>
        <div className="vh-container">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', alignItems: 'end', gap: 40, marginBottom: 64 }}>
            <div className="vh-eyebrow">{t.home.eyebrow}</div>
            <div className="vh-eyebrow" style={{ color: 'var(--vh-ink-muted)', whiteSpace: 'nowrap' }}>VERTEX · HORIZONS</div>
          </div>

          <Reveal>
            <h1 className="vh-display vh-display-xl" style={{ whiteSpace: 'pre-line', maxWidth: '14ch' }}>
              {t.home.headline}
            </h1>
          </Reveal>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginTop: 80, alignItems: 'end' }}>
            <Reveal delay={120}>
              <p className="vh-lede">{t.home.lede}</p>
              <div style={{ display: 'flex', gap: 16, marginTop: 36, flexWrap: 'wrap' }}>
                <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('contact'); }} className="vh-btn">
                  <span>{t.home.ctaPrimary}</span><span style={{ display: 'inline-block', transform: lang === 'ar' ? 'scaleX(-1)' : 'none' }}>→</span>
                </a>
                <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('about'); }} className="vh-btn vh-btn-ghost">
                  <span>{t.home.ctaSecondary}</span>
                </a>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, fontFamily: 'var(--vh-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--vh-ink-muted)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--vh-line)', paddingBottom: 12 }}>
                  <span>{lang === 'ar' ? 'الممارسة' : 'Practice'}</span><span>{lang === 'ar' ? 'مستقلة' : 'Independent'}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--vh-line)', paddingBottom: 12 }}>
                  <span>{lang === 'ar' ? 'النموذج' : 'Model'}</span><span>{lang === 'ar' ? 'مباشر' : 'Direct'}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--vh-line)', paddingBottom: 12 }}>
                  <span>{lang === 'ar' ? 'العميل' : 'Clientele'}</span><span>{lang === 'ar' ? 'بالتزكية' : 'By reference'}</span>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <hr className="vh-rule"/>

      {/* PILLARS */}
      <section className="vh-section">
        <div className="vh-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, marginBottom: 80 }}>
            <div>
              <div className="vh-eyebrow" style={{ marginBottom: 24 }}>{t.home.pillarsEyebrow}</div>
              <hr className="vh-rule-accent"/>
            </div>
            <div>
              <h2 className="vh-h-section" style={{ marginBottom: 24 }}>{t.home.pillarsTitle}</h2>
              <p className="vh-lede">{t.home.pillarsLede}</p>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--vh-line)' }}>
            {t.home.pillars.map((p, i) => (
              <Reveal key={i} delay={i * 100}>
                <div style={{ padding: '48px 36px 48px 0', borderRight: lang === 'ar' ? 'none' : (i < 2 ? '1px solid var(--vh-line)' : 'none'), borderLeft: lang === 'ar' ? (i < 2 ? '1px solid var(--vh-line)' : 'none') : 'none', paddingLeft: lang === 'ar' ? 0 : (i > 0 ? 36 : 0), paddingRight: lang === 'ar' ? (i > 0 ? 36 : 0) : 36, height: '100%' }}>
                  <div style={{ fontFamily: 'var(--vh-mono)', fontSize: 11, color: 'var(--vh-accent)', letterSpacing: '0.18em', marginBottom: 28 }}>{p.num}</div>
                  <h3 style={{ fontFamily: 'var(--vh-serif)', fontSize: 28, fontWeight: 500, marginBottom: 16, lineHeight: 1.15 }}>{p.title}</h3>
                  <p className="vh-body" style={{ fontSize: 16 }}>{p.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <hr className="vh-rule"/>

      {/* PRACTICE AREAS — 3 services */}
      <section className="vh-section" style={{ background: 'var(--vh-bg-alt)' }}>
        <div className="vh-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, marginBottom: 64 }}>
            <div>
              <div className="vh-eyebrow" style={{ marginBottom: 24 }}>{t.home.practicesEyebrow}</div>
              <hr className="vh-rule-accent"/>
            </div>
            <div>
              <h2 className="vh-h-section" style={{ whiteSpace: 'pre-line' }}>{t.home.practicesTitle}</h2>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--vh-line)', border: '1px solid var(--vh-line)' }}>
            {t.home.practices.map((p, i) => (
              <Reveal key={i} delay={i * 80}>
                <div style={{ background: 'var(--vh-bg-alt)', padding: '44px 36px', display: 'flex', flexDirection: 'column', gap: 20, minHeight: '100%' }}>
                  <div style={{ fontFamily: 'var(--vh-serif)', fontStyle: 'italic', fontSize: 42, color: 'var(--vh-accent)', lineHeight: 1 }}>{p.code}</div>
                  <h3 style={{ fontFamily: 'var(--vh-serif)', fontSize: 28, fontWeight: 500, lineHeight: 1.15 }}>{p.title}</h3>
                  <p className="vh-body" style={{ fontSize: 16 }}>{p.body}</p>
                </div>
              </Reveal>
            ))}
          </div>

          <div style={{ marginTop: 48 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('services'); }} className="vh-link">
              <span>{lang === 'ar' ? 'تفاصيل الخدمات' : 'Full service detail'}</span>
              <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      {/* PROOF — STATS */}
      <section className="vh-section" style={{ background: 'var(--vh-ink)', color: 'var(--vh-bg)' }}>
        <div className="vh-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, marginBottom: 80 }}>
            <div>
              <div className="vh-eyebrow" style={{ marginBottom: 24, color: 'var(--vh-gold)' }}>{lang === 'ar' ? 'بالأرقام' : 'By the numbers'}</div>
              <hr className="vh-rule-accent" style={{ background: 'var(--vh-gold)' }}/>
            </div>
            <div>
              <h2 className="vh-h-section" style={{ color: 'var(--vh-bg)' }}>{t.home.proofTitle}</h2>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, borderTop: '1px solid rgba(245, 242, 236, 0.18)', paddingTop: 56 }}>
            {t.home.stats.map((s, i) => (
              <Reveal key={i} delay={i * 80}>
                <div>
                  <div className="vh-stat-num" style={{ color: 'var(--vh-gold)', marginBottom: 16 }}>
                    <span className="vh-num">{s.num}</span>
                  </div>
                  <div style={{ fontFamily: 'var(--vh-sans)', fontSize: 14, color: 'rgba(245, 242, 236, 0.7)', maxWidth: '24ch', lineHeight: 1.45 }}>{s.label}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="vh-section" style={{ background: 'var(--vh-accent)', color: '#fff' }}>
        <div className="vh-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'end' }}>
            <Reveal>
              <h2 className="vh-display vh-display-md" style={{ color: '#fff', whiteSpace: 'pre-line' }}>{t.home.ctaTitle}</h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)', marginBottom: 32 }}>{t.home.ctaBody}</p>
              <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('contact'); }} className="vh-btn" style={{ background: '#fff', color: 'var(--vh-accent)', border: '1px solid #fff' }}>
                <span>{t.common.getInTouch}</span><span style={{ display: 'inline-block', transform: lang === 'ar' ? 'scaleX(-1)' : 'none' }}>→</span>
              </a>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

window.HomePage = HomePage;