// Monjez landing — Testimonial (Loom) + GCC map + why-us + fit
const { useState: useStateProof } = React;

function Testimonials() {
  const t = window.useT();
  const T = t.testi;
  const item = T.item;
  const [playing, setPlaying] = useStateProof(false);
  return (
    <section id="results" style={{ position: 'relative', padding: '96px 0', background: 'var(--graphite-600)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <window.Container>
        <window.Reveal>
          <window.SectionHead
            eyebrow={T.eyebrow}
            title={<span>{T.title.pre}<window.Accent>{T.title.accent}</window.Accent>{T.title.post}</span>}
            sub={T.sub}
          />
        </window.Reveal>
        <window.Reveal delay={0.06}>
          <window.Card padding={0} style={{ overflow: 'hidden', marginTop: 48 }}>
            <div className="mj-testi-row" style={{ display: 'grid', gridTemplateColumns: '1.25fr 0.95fr' }}>
              <div style={{ position: 'relative', aspectRatio: '16 / 10', background: 'linear-gradient(180deg,#0d1426,#070b16)', borderInlineEnd: '1px solid var(--border-subtle)' }}>
                {playing ? (
                  <iframe src={item.video + '?autoplay=1'} title={'Testimonial — ' + item.name} allow="autoplay; fullscreen" allowFullScreen
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }} />
                ) : (
                  <div onClick={() => setPlaying(true)} style={{ position: 'absolute', inset: 0, cursor: 'pointer', background: 'radial-gradient(100% 100% at 50% 0%, rgba(37,99,235,0.22), transparent 60%)' }}>
                    <div style={{ position: 'absolute', inset: 0, opacity: 0.4, background: 'repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 22px)' }} />
                    <div style={{ position: 'absolute', top: 18, insetInlineStart: 18, display: 'flex', alignItems: 'center', gap: 8, opacity: 0.9 }}>
                      <img src="assets/logo-mark-white.svg" width="20" height="20" alt="" />
                      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '0.02em', color: 'rgba(248,250,252,0.85)' }}>MONJEZ</span>
                    </div>
                    <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                      <window.PlayButton size={72} onClick={(e) => { e && e.stopPropagation && e.stopPropagation(); setPlaying(true); }} />
                    </div>
                    <div style={{ position: 'absolute', bottom: 18, insetInlineStart: 18, fontSize: 13, color: 'var(--cloud-white)', fontWeight: 500 }}>{T.watch.replace('{name}', item.name)}</div>
                  </div>
                )}
              </div>
              <div style={{ padding: 'clamp(28px,3.4vw,44px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ display: 'flex', gap: 4, marginBottom: 20 }}>
                  {Array.from({ length: item.stars }).map((_, s) => <window.IconStar key={s} size={18} stroke="var(--teal-signal)" />)}
                </div>
                <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(19px,2.1vw,24px)', lineHeight: 1.45, letterSpacing: '-0.01em', color: 'var(--cloud-white)' }}>
                  “{item.quote}”
                </p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginTop: 28 }}>
                  <span style={{ width: 46, height: 46, borderRadius: '50%', background: 'radial-gradient(circle at 30% 25%, var(--blue-400), var(--electric-blue))', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: '#fff' }}>{item.name[0]}</span>
                  <div>
                    <div style={{ fontSize: 15.5, fontWeight: 600, color: 'var(--cloud-white)' }}>{item.name}</div>
                    <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{item.role}</div>
                  </div>
                </div>
              </div>
            </div>
          </window.Card>
        </window.Reveal>
      </window.Container>
    </section>
  );
}

// ---- GCC map (real geometry from window.MAP) ----
function MapGCC() {
  const M = window.MAP;
  const t = window.useT();
  if (!M) return null;
  const cityName = (n) => (t.why.cities && t.why.cities[n]) || n;
  const countryName = (n) => (t.why.countries && t.why.countries[n]) || n;
  return (
    <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid var(--border-strong)', background: 'radial-gradient(120% 90% at 60% 30%, #0c1a2e, #060b18 70%)', boxShadow: 'var(--shadow-lg)' }}>
      <svg viewBox={M.viewBox} style={{ display: 'block', width: '100%', height: 'auto' }} dir="ltr">
        <defs>
          <filter id="mjHalo" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="9" /></filter>
          <filter id="mjEdge" x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="3.4" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
          <radialGradient id="mjLand" cx="46%" cy="40%" r="62%">
            <stop offset="0%" stopColor="rgba(30,210,185,0.34)" /><stop offset="55%" stopColor="rgba(20,184,166,0.16)" /><stop offset="100%" stopColor="rgba(20,184,166,0.05)" />
          </radialGradient>
        </defs>
        <g fill="rgba(120,150,180,0.07)">
          {Array.from({ length: 15 }).map((_, r) => Array.from({ length: 21 }).map((__, c) => (
            <circle key={r + '-' + c} cx={c * 50 + 10} cy={r * 50 + 10} r="1.3" />
          )))}
        </g>
        <g>{M.neighbors.map((n) => <path key={n.iso} d={n.d} fill="rgba(130,150,175,0.05)" stroke="rgba(130,150,175,0.16)" strokeWidth="0.8" strokeLinejoin="round" />)}</g>
        <g filter="url(#mjHalo)" opacity="0.55">
          {M.gcc.map((g) => <path key={g.iso} d={g.d} fill="var(--teal-signal)" />)}
          <circle cx={M.bahrain.cx} cy={M.bahrain.cy} r="4.5" fill="var(--teal-signal)" />
        </g>
        <g>{M.gcc.map((g) => <path key={g.iso} d={g.d} fill="url(#mjLand)" />)}</g>
        <g filter="url(#mjEdge)">
          {M.gcc.map((g) => <path key={g.iso} d={g.d} fill="none" stroke="var(--teal-signal)" strokeWidth="1.7" strokeLinejoin="round" />)}
          <circle cx={M.bahrain.cx} cy={M.bahrain.cy} r="3.4" fill="none" stroke="var(--teal-signal)" strokeWidth="1.5" />
        </g>
        <g>{M.gcc.map((g) => <path key={g.iso} d={g.d} fill="none" stroke="rgba(190,255,244,0.85)" strokeWidth="0.6" strokeLinejoin="round" />)}</g>
        {M.countryLabels.map((co) => (
          <text key={co.name} x={co.x} y={co.y} fill="rgba(248,250,252,0.8)" fontSize={co.size + (countryName(co.name).match(/[\u0600-\u06FF]/) ? 2 : 0)} fontFamily="var(--font-body)" fontWeight="600" letterSpacing={countryName(co.name).match(/[\u0600-\u06FF]/) ? 0 : 1.6} textAnchor="middle">{countryName(co.name)}</text>
        ))}
        {M.cities.map((ci, i) => (
          <g key={ci.name}>
            <circle cx={ci.x} cy={ci.y} r="15" fill="rgba(20,184,166,0.20)" className="mj-pulse" style={{ transformOrigin: `${ci.x}px ${ci.y}px`, animationDelay: `${i * 0.45}s` }} />
            <circle cx={ci.x} cy={ci.y} r="5" fill="var(--teal-signal)" filter="url(#mjEdge)" />
            <circle cx={ci.x} cy={ci.y} r="2.1" fill="#eafffb" />
            <text x={ci.x + ci.dx} y={ci.y + ci.dy + 4} fill="var(--cloud-white)" fontSize="13" fontFamily="var(--font-body)" fontWeight="600" textAnchor={ci.anchor}>{cityName(ci.name)}</text>
          </g>
        ))}
      </svg>
      <div style={{ position: 'absolute', insetInlineStart: 20, bottom: 18, fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--teal-signal)', letterSpacing: '0.05em', display: 'flex', alignItems: 'center', gap: 8, background: 'rgba(6,11,24,0.55)', padding: '6px 11px', borderRadius: 99, border: '1px solid var(--border-subtle)' }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--teal-signal)', boxShadow: '0 0 10px var(--teal-signal)' }} />
        {t.why.mapCaption}
      </div>
    </div>
  );
}

function WhyGCC() {
  const { Button } = window.MonjezDesignSystem_019de9;
  const t = window.useT();
  const Y = t.why;
  return (
    <section style={{ position: 'relative', padding: '96px 0', borderTop: '1px solid var(--border-subtle)' }}>
      <window.Container>
        <window.Reveal>
          <window.SectionHead
            eyebrow={Y.eyebrow} eyebrowColor="var(--teal-signal)"
            title={<span>{Y.title.pre}<window.Accent>{Y.title.accent}</window.Accent>{Y.title.post}</span>}
            sub={Y.sub}
          />
        </window.Reveal>
        <window.Reveal delay={0.06}><div style={{ marginTop: 48 }}><MapGCC /></div></window.Reveal>

        <div className="mj-why" style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 20, alignItems: 'start' }}>
          <window.Card padding={28}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--blue-400)', marginBottom: 18 }}>{Y.difference}</div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {Y.compare.map(([us, them], i) => (
                <div key={i} className="mj-comparow" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, padding: '14px 0', borderTop: i ? '1px solid var(--border-subtle)' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <window.IconCheckCircle size={18} stroke="var(--teal-signal)" style={{ flexShrink: 0, marginTop: 1 }} />
                    <span style={{ fontSize: 14, color: 'var(--cloud-white)', lineHeight: 1.45 }}>{us}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <window.IconX size={17} stroke="var(--text-muted)" style={{ flexShrink: 0, marginTop: 1 }} />
                    <span style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.45 }}>{them}</span>
                  </div>
                </div>
              ))}
            </div>
          </window.Card>
          <window.Card padding={28} style={{ background: 'radial-gradient(120% 100% at 100% 0%, rgba(20,184,166,0.12), transparent 60%), var(--graphite)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, letterSpacing: '-0.02em', marginBottom: 6 }}>{Y.fitTitle}</div>
            <div style={{ fontSize: 14, color: 'var(--text-secondary)', marginBottom: 20 }}>{Y.fitSub}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24 }}>
              {Y.fit.map((f) => (
                <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', background: 'var(--teal-soft)', border: '1px solid var(--teal-signal)' }}>
                    <window.IconCheck size={13} stroke="var(--teal-signal)" />
                  </span>
                  <span style={{ fontSize: 14.5, color: 'var(--cloud-white)', lineHeight: 1.5 }}>{f}</span>
                </div>
              ))}
            </div>
            <Button variant="primary" size="md" style={{ width: '100%' }} iconRight={<window.IconArrowRight size={16} />} onClick={() => window.scrollToId('apply')}>{Y.fitBtn}</Button>
          </window.Card>
        </div>
      </window.Container>
    </section>
  );
}

Object.assign(window, { Testimonials, WhyGCC });