// Monjez landing — Nav (+ language toggle) + Hero + hero stats
const { useState: useStateTop, useEffect: useEffectTop } = React;

function LangToggle({ compact }) {
  const { lang, setLang } = window.useLang();
  const t = window.useT();
  return (
    <button onClick={() => setLang(lang === 'ar' ? 'en' : 'ar')} aria-label="Switch language"
      style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 13px', cursor: 'pointer',
        borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-strong)', background: 'var(--white-04)',
        color: 'var(--cloud-white)', fontSize: 13.5, fontWeight: 600, transition: 'all .15s ease' }}
      onMouseEnter={(e) => e.currentTarget.style.background = 'var(--white-08)'}
      onMouseLeave={(e) => e.currentTarget.style.background = 'var(--white-04)'}>
      <window.IconGlobe size={16} stroke="var(--slate-gray)" />
      {t.toggle}
    </button>
  );
}

function Nav() {
  const { Button } = window.MonjezDesignSystem_019de9;
  const t = window.useT();
  const [scrolled, setScrolled] = useStateTop(false);
  useEffectTop(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 80, padding: '14px 0' }}>
      <window.Container>
        <nav style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          height: 60, padding: '0 12px', borderRadius: 'var(--radius-pill)',
          border: '1px solid ' + (scrolled ? 'var(--border-strong)' : 'var(--border-subtle)'),
          background: scrolled ? 'rgba(11,16,32,0.78)' : 'rgba(11,16,32,0.45)',
          backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
          boxShadow: scrolled ? 'var(--shadow-md)' : 'none', transition: 'all .25s ease',
        }}>
          <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
            style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 10px' }}>
            <img src="assets/logo-mark.svg" width="26" height="26" alt="Monjez" />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, letterSpacing: '-0.01em', color: 'var(--cloud-white)' }}>Monjez</span>
          </a>
          <div className="mj-navlinks" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
            {t.nav.links.map(([label, id]) => (
              <a key={id} href={'#' + id} onClick={(e) => { e.preventDefault(); window.scrollToId(id); }}
                style={{ color: 'var(--slate-gray)', fontSize: 14.5, fontWeight: 500, whiteSpace: 'nowrap', transition: 'color .15s ease' }}
                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--cloud-white)'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--slate-gray)'}>{label}</a>
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <LangToggle />
            <Button variant="primary" size="sm" iconRight={<window.IconArrowRight size={16} />} style={{ whiteSpace: 'nowrap' }}
              onClick={() => window.scrollToId('apply')}>{t.nav.apply}</Button>
          </div>
        </nav>
      </window.Container>
    </header>
  );
}

function Hero() {
  const { Button, Badge } = window.MonjezDesignSystem_019de9;
  const t = window.useT();
  const h = t.hero;
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background:
        'radial-gradient(60% 50% at 50% -6%, rgba(37,99,235,0.26), transparent 62%), radial-gradient(40% 40% at 82% 18%, rgba(20,184,166,0.12), transparent 60%)' }} />
      <window.Container style={{ position: 'relative', padding: '54px 28px 8px', textAlign: 'center' }}>
        <window.Reveal>
          <div style={{ display: 'inline-flex', marginBottom: 24 }}>
            <Badge tone="accent" dot style={{ whiteSpace: 'nowrap' }}>{h.badge}</Badge>
          </div>
        </window.Reveal>
        <window.Reveal delay={0.05}>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(36px, 6.4vw, 76px)', lineHeight: 1.04, letterSpacing: '-0.035em',
            margin: '0 auto', maxWidth: 980, textWrap: 'balance',
          }}>
            {h.h.pre}<window.Accent>{h.h.accent}</window.Accent>{h.h.post}
          </h1>
        </window.Reveal>
        <window.Reveal delay={0.1}>
          <p style={{ fontSize: 'clamp(16px,1.7vw,19px)', lineHeight: 1.7, color: 'var(--text-secondary)', maxWidth: 660, margin: '24px auto 0' }}>
            {h.sub}
          </p>
        </window.Reveal>
        <window.Reveal delay={0.15}>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginTop: 32 }}>
            <Button variant="primary" size="lg" iconRight={<window.IconArrowRight size={18} />}
              onClick={() => window.scrollToId('apply')}>{h.ctaPrimary}</Button>
            <Button variant="secondary" size="lg" onClick={() => window.scrollToId('system')}>{h.ctaSecondary}</Button>
          </div>
        </window.Reveal>
      </window.Container>

      <window.Container style={{ position: 'relative', padding: '44px 28px 0' }}>
        <window.Reveal delay={0.2}><HeroProductFrame /></window.Reveal>
      </window.Container>

      <window.Container style={{ position: 'relative', padding: '40px 28px 64px' }}>
        <window.Reveal delay={0.1}>
          <div className="mj-herostats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', maxWidth: 760, margin: '0 auto' }}>
            {h.stats.map(([v, l], i) => (
              <div key={i} style={{ textAlign: 'center', padding: '0 16px', borderInlineStart: i ? '1px solid var(--border-subtle)' : 'none' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px,3.4vw,40px)', letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--cloud-white)' }}>{v}</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-secondary)', marginTop: 10 }}>{l}</div>
              </div>
            ))}
          </div>
        </window.Reveal>
      </window.Container>
    </section>
  );
}

function VideoFrame({ label }) {
  const [h, setH] = useStateTop(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: 'relative', maxWidth: 940, margin: '0 auto', borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--border-strong)', boxShadow: '0 40px 120px rgba(0,0,0,0.5)', cursor: 'pointer' }}
      onClick={() => window.playVideo(window.LOOM_EMBED)}>
      <div style={{ position: 'relative', aspectRatio: '16 / 9', background:
        'radial-gradient(120% 90% at 50% 120%, rgba(37,99,235,0.30), transparent 55%), radial-gradient(80% 70% at 50% -10%, rgba(20,184,166,0.10), transparent 60%), linear-gradient(180deg, #0d1426, #070b16)' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.5, background:
          'repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 26px)' }} />
        <div style={{ position: 'absolute', top: 22, left: 0, right: 0, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 9, opacity: 0.9 }}>
          <img src="assets/logo-mark-white.svg" width="22" height="22" alt="" />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '0.02em', color: 'rgba(248,250,252,0.85)' }}>MONJEZ</span>
        </div>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
          <div style={{ textAlign: 'center' }}>
            <window.PlayButton onClick={(e) => { e && e.stopPropagation && e.stopPropagation(); window.playVideo(window.LOOM_EMBED); }} />
            <div style={{ marginTop: 18, fontSize: 14.5, color: h ? 'var(--cloud-white)' : 'var(--text-secondary)', transition: 'color .2s', fontWeight: 500 }}>
              {label}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroProductFrame() {
  const t = window.useT();
  const p = (t.pv && t.pv.founder) || { url: 'app.monjez.com/founder', cards: [] };
  const { MetricCard } = window.MonjezDesignSystem_019de9;
  const isAr = t.dir === 'rtl';
  const tabs = isAr ? ['نظرة عامة', 'المبيعات', 'العملاء', 'الفريق'] : ['Overview', 'Sales', 'Clients', 'Team'];
  return (
    <div style={{ position: 'relative', maxWidth: 940, margin: '0 auto', borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--border-strong)', boxShadow: '0 40px 120px rgba(0,0,0,0.5)', background: 'var(--graphite)' }}>
      {/* window chrome */}
      <div style={{ height: 44, borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: 8, padding: '0 16px', background: 'var(--graphite-600)' }}>
        {['#EF4444', '#F59E0B', '#A78BFA'].map((c) => <span key={c} style={{ width: 11, height: 11, borderRadius: '50%', background: c, opacity: 0.85 }} />)}
        <span style={{ marginInlineStart: 12, fontSize: 12.5, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', direction: 'ltr' }}>{p.url}</span>
        <span style={{ marginInlineStart: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--teal-signal)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--teal-signal)', boxShadow: '0 0 8px var(--teal-signal)' }} />live</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '188px 1fr' }}>
        {/* sidebar */}
        <div className="mj-herosidebar" style={{ borderInlineEnd: '1px solid var(--border-subtle)', padding: '18px 14px', background: 'var(--midnight)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, paddingInlineStart: 6 }}>
            <img src="assets/logo-mark.svg" width="22" height="22" alt="" />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>Monjez</span>
          </div>
          {tabs.map((tab, i) => (
            <div key={tab} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 10px', borderRadius: 9, marginBottom: 3,
              background: i === 0 ? 'var(--blue-soft)' : 'transparent', color: i === 0 ? 'var(--cloud-white)' : 'var(--slate-gray)', fontSize: 13, fontWeight: i === 0 ? 600 : 500 }}>
              <span style={{ width: 7, height: 7, borderRadius: 2, background: i === 0 ? 'var(--blue-400)' : 'var(--graphite-400)' }} />
              {tab}
            </div>
          ))}
        </div>
        {/* main */}
        <div style={{ padding: 18 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
            {p.cards.slice(0, 4).map(([label, value, delta, dir, accent]) => (
              <MetricCard key={label} label={label} value={value} delta={delta} deltaDirection={dir} accent={accent} style={{ padding: 14 }} />
            ))}
          </div>
          <div style={{ borderRadius: 12, border: '1px solid var(--border-subtle)', background: 'var(--graphite)', padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 7, height: 84 }}>
              {[38, 52, 45, 63, 58, 74, 69, 86, 80, 94].map((bh, i) => (
                <div key={i} style={{ flex: 1, height: `${bh}%`, borderRadius: 4, background: i >= 8 ? 'var(--teal-signal)' : 'var(--graphite-400)' }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, HeroProductFrame, VideoFrame });