// Futbol Mundial Fans — Telegram ecosystem spotlight (home section).
// Replaces the GrowthPad ("audience economy") home block. i18n-aware.
// Mundial Group client: Channel + Group + Mini App as one self-reinforcing loop.

const FMF_RED = '#E11D2A';
const FMF_DEEP = '#7A0C14';
const FMF_GOLD = '#FFC93C';
const FMF_CREAM = '#FBE9D2';

const FMF_URLS = {
  channel: 'https://t.me/futbolmundialfansclub',
  group: 'https://t.me/futbolmundialfanschat',
  app: 'https://t.me/futbolmundialfans_bot/play',
};

// Small crest that echoes the FMF wordmark, used at the centre of the loop.
function FMFCrest() {
  return (
    <div style={{
      width: 132, height: 132, borderRadius: '50%',
      background: '#fff',
      border: `1.5px solid rgba(255,201,60,0.55)`,
      boxShadow: `0 18px 40px -14px ${FMF_DEEP}, inset 0 1px 0 rgba(255,255,255,0.12)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
    }}>
      <img src="assets/fm-logo.jpeg" alt="FM — Fútbol Mundial" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
    </div>
  );
}

function FMFNode({ glyph, n, title, desc, href, highlight, pos }) {
  return (
    <a href={href} target="_blank" rel="noopener" style={{
      position: 'absolute', left: pos.left, top: pos.top, transform: 'translate(-50%, -50%)', zIndex: 2,
      width: 150, textDecoration: 'none',
      background: highlight ? `linear-gradient(180deg, ${FMF_DEEP}, #160a10)` : 'rgba(14,15,21,0.92)',
      border: `1px solid ${highlight ? 'rgba(255,201,60,0.5)' : 'rgba(225,29,42,0.35)'}`,
      borderRadius: 14, padding: '12px 14px',
      backdropFilter: 'blur(4px)',
      boxShadow: highlight ? `0 14px 34px -16px ${FMF_RED}` : '0 10px 28px -18px rgba(0,0,0,0.8)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <span style={{
          width: 26, height: 26, flexShrink: 0, borderRadius: 8, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          background: highlight ? FMF_GOLD : 'rgba(225,29,42,0.16)',
          color: highlight ? '#160a10' : FMF_RED, fontSize: 13, fontWeight: 700,
        }}>{glyph}</span>
        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.05 }}>
          <span className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', color: highlight ? FMF_GOLD : 'var(--text-4)' }}>{n}</span>
          <span className="display" style={{ fontSize: 16, letterSpacing: '-0.01em', color: 'var(--text)' }}>{title}</span>
        </div>
      </div>
      <p style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 8, lineHeight: 1.3 }}>{desc}</p>
    </a>
  );
}

// Small directional arrow sitting on the dashed ring to show the clockwise loop.
function FMFArrow({ left, top, glyph }) {
  return (
    <span style={{
      position: 'absolute', left, top, transform: 'translate(-50%, -50%)',
      width: 24, height: 24, borderRadius: '50%',
      background: FMF_RED, color: '#fff', fontSize: 12, fontWeight: 700,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: `0 6px 16px -6px ${FMF_RED}`, zIndex: 3,
    }}>{glyph}</span>
  );
}

function FMFEcosystemSection({ setPage }) {
  const t = useT();
  return (
    <section className="sec" style={{ position: 'relative' }}>
      <div className="wrap">
        <Reveal>
          <div style={{
            position: 'relative', borderRadius: 22, overflow: 'hidden',
            border: '1px solid rgba(225,29,42,0.3)',
            background: `linear-gradient(135deg, #240a0e 0%, #0c0e15 68%)`,
          }}>
            <div style={{ position: 'absolute', top: -120, right: -120, width: 480, height: 480, background: `radial-gradient(circle, ${FMF_RED}26 0%, transparent 65%)`, pointerEvents: 'none' }}/>
            <div style={{ position: 'absolute', bottom: -160, left: -120, width: 520, height: 520, background: `radial-gradient(circle, ${FMF_GOLD}1f 0%, transparent 65%)`, pointerEvents: 'none' }}/>

            <div className="grid g-2" style={{ gap: 0, alignItems: 'stretch', position: 'relative' }}>
              {/* LEFT — pitch */}
              <div style={{ padding: '56px 48px' }}>
                <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
                  <span className="tag" style={{ background: 'rgba(225,29,42,0.16)', color: '#FF6A74', borderColor: 'rgba(225,29,42,0.45)' }}>{t('home.fmfTag')}</span>
                  <span className="tag">{t('home.fmfTagNative')}</span>
                </div>
                <div className="eyebrow" style={{ color: 'var(--text-3)' }}>{t('home.fmfEyebrow')}</div>
                <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', letterSpacing: '-0.03em', lineHeight: 0.98, marginTop: 16, fontStyle: 'italic' }}>
                  <span style={{ background: `linear-gradient(90deg, ${FMF_RED} 0%, ${FMF_GOLD} 110%)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>{t('home.fmfTitle1')}</span>
                  <br/>
                  <span style={{ color: 'var(--text)' }}>{t('home.fmfTitle2')}</span>
                </h2>
                <p style={{ fontSize: 18, color: 'var(--text-1)', marginTop: 18, fontWeight: 500 }}>{t('home.fmfTagline')}</p>
                <p style={{ fontSize: 16, color: 'var(--text-2)', marginTop: 14, maxWidth: 520, textWrap: 'pretty' }}>
                  {t('home.fmfBody')}
                </p>

                <div className="grid g-3" style={{ gap: 16, marginTop: 28, padding: '20px 0', borderTop: '1px solid rgba(255,255,255,0.08)', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                  <div>
                    <div className="display" style={{ fontSize: 28, color: '#FF6A74' }}>900M+</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>{t('home.fmfStat1Label')}</div>
                  </div>
                  <div>
                    <div className="display" style={{ fontSize: 28, color: FMF_GOLD }}>3</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>{t('home.fmfStat2Label')}</div>
                  </div>
                  <div>
                    <div className="display" style={{ fontSize: 28, color: 'var(--text)' }}>6</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>{t('home.fmfStat3Label')}</div>
                  </div>
                </div>

                <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                  <a className="btn btn-primary btn-lg" href={FMF_URLS.app} target="_blank" rel="noopener" style={{ background: FMF_RED, color: '#fff', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                    {t('home.fmfCta')} <span className="chev">→</span>
                  </a>
                  <a className="btn btn-ghost btn-lg" href={FMF_URLS.channel} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
                    {t('cta.openTelegram')}
                  </a>
                </div>

                <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 24, flexWrap: 'wrap' }}>
                  <span style={{ color: FMF_GOLD, fontSize: 9 }}>★</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{t('home.fmfCta2')}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--text-4)', letterSpacing: '0.06em' }}>· @futbolmundialfans_bot</span>
                </div>
              </div>

              {/* RIGHT — the viral loop */}
              <div style={{ position: 'relative', minHeight: 480, padding: '40px 28px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', borderLeft: '1px solid rgba(255,255,255,0.05)' }}>
                <div style={{ position: 'absolute', inset: 0, opacity: 0.6, backgroundImage: `repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.025) 39px 40px)`, pointerEvents: 'none' }}/>
                <div className="mono" style={{ fontSize: 10, color: '#FF6A74', letterSpacing: '0.24em', marginBottom: 8 }}>{'\n'}</div>
                <div style={{ position: 'relative', width: '100%', maxWidth: 420, aspectRatio: '1 / 1' }}>
                  {/* dashed loop ring */}
                  <div style={{ position: 'absolute', inset: '17%', borderRadius: '50%', border: `1.5px dashed rgba(225,29,42,0.45)` }}/>
                  <div style={{ position: 'absolute', inset: '17%', borderRadius: '50%', boxShadow: `inset 0 0 60px -20px ${FMF_RED}55` }}/>
                  {/* centre crest */}
                  <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', zIndex: 1 }}>
                    <FMFCrest/>
                  </div>
                  {/* directional arrows on the ring (clockwise) */}
                  <FMFArrow left="79%" top="33%" glyph="↘"/>
                  <FMFArrow left="50%" top="84%" glyph="←"/>
                  <FMFArrow left="21%" top="33%" glyph="↑"/>
                  {/* nodes */}
                  <FMFNode n="01" glyph="◈" title={t('home.fmfChannel')} desc={t('home.fmfChannelDesc')} href={FMF_URLS.channel} pos={{ left: '50%', top: '8%' }}/>
                  <FMFNode n="02" glyph="◆" title={t('home.fmfApp')} desc={t('home.fmfAppDesc')} href={FMF_URLS.app} highlight pos={{ left: '86%', top: '80%' }}/>
                  <FMFNode n="03" glyph="◇" title={t('home.fmfGroup')} desc={t('home.fmfGroupDesc')} href={FMF_URLS.group} pos={{ left: '14%', top: '80%' }}/>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { FMFEcosystemSection });